Persist table sort options

* Fix legacy message styling

- Code cleanup;
- Enable constants-mobile;
- Add _legacy-messages.scss;
- Add status color fg colors to theme constants;

* CSS refactoring, significant migration for messages classes

- Many messages classes migrated;
- c-click-icon > c-icon-button;
- c-click-icon rewritten;
- __close-btn refined in dialogs;

* About and splash screen styling

- Fixed splash in About screen;

* Update _mixins.scss

* Convert c-overlay__close-button to button

- <a> -> <button>;
- Set color of button;
- Normalized naming from close-btn to close-button;

* Fixed brightness filter issue on elements in overlays in VISTA;

* Fix dismiss button

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
                     }

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
@@ -88,6 +90,10 @@ define([
                     "key": "message",
                     "template": messageTemplate
                 },
+                {
+                    "key": "notification-message",
+                    "template": notificationMessageTemplate
+                },
                 {
                     "key": "overlay-message-list",
                     "template": overlayMessageListTemplate

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

@@ -19,24 +19,24 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs top-bar">
-    <div class="dialog-title">{{ngModel.title}}</div>
-    <div class="hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
+<div class="c-overlay__top-bar">
+    <div class="c-overlay__dialog-title">{{ngModel.title}}</div>
+    <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
 </div>
-<div class='abs editor'>
+<div class='c-overlay__contents-main'>
     <mct-form ng-model="ngModel.value"
               structure="ngModel.structure"
               class="validates"
               name="createForm">
     </mct-form>
 </div>
-<div class="abs bottom-bar">
-    <a class='s-button major'
+<div class="c-overlay__button-bar">
+    <a class='c-button c-button--major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='s-button'
+    <a class='c-button  '
        ng-click="ngModel.cancel()">
         Cancel
     </a>

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-options.html

@@ -19,18 +19,18 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<mct-container key="overlay">
-    <div class="abs top-bar">
-        <div class="dialog-title">{{ngModel.dialog.title}}</div>
-        <div class="hint">{{ngModel.dialog.hint}}</div>
+<mct-container key="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 hint">{{ngModel.dialog.hint}}</div>
     </div>
-    <div class='abs editor'>
+    <div class='c-overlay__contents-main'>
         <mct-include key="ngModel.dialog.template"
                      parameters="ngModel.dialog.parameters"
                      ng-model="ngModel.dialog.model">
         </mct-include>
     </div>
-    <div class="abs bottom-bar">
+    <div class="c-overlay__button-bar">
         <a ng-repeat="option in ngModel.dialog.options"
            href=''
            class="s-button lg"

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

@@ -19,12 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
-    <div class="abs blocker"></div>
-    <div class="abs outer-holder">
-        <a ng-click="ngModel.cancel()"
+<div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
+    <div class="c-overlay__blocker"></div>
+    <div class="c-overlay__outer">
+        <button ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="close icon-x-in-circle"></a>
-        <div class="abs inner-holder contents" ng-transclude></div>
+           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/edit/src/creation/CreateAction.js

@@ -74,8 +74,9 @@ define(
             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('/');
 

platform/commonUI/general/res/templates/label.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="t-object-label l-flex-row flex-elem grows">
-    <div class="t-item-icon flex-elem {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
-    <div class='t-title-label flex-elem grows'>{{model.name}}</div>
+<div class="c-object-label">
+    <div class="c-object-label__type-icon {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
+    <div class='c-object-label__name'>{{model.name}}</div>
 </div>

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/commonUI/general/res/templates/tree-node.html

@@ -20,14 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ToggleController as toggle">
-    <span ng-controller="TreeNodeController as treeNode">
-        <span
-            class="tree-item menus-to-left"
-            ng-class="{selected: treeNode.isSelected()}"
-            >
-            <span
-                class='ui-symbol view-control flex-elem'
-                ng-class="{ 'has-children': model.composition !== undefined, expanded: toggle.isActive() }"
+    <div class="u-contents" ng-controller="TreeNodeController as treeNode">
+        <div class="c-tree__item menus-to-left"
+            ng-class="{selected: treeNode.isSelected()}">
+            <span class='c-disclosure-triangle c-tree__item__view-control'
+                ng-class="{ 'is-enabled': model.composition !== undefined, 'c-disclosure-triangle--expanded': toggle.isActive() }"
                 ng-click="toggle.toggle(); treeNode.trackExpansion()"
                 >
             </span>
@@ -39,19 +36,15 @@
                 ng-click="treeNode.select()"
                 >
             </mct-representation>
-        </span>
-        <span
-            class="tree-item-subtree"
+        </div>
+        <div class="u-contents"
             ng-show="toggle.isActive()"
-            ng-if="model.composition !== undefined"
-            >
-
+            ng-if="model.composition !== undefined">
             <mct-representation key="'subtree'"
                                 ng-model="ngModel"
                                 parameters="parameters"
                                 mct-object="treeNode.hasBeenExpanded() && domainObject">
             </mct-representation>
-
-        </span>
-    </span>
+        </div>
+    </div>
 </span>

platform/commonUI/general/res/templates/tree.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<ul class="tree">
-    <li>
+<ul class="c-tree">
+    <li class="c-tree__item-h">
         <mct-representation key="'tree-node'"
                             mct-object="domainObject"
                             ng-model="ngModel"

platform/commonUI/general/res/templates/tree/node.html

@@ -1,4 +1,2 @@
-<span class="tree-item menus-to-left">
-</span>
-<span class="tree-item-subtree">
-</span>
+<span class="c-tree__item js-tree__item"></span>
+<span class="c-tree__item-subtree"></span>

platform/commonUI/general/res/templates/tree/toggle.html

@@ -1,2 +1 @@
-<span class='ui-symbol view-control flex-elem'>
-</span>
+<span class='c-disclosure-triangle c-tree__item__view-control'></span>

platform/commonUI/general/res/templates/tree/tree-label.html

@@ -1,6 +1,4 @@
-<span class="rep-object-label">
-    <div class="t-object-label l-flex-row flex-elem grows">
-        <div class="t-item-icon flex-elem"></div>
-        <div class='t-title-label flex-elem grows'></div>
-    </div>
-</span>
+<div class="rep-object-label c-object-label c-tree__item__label">
+    <div class="c-object-label__type-icon c-tree__item__type-icon t-item-icon"></div>
+    <div class="c-object-label__name c-tree__item__name t-title-label"></div>
+</div>

platform/commonUI/general/src/ui/ToggleView.js

@@ -37,9 +37,9 @@ define([
         this.expanded = state;
 
         if (state) {
-            this.el.addClass('expanded');
+            this.el.addClass('c-disclosure-triangle--expanded');
         } else {
-            this.el.removeClass('expanded');
+            this.el.removeClass('c-disclosure-triangle--expanded');
         }
 
         this.callbacks.forEach(function (callback) {

platform/commonUI/general/src/ui/TreeNodeView.js

@@ -28,7 +28,7 @@ define([
 ], function ($, nodeTemplate, ToggleView, TreeLabelView) {
 
     function TreeNodeView(gestureService, subtreeFactory, selectFn, openmct) {
-        this.li = $('<li>');
+        this.li = $('<li class="c-tree__item-h">');
         this.openmct = openmct;
         this.statusClasses = [];
 
@@ -38,7 +38,7 @@ define([
                 if (!this.subtreeView) {
                     this.subtreeView = subtreeFactory();
                     this.subtreeView.model(this.activeObject);
-                    this.li.find('.tree-item-subtree').eq(0)
+                    this.li.find('.c-tree__item-subtree').eq(0)
                         .append($(this.subtreeView.elements()));
                 }
                 $(this.subtreeView.elements()).removeClass('hidden');
@@ -85,9 +85,9 @@ define([
             var obj = domainObject.useCapability('adapter');
             var hasComposition =  this.openmct.composition.get(obj) !== undefined;
             if (hasComposition) {
-                $(this.toggleView.elements()).removeClass('no-children');
+                $(this.toggleView.elements()).addClass('is-enabled');
             } else {
-                $(this.toggleView.elements()).addClass('no-children');
+                $(this.toggleView.elements()).removeClass('is-enabled');
             }
         }
 
@@ -120,7 +120,7 @@ define([
             selectedIdPath = getIdPath(domainObject);
 
         if (this.onSelectionPath) {
-            this.li.find('.tree-item').eq(0).removeClass('selected');
+            this.li.find('.js-tree__item').eq(0).removeClass('is-selected');
             if (this.subtreeView) {
                 this.subtreeView.value(undefined);
             }
@@ -136,7 +136,7 @@ define([
 
         if (this.onSelectionPath) {
             if (activeIdPath.length === selectedIdPath.length) {
-                this.li.find('.tree-item').eq(0).addClass('selected');
+                this.li.find('.js-tree__item').eq(0).addClass('is-selected');
             } else {
                 // Expand to reveal the selection
                 this.toggleView.value(true);

platform/commonUI/general/src/ui/TreeView.js

@@ -27,7 +27,7 @@ define([
 ], function ($, TreeNodeView, spinnerTemplate) {
 
     function TreeView(gestureService, openmct, selectFn) {
-        this.ul = $('<ul class="tree"></ul>');
+        this.ul = $('<ul class="c-tree"></ul>');
         this.nodeViews = [];
         this.callbacks = [];
         this.selectFn = selectFn || this.value.bind(this);

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>
@@ -33,14 +29,14 @@
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="l-datetime-w flex-elem grows">
-                <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
+                <a class="c-button show-thumbs sm hidden icon-thumbs-strip"
                     ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
                 <span class="l-time">{{imagery.getTime()}}</span>
             </div>
             <div class="h-local-controls flex-elem">
-                <a class="s-button pause-play"
+                <a class="c-button icon-pause pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
-                    ng-class="{ paused: imagery.paused() }"></a>
+                    ng-class="{ 'is-paused': imagery.paused() }"></a>
                 <a href=""
                     class="s-button l-mag s-mag vsm icon-reset"
                     ng-click="clipped = false"

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/forms/res/templates/form.html

@@ -19,13 +19,13 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<form name="mctForm" novalidate class="form l-flex-col">
+<form name="mctForm" novalidate class="form c-form" autocomplete="off">
     <span ng-repeat="section in structure.sections"
-          class="l-form-section l-flex-col flex-elem {{ section.cssClass }}">
-        <h2 class="section-header flex-elem" ng-if="section.name">
+          class="l-form-section c-form__section {{ section.cssClass }}">
+        <h2 class="c-form__header" ng-if="section.name">
             {{section.name}}
         </h2>
-        <ng-form class="form-row validates l-flex-row flex-elem {{ section.cssClass }}"
+        <ng-form class="form-row c-form__row validates {{ section.cssClass }}"
                  ng-class="{
                  first:$index < 1,
                  req: row.required,
@@ -37,11 +37,11 @@
                  }"
                  name="mctFormInner"
                  ng-repeat="row in section.rows">
-            <div class='label flex-elem' title="{{row.description}}">
+            <div class='c-form__row__label label flex-elem' title="{{row.description}}">
                 {{row.name}}
             </div>
-            <div class='controls flex-elem'>
-                <div class="wrapper" ng-if="row.control">
+            <div class='c-form__row__controls controls flex-elem'>
+                <div class="c-form__controls-wrapper wrapper" ng-if="row.control">
                     <mct-control key="row.control"
                                  ng-model="ngModel"
                                  ng-required="row.required"

platform/search/res/templates/search.html

@@ -45,7 +45,7 @@
                 </mct-include>
             </div>
 
-            <a class="s-button c-search__btn-cancel"
+            <a class="c-button c-search__btn-cancel"
                ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
                ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
                 Cancel</a>

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,11 +241,17 @@ 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') {
@@ -334,10 +351,6 @@ define([
         legacyRegistry.register('adapter', this.legacyBundle);
         legacyRegistry.enable('adapter');
 
-        this.install(LegacyIndicatorsPlugin());
-
-        this.router = new ApplicationRouter();
-
         this.router.route(/^\/$/, () => {
             this.router.setPath('/browse/mine');
         });

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.
  *
@@ -19,46 +19,27 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.l-splash,
-.l-splash:before,
-.l-splash:after {
-    background-position: center;
-    background-repeat: no-repeat;
-    position: absolute;
-}
-
-.l-splash {
-    background-size: cover;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    &:before,
-    &:after {
-        background-size: contain;
-        content: '';
-    }
-
-    &:before {
-        // NASA logo, dude
-        $w: 5%;
-        $m: 10px;
-        background-image: url('../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%;
-    }
+
+let brandingOptions = {};
+
+/**
+ * @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 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;
+        align-items: flex-start;
 
         > * + * {
             margin-left: $interiorMarginLg;
@@ -58,7 +64,33 @@
         &__title,
         &__action-text {
             font-size: 1.2em; // TEMP
+        }
 
+        /************************** 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,16 +56,44 @@
         }
 
         &__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;
         }
 
         &__contents {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__top-bar {
+            flex: 0 0 auto;
+            flex-direction: column;
+            display: flex;
+
+            > * {
+                flex: 0 0 auto;
+                margin-bottom: $interiorMargin;
+            }
+        }
+
+        &__dialog-title {
+            @include ellipsize();
+            font-size: 1.5em;
+            line-height: 120%;
+        }
+
+        &__contents-main {
+            display: flex;
+            flex-direction: column;
             flex: 1 1 auto;
             overflow: auto;
+            padding-right: $interiorMargin; // fend off scroll bar
         }
 
         &__button-bar {
@@ -89,18 +117,29 @@
         .c-overlay {
             &__blocker {
                 @include abs();
-                background: rgba(black, 0.7);
+                background: $colorOvrBlocker;
                 cursor: pointer;
                 display: block;
             }
-
-            &__outer {
-                border-radius: $overlayCr;
-                box-shadow: rgba(black, 0.5) 0 2px 25px;
-            }
         }
 
         // 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);
+            }
+        }
+
         .l-overlay-large {
             // Default
             .c-overlay__outer {
@@ -114,6 +153,7 @@
             }
         }
 
+        .t-dialog-sm .l-overlay-small, // Legacy dialog support
         .l-overlay-fit {
             .c-overlay__outer {
                 @include overlaySizing(auto);

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/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/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

@@ -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.
  *
@@ -19,23 +19,20 @@
  * 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';
 
-// Override the Create menu for mobile
-@include phoneandtablet {
-    .super-menu {
-        $d: 250px;
-        width: $d;
-        height: $d;
+export default function () {
+    return function install(openmct) {
+        openmct.router.route(/^\/licenses$/, () => {
+            let licensesVm = new Vue(Licenses).$mount();
 
-        .pane {
-            &.left {
-                border-right: none;
-                padding-right: 0;
-                width: 100%;
-            }
-            &.right {
-                display: none;
-            }
-        }
-    }
+            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/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-options-browse.html

@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
-        <h2 title="Plot series display properties in this object">Plot Series Options</h2>
+    <ul class="c-tree">
+        <h2 title="Plot series display properties in this object">Plot Series</h2>
         <li ng-repeat="series in config.series.models">
             <div class="c-tree__item menus-to-left">
                 <span class='c-disclosure-triangle is-enabled flex-elem'

src/plugins/plot/res/templates/plot-options-edit.html

@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
-        <h2 title="Display properties for this object">Plot Series Options</h2>
+    <ul class="c-tree">
+        <h2 title="Display properties for this object">Plot Series</h2>
         <li ng-repeat="series in plotSeries"
             ng-controller="PlotSeriesFormController"
             form-model="series">
@@ -87,13 +87,15 @@
                                   ng-style="{ background: series.get('color').asHexString() }">
                             </span>
                         </div>
-                        <div class="c-palette--inline c-palette__items" ng-show="toggle.isActive()">
-                            <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
-                                <div class="c-palette__item"
-                                     ng-repeat="color in group"
-                                     ng-class="{ 'selected': series.get('color').equalTo(color) }"
-                                     ng-style="{ background: color.asHexString() }"
-                                     ng-click="setColor(color)">
+                        <div class="c-palette c-palette--color">
+                            <div class="c-palette__items" ng-show="toggle.isActive()">
+                                <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
+                                    <div class="c-palette__item"
+                                         ng-repeat="color in group"
+                                         ng-class="{ 'selected': series.get('color').equalTo(color) }"
+                                         ng-style="{ background: color.asHexString() }"
+                                         ng-click="setColor(color)">
+                                    </div>
                                 </div>
                             </div>
                         </div>

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="l-btn-set">
-            <a class="s-button t-export labeled 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">
-                PNG
-            </a>
-            <a class="s-button t-export labeled"
+                 <span class="c-button__label">PNG</span>
+            </button>
+            <button class="c-button"
                ng-click="controller.exportJPG()"
                title="Export This View's Data as JPG">
-                JPG
-            </a>
+                 <span class="c-button__label">JPG</span>
+            </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="l-btn-set">
-          <a class="s-button t-export labeled 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">
-              PNG
-          </a>
-          <a class="s-button t-export labeled"
+              <span class="c-button__label">PNG</span>
+          </button>
+          <button class="c-button"
              ng-click="stackedPlot.exportJPG()"
              title="Export This View's Data as JPG">
-              JPG
-          </a>
-      </span>
+              <span class="c-button__label">JPG</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/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,102 @@ 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) {
+        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 * 0.01) * xAxisMinDist),
+                max: xDisplayRange.max - ((xAxisDist * 0.01) * xAxisMaxDist)
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: yDisplayRange.min + ((yAxisDist * 0.01) * yAxisMinDist),
+                max: yDisplayRange.max - ((yAxisDist * 0.01) * yAxisMaxDist)
+            });
+        } else if (event.wheelDelta >= 0) {
+
+            this.$scope.xAxis.set('displayRange', {
+                min: xDisplayRange.min - ((xAxisDist * 0.01) * xAxisMinDist),
+                max: xDisplayRange.max + ((xAxisDist * 0.01) * xAxisMaxDist)
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: yDisplayRange.min - ((yAxisDist * 0.01) * yAxisMinDist),
+                max: yDisplayRange.max + ((yAxisDist * 0.01) * 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 +473,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;
 
@@ -258,8 +259,8 @@ define([
     PlotController.prototype.updateFiltersAndResubscribe = function (updatedFilters) {
         this.config.series.forEach(function (series) {
             series.updateFiltersAndRefresh(updatedFilters[series.keyString]);
-        })
-    }
+        });
+    };
 
     /**
      * Export view as JPG.
@@ -283,6 +284,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/plugins.js

@@ -78,26 +78,6 @@ define([
         };
     });
 
-    plugins.Snow = function () {
-        return function install(openmct) {
-            openmct.legacyExtension('constants', {
-                key: "THEME",
-                value: "snow"
-            });
-            import('snow' /* webpackChunkName: "theme-snow" */);
-        };
-    };
-
-    plugins.Espresso = function () {
-        return function install(openmct) {
-            openmct.legacyExtension('constants', {
-                key: "THEME",
-                value: "espresso"
-            });
-            import('espresso' /* webpackChunkName: "theme-espresso" */);
-        };
-    };
-
     plugins.UTCTimeSystem = UTCTimeSystem;
 
     plugins.ImportExport = ImportExport;

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/input/paletteTemplate.html

@@ -1,4 +1,4 @@
-<a class="e-control s-button s-menu-button menu-element">
+<!--a class="e-control s-button s-menu-button menu-element">
    <span class="l-click-area"></span>
    <span class="t-swatch"></span>
    <div class="menu l-palette">
@@ -7,4 +7,15 @@
            <span class="l-palette-item-label">None</span>
        </div>
    </div>
-</a>
+</a-->
+<div class="c-ctrl-wrapper">
+    <button class="c-button--menu c-button--swatched js-button">
+        <div class="c-swatch t-swatch"></div>
+    </button>
+    <div class="c-menu c-palette">
+        <div class="c-palette__item-none">
+            <div class="c-palette__item"></div>
+        </div>
+        <div class="c-palette__items"></div>
+    </div>
+</div>

src/plugins/summaryWidget/res/input/selectTemplate.html

@@ -1,4 +1,4 @@
-<div class="e-control select">
+<span>
     <select>
     </select>
- </div>
+ </span>

src/plugins/summaryWidget/res/ruleTemplate.html

@@ -1,21 +1,20 @@
-<div>
-    <div class="l-compact-form has-local-controls l-widget-rule s-widget-rule">
-        <div class="widget-rule-header">
-            <span class="flex-elem l-widget-thumb-wrapper">
-                <span class="grippy-holder">
-                    <span class="t-grippy grippy local-control local-controls-hidden"></span>
-                </span>
-                <span class="view-control expanded"></span>
-                <span class="t-widget-thumb widget-thumb">
-                    <span class="widget-label">DEF</span>
-                </span>
-            </span>
-            <span class="flex-elem rule-title">Default Title</span>
-            <span class="flex-elem rule-description grows">Rule description goes here</span>
-            <span class="flex-elem local-control local-controls-hidden l-rule-action-buttons-wrapper">
+<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__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>
+            </div>
+            <div class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled js-disclosure"></div>
+            <div class="t-widget-thumb widget-thumb c-sw c-sw--thumb">
+                <div class="c-sw__icon js-sw__icon"></div>
+                <div class="c-sw__label js-sw__label"></div>
+            </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">
                 <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>
-            </span>
+            </div>
         </div>
         <div class="widget-rule-content expanded">
             <ul>
@@ -28,7 +27,7 @@
                 <li class="connects-to-previous">
                     <label>Label:</label>
                     <span class="controls t-label-input">
-                        <input class="e-control t-rule-label-input" type="text" />
+                        <input class="t-rule-label-input" type="text" />
                     </span>
                 </li>
                 <li class="connects-to-previous">
@@ -40,26 +39,25 @@
                 </li>
                 <li class="connects-to-previous">
                     <label>Style:</label>
-                    <span class="controls t-style-input">
-                    </span>
+                    <span class="controls t-style-input"></span>
                 </li>
             </ul>
             <ul class="t-widget-rule-config">
                 <li>
                     <label>Trigger when</label>
                     <span class="controls">
-                        <div class="e-control select">
-                            <select class="t-trigger">
-                                <option value="any">any condition is met</option>
-                                <option value="all">all conditions are met</option>
-                            </select>
-                         </div>
+                        <select class="t-trigger">
+                            <option value="any">any condition is met</option>
+                            <option value="all">all conditions are met</option>
+                        </select>
                     </span>
                 </li>
                 <li>
                     <label></label>
                     <span class="controls">
-                        <a class="e-control s-button labeled add-condition icon-plus">Add Condition</a>
+                        <button class="c-button add-condition icon-plus">
+                            <span class="c-button__label">Add Condition</span>
+                        </button>
                     </span>
                 </li>
             </ul>

src/plugins/summaryWidget/res/testDataTemplate.html

@@ -8,7 +8,9 @@
         </div>
         <div class="t-test-data-config w-widget-test-data-items">
             <div class="holder add-rule-button-wrapper align-right">
-                <a id="addRule" class="e-control s-button major labeled add-test-condition icon-plus">Add Test Value</a>
+                <button id="addRule" class="c-button c-button--major add-test-condition icon-plus">
+                    <span class="c-button__label">Add Test Value</span>
+                </button>
             </div>
         </div>
     </div>

src/plugins/summaryWidget/res/widgetTemplate.html

@@ -1,22 +1,31 @@
-<div class="w-summary-widget s-status-no-data">
-    <a id="widget" class="t-summary-widget l-summary-widget s-summary-widget labeled">
-        <span id="widgetLabel" class="label widget-label">Default Static Name</span>
+<div class="c-sw-edit w-summary-widget s-status-no-data">
+    <a id="widget" class="t-summary-widget l-summary-widget s-summary-widget labeled c-sw">
+        <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="holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
+    <div class="c-summary-widget__message holder flex-elem t-message-inline c-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>
     </div>
-    <div class="holder l-flex-col l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">
-        <div class="section-header"><span class="view-control t-view-control-test-data expanded"></span>Test Data Values</div>
-        <div class="widget-test-data flex-accordion-holder"></div>
-        <div class="section-header"><span class="view-control t-view-control-rules expanded"></span>Rules</div>
-        <div class="holder widget-rules-wrapper flex-elem expanded">
-            <div id="ruleArea" class="widget-rules"></div>
+    <div class="c-sw-edit__ui holder l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">
+        <div class="c-sw-edit__ui__header">
+            <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-test-data"></span>
+            <span class="c-sw-edit__ui__header-label">Test Data Values</span>
+        </div>
+        <div class="c-sw-edit__ui__test-data widget-test-data flex-accordion-holder"></div>
+        <div class="c-sw-edit__ui__header">
+            <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-rules"></span>
+            <span class="c-sw-edit__ui__header-label">Rules</span>
+        </div>
+        <div class="c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded">
+            <div id="ruleArea" class="c-sw-editui__rules widget-rules"></div>
             <div class="holder add-rule-button-wrapper align-right">
-                <a id="addRule" class="s-button major labeled add-rule-button icon-plus">Add Rule</a>
+                <button id="addRule" class="c-button c-button--major add-rule-button icon-plus">
+                    <span class="c-button__label">Add Rule</span>
+                </button>
             </div>
         </div>
     </div>

src/plugins/summaryWidget/src/Rule.js

@@ -32,6 +32,7 @@ define([
     function Rule(ruleConfig, domainObject, openmct, conditionManager, widgetDnD, container) {
         eventHelpers.extend(this);
         var self = this;
+        const THUMB_ICON_CLASS = 'c-sw__icon js-sw__icon';
 
         this.config = ruleConfig;
         this.domainObject = domainObject;
@@ -50,11 +51,12 @@ define([
         this.duplicate = this.duplicate.bind(this);
 
         this.thumbnail = $('.t-widget-thumb', this.domElement);
-        this.thumbnailLabel = $('.widget-label', this.domElement);
+        this.thumbnailIcon = $('.js-sw__icon', this.domElement);
+        this.thumbnailLabel = $('.c-sw__label', this.domElement);
         this.title = $('.rule-title', this.domElement);
         this.description = $('.rule-description', this.domElement);
         this.trigger = $('.t-trigger', this.domElement);
-        this.toggleConfigButton = $('.view-control', this.domElement);
+        this.toggleConfigButton = $('.js-disclosure', this.domElement);
         this.configArea = $('.widget-rule-content', this.domElement);
         this.grippy = $('.t-grippy', this.domElement);
         this.conditionArea = $('.t-widget-rule-config', this.domElement);
@@ -79,7 +81,7 @@ define([
         this.colorInputs = {
             'background-color': new ColorPalette('icon-paint-bucket', container),
             'border-color': new ColorPalette('icon-line-horz', container),
-            'color': new ColorPalette('icon-T', container)
+            'color': new ColorPalette('icon-font', container)
         };
 
         this.colorInputs.color.toggleNullOption();
@@ -92,7 +94,7 @@ define([
         function onIconInput(icon) {
             self.config.icon = icon;
             self.updateDomainObject('icon', icon);
-            self.thumbnailLabel.removeClass().addClass('label widget-label ' + icon);
+            self.thumbnailIcon.removeClass().addClass(THUMB_ICON_CLASS + ' ' + icon);
             self.eventEmitter.emit('change');
         }
 
@@ -168,7 +170,7 @@ define([
          */
         function toggleConfig() {
             self.configArea.toggleClass('expanded');
-            self.toggleConfigButton.toggleClass('expanded');
+            self.toggleConfigButton.toggleClass('c-disclosure-triangle--expanded');
             self.config.expanded = !self.config.expanded;
         }
 
@@ -179,7 +181,7 @@ define([
         });
 
         // Initialize thumbs when first loading
-        this.thumbnailLabel.removeClass().addClass('label widget-label ' + self.config.icon);
+        this.thumbnailIcon.removeClass().addClass(THUMB_ICON_CLASS + ' ' + self.config.icon);
         this.thumbnailLabel.html(self.config.label);
 
         Object.keys(this.colorInputs).forEach(function (inputKey) {
@@ -227,7 +229,7 @@ define([
 
         if (!this.config.expanded) {
             this.configArea.removeClass('expanded');
-            this.toggleConfigButton.removeClass('expanded');
+            this.toggleConfigButton.removeClass('c-disclosure-triangle--expanded');
         }
 
         if (this.domainObject.configuration.ruleOrder.length === 2) {

src/plugins/summaryWidget/src/SummaryWidget.js

@@ -22,8 +22,8 @@ define([
 
     //default css configuration for new rules
     var DEFAULT_PROPS = {
-        'color': '#ffffff',
-        'background-color': '#38761d',
+        'color': '#cccccc',
+        'background-color': '#666666',
         'border-color': 'rgba(0,0,0,0)'
     };
 
@@ -74,15 +74,12 @@ define([
         this.show = this.show.bind(this);
         this.destroy = this.destroy.bind(this);
         this.addRule = this.addRule.bind(this);
-        this.onEdit = this.onEdit.bind(this);
 
         this.addHyperlink(domainObject.url, domainObject.openNewTab);
         this.watchForChanges(openmct, domainObject);
 
         var id = objectUtils.makeKeyString(this.domainObject.identifier),
-            self = this,
-            oldDomainObject,
-            statusCapability;
+            self = this;
 
         /**
          * Toggles the configuration area for test data in the view
@@ -90,7 +87,7 @@ define([
          */
         function toggleTestData() {
             self.outerWrapper.toggleClass('expanded-widget-test-data');
-            self.toggleTestDataControl.toggleClass('expanded');
+            self.toggleTestDataControl.toggleClass('c-disclosure-triangle--expanded');
         }
         this.listenTo(this.toggleTestDataControl, 'click', toggleTestData);
 
@@ -100,22 +97,12 @@ define([
          */
         function toggleRules() {
             self.outerWrapper.toggleClass('expanded-widget-rules');
-            self.toggleRulesControl.toggleClass('expanded');
+            self.toggleRulesControl.toggleClass('c-disclosure-triangle--expanded');
         }
         this.listenTo(this.toggleRulesControl, 'click', toggleRules);
 
         openmct.$injector.get('objectService')
-            .getObjects([id])
-            .then(function (objs) {
-                oldDomainObject = objs[id];
-                statusCapability = oldDomainObject.getCapability('status');
-                self.editListenerUnsubscribe = statusCapability.listen(self.onEdit);
-                if (statusCapability.get('editing')) {
-                    self.onEdit(['editing']);
-                } else {
-                    self.onEdit([]);
-                }
-            });
+            .getObjects([id]);
     }
 
     /**
@@ -172,7 +159,6 @@ define([
         });
         this.refreshRules();
         this.updateWidget();
-        this.updateView();
 
         this.listenTo(this.addRuleButton, 'click', this.addRule);
         this.conditionManager.on('receiveTelemetry', this.executeRules, this);
@@ -196,37 +182,6 @@ define([
         this.stopListening();
     };
 
-    /**
-     * A callback function for the Open MCT status capability listener. If the
-     * view representing the domain object is in edit mode, update the internal
-     * state and widget view accordingly.
-     * @param {string[]} status an array containing the domain object's current status
-     */
-    SummaryWidget.prototype.onEdit = function (status) {
-        if (status && status.includes('editing')) {
-            this.editing = true;
-        } else {
-            this.editing = false;
-        }
-        this.updateView();
-    };
-
-    /**
-     * If this view is currently in edit mode, show all rule configuration interfaces.
-     * Otherwise, hide them.
-     */
-    SummaryWidget.prototype.updateView = function () {
-        if (this.editing) {
-            this.ruleArea.show();
-            this.testDataArea.show();
-            this.addRuleButton.show();
-        } else {
-            this.ruleArea.hide();
-            this.testDataArea.hide();
-            this.addRuleButton.hide();
-        }
-    };
-
     /**
      * Update the view from the current rule configuration and order
      */
@@ -260,11 +215,14 @@ define([
      * Update the widget's appearance from the configuration of the active rule
      */
     SummaryWidget.prototype.updateWidget = function () {
+        const WIDGET_CLASS = 'c-sw js-sw',
+            WIDGET_LABEL_CLASS = 'c-sw__label js-sw__label',
+            WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
         var activeRule = this.rulesById[this.activeId];
         this.applyStyle($('#widget', this.domElement), activeRule.getProperty('style'));
         $('#widget', this.domElement).prop('title', activeRule.getProperty('message'));
         $('#widgetLabel', this.domElement).html(activeRule.getProperty('label'));
-        $('#widgetLabel', this.domElement).removeClass().addClass('label widget-label c-summary-widget__label ' + activeRule.getProperty('icon'));
+        $('#widgetIcon', this.domElement).removeClass().addClass(WIDGET_ICON_CLASS + ' ' + activeRule.getProperty('icon'));
     };
 
     /**

src/plugins/summaryWidget/src/input/ColorPalette.js

@@ -36,11 +36,11 @@ function (
         var domElement = $(this.palette.getDOM()),
             self = this;
 
-        $('.s-menu-button', domElement).addClass('t-color-palette-menu-button');
+        $('.c-button--menu', domElement).addClass('c-button--swatched');
         $('.t-swatch', domElement).addClass('color-swatch');
-        $('.l-palette', domElement).addClass('l-color-palette');
+        $('.c-palette', domElement).addClass('c-palette--color');
 
-        $('.s-palette-item', domElement).each(function () {
+        $('.c-palette__item', domElement).each(function () {
             var elem = this;
             $(elem).css('background-color', elem.dataset.item);
         });

src/plugins/summaryWidget/src/input/IconPalette.js

@@ -51,11 +51,11 @@ define([
         var domElement = $(this.palette.getDOM()),
             self = this;
 
-        $('.s-menu-button', domElement).addClass('t-icon-palette-menu-button');
+        $('.c-button--menu', domElement).addClass('c-button--swatched');
         $('.t-swatch', domElement).addClass('icon-swatch');
-        $('.l-palette', domElement).addClass('l-icon-palette');
+        $('.c-palette', domElement).addClass('c-palette--icon');
 
-        $('.s-palette-item', domElement).each(function () {
+        $('.c-palette-item', domElement).each(function () {
             var elem = this;
             $(elem).addClass(elem.dataset.item);
         });

src/plugins/summaryWidget/src/input/Palette.js

@@ -30,33 +30,34 @@ define([
 
         this.domElement = $(paletteTemplate);
         this.itemElements = {
-            nullOption: $('.l-option-row .s-palette-item', this.domElement)
+            nullOption: $('.c-palette__item-none .c-palette__item', this.domElement)
         };
         this.eventEmitter = new EventEmitter();
         this.supportedCallbacks = ['change'];
         this.value = this.items[0];
         this.nullOption = ' ';
+        this.button = $('.js-button', this.domElement);
+        this.menu = $('.c-menu', this.domElement);
 
         this.hideMenu = this.hideMenu.bind(this);
 
-        self.domElement.addClass(this.cssClass);
+        self.button.addClass(this.cssClass);
         self.setNullOption(this.nullOption);
 
-        $('.l-palette-row', self.domElement).after('<div class = "l-palette-row"> </div>');
         self.items.forEach(function (item) {
-            var itemElement = $('<div class = "l-palette-item s-palette-item"' +
-                                ' data-item = ' + item + '> </div>');
-            $('.l-palette-row:last-of-type', self.domElement).append(itemElement);
+            var itemElement = $('<div class = "c-palette__item ' + item + '"' +
+                                ' data-item = ' + item + '></div>');
+            $('.c-palette__items', self.domElement).append(itemElement);
             self.itemElements[item] = itemElement;
         });
 
-        $('.menu', self.domElement).hide();
+        $('.c-menu', self.domElement).hide();
 
         this.listenTo($(document), 'click', this.hideMenu);
-        this.listenTo($('.l-click-area', self.domElement), 'click', function (event) {
+        this.listenTo($('.js-button', self.domElement), 'click', function (event) {
             event.stopPropagation();
-            $('.menu', self.container).hide();
-            $('.menu', self.domElement).show();
+            $('.c-menu', self.container).hide();
+            $('.c-menu', self.domElement).show();
         });
 
         /**
@@ -69,10 +70,10 @@ define([
             var elem = event.currentTarget,
                 item = elem.dataset.item;
             self.set(item);
-            $('.menu', self.domElement).hide();
+            $('.c-menu', self.domElement).hide();
         }
 
-        this.listenTo($('.s-palette-item', self.domElement), 'click', handleItemClick);
+        this.listenTo($('.c-palette__item', self.domElement), 'click', handleItemClick);
     }
 
     /**
@@ -90,7 +91,7 @@ define([
     };
 
     Palette.prototype.hideMenu = function () {
-        $('.menu', this.domElement).hide();
+        $('.c-menu', this.domElement).hide();
     };
 
     /**
@@ -139,8 +140,8 @@ define([
      * Update the view assoicated with the currently selected item
      */
     Palette.prototype.updateSelected = function (item) {
-        $('.s-palette-item', this.domElement).removeClass('selected');
-        this.itemElements[item].addClass('selected');
+        $('.c-palette__item', this.domElement).removeClass('is-selected');
+        this.itemElements[item].addClass('is-selected');
         if (item === 'nullOption') {
             $('.t-swatch', this.domElement).addClass('no-selection');
         } else {
@@ -162,7 +163,7 @@ define([
      * Hides the 'no selection' option to be hidden in the view if it doesn't apply
      */
     Palette.prototype.toggleNullOption = function () {
-        $('.l-option-row', this.domElement).toggle();
+        $('.c-palette__item-none', this.domElement).toggle();
     };
 
     return Palette;

src/plugins/summaryWidget/src/views/SummaryWidgetView.js

@@ -3,6 +3,8 @@ define([
 ], function (
     summaryWidgetTemplate
 ) {
+    const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
+
     function SummaryWidgetView(domainObject, openmct) {
         this.openmct = openmct;
         this.domainObject = domainObject;
@@ -18,7 +20,7 @@ define([
         this.widget.title = datum.message;
         this.label.title = datum.message;
         this.label.innerHTML = datum.ruleLabel;
-        this.label.className = 'label widget-label c-summary-widget__label ' + datum.icon;
+        this.icon.className = WIDGET_ICON_CLASS + ' ' + datum.icon;
     };
 
     SummaryWidgetView.prototype.render = function () {
@@ -29,7 +31,8 @@ define([
 
         this.container.innerHTML = summaryWidgetTemplate;
         this.widget = this.container.querySelector('a');
-        this.label = this.container.querySelector('.widget-label');
+        this.icon = this.container.querySelector('#widgetIcon');
+        this.label = this.container.querySelector('.js-sw__label');
 
 
         if (this.domainObject.url) {

src/plugins/summaryWidget/src/views/summary-widget.html

@@ -1,5 +1,4 @@
-<div class="w-summary-widget s-status-no-data c-widget-wrapper u-contents">
-    <a class="t-summary-widget c-button c-summary-widget u-links u-fills-container">
-        <span class="label widget-label c-summary-widget__label">Loading...</span>
-    </a>
-</div>
+<a class="t-summary-widget c-summary-widget js-sw u-links u-fills-container">
+    <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
+    <div id="widgetLabel" class="c-sw__label js-sw__label">Loading...</div>
+</a>

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/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="s-button t-export icon-download labeled"
+        <button class="c-button icon-download labeled"
            v-on:click="exportAsCSV()"
            title="Export This View's Data">
-            Export As CSV
-        </a>
+            <span class="c-button__label">Export As CSV</span>
+        </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 */
@@ -408,7 +409,7 @@ export default {
                     direction: 'asc'
                 }
             }
-            this.table.filteredRows.sortBy(this.sortOptions);
+            this.table.sortBy(this.sortOptions);
         },
         scroll() {
             if (!this.processingScroll) {

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/_animations.scss

@@ -1,18 +1,18 @@
-@include keyframes(rotation) {
+@keyframes rotation {
     100% { transform: rotate(360deg); }
 }
 
-@include keyframes(rotation-centered) {
+@keyframes rotation-centered {
     0%   { transform: translate(-50%, -50%) rotate(0deg); }
     100% { transform: translate(-50%, -50%) rotate(360deg); }
 }
 
-@include keyframes(clock-hands) {
+@keyframes clock-hands {
     0% { transform: translate(-50%, -50%) rotate(0deg); }
     100% { transform: translate(-50%, -50%) rotate(360deg);  }
 }
 
-@include keyframes(clock-hands-sticky) {
+@keyframes clock-hands-sticky {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

src/styles-new/_constants-espresso.scss

@@ -60,6 +60,8 @@ $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
 $colorBodyBg: #393939;
@@ -171,15 +173,19 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.6);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
 $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%);
@@ -198,7 +204,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -207,7 +213,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.1);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -217,6 +224,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.4) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -227,10 +238,13 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $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;
@@ -253,16 +267,26 @@ $colorLimitRedIc: #ff4222;
 
 // Status
 $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;
 
 // Bubble colors
-$colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleBg: #dddddd;
 $colorInfoBubbleFg: #666;
+$colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: buttonBg($colorBtnBg);
@@ -295,7 +319,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(white, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
@@ -324,6 +348,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterHandleD: 2px;
+$splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorBodyBg, 10%);
@@ -346,7 +371,7 @@ $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
 
 // About Screen
-$colorAboutLink: $colorKeySubtle;
+$colorAboutLink: #9bb5ff;
 
 // Loading
 $colorLoadingFg: #776ba2;

src/styles-new/_constants-maelstrom.scss

@@ -64,6 +64,8 @@ $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
 $colorBodyBg: #393939;
@@ -175,15 +177,19 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.6);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
 $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%);
@@ -202,7 +208,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -211,7 +217,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.1);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -221,6 +228,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.4) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -231,10 +242,13 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $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;
@@ -257,16 +271,26 @@ $colorLimitRedIc: #ff4222;
 
 // Status
 $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;
 
 // Bubble colors
-$colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleBg: #dddddd;
 $colorInfoBubbleFg: #666;
+$colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: buttonBg($colorBtnBg);
@@ -299,7 +323,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(white, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
@@ -328,6 +352,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterHandleD: 2px;
+$splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorBodyBg, 10%);

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

@@ -55,11 +55,13 @@ $bodyFont: $heroFont;
     @return lighten($val, $amt);
 }
 
-// Constants
+// General
 $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: none;
+$shdwBtnsOverlay: none;
 
 // Base colors
 $colorBodyBg: #fcfcfc;
@@ -171,15 +173,19 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.2);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.2);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: pushBack($colorDropHint, 40%);
 $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%);
@@ -198,7 +204,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -207,7 +213,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.05);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.5);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -217,6 +224,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.7) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -227,10 +238,13 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $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;
@@ -253,16 +267,25 @@ $colorLimitRedIc: #ffa99a;
 
 // Status
 $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;
 
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: pushBack($colorBtnBg, 20%);
@@ -295,7 +318,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(black, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 10%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used

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 */
@@ -59,6 +60,30 @@ $plotLegendH: 20px;
 $plotSwatchD: 8px;
 $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
 $plotMinH: 95px;
+$controlBarH: 25px;
+/*************** Imagery */
+$imageMainControlBarH: 25px;
+$imageThumbsD: 100px;
+$imageThumbsWrapperH: 155px;
+$imageThumbPad: 1px;
+/*************** Bubbles */
+$bubbleArwSize: 10px;
+$bubblePad: $interiorMargin;
+$bubbleMinW: 100px;
+$bubbleMaxW: 300px;
+/*************** Menus */
+$paletteMenuMinW: 128px; // Min-width of palettes when in a dropdown menu
+/*************** Forms */
+$formLabelMinW: 120px;
+$formLabelW: 30%;
+/*************** Wait Spinner */
+$waitSpinnerD: 32px;
+$waitSpinnerTreeD: 20px;
+$waitSpinnerBorderW: 5px;
+$waitSpinnerTreeBorderW: 4px;
+/*************** Messages */
+$messageIconD: 80px;
+$messageListIconD: 32px;
 
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used

src/styles-new/_controls.scss

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/********* Buttons */
+/******************************************************** BUTTONS */
 // Optionally can include icon in :before via markup
 button {
     @include htmlInputReset();
@@ -39,6 +39,15 @@ button {
             opacity: 0.5;
         }
     }
+
+    &--swatched {
+        // Used with c-button--menu: a visual button with a larger swatch element adjacent to an icon
+        .c-swatch {
+            $d: 12px;
+            margin-left: $interiorMarginSm;
+            height: $d; width: $d;
+        }
+    }
 }
 
 .c-compact-button {
@@ -46,9 +55,13 @@ button {
 }
 
 /********* Icon Buttons */
-.c-click-icon,
-.c-click-swatch {
+.c-click-icon {
     @include cClickIcon();
+}
+
+.c-icon-button,
+.c-click-swatch {
+    @include cClickIconButton();
 
     &--menu {
         &:after {
@@ -61,8 +74,8 @@ button {
     }
 }
 
-.c-click-icon {
-    .c-click-icon__label {
+.c-icon-button {
+    .c-icon-button__label {
         margin-left: $interiorMargin;
     }
 
@@ -237,6 +250,12 @@ select {
     border: none;
     border-radius: $controlCr;
     padding: 1px 20px 1px $interiorMargin;
+
+    *,
+    option {
+        background: $colorBtnBg;
+        color: $colorBtnFg;
+    }
 }
 
 // CHECKBOX LISTS
@@ -372,33 +391,37 @@ select {
 .c-palette {
     display: flex;
     flex-flow: column nowrap;
+    line-height: normal;
 
     &__items {
-        flex: 1 1 auto;
         display: grid;
-        grid-template-columns: repeat(auto-fill, 12px);
         grid-gap: 1px;
+        grid-template-columns: repeat(auto-fill, 12px);
+        flex: 1 1 auto;
+
+        .c-menu & {
+            min-width: $paletteMenuMinW;
+        }
     }
 
     &__item {
         $d: 12px;
-
         border: 1px solid transparent;
         cursor: pointer;
-        min-width: $d; min-height: $d;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        width: $d;
+        height: $d;
+        text-align: center;
         transition: $transOut;
 
         &:hover {
             transition: $transIn;
-            $o: 0.7;
-            border-color: rgba($paletteItemBorderOuterColorSelected, $o);
-            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, $o) 0 0 0 1px;
         }
 
         &.is-selected {
-            border-color: $paletteItemBorderOuterColorSelected !important;
-            border-width: 2px;
-            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+            border-width: 1px;
         }
     }
 
@@ -414,6 +437,44 @@ select {
             margin-right: $interiorMarginSm;
         }
     }
+
+    &--color {
+        .c-palette__item {
+            &:hover {
+                border-color: rgba($paletteItemBorderOuterColorSelected, 0.7);
+                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 0.7) 0 0 0 1px;
+            }
+
+            &.is-selected {
+                border-color: $paletteItemBorderOuterColorSelected !important;
+                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+            }
+        }
+    }
+
+    &--icon {
+        .c-palette__items {
+            grid-gap: 3px;
+        }
+
+        .c-palette__item {
+            border-radius: $smallCr;
+            font-size: 0.6rem;
+
+            &:before {
+                display: block;
+                width: 100%;
+            }
+
+            &:hover {
+                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.3) 0 0 0 1px;
+            }
+
+            &.is-selected {
+                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.6) 0 0 0 1px;
+            }
+        }
+    }
 }
 
 /******************************************************** SWATCHES */
@@ -443,12 +504,6 @@ select {
 }
 
 .c-toolbar {
-    $p: $interiorMargin;
-    background: $editUIBaseColor;
-    border-radius: $basicCr;
-    height: $p + 24px; // Need to standardize the height
-    padding: $p;
-
     > * + * {
         margin-left: 2px;
     }
@@ -457,12 +512,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;
@@ -502,16 +557,10 @@ select {
             margin-left: $interiorMargin;
         }
     }
-
-    .c-palette {
-        min-width: 136px;
-    }
 }
 
 /********* Button Sets */
 .c-button-set {
-    // When one set is adjacent to another, provides a divider between
-
     display: inline-flex;
     flex: 0 0 auto;
 
@@ -520,21 +569,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
-        &[class^="c-button"] {
+        // 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;
             }
@@ -606,6 +658,46 @@ input[type="range"] {
     }
 }
 
+/***************************************************** LOCAL CONTROLS */
+.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
@@ -656,25 +748,7 @@ input[type="range"] {
 }
 
 /***************************************************** LEGACY */
-
 .l-btn-set {
-    // Fixes
     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

@@ -19,9 +19,34 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+.c-form {
+    display: flex;
+    flex-direction: column;
+
+    &__section {
+        display: inherit;
+        flex-direction: column;
+    }
+
+    &__row {
+        display: flex;
+    }
+
+    &__header {
+        border-radius: $basicCr;
+        background: $colorFormSectionHeaderBg;
+        color: $colorFormSectionHeaderFg;
+        font-size: inherit;
+        font-weight: normal;
+        margin: $interiorMargin 0;
+        padding: $formTBPad $formLRPad;
+        text-transform: uppercase;
+    }
+}
+
+/***************************************************** LEGACY */
 .section-header {
     border-radius: $basicCr;
-    background: $colorFormSectionHeader;
     color: lighten($colorBodyFg, 20%);
     font-size: inherit;
     margin: $interiorMargin 0;
@@ -36,7 +61,7 @@
 }
 
 .form {
-	color: $colorFormText;
+    color: $colorFormText;
     height: 100%;
     width: 100%;
 
@@ -54,69 +79,69 @@
         }
     }
 
-	.form-row {
-		$m: $interiorMargin;
-		box-sizing: border-box;
-		border-top: 1px solid $colorFormLines;
-		padding: $formTBPad 0;
-		position: relative;
+    .form-row {
+        $m: $interiorMargin;
+        box-sizing: border-box;
+        border-top: 1px solid $colorFormLines;
+        padding: $formTBPad 0;
+        position: relative;
 
-		&.first {
-			border-top: none;
-		}
+        &.first {
+            border-top: none;
+        }
 
-		>.label,
-		>.controls {
-			box-sizing: border-box;
-			font-size: 0.8rem;
-		}
+        >.label,
+        >.controls {
+            box-sizing: border-box;
+            font-size: 0.8rem;
+        }
 
-		>.label {
-			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
-			min-width: 120px;
+        >.label {
+            // Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
+            min-width: 120px;
             order: 1;
             position: relative;
-			white-space: nowrap;
-			width: $formLabelW;
-		}
+            white-space: nowrap;
+            width: $formLabelW;
+        }
 
-		.value {
-			color: $colorInputFg;
-		}
+        .value {
+            color: $colorInputFg;
+        }
 
-		.controls {
+        .controls {
             order: 2;
             position: relative;
             flex: 1 1 auto;
 
-			.l-composite-control {
-				&.l-checkbox {
-					display: inline-block;
-					line-height: $formRowCtrlsH;
-					margin-right: 5px;
-				}
-			}
-			.select {
-				margin-right: $interiorMargin;
-			}
-		}
+            .l-composite-control {
+                &.l-checkbox {
+                    display: inline-block;
+                    line-height: $formRowCtrlsH;
+                    margin-right: 5px;
+                }
+            }
+            .select {
+                margin-right: $interiorMargin;
+            }
+        }
 
-		.hint, .field-hints {  color: $colorFieldHint;  }
+        .hint, .field-hints {  color: $colorFieldHint;  }
 
-		.selector-list {
-			// Used in create overlay to display tree view
-			@include nice-input();
+        .selector-list {
+            // Used in create overlay to display tree view
+            @include nice-input();
             padding: $interiorMargin;
-			position: relative;
+            position: relative;
             min-height: 150px;
-			height: 100%;
-			>.wrapper {
-				$p: $interiorMargin;
+            height: 100%;
+            >.wrapper {
+                $p: $interiorMargin;
                 box-sizing: border-box;
-				overflow: auto;
-			}
-		}
-	}
+                overflow: auto;
+            }
+        }
+    }
 }
 
 .l-controls-first .form .form-row,
@@ -148,36 +173,59 @@
     }
 }
 
-.hint,
-.s-hint {
-	font-size: 0.9em;
-    .req {
-        color: $colorFormRequired;
-        font-size: 0.7rem;
+.l-composite-control {
+    vertical-align: middle;
+    &:not(.l-inline) {
+        margin-bottom: $interiorMargin;
+    }
+    &.l-inline {
+        display: inline-block;
+    }
+    &.l-checkbox {
+        .composite-control-label {
+            line-height: 18px;
+        }
     }
 }
 
-.l-result {
-	// Used in /vista/channel-query.html and evr-query.html as of 2/24/15
-	display: inline-block;
-	min-width: 32px; min-height: 32px;
-	position: relative;
-	vertical-align: top;
-
-	div.s-hint {
-		border-radius: $basicCr;
-		background: rgba($colorFormInvalid, 0.8);
-		display: block;
-		color: lighten($colorFormInvalid, 30%);
-		padding: $interiorMargin;
-	}
+.autocomplete {
+    input {
+        width: 226px;
+        padding: 5px 0px 5px 7px;
+    }
+    .icon-arrow-down {
+        position: absolute;
+        top: 8px;
+        left: 210px;
+        font-size: 10px;
+        cursor: pointer;
+    }
+    .autocompleteOptions {
+        border: 1px solid $colorFormLines;
+        border-radius: 5px;
+        width: 224px;
+        max-height: 170px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        li {
+            border: 1px solid $colorFormLines;
+            padding: 8px 0px 8px 5px;
+            .optionText {
+                cursor: pointer;
+            }
+        }
+        .optionPreSelected {
+            background-color: $colorInspectorSectionHeaderBg;
+            color: $colorInspectorSectionHeaderFg;
+        }
+    }
 }
 
-/**************************************************************************** COMPACT FORM */
+/********* COMPACT FORM */
 // ul > li > label, control
 // Make a new UL for each form section
 // Allow control-first, controls-below
-// TO-DO: migrate work in branch ch-plot-styling that users .inspector-config to use classes below instead
+// 3/8/19: Used by Summary Widgets edit UI
 
 .l-compact-form .tree ul li,
 .l-compact-form ul li {
@@ -186,39 +234,41 @@
 
 
 .l-compact-form {
+    $h: $btnStdH;
     $labelW: 40%;
     $minW: $labelW;
     ul {
-        margin-bottom: $interiorMarginLg;
         li {
             display: flex;
-            flex-wrap: wrap;
-            align-items: center;
+            align-items: stretch;
+            padding: $interiorMargin 0;
+
             label,
             .control {
                 display: flex;
             }
             label {
-                line-height: inherit;
+                line-height: $h;
                 width: $labelW;
             }
             .controls {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: flex-start;
                 flex-grow: 1;
                 margin-left: $interiorMargin;
+                min-height: $h;
+                line-height: $h;
                 input[type="text"],
                 input[type="search"],
                 input[type="number"],
-                .select {
-                    height: $btnStdH;
-                    line-height: $btnStdH;
-                    vertical-align: middle;
+                button,
+                select {
+                    min-height: $h;
                 }
 
-                .e-control {
-                    // Individual form controls
-                    &:not(:first-child) {
-                        margin-left: $interiorMarginSm;
-                    }
+                > * + * {
+                    margin-left: $interiorMarginSm;
                 }
             }
 
@@ -261,6 +311,7 @@
     }
 }
 
+/******** VALIDATION */
 .form-error {
     // Block element that visually flags an error and contains a message
     background-color: $colorFormFieldErrorBg;
@@ -275,3 +326,41 @@
         margin-right: $interiorMarginSm;
     }
 }
+
+
+@mixin labelValidate($sym, $c) {
+    > .label {
+        @include glyphAfter($sym);
+        &:after {
+            color: $c;
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+mct-form.validates {
+    .form-row.validates {
+        > .label {
+            padding-right: 1em; // Keep room for validation element
+            &:after {
+                font-size: .8em;
+            }
+        }
+        &.invalid,
+        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
+
+        &.valid,
+        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
+
+        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
+    }
+}
+
+body.desktop .form-row.validates > .label {
+    &:after {
+        position: absolute;
+        right: $interiorMargin;
+        height: 100%;
+        line-height: 200%;
+    }
+}

src/styles-new/_global.scss

@@ -102,20 +102,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;
 }
@@ -247,6 +233,7 @@ mct-container {
     padding: 1em;
 }
 
+*[disabled],
 .disabled,
 a.disabled {
     opacity: $controlDisabledOpacity;
@@ -301,6 +288,7 @@ a.disabled {
             $c $e,
             transparent $e + 5%
     );
+    box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
     background-repeat: no-repeat;
     background-size: contain;
 }

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

@@ -19,14 +19,12 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.abs.holder-plot {
-    right: $interiorMargin; // Fend off the scrollbar when less than min-height;
-    .t-object-alert.t-alert-unsynced {
-        display: none;
-    }
+/********************************************************************* PLOTS */
+mct-plot {
+    display: contents;
 }
 
-/********************************************* STACKED PLOT LAYOUT */
+/*********************** STACKED PLOT LAYOUT */
 .t-plot-stacked {
     .l-view-section {
         //  Make this a flex container
@@ -56,13 +54,13 @@
 .gl-plot {
     color: $colorPlotFg;
     display: flex;
-    font-size: 0.7rem;
+    //font-size: 0.7rem;
     position: relative;
     width: 100%;
     height: 100%;
     min-height: $plotMinH;
 
-    /********************************************* AXIS AND DISPLAY AREA */
+    /*********************** AXIS AND DISPLAY AREA */
     .plot-wrapper-axis-and-display-area {
         margin-top: $interiorMargin; // Keep the top tick label from getting clipped
         position: relative;
@@ -73,6 +71,7 @@
             font-size: 1.5em;
             top: $interiorMarginSm;
             left: $interiorMarginSm;
+            z-index: 2;
         }
     }
 
@@ -80,7 +79,7 @@
         // Holds the plot area and the X-axis only
         position: absolute;
         top: nth($plotDisplayArea, 1);
-        right: nth($plotDisplayArea, 2);
+        right:0;
         bottom: 0;
         left: nth($plotDisplayArea, 4);
 
@@ -201,49 +200,25 @@
         }
     }
 
-    /****************************** Limits and Out-of-Bounds data */
-
-    .l-limit-bar,
-    .l-oob-data {
+    &__local-controls {
+        // Plot local controls
+        $m: $interiorMargin;
+        display: flex;
+        align-items: center;
         position: absolute;
-        left: 0;
-        right: 0;
-        width: auto;
-    }
+        top: $m;
+        right: $m;
+        z-index: 9;
 
-    .l-limit-bar {
-        // Limits in plot display area
-        @mixin limitBg($c) {
-            background: rgba($c, 0.2);
+        &__reset {
+            transition: right 100ms;
+            top: $m;
+            right: $m;
         }
 
-        height: auto;
-        z-index: 0;
-        &.s-limit-yellow {
-            @include limitBg($colorLimitYellowBg);
-        }
-        &.s-limit-red {
-            @include limitBg($colorLimitRedBg);
-        }
-    }
-
-    .l-oob-data {
-        $c: #7748d6;
-        $a: 0.5;
-        $h: 10px;
-        @include absPosDefault();
-        pointer-events: none;
-        height: $h;
-        z-index: 1;
-        &.l-oob-data-up {
-            top: 0;
-            bottom: auto;
-            @include linearGlow(0deg, $c, $a);
-        }
-        &.l-oob-data-dwn {
-            bottom: 0;
-            top: auto;
-            @include linearGlow(180deg, $c, $a);
+        &__zoom-and-guides {
+            top: $m;
+            right: $m;
         }
     }
 }
@@ -377,3 +352,199 @@
         }
     }
 }
+
+/****************** _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/_mixins.scss

@@ -49,6 +49,19 @@
     }
 }
 
+/************************** EFFECTS */
+@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @keyframes pulse {
+        0%   { opacity: $opacity0; }
+        100% { opacity: $opacity100; }
+    }
+    animation-name: $animName;
+    animation-duration: $dur;
+    animation-direction: alternate;
+    animation-iteration-count: $iteration;
+    animation-timing-function: ease-in-out;
+}
+
 /************************** VISUALS */
 @mixin ancillaryIcon($d, $c) {
     // Used for small icons used in combination with larger icons,
@@ -164,6 +177,30 @@
     background-color: $bg;
 }
 
+@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
+    width: 0;
+    height: 0;
+    $slopedB: $size/$ratio solid transparent;
+    $straightB: $size solid $color;
+    @if $dir == "up" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-bottom: $straightB;
+    } @else if $dir == "right" {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-left: $straightB;
+    } @else if $dir == "down" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-top: $straightB;
+    } @else {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-right: $straightB;
+    }
+}
+
 @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-90deg,
         rgba($c, $a) 0%, rgba($c, $a) 50%,
@@ -184,7 +221,7 @@
     background-color: $colorInspectorSectionHeaderBg;
     color: $colorInspectorSectionHeaderFg;
     font-weight: normal;
-    margin: 0 0 $interiorMarginSm 0;
+    margin: $interiorMarginSm 0;
     padding: $interiorMarginSm $interiorMargin;
     text-transform: uppercase;
 }
@@ -336,7 +373,8 @@
         color: $colorBtnFgHov;
     }
 
-    &[class*="--major"] {
+    &[class*="--major"],
+    &[class*='is-active']{
         background: $colorBtnMajorBg;
         color: $colorBtnMajorFg;
 
@@ -356,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
@@ -381,6 +432,12 @@
         font-size: 1.25em;
     }
 
+    @include hover() {
+        transition: $transIn;
+        background: $colorClickIconButtonBgHov;
+        color: $colorClickIconButtonFgHov;
+    }
+
     &[class*="--major"] {
         color: $colorKey;
     }
@@ -553,3 +610,9 @@
     background-color: rgba($c, $a) !important;
     box-shadow: deeppink 0 0 10px 1px !important;
 }
+
+
+@mixin sUnsynced() {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+}

src/styles-new/core.scss

@@ -21,18 +21,15 @@
  *****************************************************************************/
 
 @import "vendor/normalize.min.css";
-@import "sass-base.scss";
+@import "sass-base";
 
 /******************** RENDERS CSS */
+@import "about";
 @import "glyphs";
 @import "global";
 @import "status";
 @import "controls";
+@import "forms";
 @import "table";
 @import "legacy";
-
-/******************** LEGACY CSS */
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "legacy-styles";
-
+@import "legacy-plots";

src/styles-new/legacy-styles.scss

@@ -1,76 +0,0 @@
-@import "../styles/mixins";
-@import "../styles/mobile/mixins";
-@import "../styles/themes/snow/mixins";
-
-@import "../styles/constants";
-@import "../styles/mobile/constants";
-@import "../styles/themes/snow/constants";
-
-@import "../styles/animations";
-@import "../styles/effects";
-// @import "../styles/glyphs";
-@import "../styles/animations";
-@import "../styles/archetypes";
-//@import "../styles/about";
-//@import "../styles/text";
-@import "../styles/icons";
-//@import "../styles/status";
-@import "../styles/data-status";
-@import "../styles/helpers/bubbles";
-@import "../styles/helpers/splitter";
-@import "../styles/helpers/wait-spinner";
-//@import "../styles/inspector";
-//
-//!********************************* CONTROLS *!
-//@import "../styles/controls/breadcrumb";
-@import "../styles/controls/buttons";
-//@import "../styles/controls/palette";
-//@import "../styles/controls/controls";
-@import "../styles/controls/lists";
-@import "../styles/controls/menus";
-@import "../styles/controls/messages";
-@import "../styles/controls/indicators";
-@import "../styles/mobile/controls/menus";
-//
-//!********************************* FORMS *!
-@import "../styles/forms/elems";
-@import "../styles/forms/channel-selector";
-@import "../styles/forms/datetime";
-@import "../styles/forms/validation";
-@import "../styles/forms/filter";
-//
-//!********************************* USER ENVIRON *!
-@import "../styles/user-environ/layout";
-@import "../styles/mobile/layout";
-@import "../styles/edit/editor";
-//@import "../styles/search/search";
-//@import "../styles/mobile/search/search";
-@import "../styles/overlay/overlay";
-@import "../styles/tree/tree"; // TEMP - NEED FOR TREE IN INSPECTOR
-@import "../styles/object-label";
-//@import "../styles/mobile/tree";
-@import "../styles/user-environ/frame";
-@import "../styles/user-environ/top-bar";
-@import "../styles/user-environ/tool-bar";
-@import "../styles/user-environ/selecting";
-//
-//!********************************* VIEWS *!
-//@import "../styles/lists/tabular";
-//@import "../styles/plots/plots-main";
-//@import "../styles/plots/legend";
-@import "../styles/iframe";
-@import "../styles/views";
-@import "../styles/items/item";
-@import "../styles/mobile/item";
-@import "../styles/table";
-//@import "../styles/notebook/notebook";
-//
-//!********************************* TO BE MOVED *!
-@import "../styles/autoflow";
-@import "../styles/features/imagery";
-//@import "../styles/features/time-display";
-@import "../styles/widgets";
-//
-//!********************************* APP STARTUP *!
-//@import "../styles/app-start";
-

src/styles-new/sass-base.scss

@@ -24,7 +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-mobile.scss";
 @import "constants-espresso"; // TEMP
 //@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
-@import "mixins";
+@import "mixins";
+@import "animations";

src/styles/_about.scss

@@ -1,88 +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.
- *****************************************************************************/
-// General About dialog styling
-// Depends on styles loaded via /platform/commonUI/general/res/sass/startup-base.scss
-.l-about {
-	&.abs {
-		overflow: auto;
-	}
-	$contentH: 200px;
-	.l-splash {
-		position: relative;
-		height: 45%;
-	}
-	.l-content {
-		position: relative;
-		margin-top: $interiorMarginLg;
-	}
-}
-
-.s-about {
-	line-height: 120%;
-
-	a {
-		color: $colorAboutLink;
-	}
-
-    h1, h2, h3 {
-        color: pullForward($colorBodyFg, 20%);
-        margin-bottom: 1em;
-    }
-
-    h1 {
-        font-size: 2.25em;
-    }
-
-    h2 {
-        border-top: 1px solid $colorInteriorBorder;
-        font-size: 1.5em;
-        margin-top: 2em;
-        padding-top: 1em;
-    }
-
-    h3 {
-        margin-top: 2em;
-    }
-
-	.s-description,
-	.s-button {
-		line-height: 2em;
-	}
-	.l-licenses-software {
-		.l-license-software {
-			border-top: 1px solid $colorInteriorBorder;
-			padding: 0.5em 0;
-			&:first-child {
-				border-top: none;
-			}
-			em {
-				color: pushBack($colorBodyFg, 20%);
-			}
-			h3 {
-				font-size: 1.25em;
-			}
-			.s-license-text {
-				font-size: 0.9em;
-			}
-		}
-	}
-}

src/styles/_app-start.scss

@@ -1,11 +0,0 @@
-// At the last, hide .l-splash-holder and show .holder-all
-.l-splash-holder.fadeout {
-    @include trans-prop-nice($props: opacity, $dur: 1000ms);
-    opacity: 0;
-    pointer-events: none;
-}
-
-.user-environ .holder-all {
-    opacity: 1;
-    pointer-events: inherit;
-}

src/styles/_archetypes.scss

@@ -1,213 +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.
- *****************************************************************************/
-
-/********************************************* COLUMN LAYOUTS STYLES */
-@mixin cols($totalCols, $span) {
-    $cw: 100% / $totalCols;
-    min-width: (500px / $totalCols) * $span;
-    @if ($totalCols != $span) {
-        width: ($cw * $span) - $ueColMargin;
-    } @else {
-        width: $cw;
-    }
-}
-
-.cols {
-    @include clearfix;
-    .col {
-        box-sizing: border-box;
-        @include clearfix;
-        float: left;
-        margin-left: $ueColMargin;
-        padding-left: $interiorMargin;
-        position: relative;
-        &:first-child {
-            margin-left: 0;
-            padding-left: 0;
-        }
-    }
-    &.cols-2 {
-        $nc: 2;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-2-ff {
-        // 2 columns, first column is fixed, second is fluid
-        .col-100px {
-            width: 100px;
-        }
-    }
-
-    &.cols-6 {
-        $nc: 6;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-16 {
-        $nc: 16;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-7 {
-            @include cols($nc, 7);
-        }
-    }
-    &.cols-32 {
-        $nc: 32;
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-15 {
-            @include cols($nc, 15);
-        }
-    }
-    .l-row {
-        @include clearfix;
-        padding: $interiorMargin 0;
-    }
-}
-
-/********************************************* FLEX STYLES */
-.l-flex-row,
-.l-flex-col {
-    display: flex;
-    flex-wrap: nowrap;
-    .flex-elem {
-        min-height: 0; // Needed to allow element to shrink within parent
-        position: relative;
-        &:not(.grows) {
-            flex: 0 0 auto;
-            &.flex-can-shrink {
-                flex: 0 1 auto;
-            }
-        }
-        &.grows {
-            flex: 1 1 auto;
-        }
-        &.contents-align-right {
-            text-align: right;
-        }
-    }
-    .flex-container {
-        // Apply to wrapping elements, mct-includes, etc.
-        display: flex;
-        flex-wrap: nowrap;
-        flex: 1 1 auto;
-        min-height:0;
-    }
-}
-
-.l-flex-row {
-    flex-direction: row;
-    &.flex-elem { flex: 1 1 auto; }
-    > .flex-elem {
-        min-width: 0;
-        &.holder:not(:last-child) { margin-right: $interiorMargin; }
-    }
-    .flex-container { flex-direction: row; }
-}
-
-.l-flex-col {
-    flex-direction: column;
-    > .flex-elem {
-        min-height: 0;
-        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
-    }
-    &.l-flex-accordion .flex-accordion-holder {
-        display: flex;
-        flex-direction: column;
-        //overflow: hidden !important;
-    }
-    .flex-container { flex-direction: column; }
-}
-
-.flex-fixed {
-    flex: 0 0 auto;
-}
-
-.flex-justify-end {
-    justify-content: flex-end;
-}
-
-/********************************************* POPUPS */
-.t-popup {
-    z-index: 75;
-}
-
-/********************************************* GRID STYLES */
-.grid-two-column {
-    display: grid;
-    grid-row-gap: 0;
-    grid-template-columns: 1fr 2fr;
-    align-items: top;
-}
-
-.grid-two-column-span-cols {
-    grid-column: 1 / 3;
-}
-
-.grid-elem {
-    &:not(:first-child) {
-        border-top: 1px solid $colorInteriorBorder;
-    }
-    &.label {
-        background-color: rgba(0,0,128,0.2);
-    }
-    &.value {
-        background-color: rgba(0,128,0,0.2);
-    }
-}
-
-// Properties grids
-.grid-properties {
-    @extend .grid-two-column;
-}
-
-.grid-row {
-    display: contents;
-}
-
-.grid-span-all {
-    @extend .grid-two-column-span-cols;
-}
-
-.grid-row {
-    .grid-cell {
-        padding: 3px $interiorMarginLg 3px 0;
-        &[title] {
-            // When a cell has a title, assume it's helpful text
-            cursor: help;
-        }
-    }
-    &.force-border,
-    &:not(:first-of-type) {
-        // Row borders, effected via border-top on child elements of the row
-        .grid-cell {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
-    }
-}

src/styles/_autoflow.scss

@@ -1,137 +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.
- *****************************************************************************/
-.autoflow {
-	$headerH: $formInputH;
-	$colMargin: $interiorMargin;
-	$colW: 225px;
-	$valW: 70px;
-	$valPad: 5px;
-	$rowH: 15px;
-	font-size: 0.75rem;
-
-	&:hover {
-		.l-autoflow-header .s-button.change-column-width {
-			@include trans-prop-nice-fade(50ms);
-			opacity: 1;
-		}
-	}
-
-	.l-autoflow-header {
-		bottom: auto;
-		height: $headerH;
-		line-height: $headerH;
-        min-width: $colW;
-        .t-last-update {
-            overflow: hidden;
-        }
-		.s-button.change-column-width {
-			@include trans-prop-nice-fade(500ms);
-			opacity: 0;
-		}
-		.l-filter {
-            display: block;
-			margin-right: $interiorMargin;
-			input.t-filter-input {
-				width: 150px;
-			}
-		}
-	}
-
-	.l-autoflow-items {
-		//		@include test(green);
-		overflow-x: scroll;
-		overflow-y: hidden;
-		top: $headerH + $interiorMargin * 2;
-		white-space: nowrap;
-		.l-autoflow-col {
-//			@include test();
-			box-sizing: border-box;
-			border-left: 1px solid $colorInteriorBorder;
-			display: inline-block;
-//			height: 100%;
-			padding-left: $colMargin;
-			padding-right: $colMargin;
-			vertical-align: top;
-			width: $colW;
-			.l-autoflow-row {
-				//				@include test(red);
-				box-sizing: border-box;
-				border-bottom: 1px solid rgba(#fff,0.05);
-				display: block;
-				height: $rowH;
-				line-height: $rowH;
-				margin-bottom: 1px; margin-top: 1px;
-				position: relative;
-				&:first-child {
-					border-top: none;
-				}
-				&:hover {
-					background: rgba(#fff, 0.1);
-				}
-				&.s-stale {
-					//color: darken($colorBodyFg, 20%);
-					.l-autoflow-item.l { @include s-stale(0.3); };
-					.l-autoflow-item.r { @include s-stale(); };
-				}
-				&:not(.s-stale) {
-					.l-autoflow-item.r {
-						color: lighten($colorBodyFg, 10%);
-					}
-				}
-				&.first-in-group {
-					border-top: 1px solid lighten($colorInteriorBorder, 20%);
-				}
-				.l-autoflow-item {
-					display: block;
-					&.l {
-						float: none;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						width: auto;
-					}
-					&.r {
-						border-radius: $smallCr;
-						float: right;
-						margin-left: $interiorMargin;
-						padding-left: $valPad;
-						padding-right: $valPad;
-						text-align: right;
-					}
-				}
-			}
-
-			&:first-child {
-				border-left: none;
-				padding-left: 0;
-			}
-		}
-	}
-}
-
-.frame {
-    &.child-frame.panel {
-        .autoflow .l-autoflow-header .l-filter {
-            display: none;
-        }
-    }
-}

src/styles/_badges.scss

@@ -1,45 +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.
- *****************************************************************************/
-.badge {
-    @include background-image(linear-gradient(lighten($colorAlt1, 10%), $colorAlt1));
-    color: $colorBodyBg;
-    display: inline-block;
-    text-align: center;
-}
-
-.top-bar .badge {
-    border-radius: $controlCr * 1.5;
-    $h: $btnStdH; //$ueTopBarBtnH; // - 5px;
-    font-size: 1.4em;
-    height: $h;
-    line-height: $h;
-    margin-right: $interiorMargin;
-    width: $badgeW;
-    vertical-align: middle;
-}
-
-.super-menu .badge {
-    @include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
-    border-radius: $controlCr;
-    @include boxShdwSubtle();
-    padding: 2px 7px;
-}

src/styles/_constants.scss

@@ -1,146 +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.
- *****************************************************************************/
-
-/************************** FEATURES */
-$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported
-
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-$bodyMargin: 10px;
-$interiorMargin: 5px;
-$interiorMarginLg: $interiorMargin * 2;
-$interiorMarginSm: 3px;
-$badgeW: 35px;
-
-/************************** RATIOS */
-$ltGamma: 20%;
-$btnFontSizeToH: 0.45;
-
-/************************** LAYOUT */
-$ueTopBarH: 24px;
-$ueTopBarEditH: 30px;
-$ueTopBarBtnH: 35px;
-$ueFooterH: 25px;
-$ueColMargin: 1.5%;
-$ueAppLogoW: 80px;
-$ueEditToolBarH: 25px;
-$ueCollapsedPaneEdgeM: 22px;
-$uePaneMiniTabH: 36px;
-$uePaneMiniTabW: 10px;
-$uePaneMiniTabFontSize: 9px;
-$uePaneMiniTabCollapsedW: 22px;
-$ueEditLeftPaneW: 75%;
-$treeSearchInputBarH: 25px;
-/*************** Panes */
-$ueBrowseLeftPaneTreeMinW: 150px;
-$ueBrowseLeftPaneTreeMaxW: 35%;
-$ueBrowseLeftPaneTreeW: 25%;
-$ueBrowseRightPaneInspectMinW: 200px;
-$ueBrowseRightPaneInspectMaxW: 35%;
-$ueBrowseRightPaneInspectW: 20%;
-$ueDesktopMinW: 600px;
-/*************** Overlay */
-$ovrTopBarH: 45px;
-$ovrFooterH: 24px;
-$overlayMargin: 25px;
-/*************** Progress Overlay */
-$durEntryMs: 50ms;
-$delayEntryMs: 100ms;
-/*************** Items */
-$ueBrowseGridItemLg: 200px;
-$ueBrowseGridItemTopBarH: 20px;
-$ueBrowseGridItemBottomBarH: 30px;
-$itemPadLR: 5px;
-/*************** Tree */
-$treeVCW: 16px;
-$treeTypeIconH: 1.4em; // was 16px
-$treeTypeIconHPx: 16px;
-$treeTypeIconW: 18px;
-$treeContextTriggerW: 20px;
-/*************** Tabular */
-$tabularHeaderH: 22px;
-$tabularTdPadLR: $itemPadLR;
-$tabularTdPadTB: 2px;
-/*************** Imagery */
-$imageMainControlBarH: 25px;
-$imageThumbsD: 100px;
-$imageThumbsWrapperH: 155px;
-$imageThumbPad: 1px;
-/*************** Ticks */
-$ticksH: 25px;
-$tickLblVMargin: 3px;
-$tickLblH: 15px;
-$tickLblW: 50px;
-$tickH: $ticksH - $tickLblVMargin - $tickLblH;
-$tickW: 1px;
-/*************** Plots */
-$plotYBarW: 60px;
-$plotYLabelMinH: 20px;
-$plotYLabelW: 10px;
-$plotXBarH: 32px;
-$plotLegendH: 20px;
-$plotSwatchD: 8px;
-// 1: Top, 2: right, 3: bottom, 4: left
-$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW);
-/* min plot height is based on user testing to find minimum useful height */
-$plotMinH: 95px;
-/*************** Bubbles */
-$bubbleArwSize: 10px;
-$bubblePad: $interiorMargin;
-$bubbleMinW: 100px;
-$bubbleMaxW: 300px;
-/*************** Forms */
-$reqSymbolW: 15px;
-$reqSymbolM: $interiorMargin * 2;
-$reqSymbolFontSize: 0.75em;
-$inputTextPTopBtm: 2px;
-$inputTextPLeftRight: 5px;
-$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
-/*************** Wait Spinner Defaults */
-$waitSpinnerD: 32px;
-$waitSpinnerTreeD: 20px;
-$waitSpinnerBorderW: 5px;
-$waitSpinnerTreeBorderW: 4px;
-
-/************************** CONTROLS */
-$controlDisabledOpacity: 0.3;
-$formLabelW: 30%;
-$formInputH: 22px;
-$formRowCtrlsH: 14px;
-$formTBPad: $interiorMargin;
-$formLRPad: $interiorMargin;
-$menuLineH: 1.5rem;
-$menuLineHPx: 24px;
-$btnStdH: 25px;
-$btnToolbarH: $btnStdH;
-$controlBarH: $btnStdH;
-$btnFrameH: 18px;
-
-/************************** PATHS */
-// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
-$dirCommonRes: '../';
-$dirFonts: $dirCommonRes + 'fonts/';
-$dirImgs: $dirCommonRes + 'images/';
-
-/************************** TIMINGS */
-$controlFadeMs: 100ms;
-$browseToEditAnimMs: 400ms;
-$editBorderPulseMs: 500ms;