show notifications error for rejected telemetry requests (#2334)

* show notification error for rejected telemetry requests

* change notification message details

example/generator/GeneratorMetadataProvider.js

@@ -33,19 +33,12 @@ define([
                     formatString: '%0.2f',
                     hints: {
                         range: 1
-                    },
-                    filters: [
-                        {
-                            comparator: 'equals',
-                            possibleValues: [1,2,3,4]
-                        }
-                    ]
+                    }
                 },
                 {
                     key: "cos",
                     name: "Cosine",
                     formatString: '%0.2f',
-                    filters: ['equals'],
                     hints: {
                         range: 2
                     }

index.html

@@ -54,6 +54,9 @@
         openmct.install(openmct.plugins.AutoflowView({
             type: "telemetry.panel"
         }));
+        openmct.install(openmct.plugins.DisplayLayout({
+            showAsView: ['summary-widget', 'example.imagery']
+        }));
         openmct.install(openmct.plugins.Conductor({
             menuOptions: [
                 {

platform/commonUI/browse/bundle.js

@@ -31,7 +31,6 @@ define([
     "./src/navigation/NavigateAction",
     "./src/navigation/OrphanNavigationHandler",
     "./src/windowing/NewTabAction",
-    "./src/windowing/WindowTitler",
     "./res/templates/browse.html",
     "./res/templates/browse-object.html",
     "./res/templates/browse/object-header.html",
@@ -52,7 +51,6 @@ define([
     NavigateAction,
     OrphanNavigationHandler,
     NewTabAction,
-    WindowTitler,
     browseTemplate,
     browseObjectTemplate,
     objectHeaderTemplate,
@@ -226,14 +224,6 @@ define([
                 }
             ],
             "runs": [
-                {
-                    "implementation": WindowTitler,
-                    "depends": [
-                        "navigationService",
-                        "$rootScope",
-                        "$document"
-                    ]
-                },
                 {
                     "implementation": OrphanNavigationHandler,
                     "depends": [

platform/commonUI/browse/test/windowing/WindowTitlerSpec.js

@@ -1,78 +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.
- *****************************************************************************/
-
-/**
- * WindowTitlerSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/windowing/WindowTitler"],
-    function (WindowTitler) {
-
-        describe("The window titler", function () {
-            var mockNavigationService,
-                mockRootScope,
-                mockDocument,
-                mockDomainObject,
-                titler; // eslint-disable-line
-
-            beforeEach(function () {
-                mockNavigationService = jasmine.createSpyObj(
-                    'navigationService',
-                    ['getNavigation']
-                );
-                mockRootScope = jasmine.createSpyObj(
-                    '$rootScope',
-                    ['$watch']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getModel']
-                );
-                mockDocument = [{}];
-
-                mockDomainObject.getModel.and.returnValue({ name: 'Test name' });
-                mockNavigationService.getNavigation.and.returnValue(mockDomainObject);
-
-                titler = new WindowTitler(
-                    mockNavigationService,
-                    mockRootScope,
-                    mockDocument
-                );
-            });
-
-            it("listens for changes to the name of the navigated object", function () {
-                expect(mockRootScope.$watch).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    jasmine.any(Function)
-                );
-                expect(mockRootScope.$watch.calls.mostRecent().args[0]())
-                    .toEqual('Test name');
-            });
-
-            it("sets the title to the name of the navigated object", function () {
-                mockRootScope.$watch.calls.mostRecent().args[1]("Some name");
-                expect(mockDocument[0].title).toEqual("Some name");
-            });
-
-        });
-    }
-);

platform/commonUI/dialog/bundle.js

@@ -28,6 +28,7 @@ define([
     "./res/templates/dialog.html",
     "./res/templates/overlay-blocking-message.html",
     "./res/templates/message.html",
+    "./res/templates/notification-message.html",
     "./res/templates/overlay-message-list.html",
     "./res/templates/overlay.html",
     'legacyRegistry'
@@ -39,6 +40,7 @@ define([
     dialogTemplate,
     overlayBlockingMessageTemplate,
     messageTemplate,
+    notificationMessageTemplate,
     overlayMessageListTemplate,
     overlayTemplate,
     legacyRegistry
@@ -63,7 +65,8 @@ define([
                     "depends": [
                         "$document",
                         "$compile",
-                        "$rootScope"
+                        "$rootScope",
+                        "$timeout"
                     ]
                 }
             ],
@@ -88,6 +91,10 @@ define([
                     "key": "message",
                     "template": messageTemplate
                 },
+                {
+                    "key": "notification-message",
+                    "template": notificationMessageTemplate
+                },
                 {
                     "key": "overlay-message-list",
                     "template": overlayMessageListTemplate

platform/commonUI/dialog/res/templates/message.html

@@ -1,25 +1,32 @@
-<div class="l-message"
+<div class="c-message"
      ng-class="'message-severity-' + ngModel.severity">
     <div class="w-message-contents">
-        <div class="top-bar">
-            <div class="title">{{ngModel.message}}</div>
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.title}}</div>
+        </div>
+        <div class="c-message__hint" ng-hide="ngModel.hint === undefined">
+            {{ngModel.hint}}
+            <span ng-if="ngModel.timestamp !== undefined">[{{ngModel.timestamp}}]</span>
         </div>
         <div class="message-body">
+            <div class="message-action">
+                {{ngModel.actionText}}
+            </div>
             <mct-include key="'progress-bar'"
                          ng-model="ngModel"
-                         ng-show="ngModel.progressPerc !== undefined"></mct-include>
+                         ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
-                class="s-button"
-                ng-click="dialogOption.callback()">
-                    {{dialogOption.label}}
-            </a>
-            <a class="s-button major"
-                ng-if="ngModel.primaryOption"
-                ng-click="ngModel.primaryOption.callback()">
-                    {{ngModel.primaryOption.label}}
-            </a>
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+               class="c-button"
+               ng-click="dialogOption.callback()">
+                {{dialogOption.label}}
+            </button>
+            <button class="c-button c-button--major"
+               ng-if="ngModel.primaryOption"
+               ng-click="ngModel.primaryOption.callback()">
+                {{ngModel.primaryOption.label}}
+            </button>
         </div>
     </div>
-</div>
+</div>

platform/commonUI/dialog/res/templates/notification-message.html

@@ -0,0 +1,25 @@
+<div class="c-message"
+     ng-class="'message-severity-' + ngModel.severity">
+    <div class="w-message-contents">
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.message}}</div>
+        </div>
+        <div class="message-body">
+            <mct-include key="'progress-bar'"
+                         ng-model="ngModel"
+                         ng-show="ngModel.progressPerc !== undefined"></mct-include>
+        </div>
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+                class="c-button"
+                ng-click="dialogOption.callback()">
+                    {{dialogOption.label}}
+            </button>
+            <button class="c-button c-button--major"
+                ng-if="ngModel.primaryOption"
+                ng-click="ngModel.primaryOption.callback()">
+                    {{ngModel.primaryOption.label}}
+            </button>
+        </div>
+    </div>
+</div>

platform/commonUI/dialog/res/templates/overlay-message-list.html

@@ -1,22 +1,23 @@
 <mct-container key="overlay">
-    <div class="t-message-list">
-        <div class="top-bar">
-            <div class="dialog-title">{{ngModel.dialog.title}}</div>
-            <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
-                                                                                                  ngModel.dialog.messages.length == 0">s</span>
+    <div class="t-message-list c-overlay__contents">
+        <div class="c-overlay__top-bar">
+            <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
+            <div class="c-overlay__dialog-hint">Displaying {{ngModel.dialog.messages.length}} message<span
+                    ng-show="ngModel.dialog.messages.length > 1 ||
+                            ngModel.dialog.messages.length == 0">s</span>
             </div>
         </div>
-        <div class="w-messages">
+        <div class="w-messages c-overlay__messages">
             <mct-include
                 ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
-                key="'message'" ng-model="msg.model"></mct-include>
+                key="'notification-message'" ng-model="msg.model"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogAction in ngModel.dialog.actions"
-               class="s-button major"
+        <div class="c-overlay__bottom-bar">
+            <button ng-repeat="dialogAction in ngModel.dialog.actions"
+               class="c-button c-button--major"
                ng-click="dialogAction.action()">
                 {{dialogAction.label}}
-            </a>
+            </button>
         </div>
     </div>
 </mct-container>

platform/commonUI/dialog/res/templates/overlay.html

@@ -22,9 +22,9 @@
 <div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
     <div class="c-overlay__blocker"></div>
     <div class="c-overlay__outer">
-        <a ng-click="ngModel.cancel()"
+        <button ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="c-click-icon c-overlay__close-button icon-x-in-circle"></a>
+           class="c-click-icon c-overlay__close-button icon-x-in-circle"></button>
         <div class="c-overlay__contents" ng-transclude></div>
     </div>
 </div>

platform/commonUI/dialog/src/OverlayService.js

@@ -44,8 +44,9 @@ define(
          * @memberof platform/commonUI/dialog
          * @constructor
          */
-        function OverlayService($document, $compile, $rootScope) {
+        function OverlayService($document, $compile, $rootScope, $timeout) {
             this.$compile = $compile;
+            this.$timeout = $timeout;
 
             // Don't include $document and $rootScope directly;
             // avoids https://docs.angularjs.org/error/ng/cpws
@@ -93,12 +94,14 @@ define(
             scope.key = key;
             scope.typeClass = typeClass || 't-dialog';
 
-            // Create the overlay element and add it to the document's body
-            element = this.$compile(TEMPLATE)(scope);
-            
-            // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
-            // multiple overlays with the same z-index are active.
-            this.findBody().append(element);
+            this.$timeout(() => {
+                // Create the overlay element and add it to the document's body
+                element = this.$compile(TEMPLATE)(scope);
+                
+                // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
+                // multiple overlays with the same z-index are active.
+                this.findBody().append(element);
+            });
 
             return {
                 dismiss: dismiss

platform/commonUI/dialog/test/OverlayServiceSpec.js

@@ -35,16 +35,20 @@ define(
                 mockTemplate,
                 mockElement,
                 mockScope,
+                mockTimeout,
                 overlayService;
 
             beforeEach(function () {
                 mockDocument = jasmine.createSpyObj("$document", ["find"]);
                 mockCompile = jasmine.createSpy("$compile");
                 mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
-                mockBody = jasmine.createSpyObj("body", ["prepend"]);
+                mockBody = jasmine.createSpyObj("body", ["append"]);
                 mockTemplate = jasmine.createSpy("template");
                 mockElement = jasmine.createSpyObj("element", ["remove"]);
                 mockScope = jasmine.createSpyObj("scope", ["$destroy"]);
+                mockTimeout = function (callback) {
+                    callback();
+                }
 
                 mockDocument.find.and.returnValue(mockBody);
                 mockCompile.and.returnValue(mockTemplate);
@@ -54,7 +58,8 @@ define(
                 overlayService = new OverlayService(
                     mockDocument,
                     mockCompile,
-                    mockRootScope
+                    mockRootScope,
+                    mockTimeout
                 );
             });
 
@@ -67,7 +72,7 @@ define(
 
             it("adds the templated element to the body", function () {
                 overlayService.createOverlay("test", {});
-                expect(mockBody.prepend).toHaveBeenCalledWith(mockElement);
+                expect(mockBody.append).toHaveBeenCalledWith(mockElement);
             });
 
             it("places the provided model/key in its template's scope", function () {

platform/commonUI/edit/src/actions/SaveAsAction.js

@@ -162,9 +162,6 @@ function (
         function saveAfterClone(clonedObject) {
             return this.openmct.editor.save().then(() => {
                 // Force mutation for search indexing
-                clonedObject.useCapability('mutation', (model) => {
-                    return model;
-                });
                 return clonedObject;
             })
         }
@@ -173,6 +170,14 @@ function (
             return fetchObject(clonedObject.getId())
         }
 
+        function indexForSearch(savedObject) {
+            savedObject.useCapability('mutation', (model) => {
+                return model;
+            });
+
+            return savedObject;
+        }
+
         function onSuccess(object) {
             self.notificationService.info("Save Succeeded");
             return object;
@@ -194,6 +199,7 @@ function (
             .then(undirtyOriginals)
             .then(saveAfterClone)
             .then(finishEditing)
+            .then(indexForSearch)
             .then(hideBlockingDialog)
             .then(onSuccess)
             .catch(onFailure);

platform/commonUI/edit/src/creation/CreateAction.js

@@ -71,17 +71,26 @@ define(
                 openmct.editor.cancel();
             }
 
+            function isFirstViewEditable(domainObject) {
+                let firstView = openmct.objectViews.get(domainObject)[0];
+
+                return firstView && firstView.canEdit && firstView.canEdit(domainObject);
+            }
+
             function navigateAndEdit(object) {
                 let objectPath = object.getCapability('context').getPath(),
                     url = '#/browse/' + objectPath
+                        .slice(1)
                         .map(function (o) {
-                            return o && openmct.objects.makeKeyString(o.getId())
+                            return o && openmct.objects.makeKeyString(o.getId());
                         })
                         .join('/');
 
                 window.location.href = url;
 
-                openmct.editor.edit();
+                if (isFirstViewEditable(object.useCapability('adapter'))) {
+                    openmct.editor.edit();
+                }
             }
 
             newModel.type = this.type.getKey();

platform/commonUI/general/res/templates/message-banner.html

@@ -1,13 +1,13 @@
 <div ng-controller="BannerController" ng-show="active.notification"
-     class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
+     class="c-message-banner {{active.notification.model.severity}}" ng-class="{
      'minimized': active.notification.model.minimized,
      'new': !active.notification.model.minimized}"
      ng-click="maximize(active.notification)">
-    <span class="banner-elem label">
+    <span class="c-message-banner__message">
         {{active.notification.model.title}}
     </span>
     <span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
-        <mct-include key="'progress-bar'" class="banner-elem"
+        <mct-include key="'progress-bar'" class="c-message-banner__progress-bar"
                      ng-model="active.notification.model">
         </mct-include>
     </span>
@@ -16,5 +16,5 @@
        ng-click="action(active.notification.model.primaryOption.callback, $event)">
         {{active.notification.model.primaryOption.label}}
     </a>
-    <a class="banner-elem close icon-x" ng-click="dismiss(active.notification, $event)"></a>
+    <button class="c-message-banner__close-button c-click-icon icon-x-in-circle" ng-click="dismiss(active.notification, $event)"></button>
 </div>

platform/features/clock/res/templates/timer.html

@@ -24,10 +24,10 @@
         <button ng-click="timer.clickStopButton()"
                 ng-hide="timer.timerState == 'stopped'"
                 title="Reset"
-                class="c-timer__ctrl-reset c-click-icon c-click-icon--major icon-reset"></button>
+                class="c-timer__ctrl-reset c-icon-button c-icon-button--major icon-reset"></button>
         <button ng-click="timer.clickButton()"
                 title="{{timer.buttonText()}}"
-                class="c-timer__ctrl-pause-play c-click-icon c-click-icon--major {{timer.buttonCssClass()}}"></button>
+                class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major {{timer.buttonCssClass()}}"></button>
     </div>
     <div class="c-timer__direction {{timer.signClass()}}"
         ng-hide="!timer.signClass()"></div>

platform/features/hyperlink/bundle.js

@@ -45,7 +45,6 @@ define([
                             "key": "url",
                             "name": "URL",
                             "control": "textfield",
-                            "pattern": "^(ftp|https?)\\:\\/\\/",
                             "required": true,
                             "cssClass": "l-input-lg"
                         },

platform/features/imagery/res/templates/imagery.html

@@ -1,22 +1,18 @@
-<div class="t-imagery" ng-controller="ImageryController as imagery">
+<div class="t-imagery c-imagery" ng-controller="ImageryController as imagery">
     <mct-split-pane class='abs' anchor="bottom" alias="imagery">
-    <div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col"
-        ng-mouseenter="showLocalControls = true;"
-        ng-mouseleave="showLocalControls = false;">
-        <div class="h-local-controls h-local-controls-overlay-content h-local-controls-trans s-local-controls local-controls-hidden l-flex-row">
-            <span class="holder flex-elem grows">
+    <div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col">
+        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
+            <span class="holder flex-elem grows c-imagery__lc__sliders">
                 <input class="icon-brightness" type="range"
                        min="0"
                        max="500"
-                       ng-model="filters.brightness">
-                </input>
+                       ng-model="filters.brightness" />
                 <input class="icon-contrast" type="range"
                        min="0"
                        max="500"
-                       ng-model="filters.contrast">
-                </input>
+                       ng-model="filters.contrast" />
             </span>
-            <span class="holder flex-elem t-reset-btn-holder">
+            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
                 <a class="s-icon-button icon-reset t-btn-reset"
                    ng-click="filters = { brightness: 100, contrast: 100 }"></a>
             </span>

platform/features/pages/bundle.js

@@ -47,7 +47,6 @@ define([
                             "key": "url",
                             "name": "URL",
                             "control": "textfield",
-                            "pattern": "^(ftp|https?)\\:\\/\\/",
                             "required": true,
                             "cssClass": "l-input-lg"
                         }

platform/persistence/queue/src/PersistenceFailureHandler.js

@@ -37,75 +37,17 @@ define(
         }
 
         /**
-         * Handle persistence failures by providing the user with a
-         * dialog summarizing these failures, and giving the option
-         * to overwrite/cancel as appropriate.
+         * Discard failures
          * @param {Array} failures persistence failures, as prepared
          *        by PersistenceQueueHandler
          * @memberof platform/persistence/queue.PersistenceFailureHandler#
          */
         PersistenceFailureHandler.prototype.handle = function handleFailures(failures) {
-            // Prepare dialog for display
+
             var dialogModel = new PersistenceFailureDialog(failures),
                 revisionErrors = dialogModel.model.revised,
                 $q = this.$q;
 
-            // Refresh revision information for the domain object associated
-            // with this persistence failure
-            function refresh(failure) {
-                // Refresh the domain object to the latest from persistence
-                return failure.persistence.refresh();
-            }
-
-            // Issue a new persist call for the domain object associated with
-            // this failure.
-            function persist(failure) {
-                // Note that we reissue the persist request here, but don't
-                // return it, to avoid a circular wait. We trust that the
-                // PersistenceQueue will behave correctly on the next round
-                // of flushing.
-                failure.requeue();
-            }
-
-            // Retry persistence (overwrite) for this set of failed attempts
-            function retry(failuresToRetry) {
-                var models = {};
-
-                // Cache a copy of the model
-                function cacheModel(failure) {
-                    // Clone...
-                    models[failure.id] = JSON.parse(JSON.stringify(
-                        failure.domainObject.getModel()
-                    ));
-                }
-
-                // Mutate a domain object to restore its model
-                function remutate(failure) {
-                    var model = models[failure.id];
-                    return failure.domainObject.useCapability(
-                        "mutation",
-                        function () {
-                            return model;
-                        },
-                        model.modified
-                    );
-                }
-
-                // Cache the object models we might want to save
-                failuresToRetry.forEach(cacheModel);
-
-                // Strategy here:
-                // * Cache all of the models we might want to save (above)
-                // * Refresh all domain objects (so they are latest versions)
-                // * Re-insert the cached domain object models
-                // * Invoke persistence again
-                return $q.all(failuresToRetry.map(refresh)).then(function () {
-                    return $q.all(failuresToRetry.map(remutate));
-                }).then(function () {
-                    return $q.all(failuresToRetry.map(persist));
-                });
-            }
-
             // Discard changes for a failed refresh
             function discard(failure) {
                 var persistence =
@@ -118,19 +60,7 @@ define(
                 return $q.all(failuresToDiscard.map(discard));
             }
 
-            // Handle user input (did they choose to overwrite?)
-            function handleChoice(key) {
-                // If so, try again
-                if (key === PersistenceFailureConstants.OVERWRITE_KEY) {
-                    return retry(revisionErrors);
-                } else {
-                    return discardAll(revisionErrors);
-                }
-            }
-
-            // Prompt for user input, the overwrite if they said so.
-            return this.dialogService.getUserChoice(dialogModel)
-                .then(handleChoice, handleChoice);
+            return discardAll(revisionErrors);
         };
 
         return PersistenceFailureHandler;

platform/persistence/queue/test/PersistenceFailureHandlerSpec.js

@@ -74,43 +74,14 @@ define(
                 handler = new PersistenceFailureHandler(mockQ, mockDialogService);
             });
 
-            it("shows a dialog to handle failures", function () {
+            it("discards on handle", function () {
                 handler.handle(mockFailures);
-                expect(mockDialogService.getUserChoice).toHaveBeenCalled();
-            });
-
-            it("overwrites on request", function () {
-                mockQ.all.and.returnValue(asPromise([]));
-                handler.handle(mockFailures);
-                // User chooses overwrite
-                mockPromise.then.calls.mostRecent().args[0](Constants.OVERWRITE_KEY);
-                // Should refresh, remutate, and requeue all objects
-                mockFailures.forEach(function (mockFailure, i) {
-                    expect(mockFailure.persistence.refresh).toHaveBeenCalled();
-                    expect(mockFailure.requeue).toHaveBeenCalled();
-                    expect(mockFailure.domainObject.useCapability).toHaveBeenCalledWith(
-                        'mutation',
-                        jasmine.any(Function),
-                        i // timestamp
-                    );
-                    expect(mockFailure.domainObject.useCapability.calls.mostRecent().args[1]())
-                        .toEqual({ id: mockFailure.id, modified: i });
-                });
-            });
-
-            it("discards on request", function () {
-                mockQ.all.and.returnValue(asPromise([]));
-                handler.handle(mockFailures);
-                // User chooses overwrite
-                mockPromise.then.calls.mostRecent().args[0](false);
-                // Should refresh, but not remutate, and requeue all objects
                 mockFailures.forEach(function (mockFailure) {
                     expect(mockFailure.persistence.refresh).toHaveBeenCalled();
                     expect(mockFailure.requeue).not.toHaveBeenCalled();
                     expect(mockFailure.domainObject.useCapability).not.toHaveBeenCalled();
                 });
             });
-
         });
     }
 );

src/MCT.js

@@ -44,6 +44,8 @@ define([
     '../platform/core/src/objects/DomainObjectImpl',
     '../platform/core/src/capabilities/ContextualDomainObject',
     './ui/preview/plugin',
+    './api/Branding',
+    './plugins/licenses/plugin',
     './plugins/remove/plugin',
     'vue'
 ], function (
@@ -70,6 +72,8 @@ define([
     DomainObjectImpl,
     ContextualDomainObject,
     PreviewPlugin,
+    BrandingAPI,
+    LicensesPlugin,
     RemoveActionPlugin,
     Vue
 ) {
@@ -91,6 +95,13 @@ define([
      */
     function MCT() {
         EventEmitter.call(this);
+        this.buildInfo = {
+            version: __OPENMCT_VERSION__,
+            buildDate: __OPENMCT_BUILD_DATE__,
+            revision: __OPENMCT_REVISION__,
+            branch: __OPENMCT_BUILD_BRANCH__
+        };
+
         this.legacyBundle = { extensions: {
             services: [
                 {
@@ -230,17 +241,21 @@ define([
 
         this.contextMenu = new api.ContextMenuRegistry();
 
+        this.router = new ApplicationRouter();
+
+        this.branding = BrandingAPI.default;
+
         this.legacyRegistry = defaultRegistry;
         this.install(this.plugins.Plot());
         this.install(this.plugins.TelemetryTable());
-        this.install(this.plugins.DisplayLayout());
         this.install(PreviewPlugin.default());
+        this.install(LegacyIndicatorsPlugin());
+        this.install(LicensesPlugin.default());
         this.install(RemoveActionPlugin.default());
 
         if (typeof BUILD_CONSTANTS !== 'undefined') {
             this.install(buildInfoPlugin(BUILD_CONSTANTS));
         }
-
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);
@@ -311,6 +326,12 @@ define([
      *        MCT; if undefined, MCT will be run in the body of the document
      */
     MCT.prototype.start = function (domElement) {
+        if (!this.plugins.DisplayLayout._installed) {
+            this.install(this.plugins.DisplayLayout({
+                showAsView: ['summary-widget']
+            }));
+        }
+
         if (!domElement) {
             domElement = document.body;
         }
@@ -334,12 +355,8 @@ define([
         legacyRegistry.register('adapter', this.legacyBundle);
         legacyRegistry.enable('adapter');
 
-        this.install(LegacyIndicatorsPlugin());
-
-        this.router = new ApplicationRouter();
-
         this.router.route(/^\/$/, () => {
-            this.router.setPath('/browse/mine');
+            this.router.setPath('/browse/');
         });
 
         /**

src/adapter/runs/LegacyTelemetryProvider.js

@@ -137,8 +137,7 @@ define([
         function callbackWrapper(series) {
             callback(createDatum(domainObject, metadata, series, series.getPointCount() - 1));
         }
-
-        return capability.subscribe(callbackWrapper, request);
+        return capability.subscribe(callbackWrapper, request) || function () {};
     };
 
     LegacyTelemetryProvider.prototype.supportsLimits = function (domainObject) {

src/api/Branding.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2019, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,32 +20,26 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    [],
-    function () {
+let brandingOptions = {};
 
-        /**
-         * Updates the title of the current window to reflect the name
-         * of the currently navigated-to domain object.
-         * @memberof platform/commonUI/browse
-         * @constructor
-         */
-        function WindowTitler(navigationService, $rootScope, $document) {
-            // Look up name of the navigated domain object...
-            function getNavigatedObjectName() {
-                var navigatedObject = navigationService.getNavigation();
-                return navigatedObject && navigatedObject.getModel().name;
-            }
+/**
+ * @typedef {Object} BrandingOptions
+ * @memberOf openmct/branding
+ * @property {string} smallLogoImage URL to the image to use as the applications logo.
+ * This logo will appear on every screen and when clicked will launch the about dialog.
+ * @property {string} aboutHtml Custom content for the about screen. When defined the
+ * supplied content will be inserted at the start of the about dialog, and the default
+ * Open MCT splash logo will be suppressed.
+ */
 
-            // Set the window title...
-            function setTitle(name) {
-                $document[0].title = name;
-            }
-
-            // Watch the former, and invoke the latter
-            $rootScope.$watch(getNavigatedObjectName, setTitle);
-        }
-
-        return WindowTitler;
+/**
+ * Set branding options for the application. These will override certain visual elements 
+ * of the application and allow for customization of the application.
+ * @param {BrandingOptions} options
+ */
+export default function Branding(options) {
+    if (arguments.length === 1) {
+        brandingOptions = options;
     }
-);
+    return brandingOptions;
+}

src/api/composition/CompositionAPISpec.js

@@ -21,7 +21,11 @@ define([
             topicService.and.returnValue(mutationTopic);
             publicAPI = {};
             publicAPI.objects = jasmine.createSpyObj('ObjectAPI', [
-                'get'
+                'get',
+                'mutate'
+            ]);
+            publicAPI.objects.eventEmitter = jasmine.createSpyObj('eventemitter', [
+                'on'
             ]);
             publicAPI.objects.get.and.callFake(function (identifier) {
                 return Promise.resolve({identifier: identifier});
@@ -52,6 +56,14 @@ define([
                         {
                             namespace: 'test',
                             key: 'a'
+                        },
+                        {
+                            namespace: 'test',
+                            key: 'b'
+                        },
+                        {
+                            namespace: 'test',
+                            key: 'c'
                         }
                     ]
                 };
@@ -68,12 +80,45 @@ define([
                 composition.on('add', listener);
 
                 return composition.load().then(function () {
-                    expect(listener.calls.count()).toBe(1);
+                    expect(listener.calls.count()).toBe(3);
                     expect(listener).toHaveBeenCalledWith({
                         identifier: {namespace: 'test', key: 'a'}
                     });
                 });
             });
+            describe('supports reordering of composition', function () {
+                var listener;
+                beforeEach(function () {
+                    listener = jasmine.createSpy('reorderListener');
+                    composition.on('reorder', listener);
+                    
+                    return composition.load();
+                });
+                it('', function () {
+                    composition.reorder(1, 0);
+                    let newComposition =
+                        publicAPI.objects.mutate.calls.mostRecent().args[2];
+                    let reorderPlan = listener.calls.mostRecent().args[0][0];
+
+                    expect(reorderPlan.oldIndex).toBe(1);
+                    expect(reorderPlan.newIndex).toBe(0);
+                    expect(newComposition[0].key).toEqual('b');
+                    expect(newComposition[1].key).toEqual('a');
+                    expect(newComposition[2].key).toEqual('c');
+                });
+                it('', function () {
+                    composition.reorder(0, 2);
+                    let newComposition =
+                        publicAPI.objects.mutate.calls.mostRecent().args[2];
+                    let reorderPlan = listener.calls.mostRecent().args[0][0];
+
+                    expect(reorderPlan.oldIndex).toBe(0);
+                    expect(reorderPlan.newIndex).toBe(2);
+                    expect(newComposition[0].key).toEqual('b');
+                    expect(newComposition[1].key).toEqual('c');
+                    expect(newComposition[2].key).toEqual('a');
+                })
+            });
 
             // TODO: Implement add/removal in new default provider.
             xit('synchronizes changes between instances', function () {

src/api/composition/CompositionCollection.js

@@ -56,7 +56,8 @@ define([
         this.listeners = {
             add: [],
             remove: [],
-            load: []
+            load: [],
+            reorder: []
         };
         this.onProviderAdd = this.onProviderAdd.bind(this);
         this.onProviderRemove = this.onProviderRemove.bind(this);
@@ -91,6 +92,13 @@ define([
                     this.onProviderRemove,
                     this
                 );
+            } if (event === 'reorder') {
+                this.provider.on(
+                    this.domainObject,
+                    'reorder',
+                    this.onProviderReorder,
+                    this
+                )
             }
         }
 
@@ -141,6 +149,13 @@ define([
                         this.onProviderRemove,
                         this
                     );
+                } else if (event === 'reorder') {
+                    this.provider.off(
+                        this.domainObject,
+                        'reorder',
+                        this.onProviderReorder,
+                        this
+                    );
                 }
             }
         }
@@ -209,6 +224,29 @@ define([
         }
     };
 
+    /**
+     * Reorder the domain objects in this composition.
+     *
+     * A call to [load]{@link module:openmct.CompositionCollection#load}
+     * must have resolved before using this method.
+     *
+     * @param {number} oldIndex
+     * @param {number} newIndex
+     * @memberof module:openmct.CompositionCollection#
+     * @name remove
+     */
+    CompositionCollection.prototype.reorder = function (oldIndex, newIndex, skipMutate) {
+        this.provider.reorder(this.domainObject, oldIndex, newIndex);
+    };
+
+    /**
+     * Handle reorder from provider.
+     * @private
+     */
+    CompositionCollection.prototype.onProviderReorder = function (reorderMap) {
+        this.emit('reorder', reorderMap);
+    };
+
     /**
      * Handle adds from provider.
      * @private
@@ -232,12 +270,12 @@ define([
      * Emit events.
      * @private
      */
-    CompositionCollection.prototype.emit = function (event, payload) {
+    CompositionCollection.prototype.emit = function (event, ...payload) {
         this.listeners[event].forEach(function (l) {
             if (l.context) {
-                l.callback.call(l.context, payload);
+                l.callback.apply(l.context, payload);
             } else {
-                l.callback(payload);
+                l.callback(...payload);
             }
         });
     };

src/api/composition/DefaultCompositionProvider.js

@@ -126,6 +126,7 @@ define([
             objectListeners = this.listeningTo[keyString] = {
                 add: [],
                 remove: [],
+                reorder: [],
                 composition: [].slice.apply(domainObject.composition)
             };
         }
@@ -160,7 +161,7 @@ define([
         });
 
         objectListeners[event].splice(index, 1);
-        if (!objectListeners.add.length && !objectListeners.remove.length) {
+        if (!objectListeners.add.length && !objectListeners.remove.length && !objectListeners.reorder.length) {
             delete this.listeningTo[keyString];
         }
     };
@@ -203,6 +204,54 @@ define([
         // TODO: this needs to be synchronized via mutation
     };
 
+    DefaultCompositionProvider.prototype.reorder = function (domainObject, oldIndex, newIndex) {
+        let newComposition = domainObject.composition.slice();
+        let removeId = oldIndex > newIndex ? oldIndex + 1 : oldIndex;
+        let insertPosition = oldIndex < newIndex ? newIndex + 1 : newIndex;
+        //Insert object in new position
+        newComposition.splice(insertPosition, 0, domainObject.composition[oldIndex]);
+        newComposition.splice(removeId, 1);
+
+        let reorderPlan = [{
+            oldIndex,
+            newIndex
+        }];
+
+        if (oldIndex > newIndex) {
+            for (let i = newIndex; i < oldIndex; i++) {
+                reorderPlan.push({
+                    oldIndex: i,
+                    newIndex: i + 1
+                });
+            }
+        } else {
+            for (let i = oldIndex + 1; i <= newIndex; i++) {
+                reorderPlan.push({
+                    oldIndex: i,
+                    newIndex: i - 1
+                });
+            }
+        }
+        this.publicAPI.objects.mutate(domainObject, 'composition', newComposition);
+
+        let id = objectUtils.makeKeyString(domainObject.identifier);
+        var listeners = this.listeningTo[id];
+
+        if (!listeners) {
+            return;
+        }
+
+        listeners.reorder.forEach(notify);
+
+        function notify(listener) {
+            if (listener.context) {
+                listener.callback.call(listener.context, reorderPlan);
+            } else {
+                listener.callback(reorderPlan);
+            }
+        }
+    };
+
     /**
      * Listens on general mutation topic, using injector to fetch to avoid
      * circular dependencies.

src/api/objects/ObjectAPI.js

@@ -226,7 +226,20 @@ define([
                     (identifier.namespace === identifiers[0].namespace &&
                         identifier.key === identifiers[0].key);
             });
-    }
+    };
+
+    ObjectAPI.prototype.getOriginalPath = function (identifier, path = []) {
+        return this.get(identifier).then((domainObject) => {
+            path.push(domainObject);
+            let location = domainObject.location;
+
+            if (location) {
+                return this.getOriginalPath(utils.parseKeyString(location), path);
+            } else {
+                return path;
+            }
+        });
+    };
 
     /**
      * Uniquely identifies a domain object.

src/api/overlays/Overlay.js

@@ -5,7 +5,8 @@ import Vue from 'vue';
 const cssClasses = {
     large: 'l-overlay-large',
     small: 'l-overlay-small',
-    fit: 'l-overlay-fit'
+    fit: 'l-overlay-fit',
+    fullscreen: 'l-overlay-fullscreen'
 };
 
 class Overlay extends EventEmitter {

src/api/overlays/components/DialogComponent.vue

@@ -27,10 +27,16 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
+    @mixin legacyMessage() {
+        flex: 0 1 auto;
+        font-family: symbolsfont;
+        font-size: $messageIconD; // Singleton message in a dialog
+        margin-right: $interiorMarginLg;
+    }
+
     .c-message {
         display: flex;
         align-items: center;
-        padding: $interiorMarginLg;
 
         > * + * {
             margin-left: $interiorMarginLg;
@@ -58,7 +64,44 @@
         &__title,
         &__action-text {
             font-size: 1.2em; // TEMP
+        }
 
+        &--simple {
+            // Icon and text elements only
+            &:before {
+                font-size: 30px !important;
+            }
+
+            [class*='__text'] {
+                font-size: 1.25em;
+            }
+        }
+
+        /************************** LEGACY */
+        &.message-severity-info:before {
+            @include legacyMessage();
+            content: $glyph-icon-info;
+            color: $colorInfo;
+        }
+
+        &.message-severity-alert:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-rect;
+            color: $colorWarningLo;
+        }
+
+        &.message-severity-error:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-triangle;
+            color: $colorWarningLo;
+        }
+
+        // Messages in a list
+        .c-overlay__messages & {
+            padding: $interiorMarginLg;
+            &:before {
+                font-size: $messageListIconD;
+            }
         }
     }
 </style>

src/api/overlays/components/OverlayComponent.vue

@@ -56,9 +56,11 @@
         }
 
         &__close-button {
-            $p: $interiorMarginSm;
+            $p: $interiorMargin;
             border-radius: 100% !important;
+            color: $overlayColorFg;
             display: inline-block;
+            font-size: 1.25em;
             position: absolute;
             top: $p; right: $p;
         }
@@ -119,14 +121,25 @@
                 cursor: pointer;
                 display: block;
             }
+        }
 
-            &__outer {
+        // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+        .l-overlay-large,
+        .l-overlay-small,
+        .l-overlay-fit {
+            .c-overlay__outer {
                 border-radius: $overlayCr;
                 box-shadow: rgba(black, 0.5) 0 2px 25px;
             }
         }
+        
+        .l-overlay-fullscreen {
+            // Used by About > Licenses display
+            .c-overlay__outer {
+                @include overlaySizing($overlayOuterMarginFullscreen);
+            }
+        }
 
-        // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
         .l-overlay-large {
             // Default
             .c-overlay__outer {
@@ -140,6 +153,7 @@
             }
         }
 
+        .t-dialog-sm .l-overlay-small, // Legacy dialog support
         .l-overlay-fit {
             .c-overlay__outer {
                 @include overlaySizing(auto);

src/api/telemetry/TelemetryAPI.js

@@ -280,7 +280,11 @@ define([
         if (!provider) {
             return Promise.reject('No provider found');
         }
-        return provider.request.apply(provider, arguments);
+        return provider.request.apply(provider, arguments).catch((rejected) => {
+            this.openmct.notifications.error('Error requesting telemetry data, see console for details');
+            console.error(rejected);
+            return Promise.reject(rejected);
+        });
     };
 
     /**

src/api/telemetry/TelemetryAPISpec.js

@@ -28,14 +28,22 @@ define([
     describe('Telemetry API', function () {
         var openmct;
         var telemetryAPI;
+        var mockTypeService;
 
         beforeEach(function () {
             openmct = {
                 time: jasmine.createSpyObj('timeAPI', [
                     'timeSystem',
                     'bounds'
+                ]),
+                $injector: jasmine.createSpyObj('injector', [
+                    'get'
                 ])
             };
+            mockTypeService = jasmine.createSpyObj('typeService', [
+                'getType'
+            ]);
+            openmct.$injector.get.and.returnValue(mockTypeService);
             openmct.time.timeSystem.and.returnValue({key: 'system'});
             openmct.time.bounds.and.returnValue({start: 0, end: 1});
             telemetryAPI = new TelemetryAPI(openmct);
@@ -296,5 +304,233 @@ define([
                 );
             });
         });
+        describe('metadata', function () {
+            let mockMetadata = {};
+            let mockObjectType = {
+                typeDef: {}
+            };
+            beforeEach(function () {
+                telemetryAPI.addProvider({
+                    key: 'mockMetadataProvider',
+                    supportsMetadata() {
+                        return true;
+                    },
+                    getMetadata() {
+                        return mockMetadata;
+                    }
+                });
+                mockTypeService.getType.and.returnValue(mockObjectType);
+            })
+            it('respects explicit priority', function () {
+                mockMetadata.values = [
+                    {
+                        key: "name",
+                        name: "Name",
+                        hints: {
+                            priority: 2
+                        }
+                        
+                    },
+                    {
+                        key: "timestamp",
+                        name: "Timestamp",
+                        hints: {
+                            priority: 1
+                        }
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine",
+                        hints: {
+                            priority: 4
+                        }
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine",
+                        hints: {
+                            priority: 3
+                        }
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.values();
+
+                values.forEach((value, index) => {
+                    expect(value.hints.priority).toBe(index + 1);
+                });
+            });
+            it('if no explicit priority, defaults to order defined', function () {
+                mockMetadata.values = [
+                    {
+                        key: "name",
+                        name: "Name"
+                        
+                    },
+                    {
+                        key: "timestamp",
+                        name: "Timestamp"
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine"
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine"
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.values();
+
+                values.forEach((value, index) => {
+                    expect(value.key).toBe(mockMetadata.values[index].key);
+                });
+            });
+            it('respects domain priority', function () {
+                mockMetadata.values = [
+                    {
+                        key: "name",
+                        name: "Name"
+                        
+                    },
+                    {
+                        key: "timestamp-utc",
+                        name: "Timestamp UTC",
+                        hints: {
+                            domain: 2
+                        }
+                    },
+                    {
+                        key: "timestamp-local",
+                        name: "Timestamp Local",
+                        hints: {
+                            domain: 1
+                        }
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine",
+                        hints: {
+                            range: 2
+                        }
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine",
+                        hints: {
+                            range: 1
+                        }
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.valuesForHints(['domain']);
+
+                expect(values[0].key).toBe('timestamp-local');
+                expect(values[1].key).toBe('timestamp-utc');
+            });
+            it('respects range priority', function () {
+                mockMetadata.values = [
+                    {
+                        key: "name",
+                        name: "Name"
+                        
+                    },
+                    {
+                        key: "timestamp-utc",
+                        name: "Timestamp UTC",
+                        hints: {
+                            domain: 2
+                        }
+                    },
+                    {
+                        key: "timestamp-local",
+                        name: "Timestamp Local",
+                        hints: {
+                            domain: 1
+                        }
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine",
+                        hints: {
+                            range: 2
+                        }
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine",
+                        hints: {
+                            range: 1
+                        }
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.valuesForHints(['range']);
+
+                expect(values[0].key).toBe('cos');
+                expect(values[1].key).toBe('sin');
+            });
+            it('respects priority and domain ordering', function () {
+                mockMetadata.values = [
+                    {
+                        key: "id",
+                        name: "ID",
+                        hints: {
+                            priority: 2
+                        }
+                    },
+                    {
+                        key: "name",
+                        name: "Name",
+                        hints: {
+                            priority: 1
+                        }
+                        
+                    },
+                    {
+                        key: "timestamp-utc",
+                        name: "Timestamp UTC",
+                        hints: {
+                            domain: 2,
+                            priority: 1
+                        }
+                    },
+                    {
+                        key: "timestamp-local",
+                        name: "Timestamp Local",
+                        hints: {
+                            domain: 1,
+                            priority: 2
+                        }
+                    },
+                    {
+                        key: "timestamp-pst",
+                        name: "Timestamp PST",
+                        hints: {
+                            domain: 3,
+                            priority: 2
+                        }
+                    },
+                    {
+                        key: "sin",
+                        name: "Sine"
+                    },
+                    {
+                        key: "cos",
+                        name: "Cosine"
+                    }
+                ];
+                let metadata = telemetryAPI.getMetadata({});
+                let values = metadata.valuesForHints(['priority', 'domain']);
+                [
+                    'timestamp-utc',
+                    'timestamp-local',
+                    'timestamp-pst'
+                ].forEach((key, index) => {
+                    expect(values[index].key).toBe(key);
+                });
+            });
+        })
     });
 });

src/api/telemetry/TelemetryMetadataManager.js

@@ -116,12 +116,12 @@ define([
             return hints.every(hasHint, metadata);
         }
         var matchingMetadata = this.valueMetadatas.filter(hasHints);
-        var sortedMetadata = _.sortBy(matchingMetadata, function (metadata) {
-            return hints.map(function (hint) {
+        let iteratees = hints.map(hint => {
+            return (metadata) => {
                 return metadata.hints[hint];
-            });
+            }
         });
-        return sortedMetadata;
+        return _.sortByAll(matchingMetadata, ...iteratees);
     };
 
     TelemetryMetadataManager.prototype.getFilterableValues = function () {

src/plugins/LADTable/LADTableSetViewProvider.js

@@ -35,6 +35,9 @@ define([
             canView: function (domainObject) {
                 return domainObject.type === 'LadTableSet';
             },
+            canEdit: function (domainObject) {
+                return domainObject.type === 'LadTableSet';
+            },
             view: function (domainObject) {
                 let component;
 

src/plugins/LADTable/LADTableViewProvider.js

@@ -35,6 +35,9 @@ define([
             canView: function (domainObject) {
                 return domainObject.type === 'LadTable';
             },
+            canEdit: function (domainObject) {
+                return domainObject.type === 'LadTable';
+            },
             view: function (domainObject) {
                 let component;
 

src/plugins/LADTable/components/LADTable.vue

@@ -65,17 +65,25 @@ export default {
             let index = _.findIndex(this.items, (item) => this.openmct.objects.makeKeyString(identifier) === item.key);
 
             this.items.splice(index, 1);
+        },
+        reorder(reorderPlan) {
+            let oldItems = this.items.slice();
+            reorderPlan.forEach((reorderEvent) => {
+                this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
+            });
         }
     },
     mounted() {
         this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addItem);
         this.composition.on('remove', this.removeItem);
+        this.composition.on('reorder', this.reorder);
         this.composition.load();
     },
     destroyed() {
         this.composition.off('add', this.addItem);
         this.composition.off('remove', this.removeItem);
+        this.composition.off('reorder', this.reorder);
     }
 }
 </script>

src/plugins/LADTable/components/LadTableSet.vue

@@ -93,6 +93,12 @@
             this.primaryTelemetryObjects.splice(index,1);
             primary = undefined;
         },
+        reorderPrimary(reorderPlan) {
+            let oldComposition = this.primaryTelemetryObjects.slice();
+            reorderPlan.forEach(reorderEvent => {
+                this.$set(this.primaryTelemetryObjects, reorderEvent.newIndex, oldComposition[reorderEvent.oldIndex]);
+            });
+        },
         addSecondary(primary) {
             return (domainObject) => {
                 let secondary = {};
@@ -120,11 +126,13 @@
         this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addPrimary);
         this.composition.on('remove', this.removePrimary);
+        this.composition.on('reorder', this.reorderPrimary);
         this.composition.load();
     },
     destroyed() {
         this.composition.off('add', this.addPrimary);
         this.composition.off('remove', this.removePrimary);
+        this.composition.off('reorder', this.reorderPrimary);
         this.compositions.forEach(c => {
             c.composition.off('add', c.addCallback);
             c.composition.off('remove', c.removeCallback);

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -28,9 +28,9 @@ define([], function () {
             key: "layout",
             description: "A toolbar for objects inside a display layout.",
             forSelection: function (selection) {
-                // Apply the layout toolbar if the edit mode is on, and the selected object
+                // Apply the layout toolbar if the selected object
                 // is inside a layout, or the main layout is selected.
-                return (openmct.editor.isEditing() && selection &&
+                return (selection &&
                     ((selection[1] && selection[1].context.item && selection[1].context.item.type === 'layout') ||
                         (selection[0].context.item && selection[0].context.item.type === 'layout')));
             },

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -152,7 +152,7 @@
                 return this.internalDomainObject.configuration.items;
             }
         },
-        inject: ['openmct'],
+        inject: ['openmct', 'options'],
         props: ['domainObject'],
         components: ITEM_TYPE_VIEW_MAP,
         methods: {
@@ -283,9 +283,8 @@
                 }
             },
             isTelemetry(domainObject) {
-                if (this.openmct.telemetry.isTelemetryObject(domainObject)
-                    && domainObject.type !== 'summary-widget'
-                    && domainObject.type !== 'example.imagery') {
+                if (this.openmct.telemetry.isTelemetryObject(domainObject) && 
+                    !this.options.showAsView.includes(domainObject.type)) {
                     return true;
                 } else {
                     return false;

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -1,4 +1,4 @@
-    /*****************************************************************************
+/*****************************************************************************
  * Open MCT, Copyright (c) 2014-2018, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.

src/plugins/displayLayout/components/SubobjectView.vue

@@ -27,6 +27,7 @@
                       :domain-object="domainObject"
                       :object-path="objectPath"
                       :has-frame="item.hasFrame"
+                      :show-edit-view="false"
                       ref="objectFrame">
         </object-frame>
     </layout-frame>

src/plugins/displayLayout/plugin.js

@@ -25,8 +25,7 @@ import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 import DisplayLayoutType from './DisplayLayoutType.js'
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'
-
-export default function () {
+export default function DisplayLayoutPlugin(options) {
     return function (openmct) {
         openmct.objectViews.addProvider({
             key: 'layout.view',
@@ -47,7 +46,8 @@ export default function () {
                             template: '<layout ref="displayLayout" :domain-object="domainObject"></layout>',
                             provide: {
                                 openmct,
-                                objectUtils
+                                objectUtils,
+                                options
                             },
                             el: container,
                             data () {
@@ -83,5 +83,6 @@ export default function () {
                 return true;
             }
         });
+        DisplayLayoutPlugin._installed = true;
     }
 }

src/plugins/filters/components/FilterObject.vue

@@ -5,11 +5,11 @@
             <span class="c-disclosure-triangle is-enabled flex-elem"
               :class="{'c-disclosure-triangle--expanded': expanded}"></span>
             <div class="c-tree__item__label">
-                <div class="t-object-label l-flex-row flex-elem grows">
-                    <div class="t-item-icon flex-elem"
+                <div class="c-object-label">
+                    <div class="c-object-label__type-icon"
                          :class="objectCssClass">
                     </div>
-                    <div class="t-title-label flex-elem grows">{{ filterObject.name }}</div>
+                    <div class="c-object-label__name flex-elem grows">{{ filterObject.name }}</div>
                 </div>
             </div>
         </div>

src/plugins/flexibleLayout/components/frame.vue

@@ -36,6 +36,7 @@
                 :domain-object="domainObject"
                 :object-path="objectPath"
                 :has-frame="hasFrame"
+                :show-edit-view="false"
                 ref="objectFrame">
             </object-frame>
 

src/plugins/flexibleLayout/toolbarProvider.js

@@ -29,7 +29,7 @@ function ToolbarProvider(openmct) {
         forSelection: function (selection) {
             let context = selection[0].context;
 
-            return (openmct.editor.isEditing() && context && context.type &&
+            return (context && context.type &&
                 (context.type === 'flexible-layout' || context.type === 'container' || context.type === 'frame'));
         },
         toolbar: function (selection) {

src/plugins/folderView/components/GridItem.vue

@@ -16,7 +16,7 @@
         </div>
         <div class="c-grid-item__controls">
             <div class="icon-people" title='Shared'></div>
-            <button class="c-click-icon icon-info c-info-button" title='More Info'></button>
+            <button class="c-icon-button icon-info c-info-button" title='More Info'></button>
             <div class="icon-pointer-right c-pointer-icon"></div>
         </div>
     </a>

src/plugins/licenses/Licenses.vue

@@ -0,0 +1,52 @@
+/*****************************************************************************
+* 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.
+*****************************************************************************/
+<template>
+    <div class="c-about c-about--licenses">
+        <h1>Open MCT Third Party Licenses</h1>
+        <p>This software includes components released under the following licenses:</p>
+        <div v-for="(pkg, key) in packages" :key="key" class="c-license">
+            <h2 class="c-license__name">{{key}}</h2>
+            <div class="c-license__details">
+                <span class="c-license__author"><em>Author</em> {{pkg.publisher}}</span> |
+                <span class="c-license__license"><em>License(s)</em> {{pkg.licenses}}</span> |
+                <span class="c-license__repo"><em>Repository</em> <a :href="pkg.repository" target="_blank">{{pkg.repository}}</a></span>
+            </div>
+            <div class="c-license__text">
+                <p>{{pkg.licenseText}}</p>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="sass">
+</style>
+<script>
+import packages from './third-party-licenses.json';
+
+export default {
+    data() {
+        return {
+            packages: packages
+        }
+    }
+}
+</script>
+ 

src/plugins/licenses/plugin.js

@@ -0,0 +1,38 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+import Licenses from './Licenses.vue';
+import Vue from 'vue';
+
+export default function () {
+    return function install(openmct) {
+        openmct.router.route(/^\/licenses$/, () => {
+            let licensesVm = new Vue(Licenses).$mount();
+
+            openmct.overlays.overlay({
+                element: licensesVm.$el,
+                size: 'fullscreen',
+                dismissable: false,
+                onDestroy: () => licensesVm.$destroy()
+            });
+        });
+    };
+}

src/plugins/licenses/third-party-licenses.json

@@ -0,0 +1,268 @@
+{
+  "angular-route@1.4.14": {
+    "licenses": "MIT",
+    "repository": "https://github.com/angular/angular.js",
+    "publisher": "Angular Core Team",
+    "email": "angular-core+npm@google.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/angular-route",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/angular-route/LICENSE.md",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2016 Angular\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",
+    "copyright": "Copyright (c) 2016 Angular"
+  },
+  "angular@1.4.14": {
+    "licenses": "MIT",
+    "repository": "https://github.com/angular/angular.js",
+    "publisher": "Angular Core Team",
+    "email": "angular-core+npm@google.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/angular",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/angular/LICENSE.md",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2016 Angular\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",
+    "copyright": "Copyright (c) 2016 Angular"
+  },
+  "base64-arraybuffer@0.1.5": {
+    "licenses": "MIT",
+    "repository": "https://github.com/niklasvh/base64-arraybuffer",
+    "publisher": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "http://hertzen.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/base64-arraybuffer",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/base64-arraybuffer/LICENSE-MIT",
+    "licenseText": "Copyright (c) 2012 Niklas von Hertzen\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) 2012 Niklas von Hertzen"
+  },
+  "comma-separated-values@3.6.4": {
+    "licenses": "MIT",
+    "repository": "https://github.com/knrz/CSV.js",
+    "publisher": "=",
+    "email": "hi@knrz.co",
+    "url": "http://knrz.co/",
+    "path": "/Users/akhenry/Code/licenses/node_modules/comma-separated-values",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/comma-separated-values/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2014 Kash Nouroozi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",
+    "copyright": "Copyright (c) 2014 Kash Nouroozi"
+  },
+  "css-line-break@1.0.1": {
+    "licenses": "MIT",
+    "repository": "https://github.com/niklasvh/css-line-break",
+    "publisher": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "https://hertzen.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/css-line-break",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/css-line-break/LICENSE",
+    "licenseText": "Copyright (c) 2017 Niklas von Hertzen\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) 2017 Niklas von Hertzen"
+  },
+  "d3-array@1.2.4": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-array",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-array",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-array/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "d3-axis@1.0.12": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-axis",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-axis",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-axis/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "d3-collection@1.0.7": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-collection",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-collection",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-collection/LICENSE",
+    "licenseText": "Copyright 2010-2016, Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016, Mike Bostock. All rights reserved."
+  },
+  "d3-color@1.0.4": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-color",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-color",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-color/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "d3-format@1.2.2": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-format",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-format",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-format/LICENSE",
+    "licenseText": "Copyright 2010-2015 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2015 Mike Bostock. All rights reserved."
+  },
+  "d3-interpolate@1.1.6": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-interpolate",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-interpolate",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-interpolate/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "d3-scale@1.0.7": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-scale",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-scale",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-scale/LICENSE",
+    "licenseText": "Copyright 2010-2015 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2015 Mike Bostock. All rights reserved."
+  },
+  "d3-selection@1.3.2": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-selection",
+    "publisher": "Mike Bostock",
+    "url": "https://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-selection",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-selection/LICENSE",
+    "licenseText": "Copyright (c) 2010-2018, Michael Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* The name Michael Bostock may not be used to endorse or promote products\n  derived from this software without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,\nINDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,\nBUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,\nDATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY\nOF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING\nNEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,\nEVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright (c) 2010-2018, Michael Bostock. All rights reserved."
+  },
+  "d3-time-format@2.1.3": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-time-format",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-time-format",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-time-format/LICENSE",
+    "licenseText": "Copyright 2010-2017 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2017 Mike Bostock. All rights reserved."
+  },
+  "d3-time@1.0.10": {
+    "licenses": "BSD-3-Clause",
+    "repository": "https://github.com/d3/d3-time",
+    "publisher": "Mike Bostock",
+    "url": "http://bost.ocks.org/mike",
+    "path": "/Users/akhenry/Code/licenses/node_modules/d3-time",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/d3-time/LICENSE",
+    "licenseText": "Copyright 2010-2016 Mike Bostock\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n  list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n  this list of conditions and the following disclaimer in the documentation\n  and/or other materials provided with the distribution.\n\n* Neither the name of the author nor the names of contributors may be used to\n  endorse or promote products derived from this software without specific prior\n  written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.",
+    "copyright": "Copyright 2010-2016 Mike Bostock. All rights reserved."
+  },
+  "eventemitter3@1.2.0": {
+    "licenses": "MIT",
+    "repository": "https://github.com/primus/eventemitter3",
+    "publisher": "Arnout Kazemier",
+    "path": "/Users/akhenry/Code/licenses/node_modules/eventemitter3",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/eventemitter3/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2014 Arnout Kazemier\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",
+    "copyright": "Copyright (c) 2014 Arnout Kazemier"
+  },
+  "file-saver@1.3.8": {
+    "licenses": "MIT",
+    "repository": "https://github.com/eligrey/FileSaver.js",
+    "publisher": "Eli Grey",
+    "email": "me@eligrey.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/file-saver",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/file-saver/LICENSE.md",
+    "licenseText": "The MIT License\n\nCopyright © 2016 [Eli Grey][1].\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n  [1]: http://eligrey.com",
+    "copyright": "Copyright © 2016 [Eli Grey][1]."
+  },
+  "html2canvas@1.0.0-alpha.12": {
+    "licenses": "MIT",
+    "repository": "https://github.com/niklasvh/html2canvas",
+    "publisher": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "https://hertzen.com",
+    "path": "/Users/akhenry/Code/licenses/node_modules/html2canvas",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/html2canvas/LICENSE",
+    "licenseText": "Copyright (c) 2012 Niklas von Hertzen\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) 2012 Niklas von Hertzen"
+  },
+  "location-bar@3.0.1": {
+    "licenses": "BSD-2-Clause",
+    "repository": "https://github.com/KidkArolis/location-bar",
+    "publisher": "Karolis Narkevicius",
+    "path": "/Users/akhenry/Code/licenses/node_modules/location-bar",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/location-bar/README.md",
+    "licenseText": ""
+  },
+  "lodash@3.10.1": {
+    "licenses": "MIT",
+    "repository": "https://github.com/lodash/lodash",
+    "publisher": "John-David Dalton",
+    "email": "john.david.dalton@gmail.com",
+    "url": "http://allyoucanleet.com/",
+    "path": "/Users/akhenry/Code/licenses/node_modules/lodash",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/lodash/LICENSE",
+    "licenseText": "Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>\nBased on Underscore.js, copyright 2009-2015 Jeremy Ashkenas,\nDocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>. Based on Underscore.js, copyright 2009-2015 Jeremy Ashkenas,. DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>"
+  },
+  "moment-duration-format@2.2.2": {
+    "licenses": "MIT",
+    "repository": "https://github.com/jsmreese/moment-duration-format",
+    "path": "/Users/akhenry/Code/licenses/node_modules/moment-duration-format",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/moment-duration-format/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2018 John Madhavan-Reese\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) 2018 John Madhavan-Reese"
+  },
+  "moment-timezone@0.5.23": {
+    "licenses": "MIT",
+    "repository": "https://github.com/moment/moment-timezone",
+    "publisher": "Tim Wood",
+    "email": "washwithcare@gmail.com",
+    "url": "http://timwoodcreates.com/",
+    "path": "/Users/akhenry/Code/licenses/node_modules/moment-timezone",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/moment-timezone/LICENSE",
+    "licenseText": "The MIT License (MIT)\r\n\r\nCopyright (c) JS Foundation and other contributors\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy of\r\nthis software and associated documentation files (the \"Software\"), to deal in\r\nthe Software without restriction, including without limitation the rights to\r\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\r\nthe Software, and to permit persons to whom the Software is furnished to do so,\r\nsubject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in all\r\ncopies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\r\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\r\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\r\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\r\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) JS Foundation and other contributors"
+  },
+  "moment@2.24.0": {
+    "licenses": "MIT",
+    "repository": "https://github.com/moment/moment",
+    "publisher": "Iskren Ivov Chernev",
+    "email": "iskren.chernev@gmail.com",
+    "url": "https://github.com/ichernev",
+    "path": "/Users/akhenry/Code/licenses/node_modules/moment",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/moment/LICENSE",
+    "licenseText": "Copyright (c) JS Foundation and other contributors\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.",
+    "copyright": "Copyright (c) JS Foundation and other contributors"
+  },
+  "painterro@0.2.71": {
+    "licenses": "MIT",
+    "publisher": "Ivan Borshchov",
+    "path": "/Users/akhenry/Code/licenses/node_modules/painterro",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/painterro/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2017 Ivan Borshchov\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.",
+    "copyright": "Copyright (c) 2017 Ivan Borshchov"
+  },
+  "printj@1.2.1": {
+    "licenses": "Apache-2.0",
+    "repository": "https://github.com/SheetJS/printj",
+    "publisher": "sheetjs",
+    "path": "/Users/akhenry/Code/licenses/node_modules/printj",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/printj/LICENSE",
+    "licenseText": "Copyright (C) 2016-present  SheetJS\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.",
+    "copyright": "Copyright (C) 2016-present  SheetJS"
+  },
+  "vue@2.5.6": {
+    "licenses": "MIT",
+    "repository": "https://github.com/vuejs/vue",
+    "publisher": "Evan You",
+    "path": "/Users/akhenry/Code/licenses/node_modules/vue",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/vue/LICENSE",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2013-present, Yuxi (Evan) You\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.",
+    "copyright": "Copyright (c) 2013-present, Yuxi (Evan) You"
+  },
+  "zepto@1.2.0": {
+    "licenses": "MIT",
+    "repository": "https://github.com/madrobby/zepto",
+    "path": "/Users/akhenry/Code/licenses/node_modules/zepto",
+    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/zepto/README.md",
+    "licenseText": "Copyright (c) 2010-2018 Thomas Fuchs\nhttp://zeptojs.com/\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE."
+  }
+}
+

src/plugins/notebook/res/templates/entry.html

@@ -26,7 +26,7 @@
     </div>
 
     <div class="c-ne__local-controls--hidden">
-        <button class="c-click-icon c-click-icon--major icon-trash"
+        <button class="c-icon-button c-icon-button--major icon-trash"
            title="Delete this entry"
            @click="deleteEntry">
         </button>

src/plugins/objectMigration/Migrations.js

@@ -25,176 +25,220 @@ define([
 ], function (
     uuid
 ) {
-    function isTelemetry(domainObject) {
-        if (openmct.telemetry.isTelemetryObject(domainObject)
-            && domainObject.type !== 'summary-widget'
-            && domainObject.type !== 'example.imagery') {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    function migrateDisplayLayout(domainObject, childObjects) {
-        const DEFAULT_GRID_SIZE = [32, 32];
-        let migratedObject = Object.assign({}, domainObject);
-        let panels = migratedObject.configuration.layout.panels;
-        let items = [];
-
-        Object.keys(panels).forEach(key => {
-            let panel = panels[key];
-            let domainObject = childObjects[key];
-
-            if (isTelemetry(domainObject)) {
-                items.push({
-                    width: panel.dimensions[0],
-                    height: panel.dimensions[1],
-                    x: panel.position[0],
-                    y: panel.position[1],
-                    useGrid: true,
-                    identifier: domainObject.identifier,
-                    id: uuid(),
-                    type: 'telemetry-view',
-                    displayMode: 'all',
-                    value: openmct.telemetry.getMetadata(domainObject).getDefaultDisplayValue(),
-                    stroke: "transparent",
-                    fill: "",
-                    color: "",
-                    size: "13px"
+    return function Migrations(openmct) {
+        function getColumnNameKeyMap(domainObject) {
+            let composition = openmct.composition.get(domainObject);
+            if (composition) {
+                return composition.load().then(composees => {
+                    return composees.reduce((nameKeyMap, composee) => {
+                        let metadata = openmct.telemetry.getMetadata(composee);
+                        if (metadata !== undefined) {
+                            metadata.values().forEach(value => {
+                                nameKeyMap[value.name] = value.key;
+                            });
+                        }
+                        return nameKeyMap;
+                    }, {});
                 });
             } else {
-                items.push({
-                    width: panel.dimensions[0],
-                    height: panel.dimensions[1],
-                    x: panel.position[0],
-                    y: panel.position[1],
-                    useGrid: true,
-                    identifier: domainObject.identifier,
-                    id: uuid(),
-                    type: 'subobject-view',
-                    hasFrame: panel.hasFrame
-                });
-            }
-        });
-
-        migratedObject.configuration.items = items;
-        migratedObject.configuration.layoutGrid = migratedObject.layoutGrid || DEFAULT_GRID_SIZE;
-        delete migratedObject.layoutGrid;
-        delete migratedObject.configuration.layout;
-        return migratedObject;
-    }
-
-    function migrateFixedPositionConfiguration(elements, telemetryObjects) {
-        const DEFAULT_STROKE = "transparent";
-        const DEFAULT_SIZE = "13px";
-        const DEFAULT_COLOR = "";
-        const DEFAULT_FILL = "";
-        let items = [];
-
-        elements.forEach(element => {
-            let item = {
-                x: element.x,
-                y: element.y,
-                width: element.width,
-                height: element.height,
-                useGrid: element.useGrid,
-                id: uuid()
-            };
-
-            if (element.type === "fixed.telemetry") {
-                item.type = "telemetry-view";
-                item.stroke = element.stroke || DEFAULT_STROKE;
-                item.fill = element.fill || DEFAULT_FILL;
-                item.color = element.color || DEFAULT_COLOR;
-                item.size = element.size || DEFAULT_SIZE;
-                item.identifier = telemetryObjects[element.id].identifier;
-                item.displayMode = element.titled ? 'all' : 'value';
-                item.value = openmct.telemetry.getMetadata(telemetryObjects[element.id]).getDefaultDisplayValue();
-            } else if (element.type === 'fixed.box') {
-                item.type = "box-view";
-                item.stroke = element.stroke || DEFAULT_STROKE;
-                item.fill = element.fill || DEFAULT_FILL;
-            } else if (element.type === 'fixed.line') {
-                item.type = "line-view";
-                item.x2 = element.x2;
-                item.y2 = element.y2;
-                item.stroke = element.stroke || DEFAULT_STROKE;
-                delete item.height;
-                delete item.width;
-            } else if (element.type === 'fixed.text') {
-                item.type = "text-view";
-                item.text = element.text;
-                item.stroke = element.stroke || DEFAULT_STROKE;
-                item.fill = element.fill || DEFAULT_FILL;
-                item.color = element.color || DEFAULT_COLOR;
-                item.size = element.size || DEFAULT_SIZE;
-            } else if (element.type === 'fixed.image') {
-                item.type = "image-view";
-                item.url =element.url;
-                item.stroke = element.stroke || DEFAULT_STROKE;
-            }
-
-            items.push(item);
-        });
-
-        return items;
-    }
-
-    return [
-        {
-            check(domainObject) {
-                return domainObject.type === 'layout' && domainObject.configuration.layout;
-            },
-            migrate(domainObject) {
-                let childObjects = {};
-                let promises = Object.keys(domainObject.configuration.layout.panels).map(key => {
-                    return openmct.objects.get(key)
-                        .then(object => {
-                            childObjects[key] = object;
-                        });
-                });
-
-                return Promise.all(promises)
-                    .then(function () {
-                        return migrateDisplayLayout(domainObject, childObjects);
-                    });
-            },
-        },
-        {
-            check(domainObject) {
-                return domainObject.type === 'telemetry.fixed' && domainObject.configuration['fixed-display'];
-            },
-            migrate(domainObject) {
-                const DEFAULT_GRID_SIZE = [64, 16];
-                let newLayoutObject = {
-                    identifier: domainObject.identifier,
-                    location: domainObject.location,
-                    name: domainObject.name,
-                    type: "layout"
-                };
-                let layoutType = openmct.types.get('layout');
-                layoutType.definition.initialize(newLayoutObject);
-                newLayoutObject.composition = domainObject.composition;
-                newLayoutObject.configuration.layoutGrid = domainObject.layoutGrid || DEFAULT_GRID_SIZE;
-
-                let elements = domainObject.configuration['fixed-display'].elements;
-                let telemetryObjects = {};
-                let promises = elements.map(element => {
-                    if (element.id) {
-                        return openmct.objects.get(element.id)
-                            .then(object => {
-                                telemetryObjects[element.id] = object;
-                            });
-                    }
-                });
-
-                return Promise.all(promises)
-                    .then(function () {
-                        newLayoutObject.configuration.items =
-                            migrateFixedPositionConfiguration(elements, telemetryObjects);
-                        return newLayoutObject;
-                    });
+                return Promise.resolve([]);
             }
         }
-    ];
+
+        function isTelemetry(domainObject) {
+            if (openmct.telemetry.isTelemetryObject(domainObject)
+                && domainObject.type !== 'summary-widget'
+                && domainObject.type !== 'example.imagery') {
+                return true;
+            } else {
+                return false;
+            }
+        }
+
+        function migrateDisplayLayout(domainObject, childObjects) {
+            const DEFAULT_GRID_SIZE = [32, 32];
+            let migratedObject = Object.assign({}, domainObject);
+            let panels = migratedObject.configuration.layout.panels;
+            let items = [];
+
+            Object.keys(panels).forEach(key => {
+                let panel = panels[key];
+                let domainObject = childObjects[key];
+
+                if (isTelemetry(domainObject)) {
+                    items.push({
+                        width: panel.dimensions[0],
+                        height: panel.dimensions[1],
+                        x: panel.position[0],
+                        y: panel.position[1],
+                        useGrid: true,
+                        identifier: domainObject.identifier,
+                        id: uuid(),
+                        type: 'telemetry-view',
+                        displayMode: 'all',
+                        value: openmct.telemetry.getMetadata(domainObject).getDefaultDisplayValue(),
+                        stroke: "transparent",
+                        fill: "",
+                        color: "",
+                        size: "13px"
+                    });
+                } else {
+                    items.push({
+                        width: panel.dimensions[0],
+                        height: panel.dimensions[1],
+                        x: panel.position[0],
+                        y: panel.position[1],
+                        useGrid: true,
+                        identifier: domainObject.identifier,
+                        id: uuid(),
+                        type: 'subobject-view',
+                        hasFrame: panel.hasFrame
+                    });
+                }
+            });
+
+            migratedObject.configuration.items = items;
+            migratedObject.configuration.layoutGrid = migratedObject.layoutGrid || DEFAULT_GRID_SIZE;
+            delete migratedObject.layoutGrid;
+            delete migratedObject.configuration.layout;
+            return migratedObject;
+        }
+
+        function migrateFixedPositionConfiguration(elements, telemetryObjects) {
+            const DEFAULT_STROKE = "transparent";
+            const DEFAULT_SIZE = "13px";
+            const DEFAULT_COLOR = "";
+            const DEFAULT_FILL = "";
+            let items = [];
+
+            elements.forEach(element => {
+                let item = {
+                    x: element.x,
+                    y: element.y,
+                    width: element.width,
+                    height: element.height,
+                    useGrid: element.useGrid,
+                    id: uuid()
+                };
+
+                if (element.type === "fixed.telemetry") {
+                    item.type = "telemetry-view";
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                    item.fill = element.fill || DEFAULT_FILL;
+                    item.color = element.color || DEFAULT_COLOR;
+                    item.size = element.size || DEFAULT_SIZE;
+                    item.identifier = telemetryObjects[element.id].identifier;
+                    item.displayMode = element.titled ? 'all' : 'value';
+                    item.value = openmct.telemetry.getMetadata(telemetryObjects[element.id]).getDefaultDisplayValue();
+                } else if (element.type === 'fixed.box') {
+                    item.type = "box-view";
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                    item.fill = element.fill || DEFAULT_FILL;
+                } else if (element.type === 'fixed.line') {
+                    item.type = "line-view";
+                    item.x2 = element.x2;
+                    item.y2 = element.y2;
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                    delete item.height;
+                    delete item.width;
+                } else if (element.type === 'fixed.text') {
+                    item.type = "text-view";
+                    item.text = element.text;
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                    item.fill = element.fill || DEFAULT_FILL;
+                    item.color = element.color || DEFAULT_COLOR;
+                    item.size = element.size || DEFAULT_SIZE;
+                } else if (element.type === 'fixed.image') {
+                    item.type = "image-view";
+                    item.url =element.url;
+                    item.stroke = element.stroke || DEFAULT_STROKE;
+                }
+
+                items.push(item);
+            });
+
+            return items;
+        }
+
+        return [
+            {
+                check(domainObject) {
+                    return domainObject.type === 'layout' && domainObject.configuration.layout;
+                },
+                migrate(domainObject) {
+                    let childObjects = {};
+                    let promises = Object.keys(domainObject.configuration.layout.panels).map(key => {
+                        return openmct.objects.get(key)
+                            .then(object => {
+                                childObjects[key] = object;
+                            });
+                    });
+
+                    return Promise.all(promises)
+                        .then(function () {
+                            return migrateDisplayLayout(domainObject, childObjects);
+                        });
+                }
+            },
+            {
+                check(domainObject) {
+                    return domainObject.type === 'telemetry.fixed' && domainObject.configuration['fixed-display'];
+                },
+                migrate(domainObject) {
+                    const DEFAULT_GRID_SIZE = [64, 16];
+                    let newLayoutObject = {
+                        identifier: domainObject.identifier,
+                        location: domainObject.location,
+                        name: domainObject.name,
+                        type: "layout"
+                    };
+                    let layoutType = openmct.types.get('layout');
+                    layoutType.definition.initialize(newLayoutObject);
+                    newLayoutObject.composition = domainObject.composition;
+                    newLayoutObject.configuration.layoutGrid = domainObject.layoutGrid || DEFAULT_GRID_SIZE;
+
+                    let elements = domainObject.configuration['fixed-display'].elements;
+                    let telemetryObjects = {};
+                    let promises = elements.map(element => {
+                        if (element.id) {
+                            return openmct.objects.get(element.id)
+                                .then(object => {
+                                    telemetryObjects[element.id] = object;
+                                });
+                        }
+                    });
+
+                    return Promise.all(promises)
+                        .then(function () {
+                            newLayoutObject.configuration.items =
+                                migrateFixedPositionConfiguration(elements, telemetryObjects);
+                            return newLayoutObject;
+                        });
+                }
+            },
+            {
+                check(domainObject) {
+                    return domainObject.type === 'table' &&
+                        domainObject.configuration.table;
+                },
+                migrate(domainObject) {
+                    let currentTableConfiguration = domainObject.configuration.table || {};
+                    let currentColumnConfiguration = currentTableConfiguration.columns || {};
+                    return getColumnNameKeyMap(domainObject).then(nameKeyMap => {
+                        let hiddenColumns = Object.keys(currentColumnConfiguration).filter(columnName => {
+                            return currentColumnConfiguration[columnName] === false;
+                        }).reduce((hiddenColumnsMap, hiddenColumnName) => {
+                            let key = nameKeyMap[hiddenColumnName];
+                            hiddenColumnsMap[key] = true;
+                            return hiddenColumnsMap;
+                        }, {});
+
+                        domainObject.configuration.hiddenColumns = hiddenColumns;
+                        delete domainObject.configuration.table;
+                        return domainObject;
+                    });
+                }
+            }
+        ];
+    }
 });

src/plugins/objectMigration/plugin.js

@@ -20,19 +20,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import migrations from './Migrations.js'
+import Migrations from './Migrations.js'
 
 export default function () {
-    function needsMigration(domainObject) {        
-        return migrations.some(m => m.check(domainObject));
-    }
-
-    function migrateObject(domainObject) {
-        return migrations.filter(m => m.check(domainObject))[0]
-            .migrate(domainObject);
-    }
-
     return function (openmct) {
+        let migrations = Migrations(openmct);
+
+        function needsMigration(domainObject) {
+            return migrations.some(m => m.check(domainObject));
+        }
+
+        function migrateObject(domainObject) {
+            return migrations.filter(m => m.check(domainObject))[0]
+                .migrate(domainObject);
+        }
+
         let wrappedFunction = openmct.objects.get;
         openmct.objects.get = function migrate(identifier) {
             return wrappedFunction.apply(openmct.objects, [identifier])
@@ -46,6 +48,6 @@ export default function () {
                     }
                     return object;
                 });
-        }        
+        }
     };
- }
+}

src/plugins/plot/res/templates/mct-plot.html

@@ -136,7 +136,7 @@
             <span class="t-object-alert t-alert-unsynced"
                   title="This plot is not currently displaying the latest data.
                 Reset Pan/zoom to return to view latest data."></span>
-            <div class="gl-plot-display-area">
+            <div class="gl-plot-display-area has-local-controls has-cursor-guides">
                 <mct-ticks axis="xAxis">
                     <div class="gl-plot-hash hash-v"
                          ng-repeat="tick in ticks track by tick.value"
@@ -147,7 +147,6 @@
                      </div>
                 </mct-ticks>
 
-
                 <mct-ticks axis="yAxis">
                      <div class="gl-plot-hash hash-h"
                           ng-repeat="tick in ticks track by tick.value"
@@ -155,7 +154,6 @@
                      </div>
                 </mct-ticks>
 
-
                 <mct-chart config="config"
                            series="series"
                            rectangles="rectangles"
@@ -164,23 +162,37 @@
                            the-y-axis="yAxis">
                 </mct-chart>
 
-                <div class="h-local-controls h-local-controls-overlay-content"
-                     ng-show="plotHistory.length">
-                    <div class="l-btn-set">
-                        <a class="s-button icon-arrow-left"
-                           ng-click="plot.back()"
-                           title="Restore previous pan/zoom">
-                        </a>
-                        <a class="s-button icon-reset"
-                           ng-click="plot.clear()"
-                           title="Reset pan/zoom">
-                        </a>
+                <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
+                    <div class="c-button-set c-button-set--strip-h">
+                        <button class="c-button icon-minus"
+                                ng-click="plot.zoom('out', 0.2)"
+                                title="Zoom out">
+                        </button>
+                        <button class="c-button icon-plus"
+                                ng-click="plot.zoom('in', 0.2)"
+                                title="Zoom in">
+                        </button>
+                    </div>
+                    <div class="c-button-set c-button-set--strip-h"
+                         ng-disabled="!plotHistory.length">
+                        <button class="c-button icon-arrow-left"
+                                ng-click="plot.back()"
+                                title="Restore previous pan/zoom">
+                        </button>
+                        <button class="c-button icon-reset"
+                                ng-click="plot.clear()"
+                                title="Reset pan/zoom">
+                        </button>
                     </div>
                 </div>
 
-                <span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
-                </span>
-
+                <!--Cursor guides-->
+                <div class="c-cursor-guide--v js-cursor-guide--v"
+                    ng-show="plot.cursorGuide">
+                </div>
+                <div class="c-cursor-guide--h js-cursor-guide--h"
+                    ng-show="plot.cursorGuide">
+                </div>
             </div>
 
             <div class="gl-plot-axis-area gl-plot-x"

src/plugins/plot/res/templates/plot.html

@@ -20,31 +20,34 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="PlotController as controller"
-    class="abs holder holder-plot has-control-bar"
-    ng-class="{
-        'loading': !!pending
-    }"
-    >
+    class="abs holder holder-plot has-control-bar">
     <div class="l-control-bar" ng-show="!controller.hideExportButtons">
-         <span class="c-button-set c-button-set--strip">
-            <a class="c-button icon-download"
+         <span class="c-button-set c-button-set--strip-h">
+            <button class="c-button icon-download"
                ng-click="controller.exportPNG()"
                title="Export This View's Data as PNG">
                  <span class="c-button__label">PNG</span>
-            </a>
-            <a class="c-button"
+            </button>
+            <button class="c-button"
                ng-click="controller.exportJPG()"
                title="Export This View's Data as JPG">
                  <span class="c-button__label">JPG</span>
-            </a>
+            </button>
         </span>
+        <button class="c-button icon-crosshair"
+                ng-class="{ 'is-active': controller.cursorGuide }"
+                ng-click="controller.toggleCursorGuide($event)"
+                title="Toggle cursor guides">
+        </button>
     </div>
 
     <div class="l-view-section">
+        <div class="c-loading--overlay loading"
+            ng-show="!!pending"></div>
         <mct-plot config="controller.config"
                   series="series"
                   the-y-axis="yAxis"
                   the-x-axis="xAxis">
-                  </mct-plot>
+        </mct-plot>
     </div>
 </span>

src/plugins/plot/res/templates/stacked-plot.html

@@ -20,26 +20,29 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="StackedPlotController as stackedPlot"
-      class="abs holder holder-plot has-control-bar t-plot-stacked"
-      ng-class="{
-          'loading': !!currentRequest.pending
-      }">
-
+      class="abs holder holder-plot has-control-bar t-plot-stacked">
     <div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
-       <span class="c-button-set c-button-set--strip">
-          <a class="c-button icon-download"
+       <span class="c-button-set c-button-set--strip-h">
+          <button class="c-button icon-download"
              ng-click="stackedPlot.exportPNG()"
              title="Export This View's Data as PNG">
               <span class="c-button__label">PNG</span>
-          </a>
-          <a class="c-button"
+          </button>
+          <button class="c-button"
              ng-click="stackedPlot.exportJPG()"
              title="Export This View's Data as JPG">
               <span class="c-button__label">JPG</span>
-          </a>
-      </span>
+          </button>
+        </span>
+        <button class="c-button icon-crosshair"
+                ng-class="{ 'is-active': stackedPlot.cursorGuide }"
+                ng-click="stackedPlot.toggleCursorGuide($event)"
+                title="Toggle cursor guides">
+        </button>
     </div>
     <div class="l-view-section">
+        <div class="c-loading--overlay loading"
+             ng-show="!!currentRequest.pending"></div>
         <div class="gl-plot child-frame"
             ng-repeat="telemetryObject in telemetryObjects"
             ng-class="{

src/plugins/plot/src/inspector/PlotOptionsController.js

@@ -76,7 +76,6 @@ define([
     PlotOptionsController.prototype.addSeries = function (series, index) {
         this.$scope.plotSeries[index] = series;
         series.locateOldObject(this.$scope.domainObject);
-
     };
 
     PlotOptionsController.prototype.resetAllSeries = function (series, index) {

src/plugins/plot/src/plot/MCTPlotController.js

@@ -78,6 +78,7 @@ define([
         this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
         this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
+        this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
 
         this.watchForMarquee();
 
@@ -92,6 +93,12 @@ define([
         this.$scope.series = this.config.series.models;
         this.$scope.legend = this.config.legend;
 
+        this.cursorGuideVertical = this.$element[0].querySelector('.js-cursor-guide--v');
+        this.cursorGuideHorizontal = this.$element[0].querySelector('.js-cursor-guide--h');
+        this.cursorGuide = false;
+
+        this.listenTo(this.$scope, 'cursorguide', this.toggleCursorGuide, this);
+
         this.listenTo(this.$scope, '$destroy', this.destroy, this);
         this.listenTo(this.$scope, 'plot:tickWidth', this.onTickWidthChange, this);
         this.listenTo(this.$scope, 'plot:highlight:set', this.onPlotHighlightSet, this);
@@ -143,6 +150,9 @@ define([
             y: this.yScale.invert(this.positionOverElement.y)
         };
 
+        if (this.cursorGuide) {
+            this.updateCrosshairs($event);
+        }
         this.highlightValues(this.positionOverPlot.x);
         this.updateMarquee();
         this.updatePan();
@@ -150,6 +160,11 @@ define([
         $event.preventDefault();
     };
 
+    MCTPlotController.prototype.updateCrosshairs = function ($event) {
+        this.cursorGuideVertical.style.left = ($event.clientX - this.chartElementBounds.x) + 'px';
+        this.cursorGuideHorizontal.style.top = ($event.clientY - this.chartElementBounds.y) + 'px';
+    };
+
     MCTPlotController.prototype.trackChartElementBounds = function ($event) {
         if ($event.target === this.$canvas[1]) {
             this.chartElementBounds = $event.target.getBoundingClientRect();
@@ -266,6 +281,103 @@ define([
         this.marquee = undefined;
     };
 
+    MCTPlotController.prototype.zoom = function (zoomDirection, zoomFactor) {
+        this.freeze();
+        this.trackHistory();
+        var currentXaxis = this.$scope.xAxis.get('displayRange'),
+            currentYaxis = this.$scope.yAxis.get('displayRange'),
+            xAxisDist= (currentXaxis.max - currentXaxis.min) * zoomFactor,
+            yAxisDist = (currentYaxis.max - currentYaxis.min) * zoomFactor;
+
+        if (zoomDirection === 'in') {
+            this.$scope.xAxis.set('displayRange', {
+                min: currentXaxis.min + xAxisDist,
+                max: currentXaxis.max - xAxisDist
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: currentYaxis.min + yAxisDist,
+                max: currentYaxis.max - yAxisDist
+            });
+        } else if (zoomDirection === 'out') {
+            this.$scope.xAxis.set('displayRange', {
+                min: currentXaxis.min - xAxisDist,
+                max: currentXaxis.max + xAxisDist
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: currentYaxis.min - yAxisDist,
+                max: currentYaxis.max + yAxisDist
+            });
+        }
+
+        this.$scope.$emit('user:viewport:change:end');
+    };
+
+    MCTPlotController.prototype.wheelZoom = function (event) {
+        const ZOOM_AMT = 0.1;
+        event.preventDefault();
+
+        if (!this.positionOverPlot) {
+            return;
+        }
+
+        this.freeze();
+        window.clearTimeout(this.stillZooming);
+
+        let xDisplayRange = this.$scope.xAxis.get('displayRange'),
+            yDisplayRange = this.$scope.yAxis.get('displayRange'),
+            xAxisDist = (xDisplayRange.max - xDisplayRange.min),
+            yAxisDist = (yDisplayRange.max - yDisplayRange.min),
+            xDistMouseToMax = xDisplayRange.max - this.positionOverPlot.x,
+            xDistMouseToMin = this.positionOverPlot.x - xDisplayRange.min,
+            yDistMouseToMax = yDisplayRange.max - this.positionOverPlot.y,
+            yDistMouseToMin = this.positionOverPlot.y - yDisplayRange.min,
+            xAxisMaxDist = xDistMouseToMax / xAxisDist,
+            xAxisMinDist = xDistMouseToMin / xAxisDist,
+            yAxisMaxDist = yDistMouseToMax / yAxisDist,
+            yAxisMinDist = yDistMouseToMin / yAxisDist;
+
+        let plotHistoryStep;
+
+        if (!plotHistoryStep) {
+            plotHistoryStep = {
+                x: xDisplayRange,
+                y: yDisplayRange
+            };
+        }
+
+        if (event.wheelDelta < 0) {
+
+            this.$scope.xAxis.set('displayRange', {
+                min: xDisplayRange.min + ((xAxisDist * ZOOM_AMT) * xAxisMinDist),
+                max: xDisplayRange.max - ((xAxisDist * ZOOM_AMT) * xAxisMaxDist)
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: yDisplayRange.min + ((yAxisDist * ZOOM_AMT) * yAxisMinDist),
+                max: yDisplayRange.max - ((yAxisDist * ZOOM_AMT) * yAxisMaxDist)
+            });
+        } else if (event.wheelDelta >= 0) {
+
+            this.$scope.xAxis.set('displayRange', {
+                min: xDisplayRange.min - ((xAxisDist * ZOOM_AMT) * xAxisMinDist),
+                max: xDisplayRange.max + ((xAxisDist * ZOOM_AMT) * xAxisMaxDist)
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: yDisplayRange.min - ((yAxisDist * ZOOM_AMT) * yAxisMinDist),
+                max: yDisplayRange.max + ((yAxisDist * ZOOM_AMT) * yAxisMaxDist)
+            });
+        }
+
+        this.stillZooming = window.setTimeout(function () {
+            this.plotHistory.push(plotHistoryStep);
+            plotHistoryStep = undefined;
+            this.$scope.$emit('user:viewport:change:end');
+        }.bind(this), 250);
+    };
+
     MCTPlotController.prototype.startPan = function ($event) {
         this.trackMousePosition($event);
         this.freeze();
@@ -362,5 +474,9 @@ define([
         this.stopListening();
     };
 
+    MCTPlotController.prototype.toggleCursorGuide = function ($event) {
+        this.cursorGuide = !this.cursorGuide;
+    };
+
     return MCTPlotController;
 });

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

@@ -59,6 +59,7 @@ define([
         this.openmct = openmct;
         this.objectService = objectService;
         this.exportImageService = exportImageService;
+        this.cursorGuide = false;
 
         $scope.pending = 0;
 
@@ -218,6 +219,7 @@ define([
 
     PlotController.prototype.stopLoading = function () {
         this.$scope.pending -= 1;
+        this.$scope.$digest();
     };
 
     /**
@@ -258,8 +260,8 @@ define([
     PlotController.prototype.updateFiltersAndResubscribe = function (updatedFilters) {
         this.config.series.forEach(function (series) {
             series.updateFiltersAndRefresh(updatedFilters[series.keyString]);
-        })
-    }
+        });
+    };
 
     /**
      * Export view as JPG.
@@ -283,6 +285,11 @@ define([
             }.bind(this));
     };
 
+    PlotController.prototype.toggleCursorGuide = function ($event) {
+        this.cursorGuide = !this.cursorGuide;
+        this.$scope.$broadcast('cursorguide', $event);
+    };
+
     return PlotController;
 
 });

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -35,6 +35,8 @@ define([
 
         this.$element = $element;
         this.exportImageService = exportImageService;
+        this.$scope = $scope;
+        this.cursorGuide = false;
 
         $scope.telemetryObjects = [];
 
@@ -145,5 +147,10 @@ define([
             }.bind(this));
     };
 
+    StackedPlotController.prototype.toggleCursorGuide = function ($event) {
+        this.cursorGuide = !this.cursorGuide;
+        this.$scope.$broadcast('cursorguide', $event);
+    };
+
     return StackedPlotController;
 });

src/plugins/remove/RemoveAction.js

@@ -88,13 +88,10 @@ export default class RemoveAction {
     }
 
     appliesTo(objectPath) {
-        let object = objectPath[0];
-        let objectType = object && this.openmct.types.get(object.type);
         let parent = objectPath[1];
         let parentType = parent && this.openmct.types.get(parent.type);
 
-        return objectType.definition.creatable &&
-            parentType &&
+        return parentType &&
             parentType.definition.creatable &&
             Array.isArray(parent.composition);
     }

src/plugins/summaryWidget/plugin.js

@@ -61,7 +61,6 @@ define([
                     "key": "url",
                     "name": "URL",
                     "control": "textfield",
-                    "pattern": "^(ftp|https?)\\:\\/\\/",
                     "required": false,
                     "cssClass": "l-input-lg"
                 },

src/plugins/summaryWidget/res/conditionTemplate.html

@@ -4,7 +4,7 @@
         <span class="t-configuration"> </span>
         <span class="t-value-inputs"> </span>
     </span>
-    <span class="flex-elem local-control local-controls-hidden l-condition-action-buttons-wrapper">
+    <span class="flex-elem c-local-controls--show-on-hover l-condition-action-buttons-wrapper">
         <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this condition"></a>
         <a class="s-icon-button icon-trash t-delete" title="Delete this condition"></a>
     </span>

src/plugins/summaryWidget/res/ruleTemplate.html

@@ -1,5 +1,5 @@
 <div class="c-sw-rule">
-    <div class="c-sw-rule__ui l-compact-form has-local-controls l-widget-rule s-widget-rule">
+    <div class="c-sw-rule__ui l-compact-form l-widget-rule s-widget-rule has-local-controls">
         <div class="c-sw-rule__ui__header widget-rule-header">
             <div class="c-sw-rule__grippy-wrapper">
                 <div class="c-sw-rule__grippy t-grippy local-control local-controls-hidden"></div>
@@ -11,7 +11,7 @@
             </div>
             <div class="flex-elem rule-title">Default Title</div>
             <div class="flex-elem rule-description grows">Rule description goes here</div>
-            <div class="flex-elem local-control local-controls-hidden l-rule-action-buttons-wrapper">
+            <div class="flex-elem c-local-controls--show-on-hover l-rule-action-buttons-wrapper">
                 <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
                 <a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
             </div>

src/plugins/summaryWidget/res/testDataItemTemplate.html

@@ -7,7 +7,7 @@
                 <span class="equal-to hidden"> equal to </span>
                 <span class="t-value-inputs"></span>
             </span>
-            <span class="flex-elem local-control local-controls-hidden l-widget-test-data-item-action-buttons-wrapper">
+            <span class="flex-elem c-local-controls--show-on-hover l-widget-test-data-item-action-buttons-wrapper">
                 <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this test value"></a>
                 <a class="s-icon-button icon-trash t-delete" title="Delete this test value"></a>
             </span>

src/plugins/summaryWidget/res/widgetTemplate.html

@@ -3,11 +3,9 @@
         <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
         <div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">Default Static Name</div>
     </a>
-    <div class="c-summary-widget__message holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
-        <div class="w-message-contents l-message-body-only">
-            <div class="message-body">
-                You must add at least one telemetry object to edit this widget.
-            </div>
+    <div class="js-summary-widget__message c-summary-widget__message c-message c-message--simple message-severity-alert">
+        <div class="c-summary-widget__text">
+            You must add at least one telemetry object to edit this widget.
         </div>
     </div>
     <div class="c-sw-edit__ui holder l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">

src/plugins/tabs/components/tabs.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="c-tabs-view">
-        <div class="c-tabs-view__tabs-holder c-compact-button-holder"
+        <div class="c-tabs-view__tabs-holder c-tabs"
             :class="{
                 'is-dragging': isDragging,
                 'is-mouse-over': allowDrop
@@ -11,7 +11,7 @@
             </div>
             <div class="c-tabs-view__empty-message"
                  v-if="!tabsList.length > 0">Drag objects here to add them to this view.</div>
-            <button class="c-tabs-view__tab c-compact-button"
+            <button class="c-tabs-view__tab c-tab"
                 v-for="(tab,index) in tabsList"
                 :key="index"
                 :class="[
@@ -26,7 +26,8 @@
             v-for="(tab, index) in tabsList"
             :key="index"
             :class="{'invisible': !isCurrent(tab)}">
-            <div class="c-tabs-view__object-name l-browse-bar__object-name--w"
+            <div v-if="currentTab"
+                 class="c-tabs-view__object-name l-browse-bar__object-name--w"
                  :class="currentTab.type.definition.cssClass">
                 <div class="l-browse-bar__object-name">
                     {{currentTab.domainObject.name}}
@@ -53,11 +54,16 @@
         }
 
         &__tabs-holder {
-            @include userSelectNone();
-            flex: 0 0 auto;
             min-height: $h;
         }
 
+        &__tab {
+            &:before {
+                margin-right: $interiorMarginSm;
+                opacity: 0.7;
+            }
+        }
+
         &__object-holder {
             flex: 1 1 auto;
             display: flex;
@@ -76,6 +82,7 @@
         }
 
         &__empty-message {
+            background: rgba($colorBodyFg, 0.1);
             color: rgba($colorBodyFg, 0.7);
             font-style: italic;
             text-align: center;
@@ -140,6 +147,13 @@ export default {
                 this.showTab(this.tabsList[this.tabsList.length - 1]);
             }
         },
+        onReorder(reorderPlan) {
+            let oldTabs = this.tabsList.slice();
+
+            reorderPlan.forEach(reorderEvent => {
+                this.$set(this.tabsList, reorderEvent.newIndex, oldTabs[reorderEvent.oldIndex]);
+            });
+        },
         onDrop(e) {
             this.setCurrentTab = true;
         },
@@ -166,6 +180,7 @@ export default {
         if (this.composition) {
             this.composition.on('add', this.addItem);
             this.composition.on('remove', this.removeItem);
+            this.composition.on('reorder', this.onReorder);
             this.composition.load();
         }
 
@@ -182,6 +197,7 @@ export default {
     destroyed() {
         this.composition.off('add', this.addItem);
         this.composition.off('remove', this.removeItem);
+        this.composition.off('reorder', this.onReorder);
 
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);

src/plugins/telemetryTable/TelemetryTable.js

@@ -59,7 +59,9 @@ define([
             this.filterObserver = undefined;
 
             this.createTableRowCollections();
+
             openmct.time.on('bounds', this.refreshData);
+            openmct.time.on('timeSystem', this.refreshData);
         }
 
         initialize() {
@@ -73,13 +75,17 @@ define([
 
         createTableRowCollections() {
             this.boundedRows = new BoundedTableRowCollection(this.openmct);
-
-            //By default, sort by current time system, ascending.
             this.filteredRows = new FilteredTableRowCollection(this.boundedRows);
-            this.filteredRows.sortBy({
+
+            //Fetch any persisted default sort
+            let sortOptions = this.configuration.getConfiguration().sortOptions;
+
+            //If no persisted sort order, default to sorting by time system, ascending.
+            sortOptions = sortOptions || {
                 key: this.openmct.time.timeSystem().key,
                 direction: 'asc'
-            });
+            };
+            this.filteredRows.sortBy(sortOptions);
         }
 
         loadComposition() {
@@ -166,6 +172,7 @@ define([
             if (!isTick) {
                 this.filteredRows.clear();
                 this.boundedRows.clear();
+                this.boundedRows.sortByTimeSystem(this.openmct.time.timeSystem());
                 this.telemetryObjects.forEach(this.requestDataFor);
             }
         }
@@ -208,11 +215,22 @@ define([
             delete this.subscriptions[keyString];
         }
 
+        sortBy(sortOptions) {
+            this.filteredRows.sortBy(sortOptions);
+
+            if (this.openmct.editor.isEditing()) {
+                let configuration = this.configuration.getConfiguration();
+                configuration.sortOptions = sortOptions;
+                this.configuration.updateConfiguration(configuration);
+            }
+        }
+
         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.on('timeSystem', this.refreshData);
             if (this.filterObserver) {
                 this.filterObserver();
             }

src/plugins/telemetryTable/TelemetryTableColumn.js

@@ -49,7 +49,7 @@ define(function () {
 
         getFormattedValue(telemetryDatum) {
             let formattedValue = this.formatter.format(telemetryDatum);
-            if (typeof formattedValue !== 'string') {
+            if (formattedValue !== undefined && typeof formattedValue !== 'string') {
                 return formattedValue.toString();
             } else {
                 return formattedValue;

src/plugins/telemetryTable/TelemetryTableViewProvider.js

@@ -32,12 +32,20 @@ define([
     Vue
 ) {
     function TelemetryTableViewProvider(openmct) {
+        function hasTelemetry(domainObject) {
+            if (!domainObject.hasOwnProperty('telemetry')) {
+                return false;
+            }
+            let metadata = openmct.telemetry.getMetadata(domainObject);
+            return metadata.values().length > 0;
+        }
         return {
             key: 'table',
             name: 'Telemetry Table',
             cssClass: 'icon-tabular-realtime',
             canView(domainObject) {
-                return domainObject.type === 'table' || domainObject.hasOwnProperty('telemetry');
+                return domainObject.type === 'table' ||
+                    hasTelemetry(domainObject)
             },
             canEdit(domainObject) {
                 return domainObject.type === 'table';

src/plugins/telemetryTable/collections/BoundedTableRowCollection.js

@@ -41,7 +41,6 @@ define(
                 this.bounds = this.bounds.bind(this)
 
                 this.sortByTimeSystem(openmct.time.timeSystem());
-                openmct.time.on('timeSystem', this.sortByTimeSystem);
 
                 this.lastBounds = openmct.time.bounds();
                 openmct.time.on('bounds', this.bounds);
@@ -51,8 +50,8 @@ define(
                 // Insert into either in-bounds array, or the future buffer.
                 // Data in the future buffer will be re-evaluated for possible 
                 // insertion on next bounds change
-                let beforeStartOfBounds = item.datum[this.sortOptions.key] < this.lastBounds.start;
-                let afterEndOfBounds = item.datum[this.sortOptions.key] > this.lastBounds.end;
+                let beforeStartOfBounds = this.parseTime(item.datum[this.sortOptions.key]) < this.lastBounds.start;
+                let afterEndOfBounds = this.parseTime(item.datum[this.sortOptions.key]) > this.lastBounds.end;
 
                 if (!afterEndOfBounds && !beforeStartOfBounds) {
                     return super.addOne(item);
@@ -64,6 +63,12 @@ define(
 
             sortByTimeSystem(timeSystem) {
                 this.sortBy({key: timeSystem.key, direction: 'asc'});
+                let formatter = this.openmct.telemetry.getValueFormatter({
+                    key: timeSystem.key,
+                    source: timeSystem.key,
+                    format: timeSystem.timeFormat
+                });
+                this.parseTime = formatter.parse.bind(formatter);
                 this.futureBuffer.sortBy({key: timeSystem.key, direction: 'asc'});
             }
 
@@ -131,7 +136,6 @@ define(
             }
 
             destroy() {
-                this.openmct.time.off('timeSystem', this.sortByTimeSystem);
                 this.openmct.time.off('bounds', this.bounds);
             }
         }

src/plugins/telemetryTable/collections/SortedTableRowCollection.js

@@ -127,7 +127,8 @@ define(
                     if (testRowValue > lastValue) {
                         return this.rows.length;
                     } else if (testRowValue === lastValue) {
-                        return this.rows.length - 1;
+                        // Maintain stable sort
+                        return this.rows.length;
                     } else if (testRowValue <= firstValue) {
                         return 0;
                     } else {
@@ -141,7 +142,8 @@ define(
                     } else if (testRowValue < lastValue) {
                         return this.rows.length;
                     } else if (testRowValue === lastValue) {
-                        return this.rows.length - 1;
+                        // Maintain stable sort
+                        return this.rows.length;
                     } else {
                         // Use a custom comparison function to support descending sort.
                         return lodashFunction(rows, testRow, (thisRow) => {

src/plugins/telemetryTable/components/table.vue

@@ -23,11 +23,11 @@
 <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
      :class="{'loading': loading}">
     <div class="c-table__control-bar c-control-bar">
-        <a class="c-button icon-download labeled"
+        <button class="c-button icon-download labeled"
            v-on:click="exportAsCSV()"
            title="Export This View's Data">
             <span class="c-button__label">Export As CSV</span>
-        </a>
+        </button>
     </div>
     <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
     <!-- Headers table -->
@@ -142,6 +142,7 @@
             // Wraps __headers table
             flex: 0 0 auto;
             overflow: hidden;
+            background: $colorTabHeaderBg;
         }
 
         /******************************* TABLES */
@@ -172,6 +173,7 @@
         &__body-w {
             // Wraps __body table provides scrolling
             flex: 1 1 100%;
+            height: 0; // Fixes Chrome 73 overflow bug
             overflow-x: auto;
             overflow-y: scroll;
         }
@@ -408,7 +410,7 @@ export default {
                     direction: 'asc'
                 }
             }
-            this.table.filteredRows.sortBy(this.sortOptions);
+            this.table.sortBy(this.sortOptions);
         },
         scroll() {
             if (!this.processingScroll) {

src/plugins/timeConductor/Conductor.vue

@@ -23,73 +23,76 @@
     <div class="c-conductor"
          :class="[isFixed ? 'is-fixed-mode' : 'is-realtime-mode']">
         <form class="u-contents" ref="conductorForm" @submit.prevent="updateTimeFromConductor">
-            <button class="c-input--submit" type="submit" ref="submitButton"></button>
-            <ConductorModeIcon class="c-conductor__mode-icon"></ConductorModeIcon>
+            <div class="c-conductor__time-bounds">
+                <button class="c-input--submit" type="submit" ref="submitButton"></button>
+                <ConductorModeIcon class="c-conductor__mode-icon"></ConductorModeIcon>
 
-            <div class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
-                 v-if="isFixed">
-                <!-- Fixed start -->
-                <div class="c-conductor__start-fixed__label">Start</div>
-                <input class="c-input--datetime"
-                       type="text" autocorrect="off" spellcheck="false"
-                       ref="startDate"
-                       v-model="formattedBounds.start"
-                       @change="validateAllBounds(); submitForm()" />
-                <date-picker
-                        v-if="isFixed && isUTCBased"
-                        :default-date-time="formattedBounds.start"
-                        :formatter="timeFormatter"
-                        @date-selected="startDateSelected"></date-picker>
-            </div>
-
-            <div class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"
-                 v-if="!isFixed">
-                <!-- RT start -->
-                <div class="c-direction-indicator icon-minus"></div>
-                <input class="c-input--hrs-min-sec"
-                       type="text" autocorrect="off"
-                       ref="startOffset"
-                       spellcheck="false"
-                       v-model="offsets.start"
-                       @change="validateAllOffsets(); submitForm()">
-            </div>
-
-            <div class="c-ctrl-wrapper c-conductor-input c-conductor__end-fixed">
-                <!-- Fixed end and RT 'last update' display -->
-                <div class="c-conductor__end-fixed__label">
-                    {{ isFixed ? 'End' : 'Updated' }}
+                <div class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
+                     v-if="isFixed">
+                    <!-- Fixed start -->
+                    <div class="c-conductor__start-fixed__label">Start</div>
+                    <input class="c-input--datetime"
+                           type="text" autocorrect="off" spellcheck="false"
+                           ref="startDate"
+                           v-model="formattedBounds.start"
+                           @change="validateAllBounds(); submitForm()" />
+                    <date-picker
+                            v-if="isFixed && isUTCBased"
+                            :default-date-time="formattedBounds.start"
+                            :formatter="timeFormatter"
+                            @date-selected="startDateSelected"></date-picker>
                 </div>
-                <input class="c-input--datetime"
-                       type="text" autocorrect="off" spellcheck="false"
-                       v-model="formattedBounds.end"
-                       :disabled="!isFixed"
-                       ref="endDate"
-                       @change="validateAllBounds(); submitForm()">
-                <date-picker
-                        v-if="isFixed && isUTCBased"
-                        class="c-ctrl-wrapper--menus-left"
-                        :default-date-time="formattedBounds.end"
-                        :formatter="timeFormatter"
-                        @date-selected="endDateSelected"></date-picker>
-            </div>
 
-            <div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
-                 v-if="!isFixed">
-                <!-- RT end -->
-                <div class="c-direction-indicator icon-plus"></div>
-                <input class="c-input--hrs-min-sec"
-                       type="text"
-                       autocorrect="off"
-                       spellcheck="false"
-                       ref="endOffset"
-                       v-model="offsets.end"
-                       @change="validateAllOffsets(); submitForm()">
-            </div>
+                <div class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"
+                     v-if="!isFixed">
+                    <!-- RT start -->
+                    <div class="c-direction-indicator icon-minus"></div>
+                    <input class="c-input--hrs-min-sec"
+                           type="text" autocorrect="off"
+                           ref="startOffset"
+                           spellcheck="false"
+                           v-model="offsets.start"
+                           @change="validateAllOffsets(); submitForm()">
+                </div>
 
-            <conductor-axis
-                    class="c-conductor__ticks"
-                    :bounds="rawBounds"
-                    @panAxis="setViewFromBounds"></conductor-axis>
+                <div class="c-ctrl-wrapper c-conductor-input c-conductor__end-fixed">
+                    <!-- Fixed end and RT 'last update' display -->
+                    <div class="c-conductor__end-fixed__label">
+                        {{ isFixed ? 'End' : 'Updated' }}
+                    </div>
+                    <input class="c-input--datetime"
+                           type="text" autocorrect="off" spellcheck="false"
+                           v-model="formattedBounds.end"
+                           :disabled="!isFixed"
+                           ref="endDate"
+                           @change="validateAllBounds(); submitForm()">
+                    <date-picker
+                            v-if="isFixed && isUTCBased"
+                            class="c-ctrl-wrapper--menus-left"
+                            :default-date-time="formattedBounds.end"
+                            :formatter="timeFormatter"
+                            @date-selected="endDateSelected"></date-picker>
+                </div>
+
+                <div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
+                     v-if="!isFixed">
+                    <!-- RT end -->
+                    <div class="c-direction-indicator icon-plus"></div>
+                    <input class="c-input--hrs-min-sec"
+                           type="text"
+                           autocorrect="off"
+                           spellcheck="false"
+                           ref="endOffset"
+                           v-model="offsets.end"
+                           @change="validateAllOffsets(); submitForm()">
+                </div>
+
+                <conductor-axis
+                        class="c-conductor__ticks"
+                        :bounds="rawBounds"
+                        @panAxis="setViewFromBounds"></conductor-axis>
+
+            </div>
             <div class="c-conductor__controls">
                 <!-- Mode, time system menu buttons and duration slider -->
                 <ConductorMode class="c-conductor__mode-select"></ConductorMode>
@@ -113,17 +116,17 @@
 
     /*********************************************** CONDUCTOR LAYOUT */
     .c-conductor {
-        display: grid;
-        grid-column-gap: $interiorMargin;
-        grid-row-gap: $interiorMargin;
-        align-items: center;
+        &__time-bounds {
+            display: grid;
+            grid-column-gap: $interiorMargin;
+            grid-row-gap: $interiorMargin;
+            align-items: center;
 
-        // Default: fixed mode, desktop
-        grid-template-rows: 1fr 1fr;
-        grid-template-columns: 20px auto 1fr auto;
-        grid-template-areas:
-                "tc-mode-icon tc-start tc-ticks tc-end"
-                "tc-controls tc-controls tc-controls tc-controls";
+            // Default: fixed mode, desktop
+            grid-template-rows: 1fr;
+            grid-template-columns: 20px auto 1fr auto;
+            grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
+        }
 
         &__mode-icon {
             grid-area: tc-mode-icon;
@@ -163,10 +166,10 @@
         }
 
         &.is-realtime-mode {
-            grid-template-columns: 20px auto 1fr auto auto;
-            grid-template-areas:
-                    "tc-mode-icon tc-start tc-ticks tc-updated tc-end"
-                    "tc-controls tc-controls tc-controls tc-controls tc-controls";
+            .c-conductor__time-bounds {
+                grid-template-columns: 20px auto 1fr auto auto;
+                grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-updated tc-end";
+            }
 
             .c-conductor__end-fixed {
                 grid-area: tc-updated;
@@ -174,9 +177,15 @@
         }
 
         body.phone.portrait & {
-            grid-row-gap: $interiorMargin;
-            grid-template-rows: auto auto auto;
-            grid-template-columns: 20px auto auto;
+            .c-conductor__time-bounds {
+                grid-row-gap: $interiorMargin;
+                grid-template-rows: auto auto;
+                grid-template-columns: 20px auto auto;
+            }
+
+            .c-conductor__controls {
+                padding-left: 25px; // Line up visually with other controls
+            }
 
             &__mode-icon {
                 grid-row: 1;
@@ -200,17 +209,19 @@
                     justify-content: flex-start;
                 }
 
-                grid-template-areas:
+                .c-conductor__time-bounds {
+                    grid-template-areas:
                         "tc-mode-icon tc-start tc-start"
                         "tc-mode-icon tc-end tc-end"
-                        "tc-mode-icon tc-controls tc-controls";
-            }
+                    }
+                }
 
             &.is-realtime-mode {
-                grid-template-areas:
+                .c-conductor__time-bounds {
+                    grid-template-areas:
                         "tc-mode-icon tc-start tc-updated"
-                        "tc-mode-icon tc-end tc-end"
-                        "tc-mode-icon tc-controls tc-controls";
+                        "tc-mode-icon tc-end tc-end";
+                }
 
                 .c-conductor__end-fixed {
                     justify-content: flex-end;

src/plugins/timeConductor/DatePicker.vue

@@ -21,7 +21,7 @@
  *****************************************************************************/
 <template>
     <div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up c-datetime-picker__wrapper" ref="calendarHolder">
-        <a class="c-click-icon icon-calendar"
+        <a class="c-icon-button icon-calendar"
            @click="toggle"></a>
         <div class="c-menu c-menu--mobile-modal c-datetime-picker"
              v-if="open">
@@ -30,11 +30,11 @@
                         @click="toggle"></button>
             </div>
             <div class="c-datetime-picker__pager c-pager l-month-year-pager">
-                <div class="c-pager__prev c-click-icon icon-arrow-left"
-                   @click="changeMonth(-1)"></div>
+                <div class="c-pager__prev c-icon-button icon-arrow-left"
+                   @click.stop="changeMonth(-1)"></div>
                 <div class="c-pager__month-year">{{model.month}} {{model.year}}</div>
-                <div class="c-pager__next c-click-icon icon-arrow-right"
-                   @click="changeMonth(1)"></div>
+                <div class="c-pager__next c-icon-button icon-arrow-right"
+                   @click.stop="changeMonth(1)"></div>
             </div>
             <div class="c-datetime-picker__calendar c-calendar">
                 <ul class="c-calendar__row--header l-cal-row">
@@ -91,7 +91,7 @@
         grid-template-columns: auto 1fr auto;
         align-items: center;
 
-        .c-click-icon {
+        .c-icon-button {
             font-size: 0.8em;
         }
 
@@ -319,12 +319,6 @@ export default {
     mounted: function () {
         this.updateFromModel(this.defaultDateTime);
         this.updateViewForMonth();
-    },
-    destroyed: function () {
-        document.addEventListener('click', this.hidePicker, {
-            capture: true
-        });
     }
-
 }
 </script>

src/styles-new/_about.scss

@@ -0,0 +1,120 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+// Used by About screen, licenses, etc.
+.c-splash-image {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-image: url('../ui/layout/assets/images/bg-splash.jpg');
+
+    &:before,
+    &:after {
+        background-position: center;
+        background-repeat: no-repeat;
+        position: absolute;
+        background-image: url('../ui/layout/assets/images/logo-app-shdw.svg');
+        background-size: contain;
+        content: '';
+    }
+
+    &:before {
+        // NASA logo, dude
+        $w: 5%;
+        $m: 10px;
+        background-image: url('../ui/layout/assets/images/logo-nasa.svg');
+        top: $m;
+        right: auto;
+        bottom: auto;
+        left: $m;
+        height: auto;
+        width: $w * 2;
+        padding-bottom: $w;
+        padding-top: $w;
+    }
+
+    &:after {
+        // App logo
+        top: 0;
+        right: 15%;
+        bottom: 0;
+        left: 15%;
+    }
+}
+
+.c-about {
+    &--splash {
+        // Large initial image after click on app logo with text beneath
+        @include abs();
+        display: flex;
+        flex-direction: column;
+    }
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__image,
+    &__text {
+        height: 50%;
+        flex: 1 1 0;
+    }
+
+    &__text {
+        overflow: auto;
+    }
+
+    &--licenses {
+        padding: 0 10%;
+        .c-license {
+            &__text {
+                color: pushBack($overlayColorFg, 20%);
+            }
+
+            + .c-license {
+                border-top: 1px solid $colorInteriorBorder;
+                margin-top: 2em;
+            }
+        }
+    }
+
+    a {
+        color: $colorAboutLink;
+    }
+
+    em {
+        color: pushBack($overlayColorFg, 20%);
+    }
+
+    h1, h2, h3 {
+        font-weight: normal;
+        margin-bottom: 1em;
+    }
+
+    h1 {
+        font-size: 2.25em;
+    }
+
+    h2 {
+        font-size: 1.5em;
+    }
+}

src/styles-new/_constants-espresso.scss

@@ -83,6 +83,9 @@ $uiColor: #00b2ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
+$filterHov: brightness(1.3); // Tree, location items
+$colorSelectedBg: pushBack($colorKey, 10%);
+$colorSelectedFg: pullForward($colorBodyFg, 20%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -98,6 +101,20 @@ $colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324de
 $colorStatusError: #da0004;
 $colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
 $colorStatusBtnBg: #666; // Where is this used?
+$colorAlert: #ff3c00;
+$colorAlertFg: #fff;
+$colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
+$colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
+$colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
+$colorCommand: #3693bd;
+$colorCommandFg: #fff;
+$colorInfo: #2294a2;
+$colorInfoFg: #fff;
+$colorOk: #33cc33;
+$colorOkFg: #fff;
 
 // States
 $colorPausedBg: #ff9900;
@@ -173,9 +190,13 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.6);
-$colorClickIconFgHov: $colorKeyHov;
+$colorBtnActiveBg: $colorOk;
+$colorBtnActiveFg: $colorOkFg;
+$colorBtnSelectedBg: $colorSelectedBg;
+$colorBtnSelectedFg: $colorSelectedFg;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
@@ -183,6 +204,9 @@ $colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
+$colorCursorGuide: rgba(white, 0.6);
+$shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
+$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
 
 // Menus
 $colorMenuBg: pullForward($colorBodyBg, 15%);
@@ -241,7 +265,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 20%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@@ -262,19 +286,9 @@ $colorLimitRedBg: #940000;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
 
-// Status
-$colorAlert: #ff3c00;
-$colorWarningHi: #990000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
 $colorInfoBubbleFg: #666;
-$colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
@@ -296,6 +310,9 @@ $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
 $colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);
+$colorSummaryBg: #2c2c2c;
+$colorSummaryFg: rgba($colorBodyFg, 0.7);
+$colorSummaryFgEm: $colorBodyFg;
 
 // Plot
 $colorPlotBg: rgba(black, 0.05);
@@ -314,7 +331,7 @@ $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
+$colorItemTreeSelectedBg: $colorSelectedBg;
 $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
 $colorItemTreeEditingBg: pushBack($editUIColor, 20%);
@@ -361,7 +378,7 @@ $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
 
 // About Screen
-$colorAboutLink: $colorKeySubtle;
+$colorAboutLink: #9bb5ff;
 
 // Loading
 $colorLoadingFg: #776ba2;

src/styles-new/_constants-maelstrom.scss

@@ -87,6 +87,9 @@ $uiColor: #00b2ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
+$filterHov: brightness(1.3); // Tree, location items
+$colorSelectedBg: pushBack($colorKey, 10%);
+$colorSelectedFg: pullForward($colorBodyFg, 20%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -102,6 +105,20 @@ $colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324de
 $colorStatusError: #da0004;
 $colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
 $colorStatusBtnBg: #666; // Where is this used?
+$colorAlert: #ff3c00;
+$colorAlertFg: #fff;
+$colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
+$colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
+$colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
+$colorCommand: #3693bd;
+$colorCommandFg: #fff;
+$colorInfo: #2294a2;
+$colorInfoFg: #fff;
+$colorOk: #33cc33;
+$colorOkFg: #fff;
 
 // States
 $colorPausedBg: #ff9900;
@@ -177,9 +194,13 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.6);
-$colorClickIconFgHov: $colorKeyHov;
+$colorBtnActiveBg: $colorOk;
+$colorBtnActiveFg: $colorOkFg;
+$colorBtnSelectedBg: $colorSelectedBg;
+$colorBtnSelectedFg: $colorSelectedFg;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
@@ -187,6 +208,9 @@ $colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
+$colorCursorGuide: rgba(white, 0.6);
+$shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
+$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
 
 // Menus
 $colorMenuBg: pullForward($colorBodyBg, 15%);
@@ -245,7 +269,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 20%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@@ -266,19 +290,9 @@ $colorLimitRedBg: #940000;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
 
-// Status
-$colorAlert: #ff3c00;
-$colorWarningHi: #990000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
 $colorInfoBubbleFg: #666;
-$colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
@@ -300,6 +314,9 @@ $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
 $colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);
+$colorSummaryBg: #2c2c2c;
+$colorSummaryFg: rgba($colorBodyFg, 0.7);
+$colorSummaryFgEm: $colorBodyFg;
 
 // Plot
 $colorPlotBg: rgba(black, 0.05);
@@ -318,7 +335,7 @@ $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
+$colorItemTreeSelectedBg: $colorSelectedBg;
 $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
 $colorItemTreeEditingBg: pushBack($editUIColor, 20%);
@@ -365,7 +382,7 @@ $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
 
 // About Screen
-$colorAboutLink: $colorKeySubtle;
+$colorAboutLink: #9bb5ff;
 
 // Loading
 $colorLoadingFg: #776ba2;

src/styles-new/_constants-mobile.scss

@@ -27,8 +27,8 @@ $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
 $mobileOverlayMargin: 20px;
 $mobileMenuIconD: 34px;
-$phoneItemH: floor($ueBrowseGridItemLg/4);
-$tabletItemH: floor($ueBrowseGridItemLg/3);
+$phoneItemH: floor($gridItemMobile / 4);
+$tabletItemH: floor($gridItemMobile / 3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;

src/styles-new/_constants-snow.scss

@@ -83,6 +83,9 @@ $uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
+$filterHov: brightness(1.3); // Tree, location items
+$colorSelectedBg: pushBack($colorKey, 40%);
+$colorSelectedFg: pullForward($colorBodyFg, 10%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -98,6 +101,20 @@ $colorStatusAlertFilter: invert(89%) sepia(26%) saturate(5035%) hue-rotate(316de
 $colorStatusError: #da0004;
 $colorStatusErrorFilter: invert(8%) sepia(96%) saturate(4511%) hue-rotate(352deg) brightness(136%) contrast(114%);
 $colorStatusBtnBg: #666; // Where is this used?
+$colorAlert: #ff3c00;
+$colorAlertFg: #fff;
+$colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
+$colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
+$colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
+$colorCommand: #3693bd;
+$colorCommandFg: #fff;
+$colorInfo: #2294a2;
+$colorInfoFg: #fff;
+$colorOk: #33cc33;
+$colorOkFg: #fff;
 
 // States
 $colorPausedBg: #ff9900;
@@ -173,9 +190,13 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.2);
-$colorClickIconFgHov: $colorKeyHov;
+$colorBtnActiveBg: $colorOk;
+$colorBtnActiveFg: $colorOkFg;
+$colorBtnSelectedBg: $colorBtnMajorBg;
+$colorBtnSelectedFg: $colorBtnMajorFg;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.2);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: pushBack($colorDropHint, 40%);
@@ -183,6 +204,9 @@ $colorDropHintFg: pushBack($colorDropHint, 0);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
+$colorCursorGuide: rgba(black, 0.6);
+$shdwCursorGuide: rgba(white, 0.4) 0 0 2px;
+$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
 
 // Menus
 $colorMenuBg: pushBack($colorBodyBg, 10%);
@@ -241,7 +265,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 40%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@@ -262,15 +286,6 @@ $colorLimitRedBg: #ff0000;
 $colorLimitRedFg: #fff;
 $colorLimitRedIc: #ffa99a;
 
-// Status
-$colorAlert: #ff3c00;
-$colorWarningHi: #990000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;
@@ -295,6 +310,9 @@ $colorTabHeaderFg: pullForward($colorBodyFg, 20%);
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
 $colorTabGroupHeaderFg: pullForward($colorTabGroupHeaderBg, 40%);
+$colorSummaryBg: #999;
+$colorSummaryFg: rgba($colorBodyBg, 0.7);
+$colorSummaryFgEm: white;
 
 // Plot
 $colorPlotBg: rgba(black, 0.05);
@@ -313,8 +331,8 @@ $colorItemTreeHoverFg: pullForward($colorBodyFg, 10%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
-$colorItemTreeSelectedFg: $colorBodyBg;
+$colorItemTreeSelectedBg: $colorSelectedBg;
+$colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
 $colorItemTreeEditingBg: pushBack($editUIColor, 20%);
 $colorItemTreeEditingFg: $editUIColor;
@@ -337,6 +355,7 @@ $scrollbarThumbColorMenuHov: darken($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterHandleD: 2px;
+$splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);

src/styles-new/_constants.scss

@@ -40,6 +40,7 @@ $menuLineH: 1.5rem;
 $treeItemIndent: 16px;
 $treeTypeIconW: 18px;
 $overlayOuterMarginLg: 5%;
+$overlayOuterMarginFullscreen: 0%;
 $overlayOuterMarginDialog: 20%;
 $overlayInnerMargin: 25px;
 /*************** Items */
@@ -79,7 +80,10 @@ $formLabelW: 30%;
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
 $waitSpinnerBorderW: 5px;
-$waitSpinnerTreeBorderW: 4px;
+$waitSpinnerTreeBorderW: 3px;
+/*************** Messages */
+$messageIconD: 80px;
+$messageListIconD: 32px;
 
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used

src/styles-new/_controls.scss

@@ -48,16 +48,26 @@ button {
             height: $d; width: $d;
         }
     }
-}
 
-.c-compact-button {
-    @include cCompactButtons($bg: $colorBtnBg, $fg: $colorBtnFg, $bgHov: $colorBtnBgHov);
+    &.is-active {
+        background: $colorBtnActiveBg;
+        color: $colorBtnActiveFg;
+    }
+
+    &.is-selected {
+        background: $colorBtnSelectedBg;
+        color: $colorBtnSelectedFg;
+    }
 }
 
 /********* Icon Buttons */
-.c-click-icon,
-.c-click-swatch {
+.c-click-icon {
     @include cClickIcon();
+}
+
+.c-icon-button,
+.c-click-swatch {
+    @include cClickIconButton();
 
     &--menu {
         &:after {
@@ -70,8 +80,8 @@ button {
     }
 }
 
-.c-click-icon {
-    .c-click-icon__label {
+.c-icon-button {
+    .c-icon-button__label {
         margin-left: $interiorMargin;
     }
 
@@ -139,7 +149,7 @@ button {
             font-family: symbolsfont;
             font-size: 1rem * $s;
             transform-origin: center;
-            transition: transform 100ms ease-in-out;
+            transition: $transOut;
         }
     }
 
@@ -245,7 +255,13 @@ select {
     background-position: right .4em top 80%, 0 0;
     border: none;
     border-radius: $controlCr;
-    padding: 4px 20px 4px $interiorMargin;
+    padding: 1px 20px 1px $interiorMargin;
+
+    *,
+    option {
+        background: $colorBtnBg;
+        color: $colorBtnFg;
+    }
 }
 
 // CHECKBOX LISTS
@@ -260,6 +276,63 @@ select {
     }
 }
 
+/******************************************************** TABS */
+.c-tabs {
+    // Single horizontal strip of tabs, with a bottom divider line
+    @include userSelectNone();
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    position: relative; // Required in case this is applied to a <ul>
+
+    &:before {
+        // Separator line at bottom of tabs
+        content: '';
+        display: block;
+        height: 1px;
+        width: 100%;
+        background: $colorBtnReverseBg;
+        position: absolute;
+        bottom: 0px;
+        z-index: 1;
+    }
+}
+
+.c-tab {
+    // Used in Tab View, generic tabs
+    background: $colorBtnBg;
+    color: $colorBtnFg;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    margin: 1px 1px 0 0;
+    padding: $interiorMargin $interiorMarginLg;
+    white-space: nowrap;
+
+    --notchSize: 7px;
+
+    clip-path:
+        polygon(
+            0% 0%,
+            calc(100% - var(--notchSize)) 0%,
+            100% var(--notchSize),
+            100% calc(100% - var(--notchSize)),
+            100% 100%,
+            0% 100%
+        );
+
+    @include hover() {
+        background: $colorBtnBgHov;
+    }
+
+    &.is-current {
+        background: $colorBtnReverseBg;
+        color: $colorBtnReverseFg;
+        pointer-events: none;
+    }
+}
+
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
 .c-hyperlink {
     &--link {
@@ -502,12 +575,12 @@ select {
         @include cToolbarSeparator();
     }
 
-    .c-click-icon,
+    .c-icon-button,
     .c-labeled-input {
         color: $editUIBaseColorFg;
     }
 
-    .c-click-icon {
+    .c-icon-button {
         @include cControl();
         $pLR: $interiorMargin - 1;
         $pTB: 2px;
@@ -551,8 +624,6 @@ select {
 
 /********* Button Sets */
 .c-button-set {
-    // When one set is adjacent to another, provides a divider between
-
     display: inline-flex;
     flex: 0 0 auto;
 
@@ -561,21 +632,24 @@ select {
         flex: 0 0 auto;
     }
 
-    + .c-button-set {
-        &:before {
-            @include cToolbarSeparator();
-            content: '';
-        }
-    }
-
     &[class*='--strip'] {
         // Buttons are smashed together with minimal margin
         // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
-        // c-click-icons get grouped more closely together
+        // c-icon-buttons get grouped more closely together
         [class^="c-button"] {
             // Only apply the following to buttons that have background, eg. c-button
             border-radius: 0;
+        }
+    }
 
+    &[class*='--strip-h'] {
+        // Horizontal strip
+
+        + .c-button-set {
+            margin-left: $interiorMargin;
+        }
+
+        [class^="c-button"] {
             + * {
                 margin-left: 1px;
             }
@@ -647,6 +721,45 @@ input[type="range"] {
     }
 }
 
+.h-local-controls {
+    // Holder for local controls
+    &--horz {
+        // Horizontal layout be
+        display: inline-flex;
+        align-items: center;
+    }
+
+    &--overlay-content {
+        > .c-button {
+            background: $colorLocalControlOvrBg;
+            border-radius: $controlCr;
+            box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
+        }
+    }
+}
+
+.c-local-controls {
+    // Controls that are in close proximity to an element they effect
+    &--show-on-hover {
+        // Hidden by default; requires a hover 1 - 3 levels above to display
+        transition: $transOut;
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+.has-local-controls:hover {
+    > .c-local-controls--show-on-hover,
+    > * > .c-local-controls--show-on-hover,
+    > * > * > .c-local-controls--show-on-hover,
+    > * > * > * > .c-local-controls--show-on-hover
+    {
+        transition: $transIn;
+        opacity: 1;
+        pointer-events: inherit;
+    }
+}
+
 /***************************************************** DRAG AND DROP */
 .c-drop-hint {
     // Used in Tabs View, Flexible Grid Layouts
@@ -701,19 +814,3 @@ input[type="range"] {
     display: flex;
     align-items: center;
 }
-
-.h-local-controls {
-    &-overlay-content {
-        box-shadow: $colorBodyBg 0 0 0 2px;
-        display: inline-block;
-        position: absolute;
-        right: $interiorMargin; top: $interiorMargin;
-        z-index: 2;
-    }
-
-    &-trans {
-        // Has a translucent background plate
-        background: rgba($colorBodyBg, 0.8);
-        border-radius: $controlCr;
-    }
-}

src/styles-new/_forms.scss

@@ -101,7 +101,6 @@
             min-width: 120px;
             order: 1;
             position: relative;
-            white-space: nowrap;
             width: $formLabelW;
         }
 
@@ -121,26 +120,35 @@
                     margin-right: 5px;
                 }
             }
-            .select {
+
+            .l-input-lg { // LEGACY FORM SUPPORT
+                input[type=text],
+                input[type=search],
+                input[type=number] {
+                    width: 100%;
+                }
+            }
+
+            select {
                 margin-right: $interiorMargin;
             }
         }
 
         .hint, .field-hints {  color: $colorFieldHint;  }
+    }
+}
 
-        .selector-list {
-            // Used in create overlay to display tree view
-            @include nice-input();
-            padding: $interiorMargin;
-            position: relative;
-            min-height: 150px;
-            height: 100%;
-            >.wrapper {
-                $p: $interiorMargin;
-                box-sizing: border-box;
-                overflow: auto;
-            }
-        }
+.selector-list {
+    // Displays tree view in dialogs
+    @include nice-input();
+    padding: $interiorMargin;
+    position: relative;
+    min-height: 0; // Chrome 73 overflow bug fix
+    height: 100%;
+    >.wrapper {
+        $p: $interiorMargin;
+        box-sizing: border-box;
+        overflow: auto;
     }
 }
 
@@ -338,7 +346,6 @@
     }
 }
 
-
 mct-form.validates {
     .form-row.validates {
         > .label {

src/styles-new/_global.scss

@@ -19,8 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
-/******************************* RESETS */
+/******************************************************** RESETS */
 *,
 :before,
 :after {
@@ -31,7 +30,7 @@ div {
     position: relative;
 }
 
-/******************************* UTILITIES */
+/******************************************************** UTILITIES */
 .u-contents {
     display: contents;
 }
@@ -45,7 +44,7 @@ div {
     }
 }
 
-/******************************* BROWSER ELEMENTS */
+/******************************************************** BROWSER ELEMENTS */
 body.desktop {
     ::-webkit-scrollbar {
         box-sizing: border-box;
@@ -75,7 +74,7 @@ body.desktop {
     }
 }
 
-/************************** HTML ENTITIES */
+/******************************************************** HTML ENTITIES */
 a {
     color: $colorA;
     cursor: pointer;
@@ -102,20 +101,6 @@ em {
     font-style: normal;
 }
 
-h1, h2, h3 {
-    letter-spacing: 0.04em;
-    margin: 0;
-}
-
-h1 {
-    font-size: 1em;
-    font-weight: normal !important;
-    letter-spacing: 0.04em;
-    line-height: 120%;
-    margin-bottom: 20px;
-    margin-top: 0;
-}
-
 p {
     margin-bottom: $interiorMarginLg;
 }
@@ -181,7 +166,6 @@ body.desktop .has-local-controls {
 
 /******************************************************** SELECTION AND EDITING */
 // Provides supporting styles for Display Layouts and augmented legacy Fixed Position view
-
 .c-grid,
 .c-grid__x,
 .c-grid__y {
@@ -218,168 +202,88 @@ body.desktop .has-local-controls {
     }
 }
 
-/************************** LEGACY */
-
-mct-container {
+/******************************************************** STATES */
+@mixin  spinner($b: 5px, $c: $colorKey) {
+    animation-name: rotation-centered;
+    animation-duration: 0.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    border-radius: 100%;
+    box-sizing: border-box;
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: $b;
     display: block;
-}
-
-.abs {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: auto;
-    width: auto;
+    left: 50%; top: 50%;
+    transform-origin: center;
+    transform: translate(-50%, -50%);
 }
 
-.code {
-    font-family: "Lucida Console", monospace;
-    font-size: 0.7em;
-    line-height: 150%;
-    white-space: pre;
+.wait-spinner {
+    @include spinner($waitSpinnerBorderW, $colorKey);
+    pointer-events: none;
+    z-index: 2;
+    &.inline {
+        display: inline-block !important;
+        margin-right: $interiorMargin;
+        position: relative !important;
+        vertical-align: middle;
+    }
 }
 
-.codehilite {
-    @extend .code;
-    background-color: rgba($colorBodyFg, 0.1);
-    padding: 1em;
+.loading {
+    // Can be applied to any block element with height and width
+    pointer-events: none;
+    &:before,
+    &:after {
+        content: '';
+    }
+    &:before {
+        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
+        height: $waitSpinnerD; width: $waitSpinnerD;
+        z-index: 10;
+    }
+    &:after {
+        @include abs();
+        background: $colorLoadingBg;
+        display: block;
+        z-index: 9;
+    }
+    &.c-tree__item {
+        $d: $waitSpinnerTreeD;
+        $spinnerL: 19px + $d/2;
+
+        display: flex;
+        align-items: center;
+        padding-left: $spinnerL + $d/2 + $interiorMargin;
+        background: $colorLoadingBg;
+        min-height: 5px + $d;
+
+        .c-tree__item__label {
+            font-style: italic;
+            opacity: 0.6;
+        }
+        &:before {
+            height: $d;
+            width: $d;
+            border-width: 4px;
+            left: $spinnerL;
+        }
+        &:after {
+            display: none;
+        }
+    }
+
+    &.c-loading--overlay {
+        @include abs();
+    }
 }
 
-.disabled,
-a.disabled {
+*[disabled],
+.disabled {
     opacity: $controlDisabledOpacity;
     pointer-events: none !important;
     cursor: default !important;
 }
-
-.s-status-missing {
-    // Labels. Expects .s-status-missing to be applied to mct-representation that contains
-    .t-object-label .t-item-icon:before {
-        content: $glyph-icon-object-unknown;
-    }
-
-    // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
-    .item .t-item-icon-glyph:before {
-        content: $glyph-icon-object-unknown;
-    }
-
-    // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
-    &.object-header {
-        .type-icon:before {
-            content: $glyph-icon-object-unknown;
-        }
-    }
-
-    // Tree item. Expects .s-status-missing to be applied to .tree-item,
-    // and mct-representation.search-item
-    &.tree-item,
-    &.search-item {
-        > .rep-object-label .t-item-icon:before {
-            content: $glyph-icon-object-unknown;
-        }
-    }
-}
-
-.align-right {
-    text-align: right;
-}
-
-.centered {
-    text-align: center;
-}
-
-.no-selection {
-    // aka selection = "None". Used in palettes and their menu buttons.
-    $c: red;
-    $s: 48%;
-    $e: 52%;
-    background-image: linear-gradient(-45deg,
-            transparent $s - 5%,
-            $c $s,
-            $c $e,
-            transparent $e + 5%
-    );
-    box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
-.scrolling,
-.scroll {
-    overflow: auto;
-}
-
-.vscroll {
-    overflow-x: hidden;
-    overflow-y: auto;
-    &.scroll-pad {
-        padding-right: $interiorMargin;
-    }
-}
-
-.vscroll--persist {
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-
-.slidable {
-    cursor: move; // Fallback
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-    &.horz {
-        cursor: col-resize;
-    }
-    &.vert {
-        cursor: row-resize;
-    }
-}
-
-.no-margin {
-    margin: 0;
-}
-
-.ds {
-    box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
-}
-
-.capitalize {
-    text-transform: capitalize;
-}
-
-.hide,
-.hidden,
-.t-main-view .hide-in-t-main-view {
-    display: none !important;
-}
-
-.hide-nice {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.invisible {
-    display: block;
-    visibility: hidden;
-    height: 0;
-    padding: 0;
-    border: 0;
-    margin: 0 !important;
-    transform: scale(0);
-    pointer-events: none;
-    position: absolute;
-}
-
-.sep {
-    color: rgba(#fff, 0.2);
-}
-
-.comma-list span {
-    &:not(:first-child) {
-        &:before {
-            content: ', ';
-        }
-    }
-}

src/styles-new/_legacy-messages.scss

@@ -0,0 +1,144 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/******************************************************************* MESSAGES */
+.w-message-contents {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+
+    > * + * {
+        margin-bottom: $interiorMargin;
+    }
+
+    .message-body {
+        flex: 1 1 100%;
+    }
+}
+
+// Singleton in an overlay dialog
+.t-message-single .l-message,
+.t-message-single.l-message {
+    $iconW: $messageListIconD;
+    &:before {
+        font-size: $iconW;
+        width: $iconW + 2;
+    }
+    .title {
+        font-size: 1.2em;
+    }
+}
+
+// Singleton inline in a view
+.t-message-inline .l-message,
+.t-message-inline.l-message {
+    border-radius: $controlCr;
+    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
+    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
+    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
+
+    .w-message-contents.l-message-body-only {
+        .message-body {
+            margin-top: $interiorMargin;
+        }
+    }
+}
+
+// In a list
+.c-overlay__messages {
+    //@include abs();
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    padding-right: $interiorMargin;
+
+    > div,
+    > span {
+        margin-bottom: $interiorMargin;
+    }
+
+    .w-messages {
+        flex: 1 1 100%;
+        overflow-y: auto;
+        padding-right: $interiorMargin;
+    }
+    // Each message
+    .c-message {
+        @include discreteItem();
+        flex: 0 0 auto;
+        margin-bottom: $interiorMarginSm;
+
+        .hint,
+        .bottom-bar {
+            text-align: left;
+        }
+    }
+
+}
+
+@include phonePortrait {
+    .t-message-single .l-message,
+    .t-message-single.l-message {
+        flex-direction: column;
+        &:before {
+            margin-right: 0;
+            margin-bottom: $interiorMarginLg;
+            text-align: center;
+            width: 100%;
+        }
+
+        .bottom-bar {
+            text-align: center;
+            .s-button {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+}
+
+body.desktop .t-message-list {
+    .w-message-contents { padding-right: $interiorMargin; }
+}
+
+// Alert elements in views
+mixin sUnSynced() {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+}
+
+.s-unsynced {
+    @include sUnsynced();
+}
+
+.s-status-timeconductor-unsynced {
+    // Plot areas
+    .gl-plot .gl-plot-display-area {
+        @include sUnsynced();
+    }
+
+    // Object headers
+    .object-header {
+        .t-object-alert {
+            display: inline;
+        }
+    }
+}

src/styles-new/_legacy-plots.scss

@@ -0,0 +1,550 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/********************************************************************* PLOTS */
+mct-plot {
+    display: contents;
+}
+
+/*********************** STACKED PLOT LAYOUT */
+.t-plot-stacked {
+    .l-view-section {
+        //  Make this a flex container
+        display: flex;
+        flex-flow: column nowrap;
+        .gl-plot.child-frame {
+            mct-plot {
+                display: flex;
+                flex: 1 1 auto;
+                height: 100%;
+                position: relative;
+            }
+            flex: 1 1 auto;
+            &:not(:first-child) {
+                margin-top: $interiorMargin;
+            }
+        }
+    }
+
+    .s-status-timeconductor-unsynced .holder-plot {
+        .t-object-alert.t-alert-unsynced {
+            display: block;
+        }
+    }
+}
+
+.gl-plot {
+    color: $colorPlotFg;
+    display: flex;
+    //font-size: 0.7rem;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: $plotMinH;
+
+    /*********************** AXIS AND DISPLAY AREA */
+    .plot-wrapper-axis-and-display-area {
+        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
+        position: relative;
+        flex: 1 1 auto;
+        .t-object-alert {
+            position: absolute;
+            display: block;
+            font-size: 1.5em;
+            top: $interiorMarginSm;
+            left: $interiorMarginSm;
+            z-index: 2;
+        }
+    }
+
+    .gl-plot-wrapper-display-area-and-x-axis {
+        // Holds the plot area and the X-axis only
+        position: absolute;
+        top: nth($plotDisplayArea, 1);
+        right:0;
+        bottom: 0;
+        left: nth($plotDisplayArea, 4);
+
+        .gl-plot-display-area {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: nth($plotDisplayArea, 3);
+            left: 0;
+        }
+
+        .gl-plot-axis-area.gl-plot-x {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            height: $plotXBarH;
+            width: auto;
+            overflow: hidden;
+        }
+    }
+
+    .gl-plot-axis-area {
+        position: absolute;
+        &.gl-plot-y {
+            top: nth($plotDisplayArea, 1);
+            right: auto;
+            bottom: nth($plotDisplayArea, 3);
+            left: 0;
+            width: $plotYBarW;
+        }
+    }
+
+    .gl-plot-coords {
+        box-sizing: border-box;
+        border-radius: $controlCr;
+        background: black;
+        color: lighten($colorBodyFg, 30%);
+        padding: 2px 5px;
+        position: absolute;
+        top: nth($plotDisplayArea,1) + $interiorMarginLg;
+        right: auto;
+        bottom: auto;
+        left: nth($plotDisplayArea,4) + $interiorMarginLg;
+        z-index: 10;
+        &:empty {
+            display: none;
+        }
+    }
+
+    .gl-plot-label,
+    .l-plot-label {
+        color: $colorPlotLabelFg;
+        position: absolute;
+        text-align: center;
+
+        &.gl-plot-x-label,
+        &.l-plot-x-label {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            height: auto;
+        }
+
+        &.gl-plot-y-label,
+        &.l-plot-y-label {
+            $x: -50%;
+            $r: -90deg;
+            transform-origin: 50% 0;
+            transform: translateX($x) rotate($r);
+            display: inline-block;
+            margin-left: $interiorMargin; // Kick off the left edge
+            left: 0;
+            top: 50%;
+            white-space: nowrap;
+        }
+    }
+
+    .gl-plot-x-options,
+    .gl-plot-y-options {
+        $h: 24px;
+        position: absolute;
+        height: $h;
+        min-height: $h;
+        z-index: 2;
+    }
+
+    .gl-plot-x-options {
+        transform: translateX(-50%);
+        bottom: 0;
+        left: 50%;
+    }
+
+    .gl-plot-y-options {
+        transform: translateY(-50%);
+        min-width: 150px; // Need this due to enclosure of .select
+        top: 50%;
+        left: $plotYLabelW + $interiorMargin * 2;
+    }
+
+    .t-plot-display-controls {
+        position: absolute;
+        top: $interiorMargin;
+        right: $interiorMargin;
+    }
+
+    .gl-plot-hash {
+        position: absolute;
+        opacity: $opacityPlotHash;
+        &.hash-v {
+            border-right: 1px $colorPlotHash $stylePlotHash;
+            height: 100%;
+        }
+        &.hash-h {
+            border-bottom: 1px $colorPlotHash $stylePlotHash;
+            width: 100%;
+        }
+    }
+
+    &__local-controls {
+        // Plot local controls
+        $m: $interiorMargin;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: $m;
+        right: $m;
+        z-index: 9;
+
+        &__reset {
+            transition: right 100ms;
+            top: $m;
+            right: $m;
+        }
+
+        &__zoom-and-guides {
+            top: $m;
+            right: $m;
+        }
+    }
+}
+
+.gl-plot-display-area,
+.plot-display-area {
+    @if $colorPlotBg != none {
+        background-color: $colorPlotBg;
+    }
+    cursor: crosshair;
+    border: 1px solid $colorPlotAreaBorder;
+}
+
+.tick {
+    position: absolute;
+    border: 0 $colorPlotHash solid;
+    &.tick-x {
+        border-right-width: 1px;
+        height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
+    }
+}
+
+.gl-plot-tick,
+.tick-label {
+    @include reverseEllipsis();
+    font-size: 0.7rem;
+    position: absolute;
+    &.gl-plot-x-tick-label,
+    &.tick-label-x {
+        right: auto;
+        bottom: auto;
+        left: auto;
+        height: auto;
+        width: 20%;
+        margin-left: -10%;
+        text-align: center;
+    }
+    &.gl-plot-y-tick-label,
+    &.tick-label-y {
+        top: auto;
+        height: 1em;
+        width: auto;
+        margin-bottom: -0.5em;
+        text-align: right;
+    }
+}
+
+.gl-plot-tick {
+    &.gl-plot-x-tick-label {
+        top: $interiorMargin;
+    }
+    &.gl-plot-y-tick-label {
+        right: $interiorMargin;
+        left: $interiorMargin;
+    }
+}
+
+.tick-label {
+    &.tick-label-x {
+        top: 0;
+    }
+    &.tick-label-y {
+        right: 0;
+        left: 0;
+    }
+}
+
+.export-plot {
+    $bg: white;
+    $fg: black;
+    $gry: #999;
+
+    background: $bg !important;
+    z-index: -10;
+
+    .l-view-section {
+        $m: $interiorMargin;
+        top: $m !important;
+        right: $m;
+        bottom: $m;
+        left: $m;
+
+        .s-status-timeconductor-unsynced .holder-plot {
+            .t-object-alert.t-alert-unsynced {
+                display: none;
+            }
+        }
+    }
+
+    .gl-plot-display-area {
+        background: none !important;
+        border-color: $gry !important;
+
+        .gl-plot-local-controls,
+        .h-local-controls {
+            opacity: 0;
+        }
+    }
+
+    .gl-plot {
+        color: $fg;
+
+        .gl-plot-hash {
+            opacity: 0.1;
+            border-color: $fg;
+        }
+    }
+
+    table {
+        thead {
+            border-bottom: none;
+
+            th {
+                background: #eee;
+                border-left-color: $bg;
+                color: #666;
+            }
+
+            tr {
+                border: none;
+            }
+        }
+        tbody {
+            tr {
+                border-top: 1px solid #ccc;
+            }
+
+            td {
+                color: $fg;
+            }
+        }
+    }
+}
+
+/****************** _LEGEND.SCSS */
+.gl-plot-legend {
+    display: flex;
+    align-items: flex-start;
+
+    &__view-control {
+        padding-top: 2px;
+        margin-right: $interiorMarginSm;
+    }
+
+    table {
+        table-layout: fixed;
+        th,
+        td {
+            @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
+            padding: 1px 3px; // Tighter than standard tabular padding
+        }
+    }
+
+    &.hover-on-plot {
+        // User is hovering over the plot to get a value at a point
+        .hover-value-enabled {
+            background-color: $legendHoverValueBg;
+            border-radius: $smallCr;
+            padding: 0 $interiorMarginSm;
+
+            &.value-to-display-min:before {
+                content: 'MIN ';
+            }
+            &.value-to-display-max:before {
+                content: 'MAX ';
+            }
+        }
+    }
+}
+
+/***************** GENERAL STYLES, ALL STATES */
+.plot-legend-item {
+    // General styles for legend items, both expanded and collapsed legend states
+    .plot-series-color-swatch {
+        border-radius: $smallCr;
+        border: 1px solid $colorBodyBg;
+        display: inline-block;
+        height: $plotSwatchD;
+        width: $plotSwatchD;
+    }
+    .plot-series-name {
+        display: inline;
+    }
+
+    .plot-series-value {
+        @include ellipsize();
+    }
+}
+
+.plot-wrapper-expanded-legend {
+    flex: 1 1 auto;
+}
+
+.gl-plot {
+    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
+    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
+
+    /***************** GENERAL STYLES, COLLAPSED */
+    &.plot-legend-collapsed {
+        // .plot-legend-item is a span of spans.
+        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
+        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
+        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
+        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
+
+        .plot-legend-item {
+            display: flex;
+            align-items: center;
+            justify-content: stretch;
+            &:not(:first-child) {
+                margin-left: $interiorMarginLg;
+            }
+            .plot-series-swatch-and-name,
+            .plot-series-value {
+                @include ellipsize();
+                flex: 1 1 auto;
+            }
+
+            .plot-series-swatch-and-name {
+                margin-right: $interiorMarginSm;
+            }
+
+            .plot-series-value {
+                text-align: left;
+            }
+        }
+    }
+
+    /***************** GENERAL STYLES, EXPANDED */
+    &.plot-legend-expanded {
+        .gl-plot-legend {
+            max-height: 70%;
+        }
+
+        .plot-wrapper-expanded-legend {
+            overflow-y: auto;
+        }
+    }
+
+    /***************** TOP OR BOTTOM */
+    &.plot-legend-top,
+    &.plot-legend-bottom {
+        // General styles when legend is on the top or bottom
+        flex-direction: column;
+
+        &.plot-legend-collapsed {
+            // COLLAPSED ON TOP OR BOTTOM
+            .plot-wrapper-collapsed-legend {
+                display: flex;
+                flex: 1 1 auto;
+                overflow: hidden;
+            }
+        }
+    }
+
+    /***************** EITHER SIDE */
+    &.plot-legend-left,
+    &.plot-legend-right {
+        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
+        &.plot-legend-expanded {
+            // EXPANDED, ON EITHER SIDE
+            flex-direction: column;
+        }
+
+        &.plot-legend-collapsed {
+            // COLLAPSED, ON EITHER SIDE
+            .gl-plot-legend {
+                max-height: inherit;
+                width: 25%;
+            }
+            .plot-wrapper-collapsed-legend {
+                display: flex;
+                flex-flow: column nowrap;
+                min-width: 0;
+                flex: 1 1 auto;
+                overflow-y: auto;
+            }
+            .plot-legend-item {
+                margin-bottom: 1px;
+                margin-left: 0;
+                flex-wrap: wrap;
+                .plot-series-swatch-and-name {
+                    flex: 0 1 auto;
+                    min-width: 20%;
+                }
+                .plot-series-value {
+                    flex: 0 1 auto;
+                    width: auto;
+                }
+            }
+        }
+    }
+
+    /***************** ON BOTTOM OR RIGHT */
+    &.plot-legend-right:not(.plot-legend-expanded),
+    &.plot-legend-bottom {
+        .gl-plot-legend {
+            order: 2;
+        }
+        .plot-wrapper-axis-and-display-area {
+            order: 1;
+        }
+    }
+}
+
+/***************** CURSOR GUIDES */
+[class*='c-cursor-guide'] {
+    box-shadow: $shdwCursorGuide;
+    background-color: $colorCursorGuide;
+    display: none; // Displayed when an element with has-cursor-guides gets a hover; see below
+    pointer-events: none;
+    position: absolute;
+}
+
+.has-cursor-guides:hover [class*='c-cursor-guide'] {
+    display: block;
+}
+
+.c-cursor-guide {
+    &--h {
+        height: 1px;
+        left: 0; right: 0;
+    }
+
+    &--v {
+        width: 1px;
+        top: 0; bottom: 0;
+    }
+}

src/styles-new/_legacy.scss

@@ -19,491 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
-/********************************************************************* PLOTS */
-mct-plot {
-    display: contents;
-}
-
-/*********************** STACKED PLOT LAYOUT */
-.t-plot-stacked {
-    .l-view-section {
-        //  Make this a flex container
-        display: flex;
-        flex-flow: column nowrap;
-        .gl-plot.child-frame {
-            mct-plot {
-                display: flex;
-                flex: 1 1 auto;
-                height: 100%;
-                position: relative;
-            }
-            flex: 1 1 auto;
-            &:not(:first-child) {
-                margin-top: $interiorMargin;
-            }
-        }
-    }
-
-    .s-status-timeconductor-unsynced .holder-plot {
-        .t-object-alert.t-alert-unsynced {
-            display: block;
-        }
-    }
-}
-
-.gl-plot {
-    color: $colorPlotFg;
-    display: flex;
-    font-size: 0.7rem;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: $plotMinH;
-
-    /*********************** AXIS AND DISPLAY AREA */
-    .plot-wrapper-axis-and-display-area {
-        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
-        position: relative;
-        flex: 1 1 auto;
-        .t-object-alert {
-            position: absolute;
-            display: block;
-            font-size: 1.5em;
-            top: $interiorMarginSm;
-            left: $interiorMarginSm;
-            z-index: 2;
-        }
-    }
-
-    .gl-plot-wrapper-display-area-and-x-axis {
-        // Holds the plot area and the X-axis only
-        position: absolute;
-        top: nth($plotDisplayArea, 1);
-        right:0;
-        bottom: 0;
-        left: nth($plotDisplayArea, 4);
-
-        .gl-plot-display-area {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: nth($plotDisplayArea, 3);
-            left: 0;
-        }
-
-        .gl-plot-axis-area.gl-plot-x {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            height: $plotXBarH;
-            width: auto;
-            overflow: hidden;
-        }
-    }
-
-    .gl-plot-axis-area {
-        position: absolute;
-        &.gl-plot-y {
-            top: nth($plotDisplayArea, 1);
-            right: auto;
-            bottom: nth($plotDisplayArea, 3);
-            left: 0;
-            width: $plotYBarW;
-        }
-    }
-
-    .gl-plot-coords {
-        box-sizing: border-box;
-        border-radius: $controlCr;
-        background: black;
-        color: lighten($colorBodyFg, 30%);
-        padding: 2px 5px;
-        position: absolute;
-        top: nth($plotDisplayArea,1) + $interiorMarginLg;
-        right: auto;
-        bottom: auto;
-        left: nth($plotDisplayArea,4) + $interiorMarginLg;
-        z-index: 10;
-        &:empty {
-            display: none;
-        }
-    }
-
-    .gl-plot-label,
-    .l-plot-label {
-        color: $colorPlotLabelFg;
-        position: absolute;
-        text-align: center;
-
-        &.gl-plot-x-label,
-        &.l-plot-x-label {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            height: auto;
-        }
-
-        &.gl-plot-y-label,
-        &.l-plot-y-label {
-            $x: -50%;
-            $r: -90deg;
-            transform-origin: 50% 0;
-            transform: translateX($x) rotate($r);
-            display: inline-block;
-            margin-left: $interiorMargin; // Kick off the left edge
-            left: 0;
-            top: 50%;
-            white-space: nowrap;
-        }
-    }
-
-    .gl-plot-x-options,
-    .gl-plot-y-options {
-        $h: 24px;
-        position: absolute;
-        height: $h;
-        min-height: $h;
-        z-index: 2;
-    }
-
-    .gl-plot-x-options {
-        transform: translateX(-50%);
-        bottom: 0;
-        left: 50%;
-    }
-
-    .gl-plot-y-options {
-        transform: translateY(-50%);
-        min-width: 150px; // Need this due to enclosure of .select
-        top: 50%;
-        left: $plotYLabelW + $interiorMargin * 2;
-    }
-
-    .t-plot-display-controls {
-        position: absolute;
-        top: $interiorMargin;
-        right: $interiorMargin;
-    }
-
-    .gl-plot-hash {
-        position: absolute;
-        opacity: $opacityPlotHash;
-        &.hash-v {
-            border-right: 1px $colorPlotHash $stylePlotHash;
-            height: 100%;
-        }
-        &.hash-h {
-            border-bottom: 1px $colorPlotHash $stylePlotHash;
-            width: 100%;
-        }
-    }
-}
-
-.gl-plot-display-area,
-.plot-display-area {
-    @if $colorPlotBg != none {
-        background-color: $colorPlotBg;
-    }
-    cursor: crosshair;
-    border: 1px solid $colorPlotAreaBorder;
-}
-
-.tick {
-    position: absolute;
-    border: 0 $colorPlotHash solid;
-    &.tick-x {
-        border-right-width: 1px;
-        height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
-    }
-}
-
-.gl-plot-tick,
-.tick-label {
-    @include reverseEllipsis();
-    font-size: 0.7rem;
-    position: absolute;
-    &.gl-plot-x-tick-label,
-    &.tick-label-x {
-        right: auto;
-        bottom: auto;
-        left: auto;
-        height: auto;
-        width: 20%;
-        margin-left: -10%;
-        text-align: center;
-    }
-    &.gl-plot-y-tick-label,
-    &.tick-label-y {
-        top: auto;
-        height: 1em;
-        width: auto;
-        margin-bottom: -0.5em;
-        text-align: right;
-    }
-}
-
-.gl-plot-tick {
-    &.gl-plot-x-tick-label {
-        top: $interiorMargin;
-    }
-    &.gl-plot-y-tick-label {
-        right: $interiorMargin;
-        left: $interiorMargin;
-    }
-}
-
-.tick-label {
-    &.tick-label-x {
-        top: 0;
-    }
-    &.tick-label-y {
-        right: 0;
-        left: 0;
-    }
-}
-
-.export-plot {
-    $bg: white;
-    $fg: black;
-    $gry: #999;
-
-    background: $bg !important;
-    z-index: -10;
-
-    .l-view-section {
-        $m: $interiorMargin;
-        top: $m !important;
-        right: $m;
-        bottom: $m;
-        left: $m;
-
-        .s-status-timeconductor-unsynced .holder-plot {
-            .t-object-alert.t-alert-unsynced {
-                display: none;
-            }
-        }
-    }
-
-    .gl-plot-display-area {
-        background: none !important;
-        border-color: $gry !important;
-
-        .gl-plot-local-controls,
-        .h-local-controls {
-            opacity: 0;
-        }
-    }
-
-    .gl-plot {
-        color: $fg;
-
-        .gl-plot-hash {
-            opacity: 0.1;
-            border-color: $fg;
-        }
-    }
-
-    table {
-        thead {
-            border-bottom: none;
-
-            th {
-                background: #eee;
-                border-left-color: $bg;
-                color: #666;
-            }
-
-            tr {
-                border: none;
-            }
-        }
-        tbody {
-            tr {
-                border-top: 1px solid #ccc;
-            }
-
-            td {
-                color: $fg;
-            }
-        }
-    }
-}
-
-/****************** _LEGEND.SCSS */
-.gl-plot-legend {
-    display: flex;
-    align-items: flex-start;
-
-    &__view-control {
-        padding-top: 2px;
-        margin-right: $interiorMarginSm;
-    }
-
-    table {
-        table-layout: fixed;
-        th,
-        td {
-            @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
-            padding: 1px 3px; // Tighter than standard tabular padding
-            //width: 1%;
-        }
-    }
-
-    &.hover-on-plot {
-        // User is hovering over the plot to get a value at a point
-        .hover-value-enabled {
-            background-color: $legendHoverValueBg;
-            border-radius: $smallCr;
-            padding: 0 $interiorMarginSm;
-
-            &.value-to-display-min:before {
-                content: 'MIN ';
-            }
-            &.value-to-display-max:before {
-                content: 'MAX ';
-            }
-        }
-    }
-}
-
-/***************** GENERAL STYLES, ALL STATES */
-.plot-legend-item {
-    // General styles for legend items, both expanded and collapsed legend states
-    .plot-series-color-swatch {
-        border-radius: $smallCr;
-        border: 1px solid $colorBodyBg;
-        display: inline-block;
-        height: $plotSwatchD;
-        width: $plotSwatchD;
-    }
-    .plot-series-name {
-        display: inline;
-    }
-
-    .plot-series-value {
-        @include ellipsize();
-    }
-}
-
-.plot-wrapper-expanded-legend {
-    flex: 1 1 auto;
-}
-
-.gl-plot {
-    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
-    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
-
-    /***************** GENERAL STYLES, COLLAPSED */
-    &.plot-legend-collapsed {
-        // .plot-legend-item is a span of spans.
-        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
-        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
-        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
-        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
-
-        .plot-legend-item {
-            display: flex;
-            align-items: center;
-            justify-content: stretch;
-            &:not(:first-child) {
-                margin-left: $interiorMarginLg;
-            }
-            .plot-series-swatch-and-name,
-            .plot-series-value {
-                @include ellipsize();
-                flex: 1 1 auto;
-            }
-
-            .plot-series-swatch-and-name {
-                margin-right: $interiorMarginSm;
-            }
-
-            .plot-series-value {
-                text-align: left;
-            }
-        }
-    }
-
-    /***************** GENERAL STYLES, EXPANDED */
-    &.plot-legend-expanded {
-        .gl-plot-legend {
-            max-height: 70%;
-        }
-
-        .plot-wrapper-expanded-legend {
-            overflow-y: auto;
-        }
-    }
-
-    /***************** TOP OR BOTTOM */
-    &.plot-legend-top,
-    &.plot-legend-bottom {
-        // General styles when legend is on the top or bottom
-        flex-direction: column;
-
-        &.plot-legend-collapsed {
-            // COLLAPSED ON TOP OR BOTTOM
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex: 1 1 auto;
-                overflow: hidden;
-            }
-        }
-    }
-
-    /***************** EITHER SIDE */
-    &.plot-legend-left,
-    &.plot-legend-right {
-        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
-        &.plot-legend-expanded {
-            // EXPANDED, ON EITHER SIDE
-            flex-direction: column;
-        }
-
-        &.plot-legend-collapsed {
-            // COLLAPSED, ON EITHER SIDE
-            .gl-plot-legend {
-                max-height: inherit;
-                width: 25%;
-            }
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex-flow: column nowrap;
-                min-width: 0;
-                flex: 1 1 auto;
-                overflow-y: auto;
-            }
-            .plot-legend-item {
-                margin-bottom: 1px;
-                margin-left: 0;
-                flex-wrap: wrap;
-                .plot-series-swatch-and-name {
-                    flex: 0 1 auto;
-                    min-width: 20%;
-                }
-                .plot-series-value {
-                    flex: 0 1 auto;
-                    width: auto;
-                }
-            }
-        }
-    }
-
-    /***************** ON BOTTOM OR RIGHT */
-    &.plot-legend-right:not(.plot-legend-expanded),
-    &.plot-legend-bottom {
-        .gl-plot-legend {
-            order: 2;
-        }
-        .plot-wrapper-axis-and-display-area {
-            order: 1;
-        }
-    }
-}
-
 /******************************************************************* VIEWS */
 // From _views.scss
 // Legacy overlay and stacked plots depend on this for now
@@ -582,7 +97,6 @@ mct-plot {
 }
 
 .l-image-main-controlbar {
-    font-size: 0.8em;
     line-height: inherit;
     .l-datetime-w, .l-controls-w {
         direction: rtl;
@@ -624,7 +138,6 @@ mct-plot {
 }
 
 /*************************************** THUMBS */
-
 .l-image-thumbs-wrapper {
     overflow-x: hidden;
     overflow-y: auto;
@@ -639,7 +152,6 @@ mct-plot {
     direction: ltr;
     display: inline-block;
     float: left;
-    font-size: 0.8em;
     padding: 1px;
     margin-left: $interiorMarginSm;
     position: relative;
@@ -679,9 +191,14 @@ mct-plot {
 }
 
 /*************************************** LOCAL CONTROLS */
-.t-imagery {
+.c-imagery {
     display: contents;
-    .h-local-controls.h-local-controls-overlay-content {
+    .h-local-controls--overlay-content {
+        position: absolute;
+        right: $interiorMargin; top: $interiorMargin;
+        z-index: 2;
+        background: $colorLocalControlOvrBg;
+        border-radius: $basicCr;
         max-width: 200px;
         min-width: 100px;
         width: 35%;
@@ -699,8 +216,10 @@ mct-plot {
                 margin-right: $interiorMarginSm;
             }
         }
+    }
 
-        .t-reset-btn-holder {
+    &__lc {
+        &__reset-btn {
             $bc: $scrollbarTrackColorBg;
             &:before,
             &:after {
@@ -730,8 +249,8 @@ mct-plot {
     .l-image-main-wrapper {
         bottom: 0 !important;
         height: 100% !important;
-        .l-image-main-controlbar {
-            font-size: 0.7em;
+        .l-image-main-controlbar .c-button {
+            //font-size: 0.7em;
         }
     }
     .l-image-thumbs-wrapper,
@@ -795,7 +314,7 @@ body.mobile.phone {
         transition: $transOut;
         width: 0;
 
-        .c-click-icon:before { font-size: 1em; }
+        .c-icon-button:before { font-size: 1em; }
     }
 
     &__direction {
@@ -942,7 +461,7 @@ body.mobile.phone {
     width: $ruleLabelW;
 }
 
-.t-message-widget-no-data {
+.js-summary-widget__message {
     display: none;
 }
 
@@ -989,7 +508,7 @@ body.mobile.phone {
         &.expanded-widget-rules {
             .widget-rules-wrapper {
                 min-height: 50px;
-                height: auto;
+                height: 100%; // Fix for Chrome 73 scrolling bug
                 opacity: 1;
                 pointer-events: inherit;
             }
@@ -1001,7 +520,7 @@ body.mobile.phone {
             opacity: 0.3;
             pointer-events: none;
         }
-        .t-message-widget-no-data {
+        .js-summary-widget__message {
             display: flex;
         }
     }
@@ -1278,16 +797,20 @@ mct-indicators mct-include {
     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 {
+        s-button,
+        .c-button {
             // Make <a> in label look like buttons
             transition: $transIn;
             background: transparent;
@@ -1312,8 +835,6 @@ mct-indicators mct-include {
                 margin-right: $interiorMarginSm;
             }
         }
-
-        button { text-transform: uppercase !important; }
     }
 
     &.no-collapse {
@@ -1332,8 +853,6 @@ mct-indicators mct-include {
     }
 
     &:not(.no-collapse) {
-        z-index: 0;
-
         &:before {
             margin-right: 0 !important;
         }
@@ -1351,6 +870,8 @@ mct-indicators mct-include {
             transform-origin: 10px 100%;
             transform: scale(0.0);
             white-space: nowrap;
+            z-index: 50;
+
             &:before {
                 // Infobubble-style arrow element
                 content: '';
@@ -1361,9 +882,9 @@ mct-indicators mct-include {
             }
         }
 
-        &:hover {
+        @include hover() {
             background: $bg;
-            z-index: 1;
+
             .label {
                 opacity: 1;
                 transform: scale(1.0);
@@ -1656,75 +1177,6 @@ body.desktop {
     }
 }
 
-/******************************************************************* WAIT SPINNERS */
-@mixin  spinner($b: 5px, $c: $colorKey) {
-    animation-name: rotation-centered;
-    animation-duration: 0.5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    border-radius: 100%;
-    box-sizing: border-box;
-    border-color: rgba($c, 0.25);
-    border-top-color: rgba($c, 1.0);
-    border-style: solid;
-    border-width: $b;
-    display: block;
-    position: absolute;
-    left: 50%; top: 50%;
-    transform-origin: center;
-    transform: translate(-50%, -50%);
-}
-
-.wait-spinner {
-    @include spinner($waitSpinnerBorderW, $colorKey);
-    pointer-events: none;
-    z-index: 2;
-    &.inline {
-        display: inline-block !important;
-        margin-right: $interiorMargin;
-        position: relative !important;
-        vertical-align: middle;
-    }
-}
-
-.loading {
-    // Can be applied to any block element with height and width
-    pointer-events: none;
-    &:before,
-    &:after {
-        content: '';
-    }
-    &:before {
-        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
-        height: $waitSpinnerD; width: $waitSpinnerD;
-        z-index: 10;
-    }
-    &:after {
-        @include abs();
-        background: $colorLoadingBg;
-        display: block;
-        z-index: 9;
-    }
-    &.tree-item.t-wait-node {
-        $d: $waitSpinnerTreeD;
-        $spinnerL: $interiorMargin + 19px + $d/2;
-        padding-left: $spinnerL + $d/2 + $interiorMargin;
-        .t-title-label {
-            font-style: italic;
-            opacity: 0.6;
-        }
-        &:before {
-            height: $d;
-            width: $d;
-            border-width: 4px;
-            left: $spinnerL;
-        }
-        &:after {
-            display: none;
-        }
-    }
-}
-
 /******************************************************************* FLEX STYLES */
 .l-flex-row,
 .l-flex-col {
@@ -1791,7 +1243,7 @@ body.desktop {
 .grid-properties {
     display: grid;
     grid-row-gap: 0;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 2fr;
 }
 
 .grid-span-all,
@@ -1989,6 +1441,10 @@ body.desktop {
     display: contents;
 }
 
+mct-container {
+    display: block;
+}
+
 .overlay {
     .outer-holder {
         background: $colorMenuBg;
@@ -2054,3 +1510,157 @@ body.desktop {
         }
     }
 }
+
+.abs {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: auto;
+    width: auto;
+}
+
+.code {
+    font-family: "Lucida Console", monospace;
+    font-size: 0.7em;
+    line-height: 150%;
+    white-space: pre;
+}
+
+.codehilite {
+    @extend .code;
+    background-color: rgba($colorBodyFg, 0.1);
+    padding: 1em;
+}
+
+.s-status-missing {
+    // Labels. Expects .s-status-missing to be applied to mct-representation that contains
+    .t-object-label .t-item-icon:before {
+        content: $glyph-icon-object-unknown;
+    }
+
+    // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
+    .item .t-item-icon-glyph:before {
+        content: $glyph-icon-object-unknown;
+    }
+
+    // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
+    &.object-header {
+        .type-icon:before {
+            content: $glyph-icon-object-unknown;
+        }
+    }
+
+    // Tree item. Expects .s-status-missing to be applied to .tree-item,
+    // and mct-representation.search-item
+    &.tree-item,
+    &.search-item {
+        > .rep-object-label .t-item-icon:before {
+            content: $glyph-icon-object-unknown;
+        }
+    }
+}
+
+.align-right {
+    text-align: right;
+}
+
+.centered {
+    text-align: center;
+}
+
+.no-selection {
+    // aka selection = "None". Used in palettes and their menu buttons.
+    $c: red;
+    $s: 48%;
+    $e: 52%;
+    background-image: linear-gradient(-45deg,
+            transparent $s - 5%,
+            $c $s,
+            $c $e,
+            transparent $e + 5%
+    );
+    box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.scrolling,
+.scroll {
+    overflow: auto;
+}
+
+.vscroll {
+    overflow-x: hidden;
+    overflow-y: auto;
+    &.scroll-pad {
+        padding-right: $interiorMargin;
+    }
+}
+
+.vscroll--persist {
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.slidable {
+    cursor: move; // Fallback
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    &.horz {
+        cursor: col-resize;
+    }
+    &.vert {
+        cursor: row-resize;
+    }
+}
+
+.no-margin {
+    margin: 0;
+}
+
+.ds {
+    box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
+}
+
+.capitalize {
+    text-transform: capitalize;
+}
+
+.hide,
+.hidden,
+.t-main-view .hide-in-t-main-view {
+    display: none !important;
+}
+
+.hide-nice {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.invisible {
+    display: block;
+    visibility: hidden;
+    height: 0;
+    padding: 0;
+    border: 0;
+    margin: 0 !important;
+    transform: scale(0);
+    pointer-events: none;
+    position: absolute;
+}
+
+.sep {
+    color: rgba(#fff, 0.2);
+}
+
+.comma-list span {
+    &:not(:first-child) {
+        &:before {
+            content: ', ';
+        }
+    }
+}
+

src/styles-new/_mixins.scss

@@ -51,33 +51,15 @@
 
 /************************** EFFECTS */
 @mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-    @include keyframes($animName) {
+    @keyframes pulse {
         0%   { opacity: $opacity0; }
         100% { opacity: $opacity100; }
     }
-    @include animation-name($animName);
-    @include animation-duration($dur);
-    @include animation-direction(alternate);
-    @include animation-iteration-count($iteration);
-    @include animation-timing-function(ease-in-out);
-}
-
-@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include keyframes($animName) {
-        from { #{propName}: $propValStart; }
-        to { #{$propName}: $propValEnd; }
-    }
-    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
-}
-
-@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include animation-name($animName);
-    @include animation-duration($dur);
-    @include animation-delay($delay);
-    @include animation-fill-mode(both);
-    @include animation-direction($dir);
-    @include animation-iteration-count($count);
-    @include animation-timing-function(ease-in-out);
+    animation-name: $animName;
+    animation-duration: $dur;
+    animation-direction: alternate;
+    animation-iteration-count: $iteration;
+    animation-timing-function: ease-in-out;
 }
 
 /************************** VISUALS */
@@ -391,7 +373,8 @@
         color: $colorBtnFgHov;
     }
 
-    &[class*="--major"] {
+    &[class*="--major"],
+    &[class*='is-active']{
         background: $colorBtnMajorBg;
         color: $colorBtnMajorFg;
 
@@ -411,24 +394,37 @@
     }
 }
 
+
 @mixin cClickIcon() {
-    // A clickable element that just includes the icon, no background
+    @include cControl();
+    cursor: pointer;
+    padding: 4px; // Bigger hit area
+    opacity: 0.6;
+    transition: $transOut;
+    transform-origin: center;
+
+    @include hover() {
+        transform: scale(1.1);
+        transition: $transIn;
+        opacity: 1;
+    }
+}
+
+@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();
-    $pLR: 4px;
-    $pTB: 4px;
     background: none;
     box-shadow: none;
-    border-radius: $controlCr;
     cursor: pointer;
+    $pLR: 4px;
+    $pTB: 4px;
+    transition: $transOut;
+    border-radius: $controlCr;
     padding: $pTB $pLR;
 
-    @include hover() {
-        background: $colorClickIconBgHov;
-        color: $colorClickIconFgHov;
-    }
-
     &:before,
     *:before {
         // *:before handles any nested containers that may contain glyph elements
@@ -436,6 +432,12 @@
         font-size: 1.25em;
     }
 
+    @include hover() {
+        transition: $transIn;
+        background: $colorClickIconButtonBgHov;
+        color: $colorClickIconButtonFgHov;
+    }
+
     &[class*="--major"] {
         color: $colorKey;
     }
@@ -465,50 +467,6 @@
     }
 }
 
-@mixin cCompactButtons($bg, $fg, $bgHov) {
-    // Used in Tab view
-    // To be used in indicators popups?
-
-    $m: 1px;
-    $btnM: $m;
-
-    &-holder {
-        background: $colorTabsHolderBg;
-        border-radius: $controlCr;
-        padding: $m ($m - $btnM) ($m - $btnM) $m;
-        display: flex;
-        flex-flow: row wrap;
-        justify-content: stretch;
-
-        > * {
-            margin: 0 $btnM $btnM 0;
-        }
-    }
-
-    background: $colorBtnBg;
-    color: $colorBtnFg;
-    flex: 1 1 auto;
-    padding: $interiorMargin;
-
-    &:before {
-        opacity: 0.5;
-    }
-
-    > * {
-        margin-left: $interiorMarginSm;
-    }
-
-    @include hover() {
-        background: $bgHov;
-    }
-
-    &.is-current {
-        background: $colorBtnReverseBg;
-        color: $colorBtnReverseFg;
-        pointer-events: none;
-    }
-}
-
 @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/_table.scss

@@ -19,16 +19,18 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
 /******************************************************** TABLE */
 table {
     $minW: 50px;
     width: 100%;
 
     thead {
-        background: $colorTabHeaderBg;
-        th + th {
-            border-left: 1px solid $colorTabHeaderBorder;
+        th {
+            background: $colorTabHeaderBg;
+
+            + th {
+                border-left: 1px solid $colorTabHeaderBorder;
+            }
         }
     }
 
@@ -47,14 +49,19 @@ table {
     td {
         vertical-align: top;
     }
+
+    a { color: $colorBtnMajorBg; }
+}
+
+div.c-table {
+    // When c-table is used as a wrapper element in more complex table views
+    height: 100%;
 }
 
 .c-table {
     // Can be used by any type of table, scrolling, LAD, etc.
     $min-w: 50px;
 
-    position: absolute;
-    top: 0; right: 0; bottom: 0; left: 0;
     width: 100%;
 
     &__control-bar,
@@ -117,4 +124,36 @@ table {
     th, td {
         width: 33%; // Needed to prevent size jumping as values dynamically update
     }
-}
+}
+
+/************************************** TABLE AND SUMMARY VIEWS */
+// Displays summary values above a table.
+
+.c-table-and-summary {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    > * + * { margin-top: $interiorMargin; }
+
+    &__summary {
+        display: flex;
+        justify-items: stretch;
+
+        > * + * { margin-left: 1px; }
+    }
+
+    &__summary-item {
+        background: $colorSummaryBg;
+        color: $colorSummaryFg;
+        flex: 1 1 auto;
+        padding: $interiorMargin $interiorMarginLg;
+
+        em {
+            font-weight: bold;
+            color: $colorSummaryFgEm;
+        }
+    }
+}

src/styles-new/core.scss

@@ -24,6 +24,7 @@
 @import "sass-base";
 
 /******************** RENDERS CSS */
+@import "about";
 @import "glyphs";
 @import "global";
 @import "status";
@@ -31,3 +32,4 @@
 @import "forms";
 @import "table";
 @import "legacy";
+@import "legacy-plots";

src/styles-new/sass-base.scss

@@ -24,8 +24,9 @@
 // Meant for use as a single line import in Vue SFC's.
 // Do not include anything that renders to CSS!
 @import "constants";
-@import "constants-espresso"; // TEMP
-//@import "constants-snow"; // TEMP
+@import "constants-mobile.scss";
+//@import "constants-espresso"; // TEMP
+@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
 @import "mixins";
 @import "animations";

src/ui/components/ObjectFrame.vue

@@ -42,9 +42,12 @@
                 </div>
             </div>
         </div>
-        <object-view class="c-so-view__object-view"
-                     ref="objectView"
-                     :object="domainObject"></object-view>
+        <object-view 
+            class="c-so-view__object-view"
+            ref="objectView"
+            :object="domainObject"
+            :show-edit-view="showEditView">
+        </object-view>
     </div>
 </template>
 
@@ -110,6 +113,12 @@
                 }
             }
         }
+
+        .c-click-icon,
+        .c-button {
+            // Shrink buttons a bit when they appear in a frame
+            font-size: 0.8em;
+        }
     }
 </style>
 
@@ -128,6 +137,10 @@
             domainObject: Object,
             objectPath: Array,
             hasFrame: Boolean,
+            showEditView: {
+                type: Boolean,
+                default: () => true
+            }
         },
         components: {
             ObjectView,

src/ui/components/ObjectView.vue

@@ -8,7 +8,8 @@ export default {
     inject: ["openmct"],
     props: {
         view: String,
-        object: Object
+        object: Object,
+        showEditView: Boolean
     },
     destroyed() {
         this.clear();
@@ -79,7 +80,7 @@ export default {
             }
 
 
-            if (provider.edit) {
+            if (provider.edit && this.showEditView) {
                 if (this.openmct.editor.isEditing()) {
                     this.currentView = provider.edit(this.currentObject);
                 } else {

src/ui/inspector/Elements.vue

@@ -5,15 +5,18 @@
         @input="applySearch" 
         @clear="applySearch">
     </Search>
-    <div class="c-elements-pool__elements">
+    <div class="c-elements-pool__elements"
+        :class="{'is-dragging': isDragging}">
         <ul class="c-tree c-elements-pool__tree" id="inspector-elements-tree"
             v-if="elements.length > 0">
-            <li :key="element.identifier.key" v-for="(element, index) in elements" @drop="moveTo(index)" @dragover="allowDrop">
-                <div class="c-tree__item c-elements-pool__item">
+            <li :key="element.identifier.key" v-for="(element, index) in elements"
+                @drop="moveTo(index)"
+                @dragover="allowDrop">
+                <div class="c-tree__item c-elements-pool__item"
+                     draggable="true"
+                     @dragstart="moveFrom(index)">
                     <span class="c-elements-pool__grippy"
-                          v-if="elements.length > 1 && isEditing"
-                          draggable="true"
-                          @dragstart="moveFrom(index)">
+                          v-if="elements.length > 1 && isEditing">
                     </span>
                     <object-label :domainObject="element" :objectPath="[element, parentObject]"></object-label>
                 </div>
@@ -44,18 +47,22 @@
         &__elements {
             flex: 1 1 auto;
             overflow: auto;
+            &.is-dragging {
+                li { opacity: 0.2; }
+            }
         }
 
         &__grippy {
             $d: 8px;
             @include grippy($c: $colorItemTreeVC, $dir: 'y');
+            flex: 0 0 auto;
             margin-right: $interiorMarginSm;
             transform: translateY(-2px);
             width: $d; height: $d;
         }
     }
 
-    .js-last-place{
+    .js-last-place {
         height: 10px;
     }
 </style>
@@ -74,7 +81,8 @@ export default {
             elements: [],
             isEditing: this.openmct.editor.isEditing(),
             parentObject: undefined,
-            currentSearch: ''
+            currentSearch: '',
+            isDragging: false
         }
     },
     mounted() {
@@ -83,85 +91,96 @@ export default {
             this.showSelection(selection);
         }
         this.openmct.selection.on('change', this.showSelection);
-        this.openmct.editor.on('isEditing', (isEditing)=>{
-            this.isEditing = isEditing;
-            this.showSelection(this.openmct.selection.get());
-        });
+        this.openmct.editor.on('isEditing', this.setEditState);
     },
     methods: {
+        setEditState(isEditing) {
+            this.isEditing = isEditing;
+            this.showSelection(this.openmct.selection.get());
+        },
         showSelection(selection) {
             this.elements = [];
-            this.elementsCache = [];
+            this.elementsCache = {};
+            this.listeners = [];
             this.parentObject = selection[0].context.item;
             if (this.mutationUnobserver) {
                 this.mutationUnobserver();
             }
+            if (this.compositionUnlistener) {
+                this.compositionUnlistener();
+            }
 
             if (this.parentObject) {
                 this.mutationUnobserver = this.openmct.objects.observe(this.parentObject, '*', (updatedModel) => {
                     this.parentObject = updatedModel;
-                    this.refreshComposition();
                 });
-                this.refreshComposition();
+                this.composition = this.openmct.composition.get(this.parentObject);
+
+                if (this.composition) {
+                    this.composition.load();
+
+                    this.composition.on('add', this.addElement);
+                    this.composition.on('remove', this.removeElement);
+                    this.composition.on('reorder', this.reorderElements);
+
+                    this.compositionUnlistener = () => {
+                        this.composition.off('add', this.addElement);
+                        this.composition.off('remove', this.removeElement);
+                        this.composition.off('reorder', this.reorderElements);
+                        delete this.compositionUnlistener;
+                    }
+                }
             }
         },
-        refreshComposition() {
-            let composition = this.openmct.composition.get(this.parentObject);
-
-            if (composition){
-                composition.load().then(this.setElements);
-            }
-
+        addElement(element) {
+            let keyString = this.openmct.objects.makeKeyString(element.identifier);
+            this.elementsCache[keyString] = 
+                JSON.parse(JSON.stringify(element));
+            this.applySearch(this.currentSearch);
         },
-        setElements(elements) {
-            this.elementsCache = elements.map((element)=>JSON.parse(JSON.stringify(element)))
+        reorderElements() {
+            this.applySearch(this.currentSearch);
+        },
+        removeElement(identifier) {
+            let keyString = this.openmct.objects.makeKeyString(identifier);
+            delete this.elementsCache[keyString];
             this.applySearch(this.currentSearch);
         },
         applySearch(input) {
             this.currentSearch = input;
-            this.elements = this.elementsCache.filter((element) => {
-                return element.name.toLowerCase().search(
-                    this.currentSearch) !== -1;
+            this.elements = this.parentObject.composition.map((id) =>
+                this.elementsCache[this.openmct.objects.makeKeyString(id)]
+            ).filter((element) => {
+                return element !== undefined &&
+                    element.name.toLowerCase().search(this.currentSearch) !== -1;
             });
         },
-        addObject(child){
-            this.elementsCache.push(child);
-            this.applySearch(this.currentSearch);
-        },
-        removeObject(childId){
-            this.elementsCache = this.elementsCache.filter((element) => !matches(element, childId));
-            this.applySearch(this.currentSearch);
-
-            function matches(elementA, elementBId) {
-                return elementA.identifier.namespace === elementBId.namespace &&
-                    elementA.identifier.key === elementBId.key;
-            }
-
-        },
         allowDrop(event) {
             event.preventDefault();
         },
         moveTo(moveToIndex) {
-            console.log('dropped');
-            let composition = this.parentObject.composition;
-            let moveFromId = composition[this.moveFromIndex];
-            let deleteIndex = this.moveFromIndex;
-            if (moveToIndex < this.moveFromIndex) {
-                composition.splice(deleteIndex, 1);
-                composition.splice(moveToIndex, 0, moveFromId);
-            } else {
-                composition.splice(deleteIndex, 1);
-                composition.splice(moveToIndex, 0, moveFromId);
-            }
-
-            this.openmct.objects.mutate(this.parentObject, 'composition', composition);
+            this.composition.reorder(this.moveFromIndex, moveToIndex);
         },
         moveFrom(index){
+            this.isDragging = true;
             this.moveFromIndex = index;
+            document.addEventListener('dragend', this.hideDragStyling);
+        },
+        hideDragStyling() {
+            this.isDragging = false;
+            document.removeEventListener('dragend', this.hideDragStyling);
         }
     },
     destroyed() {
+        this.openmct.editor.off('isEditing', this.setEditState);
         this.openmct.selection.off('change', this.showSelection);
+
+        if (this.mutationUnobserver) {
+            this.mutationUnobserver();
+        }
+        if (this.compositionUnlistener) {
+            this.compositionUnlistener();
+        }
     }
 }
 </script>

src/ui/inspector/Inspector.vue

@@ -22,7 +22,6 @@
             min-height: 50px;
 
             + [class*="__"] {
-                // Margin between elements
                 margin-top: $interiorMargin;
             }
 
@@ -37,9 +36,7 @@
         }
 
         &__elements {
-            // LEGACY TODO: Refactor when markup is updated, fix scrolling
-            // so that only tree holder handles overflow
-            height: 200px;
+            height: 200px; // Initial height
 
             .tree-item {
                 .t-object-label {
@@ -64,48 +61,6 @@
         }
 
         /************************************************************** LEGACY */
-        // TODO: refactor when legacy properties markup can be converted
-        .inspector-location {
-            display: inline-block;
-
-            .location-item {
-                $h: 1.2em;
-                box-sizing: border-box;
-                cursor: pointer;
-                display: inline-block;
-                line-height: $h;
-                position: relative;
-                padding: 2px 4px;
-
-                .t-object-label {
-                    .t-item-icon {
-                        height: $h;
-                        margin-right: $interiorMarginSm;
-                    }
-                }
-
-                &:hover {
-                    background: $colorItemTreeHoverBg;
-                    color: $colorItemTreeHoverFg;
-                    .icon {
-                        color: $colorItemTreeIconHover;
-                    }
-                }
-            }
-
-            &:not(.last) .t-object-label .t-title-label:after {
-                color: pushBack($colorInspectorFg, 15%);
-                content: '\e904';
-                display: inline-block;
-                font-family: symbolsfont;
-                font-size: 8px;
-                font-style: normal !important;
-                line-height: inherit;
-                margin-left: $interiorMarginSm;
-                width: 4px;
-            }
-        }
-
         .l-inspector-part {
             display: contents;
         }
@@ -116,8 +71,8 @@
             grid-column: 1 / 3;
         }
 
-        .tree .grid-properties {
-            margin-left: $treeItemIndent + $interiorMarginLg;
+        .c-tree .grid-properties {
+            margin-left: $treeItemIndent;
         }
     }
 
@@ -143,7 +98,6 @@
         }
 
         + .c-properties {
-            // Margin between components
             margin-top: $interiorMarginLg;
         }
 

src/ui/inspector/Location.vue

@@ -1,25 +1,79 @@
 <template>
 <div class="c-properties c-properties--location">
-    <div class="c-properties__header" title="The location of this linked object.">Location</div>
+    <div class="c-properties__header" title="The location of this linked object.">Original Location</div>
     <ul class="c-properties__section">
-        <li class="c-properties__row">
-            <div class="c-properties__label">This Link</div>
-            <div class="c-properties__value">TODO</div>
-        </li>
-        <li class="c-properties__row">
-            <div class="c-properties__label">Original</div>
-            <div class="c-properties__value">TODO</div>
+        <li class="c-properties__row" v-if="originalPath.length">
+            <ul class="c-properties__value c-location">
+                <li v-for="pathObject in orderedOriginalPath"
+                    class="c-location__item"
+                    :key="pathObject.key">
+                    <object-label
+                        :domainObject="pathObject.domainObject"
+                        :objectPath="pathObject.objectPath">
+                    </object-label>
+                </li>
+            </ul>
         </li>
     </ul>
 </div>
 </template>
 
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-location {
+        display: flex;
+        flex-wrap: wrap;
+
+        &__item {
+            $m: $interiorMarginSm;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            margin: 0 $m $m 0;
+
+            &:not(:last-child) {
+                &:after {
+                    color: $colorInspectorPropName;
+                    content: $glyph-icon-arrow-right;
+                    font-family: symbolsfont;
+                    font-size: 0.7em;
+                    margin-left: $m;
+                    opacity: 0.8;
+                }
+            }
+
+            .c-object-label {
+                padding: 0;
+                transition: $transOut;
+
+                &__type-icon {
+                    width: auto;
+                    font-size: 1em;
+                }
+
+                &:hover {
+                    transition: $transIn;
+                    filter: $filterHov;
+                }
+            }
+        }
+    }
+</style>
+
 <script>
+import ObjectLabel from '../components/ObjectLabel.vue';
+
 export default {
     inject: ['openmct'],
+    components: {
+        ObjectLabel
+    },
     data() {
         return {
-            domainObject: {}
+            domainObject: {},
+            originalPath: [],
+            keyString: ''
         }
     },
     mounted() {
@@ -30,12 +84,52 @@ export default {
         this.openmct.selection.off('change', this.updateSelection);
     },
     methods: {
+        setOriginalPath(path, skipSlice) {
+            let originalPath = path;
+
+            if (!skipSlice) {
+                originalPath = path.slice(1,-1);
+            }
+
+            this.originalPath = originalPath.map((domainObject, index, pathArray) => {
+                let key = this.openmct.objects.makeKeyString(domainObject.identifier);
+                return {
+                    domainObject,
+                    key,
+                    objectPath: pathArray.slice(index)
+                }
+            });
+        },
+        clearData() {
+            this.domainObject = {};
+            this.originalPath = [];
+            this.keyString = '';
+        },
         updateSelection(selection) {
-            if (selection.length === 0) {
-                this.domainObject = {};
+            if (!selection.length) {
+                this.clearData();
+                return;
+            } else if (!selection[0].context.item && selection[1] && selection[1].context.item) {
+                this.setOriginalPath([selection[1].context.item], true);
                 return;
             }
+
             this.domainObject = selection[0].context.item;
+
+            let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+            if (keyString && this.keyString !== keyString) {
+                this.keyString = keyString;
+                this.originalPath = [];
+
+                this.openmct.objects.getOriginalPath(this.keyString)
+                    .then(this.setOriginalPath);
+            }
+        }
+    },
+    computed: {
+        orderedOriginalPath() {
+            return this.originalPath.reverse();
         }
     }
 }

src/ui/inspector/Properties.vue

@@ -12,11 +12,11 @@
         </li>
         <li class="c-properties__row" v-if="item.created">
             <div class="c-properties__label">Created</div>
-            <div class="c-properties__value">{{ item.created }}</div>
+            <div class="c-properties__value c-ne__text">{{ formatTime(item.created) }}</div>
         </li>
         <li class="c-properties__row" v-if="item.modified">
             <div class="c-properties__label">Modified</div>
-            <div class="c-properties__value">{{ item.modified }}</div>
+            <div class="c-properties__value c-ne__text">{{ formatTime(item.modified) }}</div>
         </li>
         <li class="c-properties__row"
             v-for="prop in typeProperties"
@@ -29,6 +29,8 @@
 </template>
 
 <script>
+import Moment from "moment";
+
 export default {
     inject: ['openmct'],
     data() {
@@ -93,6 +95,9 @@ export default {
                 return;
             }
             this.domainObject = selection[0].context.item;
+        },
+        formatTime(unixTime) {
+            return Moment.utc(unixTime).format('YYYY-MM-DD[\n]HH:mm:ss') + ' UTC';
         }
     }
 }

src/ui/layout/AboutDialog.vue

@@ -0,0 +1,39 @@
+<template>
+<div class="c-about c-about--splash">
+    <div v-if="branding.aboutHtml" class="s-text l-content" v-html="branding.aboutHtml"></div>
+    <div v-else class="c-about__image c-splash-image"></div>
+
+    <div class="c-about__text s-text">
+        <h1 class="l-title s-title">Open MCT</h1>
+        <div class="l-description s-description">
+	        <p>Open MCT, Copyright &copy; 2014-2019, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.</p>
+	        <p>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 <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>.</p>
+	        <p>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.</p>
+	        <p>Open MCT includes source code licensed under additional open source licenses. See the Open Source Licenses file included with this distribution or <a @click="showLicenses">click here for third party licensing information</a>.</p>
+        </div>
+        <h2>Version Information</h2>
+        <ul class="t-info l-info s-info">
+            <li>Version: {{buildInfo.version || 'Unknown'}}</li>
+            <li>Build Date: {{buildInfo.buildDate || 'Unknown'}}</li>
+            <li>Revision: {{buildInfo.revision || 'Unknown'}}</li>
+            <li>Branch: {{buildInfo.branch || 'Unknown'}}</li>
+        </ul>
+    </div>
+</div>
+</template>
+<script>
+export default {
+    inject: ['openmct'],
+    data() {
+        return {
+            branding: JSON.parse(JSON.stringify(this.openmct.branding())),
+            buildInfo: JSON.parse(JSON.stringify(this.openmct.buildInfo))
+        }
+    },
+    methods: {
+        showLicenses() {
+            window.open('#/licenses');
+        }
+    }
+}
+</script>

src/ui/layout/AppLogo.vue

@@ -0,0 +1,62 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+<template>
+    <div class="l-shell__app-logo" @click="launchAbout" ref="aboutLogo"></div>
+</template>
+<style lang="scss">
+.l-shell__app-logo {
+    cursor: pointer;
+    width: 70px;
+    height: 20px;
+    background: url('assets/images/logo-app.svg') center no-repeat;
+}
+</style>
+<script>
+import AboutDialog from './AboutDialog.vue';
+import Vue from 'vue';
+
+export default {
+    inject: ['openmct'],
+    mounted() {
+        let branding = this.openmct.branding();
+        if (branding.smallLogoImage){
+            this.$refs.aboutLogo.style.backgroundImage = `url('${branding.smallLogoImage}')`
+        }
+    },
+    methods: {
+        launchAbout(){
+            let vm = new Vue({
+                provide: {
+                    openmct: this.openmct
+                },
+                components: {AboutDialog},
+                template: '<about-dialog></about-dialog>'
+            }).$mount();
+
+            this.openmct.overlays.overlay({
+                element: vm.$el,
+                size: 'large'
+            });
+        }
+    }
+}
+</script>

src/ui/layout/BrowseBar.vue

@@ -2,7 +2,7 @@
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
             <button v-if="hasParent"
-                class="l-browse-bar__nav-to-parent-button c-click-icon c-click-icon--major icon-pointer-left" 
+                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">
@@ -112,7 +112,7 @@ const PLACEHOLDER_OBJECT = {};
             promptUserandCancelEditing() {
                 let dialog = this.openmct.overlays.dialog({
                     iconClass: 'alert',
-                    message: 'Are you sure you want to continue? All unsaved changes will be lost!',
+                    message: 'Any unsaved changes will be lost. Are you sure you want to continue?',
                     buttons: [
                         {
                             label: 'Ok',

src/ui/layout/CreateButton.vue

@@ -8,7 +8,7 @@
              v-if="opened">
             <div class="c-super-menu__menu">
                 <ul>
-                    <li v-for="(item, index) in items"
+                    <li v-for="(item, index) in sortedItems"
                         :key="index"
                         :class="item.class"
                         :title="item.title"
@@ -145,6 +145,19 @@
                 selectedMenuItem: {},
                 opened: false
             }
+        },
+        computed: {
+            sortedItems () {
+                return this.items.sort((a,b) => {
+                    if (a.name < b.name) {
+                        return -1;
+                    } else if (a.name > b.name) {
+                        return 1;
+                    } else {
+                        return 0;
+                    }
+                });
+            }
         }
     }
 </script>