prevents users from using empty strings as names

remove LADTables from default registry to optionally installed in index.html (#2455 )
Auto-correct lint errors (#2450 )
2019-08-29 13:30:01 -07:00 · 2019-08-28 15:55:51 -07:00 · 2019-08-27 09:26:58 -07:00 · 2019-08-16 10:16:43 -07:00 · 2019-08-06 10:36:51 -07:00 · 2019-07-31 15:18:46 -07:00
343 changed files with 11364 additions and 15201 deletions
--- a/example/generator/GeneratorMetadataProvider.js
+++ b/example/generator/GeneratorMetadataProvider.js
@@ -99,10 +99,10 @@ define([

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

    return GeneratorMetadataProvider;
--- a/example/notifications/res/dialog-launch.html
+++ b/example/notifications/res/dialog-launch.html
@@ -1,9 +1,9 @@
 <span class="h-indicator" ng-controller="DialogLaunchController">
    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="ls-indicator icon-box-with-arrow s-status-available"><span class="label">
-        <a ng-click="launchProgress(true)">Known</a>
-        <a ng-click="launchProgress(false)">Unknown</a>
-        <a ng-click="launchError()">Error</a>
-        <a ng-click="launchInfo()">Info</a>
+    <div class="c-indicator c-indicator--clickable icon-box-with-arrow s-status-available"><span class="label c-indicator__label">
+        <button ng-click="launchProgress(true)">Known</button>
+        <button ng-click="launchProgress(false)">Unknown</button>
+        <button ng-click="launchError()">Error</button>
+        <button ng-click="launchInfo()">Info</button>
    </span></div>
 </span>
--- a/example/notifications/res/notification-launch.html
+++ b/example/notifications/res/notification-launch.html
@@ -1,9 +1,9 @@
 <span class="h-indicator" ng-controller="NotificationLaunchController">
    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="ls-indicator icon-bell s-status-available"><span class="label">
-        <a ng-click="newInfo()">Success</a>
-        <a ng-click="newError()">Error</a>
-        <a ng-click="newAlert()">Alert</a>
-        <a ng-click="newProgress()">Progress</a>
+    <div class="c-indicator c-indicator--clickable icon-bell s-status-available"><span class="label c-indicator__label">
+        <button ng-click="newInfo()">Success</button>
+        <button ng-click="newError()">Error</button>
+        <button ng-click="newAlert()">Alert</button>
+        <button ng-click="newProgress()">Progress</button>
    </span></div>
 </span>
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title></title>
        <script src="dist/openmct.js"></script>
-        <link rel="stylesheet" href="dist/openmct.css">
+        <link rel="stylesheet" href="dist/styles/openmct.css">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16">
@@ -36,7 +36,9 @@
    <body>
    </body>
    <script>
-        var THIRTY_MINUTES = 30 * 60 * 1000;
+        const FIVE_MINUTES = 5 * 60 * 1000;
+        const THIRTY_MINUTES = 30 * 60 * 1000;
+
        [
            'example/eventGenerator',
            'example/styleguide'
@@ -48,10 +50,12 @@
        openmct.install(openmct.plugins.Generator());
        openmct.install(openmct.plugins.ExampleImagery());
        openmct.install(openmct.plugins.UTCTimeSystem());
-        openmct.install(openmct.plugins.ImportExport());
        openmct.install(openmct.plugins.AutoflowView({
            type: "telemetry.panel"
        }));
+        openmct.install(openmct.plugins.DisplayLayout({
+            showAsView: ['summary-widget', 'example.imagery']
+        }));
        openmct.install(openmct.plugins.Conductor({
            menuOptions: [
                {
@@ -67,218 +71,18 @@
                    timeSystem: 'utc',
                    clock: 'local',
                    clockOffsets: {
-                        start: -25 * 60 * 1000,
-                        end: 5 * 60 * 1000
+                        start: - THIRTY_MINUTES,
+                        end: FIVE_MINUTES
                    }
                }
            ]
        }));
        openmct.install(openmct.plugins.SummaryWidget());
        openmct.install(openmct.plugins.Notebook());
-        openmct.install(openmct.plugins.FolderView());
-        openmct.install(openmct.plugins.Tabs());
-        openmct.install(openmct.plugins.FlexibleLayout());
        openmct.install(openmct.plugins.LADTable());
-        openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
-        openmct.time.timeSystem('utc');
+        openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
+        openmct.install(openmct.plugins.ObjectMigration());
+        openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
        openmct.start();
-
-        // openmct.toolbars.addProvider({
-        //     name: "Testing Toolbar",
-        //     key: "testing",
-        //     description: "a mock toolbar that exercises all controls",
-        //     forSelection: function (selection) {
-        //         return true; // always applies.
-        //     },
-        //     toolbar: function (selection) {
-        //         return [
-        //             {
-        //                 control: 'menu',
-        //                 icon: 'icon-plus',
-        //                 label: 'Add',
-        //                 options: [
-        //                     { name: 'Box', class: 'icon-box', title: 'Add Box' },
-        //                     { name: 'Line', class: 'icon-line-horz', title: 'Add Line' },
-        //                     { name: 'Text', class: 'icon-font', title: 'Add Text' },
-        //                     { name: 'Image', class: 'icon-image', title: 'Add Image' }
-        //                 ]
-        //             },
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'color-picker',
-        //                 icon: 'icon-paint-bucket',
-        //                 value: '#33ff00',
-        //             },
-        //             {
-        //                 control: 'color-picker',
-        //                 icon: 'icon-pencil',
-        //                 value: '#ffffff',
-        //             },
-        //             {
-        //                 control: 'color-picker',
-        //                 icon: 'icon-font',
-        //                 value: '#333333',
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'select-menu',
-        //                 value: 11,
-        //                 options: [
-        //                     { value: 9, name: '9 px' },
-        //                     { value: 10, name: '10 px' },
-        //                     { value: 11, name: '11 px' },
-        //                     { value: 12, name: '12 px' },
-        //                     { value: 13, name: '13 px' },
-        //                     { value: 14, name: '14 px' },
-        //                     { value: 16, name: '16 px' },
-        //                     { value: 18, name: '18 px' },
-        //                     { value: 20, name: '20 px' },
-        //                     { value: 24, name: '24 px' },
-        //                     { value: 28, name: '28 px' },
-        //                     { value: 32, name: '32 px' },
-        //                     { value: 40, name: '40 px' },
-        //                     { value: 48, name: '48 px' },
-        //                     { value: 56, name: '56 px' },
-        //                     { value: 64, name: '64 px' },
-        //                     { value: 72, name: '72 px' },
-        //                     { value: 80, name: '80 px' },
-        //                     { value: 88, name: '88 px' },
-        //                     { value: 96, name: '96 px' },
-        //                     { value: 128, name: '128 px' },
-        //                     { value: 160, name: '160 px' }
-        //                 ]
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'menu',
-        //                 icon: 'icon-layers',
-        //                 options: [
-        //                     { name: 'Move to top', class: 'icon-arrow-double-up', title: 'Move to top' },
-        //                     { name: 'Move up', class: 'icon-arrow-up', title: 'Move up' },
-        //                     { name: 'Move down', class: 'icon-arrow-down', title: 'Move down' },
-        //                     { name: 'Move to bottom', class: 'icon-arrow-double-down', title: 'Move to bottom' }
-        //                 ]
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'button',
-        //                 icon: 'icon-gear'
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'input',
-        //                 type: 'number',
-        //                 label: 'X',
-        //                 value: 1,
-        //                 title: 'X position'
-        //             },
-        //             {
-        //                 control: 'input',
-        //                 type: 'number',
-        //                 label: 'Y',
-        //                 value: 2,
-        //                 title: 'Y position'
-        //             },
-        //             {
-        //                 control: 'input',
-        //                 type: 'number',
-        //                 label: 'W',
-        //                 value: 3,
-        //                 title: 'Width'
-        //             },
-        //             {
-        //                 control: 'input',
-        //                 type: 'number',
-        //                 label: 'H',
-        //                 value: 4,
-        //                 title: 'Height'
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'button',
-        //                 icon: 'icon-trash',
-        //                 label: 'delete',
-        //                 modifier: 'caution'
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'checkbox',
-        //                 name: 'this is a checkbox',
-        //             },
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'toggle-button',
-        //                 title: 'Toggle Frame',
-        //                 property: 'hideFrame',
-        //                 value: false,
-        //                 options: [
-        //                     {
-        //                         value: true,
-        //                         icon: 'icon-frame-hide'
-        //                     },
-        //                     {
-        //                         value: false,
-        //                         icon: 'icon-frame-show'
-        //                     }
-        //                 ]
-        //             },
-        //             {
-        //                 control: 'toggle-button',
-        //                 title: 'Snap to grid',
-        //                 property: 'snapToGrid',
-        //                 value: true,
-        //                 options: [
-        //                     {
-        //                         value: true,
-        //                         icon: 'icon-grid-snap-to'
-        //                     },
-        //                     {
-        //                         value: false,
-        //                         icon: 'icon-grid-snap-no'
-        //                     }
-        //                 ]
-        //             },
-        //             {
-        //                 control: 'toggle-button',
-        //                 title: 'Toggle label',
-        //                 property: 'showLabel',
-        //                 value: true,
-        //                 options: [
-        //                     {
-        //                         value: true,
-        //                         icon: 'icon-two-parts-both'
-        //                     },
-        //                     {
-        //                         value: false,
-        //                         icon: 'icon-two-parts-one-only'
-        //                     }
-        //                 ]
-        //             }
-        //         ];
-        //     }
-        // });
-
    </script>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,9 +1,10 @@
 {
  "name": "openmct",
-  "version": "0.14.0-SNAPSHOT",
+  "version": "1.0.0-beta",
  "description": "The Open MCT core platform",
  "dependencies": {},
  "devDependencies": {
+    "acorn": "6.2.0",
    "angular": "1.4.14",
    "angular-route": "1.4.14",
    "babel-eslint": "8.2.6",
@@ -55,7 +56,7 @@
    "node-bourbon": "^4.2.3",
    "node-sass": "^4.9.2",
    "painterro": "^0.2.65",
-    "printj": "^1.1.0",
+    "printj": "^1.2.1",
    "raw-loader": "^0.5.1",
    "request": "^2.69.0",
    "split": "^1.0.0",
--- a/platform/commonUI/browse/bundle.js
+++ b/platform/commonUI/browse/bundle.js
@@ -31,7 +31,6 @@ define([
    "./src/navigation/NavigateAction",
    "./src/navigation/OrphanNavigationHandler",
    "./src/windowing/NewTabAction",
-    "./src/windowing/WindowTitler",
    "./res/templates/browse.html",
    "./res/templates/browse-object.html",
    "./res/templates/browse/object-header.html",
@@ -52,7 +51,6 @@ define([
    NavigateAction,
    OrphanNavigationHandler,
    NewTabAction,
-    WindowTitler,
    browseTemplate,
    browseObjectTemplate,
    objectHeaderTemplate,
@@ -226,14 +224,6 @@ define([
                }
            ],
            "runs": [
-                {
-                    "implementation": WindowTitler,
-                    "depends": [
-                        "navigationService",
-                        "$rootScope",
-                        "$document"
-                    ]
-                },
                {
                    "implementation": OrphanNavigationHandler,
                    "depends": [
--- a/platform/commonUI/browse/test/windowing/WindowTitlerSpec.js
+++ b/platform/commonUI/browse/test/windowing/WindowTitlerSpec.js
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * WindowTitlerSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/windowing/WindowTitler"],
-    function (WindowTitler) {
-
-        describe("The window titler", function () {
-            var mockNavigationService,
-                mockRootScope,
-                mockDocument,
-                mockDomainObject,
-                titler; // eslint-disable-line
-
-            beforeEach(function () {
-                mockNavigationService = jasmine.createSpyObj(
-                    'navigationService',
-                    ['getNavigation']
-                );
-                mockRootScope = jasmine.createSpyObj(
-                    '$rootScope',
-                    ['$watch']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getModel']
-                );
-                mockDocument = [{}];
-
-                mockDomainObject.getModel.and.returnValue({ name: 'Test name' });
-                mockNavigationService.getNavigation.and.returnValue(mockDomainObject);
-
-                titler = new WindowTitler(
-                    mockNavigationService,
-                    mockRootScope,
-                    mockDocument
-                );
-            });
-
-            it("listens for changes to the name of the navigated object", function () {
-                expect(mockRootScope.$watch).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    jasmine.any(Function)
-                );
-                expect(mockRootScope.$watch.calls.mostRecent().args[0]())
-                    .toEqual('Test name');
-            });
-
-            it("sets the title to the name of the navigated object", function () {
-                mockRootScope.$watch.calls.mostRecent().args[1]("Some name");
-                expect(mockDocument[0].title).toEqual("Some name");
-            });
-
-        });
-    }
-);
--- a/platform/commonUI/dialog/bundle.js
+++ b/platform/commonUI/dialog/bundle.js
@@ -28,6 +28,7 @@ define([
    "./res/templates/dialog.html",
    "./res/templates/overlay-blocking-message.html",
    "./res/templates/message.html",
+    "./res/templates/notification-message.html",
    "./res/templates/overlay-message-list.html",
    "./res/templates/overlay.html",
    'legacyRegistry'
@@ -39,6 +40,7 @@ define([
    dialogTemplate,
    overlayBlockingMessageTemplate,
    messageTemplate,
+    notificationMessageTemplate,
    overlayMessageListTemplate,
    overlayTemplate,
    legacyRegistry
@@ -63,7 +65,8 @@ define([
                    "depends": [
                        "$document",
                        "$compile",
-                        "$rootScope"
+                        "$rootScope",
+                        "$timeout"
                    ]
                }
            ],
@@ -88,6 +91,10 @@ define([
                    "key": "message",
                    "template": messageTemplate
                },
+                {
+                    "key": "notification-message",
+                    "template": notificationMessageTemplate
+                },
                {
                    "key": "overlay-message-list",
                    "template": overlayMessageListTemplate
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/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>
--- a/platform/commonUI/dialog/res/templates/message.html
+++ b/platform/commonUI/dialog/res/templates/message.html
@@ -1,15 +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">
+        <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>
--- a/platform/commonUI/dialog/res/templates/notification-message.html
+++ b/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>
+    <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>
--- a/platform/commonUI/dialog/res/templates/overlay-message-list.html
+++ b/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>
--- a/platform/commonUI/dialog/res/templates/overlay-options.html
+++ b/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"
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/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>
--- a/platform/commonUI/dialog/src/OverlayService.js
+++ b/platform/commonUI/dialog/src/OverlayService.js
@@ -44,8 +44,9 @@ define(
         * @memberof platform/commonUI/dialog
         * @constructor
         */
-        function OverlayService($document, $compile, $rootScope) {
+        function OverlayService($document, $compile, $rootScope, $timeout) {
            this.$compile = $compile;
+            this.$timeout = $timeout;

            // Don't include $document and $rootScope directly;
            // avoids https://docs.angularjs.org/error/ng/cpws
@@ -93,12 +94,14 @@ define(
            scope.key = key;
            scope.typeClass = typeClass || 't-dialog';

-            // Create the overlay element and add it to the document's body
-            element = this.$compile(TEMPLATE)(scope);
-            
-            // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
-            // multiple overlays with the same z-index are active.
-            this.findBody().append(element);
+            this.$timeout(() => {
+                // Create the overlay element and add it to the document's body
+                element = this.$compile(TEMPLATE)(scope);
+
+                // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
+                // multiple overlays with the same z-index are active.
+                this.findBody().append(element);
+            });

            return {
                dismiss: dismiss
--- a/platform/commonUI/dialog/test/OverlayServiceSpec.js
+++ b/platform/commonUI/dialog/test/OverlayServiceSpec.js
@@ -35,16 +35,20 @@ define(
                mockTemplate,
                mockElement,
                mockScope,
+                mockTimeout,
                overlayService;

            beforeEach(function () {
                mockDocument = jasmine.createSpyObj("$document", ["find"]);
                mockCompile = jasmine.createSpy("$compile");
                mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
-                mockBody = jasmine.createSpyObj("body", ["prepend"]);
+                mockBody = jasmine.createSpyObj("body", ["append"]);
                mockTemplate = jasmine.createSpy("template");
                mockElement = jasmine.createSpyObj("element", ["remove"]);
                mockScope = jasmine.createSpyObj("scope", ["$destroy"]);
+                mockTimeout = function (callback) {
+                    callback();
+                }

                mockDocument.find.and.returnValue(mockBody);
                mockCompile.and.returnValue(mockTemplate);
@@ -54,7 +58,8 @@ define(
                overlayService = new OverlayService(
                    mockDocument,
                    mockCompile,
-                    mockRootScope
+                    mockRootScope,
+                    mockTimeout
                );
            });

@@ -67,7 +72,7 @@ define(

            it("adds the templated element to the body", function () {
                overlayService.createOverlay("test", {});
-                expect(mockBody.prepend).toHaveBeenCalledWith(mockElement);
+                expect(mockBody.append).toHaveBeenCalledWith(mockElement);
            });

            it("places the provided model/key in its template's scope", function () {
--- a/platform/commonUI/edit/bundle.js
+++ b/platform/commonUI/edit/bundle.js
@@ -160,7 +160,7 @@ define([
                },
                {
                    "key": "remove",
-                    "category": "contextual",
+                    "category": "legacy",
                    "implementation": RemoveAction,
                    "cssClass": "icon-trash",
                    "name": "Remove",
--- a/platform/commonUI/edit/src/actions/PropertiesDialog.js
+++ b/platform/commonUI/edit/src/actions/PropertiesDialog.js
@@ -49,7 +49,7 @@ define(
                    name: "Properties",
                    rows: this.properties.map(function (property, index) {
                        // Property definition is same as form row definition
-                        var row = Object.create(property.getDefinition());
+                        var row = JSON.parse(JSON.stringify(property.getDefinition()));
                        row.key = index;
                        return row;
                    }).filter(function (row) {
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -23,11 +23,7 @@
 /**
 * Module defining RemoveAction. Created by vwoeltje on 11/17/14.
 */
-define([
-    './RemoveDialog'
-], function (
-    RemoveDialog
-) {
+define([], function () {

    /**
     * Construct an action which will remove the provided object manifestation.
@@ -114,12 +110,7 @@ define([
            return parent.useCapability('mutation', doMutate);
        }

-        /*
-         * Pass in the function to remove the domain object so it can be
-         * associated with an 'OK' button press
-         */
-        dialog = new RemoveDialog(this.openmct, domainObject, removeFromContext);
-        dialog.show();
+        removeFromContext();
    };

    // Object needs to have a parent for Remove to be applicable
--- a/platform/commonUI/edit/src/actions/RemoveDialog.js
+++ b/platform/commonUI/edit/src/actions/RemoveDialog.js
@@ -1,72 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-
-    /**
-     * @callback removeCallback
-     * @param {DomainObject} domainObject the domain object to be removed
-     */
-
-    /**
-     * Construct a new Remove dialog.
-     *
-     * @param {DialogService} dialogService the service that shows the dialog
-     * @param {DomainObject} domainObject the domain object to be removed
-     * @param {removeCallback} removeCallback callback that handles removal of the domain object
-     * @memberof platform/commonUI/edit
-     * @constructor
-     */
-    function RemoveDialog(openmct, domainObject, removeCallback) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.removeCallback = removeCallback;
-    }
-
-    /**
-     * Display a dialog to confirm the removal of a domain object.
-     */
-    RemoveDialog.prototype.show = function () {
-        let dialog = this.openmct.overlays.dialog({
-            title: 'Remove ' + this.domainObject.getModel().name,
-            iconClass: 'alert',
-            message: 'Warning! This action will permanently remove this object. Are you sure you want to continue?',
-            buttons: [
-                {
-                    label: 'OK',
-                    callback: () => {
-                        this.removeCallback();
-                        dialog.dismiss();
-                    }
-                },
-                {
-                    label: 'Cancel',
-                    callback: () => {
-                        dialog.dismiss();
-                    }
-                }
-            ]
-        });
-    };
-
-    return RemoveDialog;
-});
--- a/platform/commonUI/edit/src/actions/SaveAsAction.js
+++ b/platform/commonUI/edit/src/actions/SaveAsAction.js
@@ -162,9 +162,6 @@ function (
        function saveAfterClone(clonedObject) {
            return this.openmct.editor.save().then(() => {
                // Force mutation for search indexing
-                clonedObject.useCapability('mutation', (model) => {
-                    return model;
-                });
                return clonedObject;
            })
        }
@@ -173,6 +170,14 @@ function (
            return fetchObject(clonedObject.getId())
        }

+        function indexForSearch(savedObject) {
+            savedObject.useCapability('mutation', (model) => {
+                return model;
+            });
+
+            return savedObject;
+        }
+
        function onSuccess(object) {
            self.notificationService.info("Save Succeeded");
            return object;
@@ -194,6 +199,7 @@ function (
            .then(undirtyOriginals)
            .then(saveAfterClone)
            .then(finishEditing)
+            .then(indexForSearch)
            .then(hideBlockingDialog)
            .then(onSuccess)
            .catch(onFailure);
--- a/platform/commonUI/edit/src/capabilities/EditorCapability.js
+++ b/platform/commonUI/edit/src/capabilities/EditorCapability.js
@@ -64,7 +64,6 @@ define(
         * @returns boolean
         */
        EditorCapability.prototype.inEditContext = function () {
-            console.warn('DEPRECATION WARNING: isEditing checks must be done via openmct.editor.');
            return this.openmct.editor.isEditing();
        };

@@ -74,7 +73,6 @@ define(
         * @returns {*}
         */
        EditorCapability.prototype.isEditContextRoot = function () {
-            console.warn('DEPRECATION WARNING: isEditing checks must be done via openmct.editor.');
            return this.openmct.editor.isEditing();
        };

--- a/platform/commonUI/edit/src/creation/CreateAction.js
+++ b/platform/commonUI/edit/src/creation/CreateAction.js
@@ -71,17 +71,26 @@ define(
                openmct.editor.cancel();
            }

+            function isFirstViewEditable(domainObject) {
+                let firstView = openmct.objectViews.get(domainObject)[0];
+
+                return firstView && firstView.canEdit && firstView.canEdit(domainObject);
+            }
+
            function navigateAndEdit(object) {
                let objectPath = object.getCapability('context').getPath(),
                    url = '#/browse/' + objectPath
+                        .slice(1)
                        .map(function (o) {
-                            return o && openmct.objects.makeKeyString(o.getId())
+                            return o && openmct.objects.makeKeyString(o.getId());
                        })
                        .join('/');

                window.location.href = url;

-                openmct.editor.edit();
+                if (isFirstViewEditable(object.useCapability('adapter'))) {
+                    openmct.editor.edit();
+                }
            }

            newModel.type = this.type.getKey();
@@ -89,9 +98,7 @@ define(
            newObject = this.parent.useCapability('instantiation', newModel);

            openmct.editor.edit();
-            newObject.getCapability("action").perform("save-as")
-                .then(navigateAndEdit, onCancel)
-
+            newObject.getCapability("action").perform("save-as").then(navigateAndEdit, onCancel);
            // TODO: support editing object without saving object first.
            // Which means we have to toggle createwizard afterwards.  For now,
            // We will disable this.
--- a/platform/commonUI/edit/src/creation/CreateWizard.js
+++ b/platform/commonUI/edit/src/creation/CreateWizard.js
@@ -66,7 +66,7 @@ define(
                name: "Properties",
                rows: this.properties.map(function (property, index) {
                    // Property definition is same as form row definition
-                    var row = Object.create(property.getDefinition());
+                    var row = JSON.parse(JSON.stringify(property.getDefinition()));

                    // Use index as the key into the formValue;
                    // this correlates to the indexing provided by
--- a/platform/commonUI/edit/src/services/TransactionManager.js
+++ b/platform/commonUI/edit/src/services/TransactionManager.js
@@ -77,14 +77,19 @@ define([], function () {
                return promiseFn().then(nextFn);
            };
        }
-
-        if (!this.isScheduled(id)) {
-            this.clearTransactionFns[id] =
-                this.transactionService.addToTransaction(
-                    chain(onCommit, release),
-                    chain(onCancel, release)
-                );
+        /**
+         * Clear any existing persistence calls for object with given ID. This ensures only the most recent persistence
+         * call is executed. This should prevent stale objects being persisted and overwriting fresh ones.
+         */
+        if (this.isScheduled(id)) {
+            this.clearTransactionsFor(id);
        }
+
+        this.clearTransactionFns[id] =
+            this.transactionService.addToTransaction(
+                chain(onCommit, release),
+                chain(onCancel, release)
+            );
    };

    /**
--- a/platform/commonUI/edit/test/services/TransactionManagerSpec.js
+++ b/platform/commonUI/edit/test/services/TransactionManagerSpec.js
@@ -93,24 +93,33 @@ define(
                    expect(mockOnCancel).toHaveBeenCalled();
                });

-                it("ignores subsequent calls for the same object", function () {
-                    manager.addToTransaction(
-                        testId,
-                        jasmine.createSpy(),
-                        jasmine.createSpy()
-                    );
-                    expect(mockTransactionService.addToTransaction.calls.count())
-                        .toEqual(1);
-                });
+                describe("Adds callbacks to transaction", function () {
+                    beforeEach(function () {
+                        spyOn(manager, 'clearTransactionsFor');
+                        manager.clearTransactionsFor.and.callThrough();
+                    });

-                it("accepts subsequent calls for other objects", function () {
-                    manager.addToTransaction(
-                        'other-id',
-                        jasmine.createSpy(),
-                        jasmine.createSpy()
-                    );
-                    expect(mockTransactionService.addToTransaction.calls.count())
-                        .toEqual(2);
+                    it("and clears pending calls if same object", function () {
+                        manager.addToTransaction(
+                            testId,
+                            jasmine.createSpy(),
+                            jasmine.createSpy()
+                        );
+                        expect(manager.clearTransactionsFor).toHaveBeenCalledWith(testId);
+                    });
+
+                    it("and does not clear pending calls if different object", function () {
+                        manager.addToTransaction(
+                            'other-id',
+                            jasmine.createSpy(),
+                            jasmine.createSpy()
+                        );
+                        expect(manager.clearTransactionsFor).not.toHaveBeenCalled();
+                    });
+
+                    afterEach(function () {
+                        expect(mockTransactionService.addToTransaction.calls.count()).toEqual(2);
+                    });
                });

                it("does not remove callbacks from the transaction", function () {
--- a/platform/commonUI/general/res/templates/angular-indicator.html
+++ b/platform/commonUI/general/res/templates/angular-indicator.html
@@ -20,8 +20,8 @@
 at runtime from the About dialog for additional information.
 -->
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div class="ls-indicator {{ngModel.getCssClass()}}"
+<div class="c-indicator {{ngModel.getCssClass()}}"
 	 title="{{ngModel.getDescription()}}"
 	 ng-show="ngModel.getText().length > 0">
-	<span class="label">{{ngModel.getText()}}</span>
+	<span class="label c-indicator__label">{{ngModel.getText()}}</span>
 </div>
--- a/platform/commonUI/general/res/templates/label.html
+++ b/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>
--- a/platform/commonUI/general/res/templates/message-banner.html
+++ b/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>
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/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>
--- a/platform/commonUI/general/res/templates/tree.html
+++ b/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"
--- a/platform/commonUI/general/res/templates/tree/node.html
+++ b/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>
--- a/platform/commonUI/general/res/templates/tree/toggle.html
+++ b/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>
--- a/platform/commonUI/general/res/templates/tree/tree-label.html
+++ b/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>
--- a/platform/commonUI/general/src/directives/MCTSelectable.js
+++ b/platform/commonUI/general/src/directives/MCTSelectable.js
@@ -54,6 +54,7 @@ define(
                    if (isDestroyed) {
                        return;
                    }
+
                    var removeSelectable = openmct.selection.selectable(
                        element[0],
                        scope.$eval(attrs.mctSelectable),
--- a/platform/commonUI/general/src/ui/ToggleView.js
+++ b/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) {
--- a/platform/commonUI/general/src/ui/TreeNodeView.js
+++ b/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);
--- a/platform/commonUI/general/src/ui/TreeView.js
+++ b/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);
--- a/platform/commonUI/notification/res/notification-indicator.html
+++ b/platform/commonUI/notification/res/notification-indicator.html
@@ -1,8 +1,8 @@
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div ng-show="notifications.length > 0" class="ls-indicator s-status-{{highest.severity}} icon-bell"
+<div ng-show="notifications.length > 0" class="c-indicator c-indicator--clickable s-status-{{highest.severity}} icon-bell"
      ng-controller="NotificationIndicatorController">
-    <span class="label">
-        <a ng-click="showNotificationsList()">
-           {{notifications.length}} Notification<span ng-show="notifications.length > 1">s</span></a>
-    </span><span class="count">{{notifications.length}}</span>
+    <span class="label c-indicator__label">
+        <button ng-click="showNotificationsList()">
+           {{notifications.length}} Notification<span ng-show="notifications.length > 1">s</span></button>
+    </span><span class="c-indicator__count">{{notifications.length}}</span>
 </div>
--- a/platform/commonUI/notification/src/NotificationIndicatorController.js
+++ b/platform/commonUI/notification/src/NotificationIndicatorController.js
@@ -43,12 +43,25 @@ define(
             * Launch a dialog showing a list of current notifications.
             */
            $scope.showNotificationsList = function () {
+                let notificationsList = openmct.notifications.notifications.map(notification => {
+                    if (notification.model.severity === 'alert' || notification.model.severity === 'info') {
+                        notification.model.primaryOption = {
+                            label: 'Dismiss',
+                            callback: () => {
+                                let currentIndex = notificationsList.indexOf(notification);
+                                notification.dismiss();
+                                notificationsList.splice(currentIndex, 1);
+                            }
+                        }
+                    }
+                    return notification;
+                })
                dialogService.getDialogResponse('overlay-message-list', {
                    dialog: {
                        title: "Messages",
                        //Launch the message list dialog with the models
                        // from the notifications
-                        messages: openmct.notifications.notifications
+                        messages: notificationsList
                    }
                });

--- a/platform/core/src/runs/TransactingMutationListener.js
+++ b/platform/core/src/runs/TransactingMutationListener.js
@@ -43,23 +43,10 @@ define([], function () {
        var mutationTopic = topic('mutation');
        mutationTopic.listen(function (domainObject) {
            var persistence = domainObject.getCapability('persistence');
-            var wasActive = transactionService.isActive();
            cacheService.put(domainObject.getId(), domainObject.getModel());

            if (hasChanged(domainObject)) {
-
-                if (!wasActive) {
-                    transactionService.startTransaction();
-                }
-
-                transactionService.addToTransaction(
-                    persistence.persist.bind(persistence),
-                    persistence.refresh.bind(persistence)
-                );
-
-                if (!wasActive) {
-                    transactionService.commit();
-                }
+                persistence.persist();
            }
        });
    }
--- a/platform/core/test/runs/TransactingMutationListenerSpec.js
+++ b/platform/core/test/runs/TransactingMutationListenerSpec.js
@@ -24,22 +24,27 @@ define(
    ["../../src/runs/TransactingMutationListener"],
    function (TransactingMutationListener) {

-        xdescribe("TransactingMutationListener", function () {
+        describe("TransactingMutationListener", function () {
            var mockTopic,
                mockMutationTopic,
+                mockCacheService,
                mockTransactionService,
                mockDomainObject,
+                mockModel,
                mockPersistence;

            beforeEach(function () {
                mockTopic = jasmine.createSpy('topic');
                mockMutationTopic =
                    jasmine.createSpyObj('mutation', ['listen']);
+                mockCacheService =
+                    jasmine.createSpyObj('cacheService', [
+                        'put'
+                    ]);
                mockTransactionService =
                    jasmine.createSpyObj('transactionService', [
                        'isActive',
                        'startTransaction',
-                        'addToTransaction',
                        'commit'
                    ]);
                mockDomainObject = jasmine.createSpyObj(
@@ -52,18 +57,24 @@ define(
                );

                mockTopic.and.callFake(function (t) {
-                    return (t === 'mutation') && mockMutationTopic;
+                    expect(t).toBe('mutation');
+                    return mockMutationTopic;
                });

+                mockDomainObject.getId.and.returnValue('mockId');
                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return (c === 'persistence') && mockPersistence;
+                    expect(c).toBe('persistence');
+                    return mockPersistence;
                });
+                mockModel = {};
+                mockDomainObject.getModel.and.returnValue(mockModel);

                mockPersistence.persisted.and.returnValue(true);

                return new TransactingMutationListener(
                    mockTopic,
-                    mockTransactionService
+                    mockTransactionService,
+                    mockCacheService
                );
            });

@@ -72,48 +83,27 @@ define(
                    .toHaveBeenCalledWith(jasmine.any(Function));
            });

-            [false, true].forEach(function (isActive) {
-                var verb = isActive ? "is" : "isn't";
+            it("calls persist if the model has changed", function () {
+                mockModel.persisted = Date.now();

-                function onlyWhenInactive(expectation) {
-                    return isActive ? expectation.not : expectation;
-                }
+                //Mark the model dirty by setting the mutated date later than the last persisted date.
+                mockModel.modified = mockModel.persisted + 1;

-                describe("when a transaction " + verb + " active", function () {
-                    var innerVerb = isActive ? "does" : "doesn't";
+                mockMutationTopic.listen.calls.mostRecent()
+                    .args[0](mockDomainObject);

-                    beforeEach(function () {
-                        mockTransactionService.isActive.and.returnValue(isActive);
-                    });
+                expect(mockPersistence.persist).toHaveBeenCalled();
+            });

-                    describe("and mutation occurs", function () {
-                        beforeEach(function () {
-                            mockMutationTopic.listen.calls.mostRecent()
-                                .args[0](mockDomainObject);
-                        });
+            it("does not call persist if the model has not changed", function () {
+                mockModel.persisted = Date.now();

+                mockModel.modified = mockModel.persisted;

-                        it(innerVerb + " start a new transaction", function () {
-                            onlyWhenInactive(
-                                expect(mockTransactionService.startTransaction)
-                            ).toHaveBeenCalled();
-                        });
+                mockMutationTopic.listen.calls.mostRecent()
+                    .args[0](mockDomainObject);

-                        it("adds to the active transaction", function () {
-                            expect(mockTransactionService.addToTransaction)
-                                .toHaveBeenCalledWith(
-                                    jasmine.any(Function),
-                                    jasmine.any(Function)
-                                );
-                        });
-
-                        it(innerVerb + " immediately commit", function () {
-                            onlyWhenInactive(
-                                expect(mockTransactionService.commit)
-                            ).toHaveBeenCalled();
-                        });
-                    });
-                });
+                expect(mockPersistence.persist).not.toHaveBeenCalled();
            });
        });
    }
--- a/platform/entanglement/bundle.js
+++ b/platform/entanglement/bundle.js
@@ -24,7 +24,6 @@ define([
    "./src/actions/MoveAction",
    "./src/actions/CopyAction",
    "./src/actions/LinkAction",
-    "./src/actions/GoToOriginalAction",
    "./src/actions/SetPrimaryLocationAction",
    "./src/services/LocatingCreationDecorator",
    "./src/services/LocatingObjectDecorator",
@@ -41,7 +40,6 @@ define([
    MoveAction,
    CopyAction,
    LinkAction,
-    GoToOriginalAction,
    SetPrimaryLocationAction,
    LocatingCreationDecorator,
    LocatingObjectDecorator,
@@ -104,14 +102,6 @@ define([
                        "linkService"
                    ]
                },
-                {
-                    "key": "follow",
-                    "name": "Go To Original",
-                    "description": "Go to the original, un-linked instance of this object.",
-                    "cssClass": "",
-                    "category": "contextual",
-                    "implementation": GoToOriginalAction
-                },
                {
                    "key": "locate",
                    "name": "Set Primary Location",
--- a/platform/entanglement/src/actions/GoToOriginalAction.js
+++ b/platform/entanglement/src/actions/GoToOriginalAction.js
@@ -1,60 +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.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * Implements the "Go To Original" action, which follows a link back
-         * to an original instance of an object.
-         *
-         * @implements {Action}
-         * @constructor
-         * @private
-         * @memberof platform/entanglement
-         * @param {ActionContext} context the context in which the action
-         *        will be performed
-         */
-        function GoToOriginalAction(context) {
-            this.domainObject = context.domainObject;
-        }
-
-        GoToOriginalAction.prototype.perform = function () {
-            return this.domainObject.getCapability("location").getOriginal()
-                .then(function (originalObject) {
-                    var actionCapability =
-                        originalObject.getCapability("action");
-                    return actionCapability &&
-                            actionCapability.perform("navigate");
-                });
-        };
-
-        GoToOriginalAction.appliesTo = function (context) {
-            var domainObject = context.domainObject;
-            return domainObject && domainObject.hasCapability("location") &&
-                domainObject.getCapability("location").isLink();
-        };
-
-        return GoToOriginalAction;
-    }
-);
-
--- a/platform/entanglement/test/actions/GoToOriginalActionSpec.js
+++ b/platform/entanglement/test/actions/GoToOriginalActionSpec.js
@@ -1,93 +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.
- *****************************************************************************/
-
-
-define(
-    [
-        '../../src/actions/GoToOriginalAction',
-        '../DomainObjectFactory',
-        '../ControlledPromise'
-    ],
-    function (GoToOriginalAction, domainObjectFactory, ControlledPromise) {
-
-        describe("The 'go to original' action", function () {
-            var testContext,
-                originalDomainObject,
-                mockLocationCapability,
-                mockOriginalActionCapability,
-                originalPromise,
-                action;
-
-            beforeEach(function () {
-                mockLocationCapability = jasmine.createSpyObj(
-                    'location',
-                    ['isLink', 'isOriginal', 'getOriginal']
-                );
-                mockOriginalActionCapability = jasmine.createSpyObj(
-                    'action',
-                    ['perform', 'getActions']
-                );
-                originalPromise = new ControlledPromise();
-                mockLocationCapability.getOriginal.and.returnValue(originalPromise);
-                mockLocationCapability.isLink.and.returnValue(true);
-                mockLocationCapability.isOriginal.and.callFake(function () {
-                    return !mockLocationCapability.isLink();
-                });
-                testContext = {
-                    domainObject: domainObjectFactory({
-                        capabilities: {
-                            location: mockLocationCapability
-                        }
-                    })
-                };
-                originalDomainObject = domainObjectFactory({
-                    capabilities: {
-                        action: mockOriginalActionCapability
-                    }
-                });
-
-                action = new GoToOriginalAction(testContext);
-            });
-
-            it("is applicable to links", function () {
-                expect(GoToOriginalAction.appliesTo(testContext))
-                    .toBeTruthy();
-            });
-
-            it("is not applicable to originals", function () {
-                mockLocationCapability.isLink.and.returnValue(false);
-                expect(GoToOriginalAction.appliesTo(testContext))
-                    .toBeFalsy();
-            });
-
-            it("navigates to original objects when performed", function () {
-                expect(mockOriginalActionCapability.perform)
-                    .not.toHaveBeenCalled();
-                action.perform();
-                originalPromise.resolve(originalDomainObject);
-                expect(mockOriginalActionCapability.perform)
-                    .toHaveBeenCalledWith('navigate');
-            });
-
-        });
-    }
-);
--- a/platform/features/clock/res/templates/timer.html
+++ b/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>
--- a/platform/features/clock/src/indicators/ClockIndicator.js
+++ b/platform/features/clock/src/indicators/ClockIndicator.js
@@ -49,7 +49,7 @@ define(
        };

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

        ClockIndicator.prototype.getText = function () {
--- a/platform/features/hyperlink/bundle.js
+++ b/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"
                        },
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/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"
--- a/platform/features/pages/bundle.js
+++ b/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"
                        }
--- a/platform/forms/res/templates/form.html
+++ b/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"
--- a/platform/import-export/src/actions/ImportAsJSONAction.js
+++ b/platform/import-export/src/actions/ImportAsJSONAction.js
@@ -64,12 +64,30 @@ define(['zepto'], function ($) {
        var tree = this.generateNewIdentifiers(objTree);
        var rootId = tree.rootId;
        var rootObj = this.instantiate(tree.openmct[rootId], rootId);
+        var newStyleParent = parent.useCapability('adapter');
+        var newStyleRootObj = rootObj.useCapability('adapter');

-        // Instantiate all objects in tree with their newly genereated ids,
-        // adding each to its rightful parent's composition
-        rootObj.getCapability("location").setPrimaryLocation(parent.getId());
-        this.deepInstantiate(rootObj, tree.openmct, []);
-        parent.getCapability("composition").add(rootObj);
+        if (this.openmct.composition.checkPolicy(newStyleParent, newStyleRootObj)) {
+            // Instantiate all objects in tree with their newly generated ids,
+            // adding each to its rightful parent's composition
+            rootObj.getCapability("location").setPrimaryLocation(parent.getId());
+            this.deepInstantiate(rootObj, tree.openmct, []);
+            parent.getCapability("composition").add(rootObj);
+        } else {
+            var dialog = this.openmct.overlays.dialog({
+                iconClass: 'alert',
+                message: "We're sorry, but you cannot import that object type into this object.",
+                buttons: [
+                    {
+                        label: "Ok",
+                        emphasis: true,
+                        callback: function () {
+                            dialog.dismiss();
+                        }
+                    }
+                ]
+            });
+        }
    };

    ImportAsJSONAction.prototype.deepInstantiate = function (parent, tree, seen) {
@@ -80,15 +98,17 @@ define(['zepto'], function ($) {
            var newObj;

            seen.push(parent.getId());
-            parentModel.composition.forEach(function (childId, index) {
-                if (!tree[childId] || seen.includes(childId)) {
+
+            parentModel.composition.forEach(function (childId) {
+                let keystring = this.openmct.objects.makeKeyString(childId);
+
+                if (!tree[keystring] || seen.includes(keystring)) {
                    return;
                }

-                newObj = this.instantiate(tree[childId], childId);
-                parent.getCapability("composition").add(newObj);
+                newObj = this.instantiate(tree[keystring], keystring);
                newObj.getCapability("location")
-                    .setPrimaryLocation(tree[childId].location);
+                    .setPrimaryLocation(tree[keystring].location);
                this.deepInstantiate(newObj, tree, seen);
            }, this);
        }
--- a/platform/persistence/couch/src/CouchIndicator.js
+++ b/platform/persistence/couch/src/CouchIndicator.js
@@ -100,7 +100,7 @@ define(
        }

        CouchIndicator.prototype.getCssClass = function () {
-            return "icon-database " + this.state.statusClass;
+            return "c-indicator--clickable icon-database " + this.state.statusClass;
        };

        CouchIndicator.prototype.getGlyphClass = function () {
--- a/platform/persistence/elastic/src/ElasticIndicator.js
+++ b/platform/persistence/elastic/src/ElasticIndicator.js
@@ -84,7 +84,7 @@ define(
        }

        ElasticIndicator.prototype.getCssClass = function () {
-            return "icon-database";
+            return "c-indicator--clickable icon-database";
        };
        ElasticIndicator.prototype.getGlyphClass = function () {
            return this.state.glyphClass;
--- a/platform/persistence/local/src/LocalStorageIndicator.js
+++ b/platform/persistence/local/src/LocalStorageIndicator.js
@@ -41,7 +41,7 @@ define(
        }

        LocalStorageIndicator.prototype.getCssClass = function () {
-            return "icon-database s-status-caution";
+            return "c-indicator--clickable icon-database s-status-caution";
        };
        LocalStorageIndicator.prototype.getGlyphClass = function () {
            return 'caution';
--- a/platform/persistence/queue/src/PersistenceFailureHandler.js
+++ b/platform/persistence/queue/src/PersistenceFailureHandler.js
@@ -37,75 +37,17 @@ define(
        }

        /**
-         * Handle persistence failures by providing the user with a
-         * dialog summarizing these failures, and giving the option
-         * to overwrite/cancel as appropriate.
+         * Discard failures
         * @param {Array} failures persistence failures, as prepared
         *        by PersistenceQueueHandler
         * @memberof platform/persistence/queue.PersistenceFailureHandler#
         */
        PersistenceFailureHandler.prototype.handle = function handleFailures(failures) {
-            // Prepare dialog for display
+
            var dialogModel = new PersistenceFailureDialog(failures),
                revisionErrors = dialogModel.model.revised,
                $q = this.$q;

-            // Refresh revision information for the domain object associated
-            // with this persistence failure
-            function refresh(failure) {
-                // Refresh the domain object to the latest from persistence
-                return failure.persistence.refresh();
-            }
-
-            // Issue a new persist call for the domain object associated with
-            // this failure.
-            function persist(failure) {
-                // Note that we reissue the persist request here, but don't
-                // return it, to avoid a circular wait. We trust that the
-                // PersistenceQueue will behave correctly on the next round
-                // of flushing.
-                failure.requeue();
-            }
-
-            // Retry persistence (overwrite) for this set of failed attempts
-            function retry(failuresToRetry) {
-                var models = {};
-
-                // Cache a copy of the model
-                function cacheModel(failure) {
-                    // Clone...
-                    models[failure.id] = JSON.parse(JSON.stringify(
-                        failure.domainObject.getModel()
-                    ));
-                }
-
-                // Mutate a domain object to restore its model
-                function remutate(failure) {
-                    var model = models[failure.id];
-                    return failure.domainObject.useCapability(
-                        "mutation",
-                        function () {
-                            return model;
-                        },
-                        model.modified
-                    );
-                }
-
-                // Cache the object models we might want to save
-                failuresToRetry.forEach(cacheModel);
-
-                // Strategy here:
-                // * Cache all of the models we might want to save (above)
-                // * Refresh all domain objects (so they are latest versions)
-                // * Re-insert the cached domain object models
-                // * Invoke persistence again
-                return $q.all(failuresToRetry.map(refresh)).then(function () {
-                    return $q.all(failuresToRetry.map(remutate));
-                }).then(function () {
-                    return $q.all(failuresToRetry.map(persist));
-                });
-            }
-
            // Discard changes for a failed refresh
            function discard(failure) {
                var persistence =
@@ -118,19 +60,7 @@ define(
                return $q.all(failuresToDiscard.map(discard));
            }

-            // Handle user input (did they choose to overwrite?)
-            function handleChoice(key) {
-                // If so, try again
-                if (key === PersistenceFailureConstants.OVERWRITE_KEY) {
-                    return retry(revisionErrors);
-                } else {
-                    return discardAll(revisionErrors);
-                }
-            }
-
-            // Prompt for user input, the overwrite if they said so.
-            return this.dialogService.getUserChoice(dialogModel)
-                .then(handleChoice, handleChoice);
+            return discardAll(revisionErrors);
        };

        return PersistenceFailureHandler;
--- a/platform/persistence/queue/test/PersistenceFailureHandlerSpec.js
+++ b/platform/persistence/queue/test/PersistenceFailureHandlerSpec.js
@@ -74,43 +74,14 @@ define(
                handler = new PersistenceFailureHandler(mockQ, mockDialogService);
            });

-            it("shows a dialog to handle failures", function () {
+            it("discards on handle", function () {
                handler.handle(mockFailures);
-                expect(mockDialogService.getUserChoice).toHaveBeenCalled();
-            });
-
-            it("overwrites on request", function () {
-                mockQ.all.and.returnValue(asPromise([]));
-                handler.handle(mockFailures);
-                // User chooses overwrite
-                mockPromise.then.calls.mostRecent().args[0](Constants.OVERWRITE_KEY);
-                // Should refresh, remutate, and requeue all objects
-                mockFailures.forEach(function (mockFailure, i) {
-                    expect(mockFailure.persistence.refresh).toHaveBeenCalled();
-                    expect(mockFailure.requeue).toHaveBeenCalled();
-                    expect(mockFailure.domainObject.useCapability).toHaveBeenCalledWith(
-                        'mutation',
-                        jasmine.any(Function),
-                        i // timestamp
-                    );
-                    expect(mockFailure.domainObject.useCapability.calls.mostRecent().args[1]())
-                        .toEqual({ id: mockFailure.id, modified: i });
-                });
-            });
-
-            it("discards on request", function () {
-                mockQ.all.and.returnValue(asPromise([]));
-                handler.handle(mockFailures);
-                // User chooses overwrite
-                mockPromise.then.calls.mostRecent().args[0](false);
-                // Should refresh, but not remutate, and requeue all objects
                mockFailures.forEach(function (mockFailure) {
                    expect(mockFailure.persistence.refresh).toHaveBeenCalled();
                    expect(mockFailure.requeue).not.toHaveBeenCalled();
                    expect(mockFailure.domainObject.useCapability).not.toHaveBeenCalled();
                });
            });
-
        });
    }
 );
--- a/platform/search/res/templates/search.html
+++ b/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>
--- a/src/MCT.js
+++ b/src/MCT.js
@@ -44,6 +44,9 @@ define([
    '../platform/core/src/objects/DomainObjectImpl',
    '../platform/core/src/capabilities/ContextualDomainObject',
    './ui/preview/plugin',
+    './api/Branding',
+    './plugins/licenses/plugin',
+    './plugins/remove/plugin',
    'vue'
 ], function (
    EventEmitter,
@@ -69,6 +72,9 @@ define([
    DomainObjectImpl,
    ContextualDomainObject,
    PreviewPlugin,
+    BrandingAPI,
+    LicensesPlugin,
+    RemoveActionPlugin,
    Vue
 ) {
    /**
@@ -89,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: [
                {
@@ -228,16 +241,29 @@ define([

        this.contextMenu = new api.ContextMenuRegistry();

+        this.router = new ApplicationRouter();
+
+        this.branding = BrandingAPI.default;
+
        this.legacyRegistry = defaultRegistry;
+
+        // Plugin's that are installed by default
+
        this.install(this.plugins.Plot());
        this.install(this.plugins.TelemetryTable());
-        this.install(this.plugins.DisplayLayout());
        this.install(PreviewPlugin.default());
+        this.install(LegacyIndicatorsPlugin());
+        this.install(LicensesPlugin.default());
+        this.install(RemoveActionPlugin.default());
+        this.install(this.plugins.ImportExport());
+        this.install(this.plugins.FolderView());
+        this.install(this.plugins.Tabs());
+        this.install(this.plugins.FlexibleLayout());
+        this.install(this.plugins.GoToOriginalAction());

        if (typeof BUILD_CONSTANTS !== 'undefined') {
            this.install(buildInfoPlugin(BUILD_CONSTANTS));
        }
-
    }

    MCT.prototype = Object.create(EventEmitter.prototype);
@@ -308,6 +334,12 @@ define([
     *        MCT; if undefined, MCT will be run in the body of the document
     */
    MCT.prototype.start = function (domElement) {
+        if (!this.plugins.DisplayLayout._installed) {
+            this.install(this.plugins.DisplayLayout({
+                showAsView: ['summary-widget']
+            }));
+        }
+
        if (!domElement) {
            domElement = document.body;
        }
@@ -331,12 +363,8 @@ define([
        legacyRegistry.register('adapter', this.legacyBundle);
        legacyRegistry.enable('adapter');

-        this.install(LegacyIndicatorsPlugin());
-
-        this.router = new ApplicationRouter();
-
        this.router.route(/^\/$/, () => {
-            this.router.setPath('/browse/mine');
+            this.router.setPath('/browse/');
        });

        /**
--- a/src/adapter/actions/LegacyContextMenuAction.js
+++ b/src/adapter/actions/LegacyContextMenuAction.js
@@ -26,6 +26,7 @@ const OUTSIDE_EDIT_PATH_BLACKLIST = ["copy", "follow", "properties", "move", "li
 export default class LegacyContextMenuAction {
    constructor(openmct, LegacyAction) {
        this.openmct = openmct;
+        this.key = LegacyAction.definition.key;
        this.name = LegacyAction.definition.name;
        this.description = LegacyAction.definition.description;
        this.cssClass = LegacyAction.definition.cssClass;
@@ -33,20 +34,25 @@ export default class LegacyContextMenuAction {
    }

    invoke(objectPath) {
-        let context = {
-            category: 'contextual',
-            domainObject: this.openmct.legacyObject(objectPath)
-        }
-        let legacyAction = new this.LegacyAction(context);
+        this.openmct.objects.getRoot().then((root) => {
+            let pathWithRoot = objectPath.slice();
+            pathWithRoot.push(root);

-        if (!legacyAction.getMetadata) {
-            let metadata = Object.create(this.LegacyAction.definition);
-            metadata.context = context;
-            legacyAction.getMetadata = function () {
-                return metadata;
-            }.bind(legacyAction);
-        }
-        legacyAction.perform();
+            let context = {
+                category: 'contextual',
+                domainObject: this.openmct.legacyObject(pathWithRoot)
+            }
+            let legacyAction = new this.LegacyAction(context);
+
+            if (!legacyAction.getMetadata) {
+                let metadata = Object.create(this.LegacyAction.definition);
+                metadata.context = context;
+                legacyAction.getMetadata = function () {
+                    return metadata;
+                }.bind(legacyAction);
+            }
+            legacyAction.perform();
+        });
    }

    appliesTo(objectPath) {
--- a/src/adapter/bundle.js
+++ b/src/adapter/bundle.js
@@ -36,7 +36,7 @@ define([
    './runs/RegisterLegacyTypes',
    './services/LegacyObjectAPIInterceptor',
    './views/installLegacyViews',
-    './policies/legacyCompositionPolicyAdapter',
+    './policies/LegacyCompositionPolicyAdapter',
    './actions/LegacyActionAdapter'
 ], function (
    legacyRegistry,
--- a/src/adapter/runs/LegacyTelemetryProvider.js
+++ b/src/adapter/runs/LegacyTelemetryProvider.js
@@ -137,8 +137,7 @@ define([
        function callbackWrapper(series) {
            callback(createDatum(domainObject, metadata, series, series.getPointCount() - 1));
        }
-
-        return capability.subscribe(callbackWrapper, request);
+        return capability.subscribe(callbackWrapper, request) || function () {};
    };

    LegacyTelemetryProvider.prototype.supportsLimits = function (domainObject) {
@@ -158,7 +157,7 @@ define([

        return {
            evaluate: function (datum, property) {
-                return limitEvaluator.evaluate(datum, property.key);
+                return limitEvaluator.evaluate(datum, property && property.key);
            }
        };
    };
--- a/src/adapter/services/LegacyObjectAPIInterceptor.js
+++ b/src/adapter/services/LegacyObjectAPIInterceptor.js
@@ -57,8 +57,10 @@ define([
        }.bind(this);

        handleLegacyMutation = function (legacyObject) {
-            var newStyleObject = utils.toNewFormat(legacyObject.getModel(), legacyObject.getId());
-            this.eventEmitter.emit(newStyleObject.identifier.key + ":*", newStyleObject);
+            var newStyleObject = utils.toNewFormat(legacyObject.getModel(), legacyObject.getId()),
+                keystring = utils.makeKeyString(newStyleObject.identifier);
+
+            this.eventEmitter.emit(keystring + ":*", newStyleObject);
            this.eventEmitter.emit('mutation', newStyleObject);
        }.bind(this);

--- a/src/adapter/views/LegacyViewProvider.js
+++ b/src/adapter/views/LegacyViewProvider.js
@@ -45,15 +45,30 @@ define([
            view: function (domainObject) {
                let $rootScope = openmct.$injector.get('$rootScope');
                let templateLinker = openmct.$injector.get('templateLinker');
-                let scope = $rootScope.$new();
+                let scope = $rootScope.$new(true);
                let legacyObject = convertToLegacyObject(domainObject);
                let isDestroyed = false;
+                let unlistenToStatus;
+                let element;
                scope.domainObject = legacyObject;
                scope.model = legacyObject.getModel();
-
+                let child;
+                let parent;

                return {
                    show: function (container) {
+                        parent = container;
+                        child = document.createElement('div');
+                        parent.appendChild(child);
+                        let statusCapability = legacyObject.getCapability('status');
+                        unlistenToStatus = statusCapability.listen((newStatus) => {
+                            child.classList.remove('s-status-timeconductor-unsynced');
+
+                            if (newStatus.includes('timeconductor-unsynced')) {
+                                child.classList.add('s-status-timeconductor-unsynced');
+                            }
+                        });
+
                        // TODO: implement "gestures" support ?
                        let uses = legacyView.uses || [];
                        let promises = [];
@@ -74,12 +89,13 @@ define([
                            uses.forEach(function (key, i) {
                                scope[key] = results[i];
                            });
+                            element = openmct.$angular.element(child);
                            templateLinker.link(
                                scope,
-                                openmct.$angular.element(container),
+                                element,
                                legacyView
                            );
-                            container.classList.add('u-contents');
+                            child.classList.add('u-contents');
                        }

                        if (promises.length) {
@@ -92,8 +108,16 @@ define([
                            link();
                        }
                    },
+                    onClearData() {
+                        scope.$broadcast('clearData');
+                    },
                    destroy: function () {
+                        element.off();
+                        element.remove();
                        scope.$destroy();
+                        element = null;
+                        scope = null;
+                        unlistenToStatus();
                    }
                }
            },
@@ -105,7 +129,7 @@ define([
                return priority;
            }
        };
-    };
+    }

    return LegacyViewProvider;

--- a/src/adapter/views/TypeInspectorViewProvider.js
+++ b/src/adapter/views/TypeInspectorViewProvider.js
@@ -25,25 +25,34 @@ define([
            cssClass: representation.cssClass,
            description: representation.description,
            canView: function (selection) {
-                if (!selection[0] || !selection[0].context.item) {
+                if (selection.length !== 1 || selection[0].length === 0) {
                    return false;
                }
-                let domainObject = selection[0].context.item;
-                return domainObject.type === typeDefinition.key;
+
+                let selectionContext = selection[0][0].context;
+
+                if (!selectionContext.item) {
+                    return false;
+                }
+
+                return selectionContext.item.type === typeDefinition.key;
            },
            view: function (selection) {
-                let domainObject = selection[0].context.item;
+                let domainObject = selection[0][0].context.item;
                let $rootScope = openmct.$injector.get('$rootScope');
                let templateLinker = openmct.$injector.get('templateLinker');
-                let scope = $rootScope.$new();
+                let scope = $rootScope.$new(true);
                let legacyObject = convertToLegacyObject(domainObject);
                let isDestroyed = false;
+                let element;
                scope.domainObject = legacyObject;
                scope.model = legacyObject.getModel();


                return {
                    show: function (container) {
+                        let child = document.createElement('div');
+                        container.appendChild(child);
                        // TODO: implement "gestures" support ?
                        let uses = representation.uses || [];
                        let promises = [];
@@ -64,9 +73,10 @@ define([
                            uses.forEach(function (key, i) {
                                scope[key] = results[i];
                            });
+                            element = openmct.$angular.element(child)
                            templateLinker.link(
                                scope,
-                                openmct.$angular.element(container),
+                                element,
                                representation
                            );
                            container.style.height = '100%';
@@ -83,12 +93,16 @@ define([
                        }
                    },
                    destroy: function () {
+                        element.off();
+                        element.remove();
                        scope.$destroy();
+                        element = null;
+                        scope = null;
                    }
                }
            }
        };
-    };
+    }

    return TypeInspectorViewProvider;

--- a/src/styles/_logo-and-bg.scss
+++ b/src/styles/_logo-and-bg.scss
@@ -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;
 }
--- a/src/api/Editor.js
+++ b/src/api/Editor.js
@@ -28,17 +28,13 @@ export default class Editor extends EventEmitter {
        super();
        this.editing = false;
        this.openmct = openmct;
-        document.addEventListener('drop', (event) => {
-            if (!this.isEditing()) {
-                this.edit();
-            }
-        }, {capture: true});
    }

    /**
     * Initiate an editing session. This will start a transaction during
     * which any persist operations will be deferred until either save()
     * or finish() are called.
+     * @private
     */
    edit() {
        if (this.editing === true) {
@@ -59,6 +55,8 @@ export default class Editor extends EventEmitter {
    /**
     * Save any unsaved changes from this editing session. This will
     * end the current transaction.
+     *
+     * @private
     */
    save() {
        return this.getTransactionService().commit().then((result)=>{
@@ -72,11 +70,15 @@ export default class Editor extends EventEmitter {

    /**
     * End the currently active transaction and discard unsaved changes.
+     *
+     * @private
     */
    cancel() {
-        this.getTransactionService().cancel();
+        let cancelPromise = this.getTransactionService().cancel();
        this.editing = false;
        this.emit('isEditing', false);
+
+        return cancelPromise;
    }

    /**
--- a/src/api/composition/CompositionAPISpec.js
+++ b/src/api/composition/CompositionAPISpec.js
@@ -21,7 +21,23 @@ define([
            topicService.and.returnValue(mutationTopic);
            publicAPI = {};
            publicAPI.objects = jasmine.createSpyObj('ObjectAPI', [
-                'get'
+                'get',
+                'mutate',
+                'observe',
+                'areIdsEqual'
+            ]);
+
+            publicAPI.objects.areIdsEqual.and.callFake(function (id1, id2) {
+                return id1.namespace === id2.namespace && id1.key === id2.key;
+            });
+
+            publicAPI.composition = jasmine.createSpyObj('CompositionAPI', [
+                'checkPolicy'
+            ]);
+            publicAPI.composition.checkPolicy.and.returnValue(true);
+
+            publicAPI.objects.eventEmitter = jasmine.createSpyObj('eventemitter', [
+                'on'
            ]);
            publicAPI.objects.get.and.callFake(function (identifier) {
                return Promise.resolve({identifier: identifier});
@@ -52,6 +68,14 @@ define([
                        {
                            namespace: 'test',
                            key: 'a'
+                        },
+                        {
+                            namespace: 'test',
+                            key: 'b'
+                        },
+                        {
+                            namespace: 'test',
+                            key: 'c'
                        }
                    ]
                };
@@ -68,55 +92,55 @@ 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);

-            // TODO: Implement add/removal in new default provider.
-            xit('synchronizes changes between instances', function () {
-                var otherComposition = compositionAPI.get(domainObject);
-                var addListener = jasmine.createSpy('addListener');
-                var removeListener = jasmine.createSpy('removeListener');
-                var otherAddListener = jasmine.createSpy('otherAddListener');
-                var otherRemoveListener = jasmine.createSpy('otherRemoveListener');
+                    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');
+                })
+            });
+            it('supports adding an object to composition', function () {
+                let addListener = jasmine.createSpy('addListener');
+                let mockChildObject = {
+                    identifier: {key: 'mock-key', namespace: ''}
+                };
                composition.on('add', addListener);
-                composition.on('remove', removeListener);
-                otherComposition.on('add', otherAddListener);
-                otherComposition.on('remove', otherRemoveListener);
+                composition.add(mockChildObject);

-                return Promise.all([composition.load(), otherComposition.load()])
-                    .then(function () {
-                        expect(addListener).toHaveBeenCalled();
-                        expect(otherAddListener).toHaveBeenCalled();
-                        expect(removeListener).not.toHaveBeenCalled();
-                        expect(otherRemoveListener).not.toHaveBeenCalled();
-
-                        var object = addListener.calls.mostRecent().args[0];
-                        composition.remove(object);
-                        expect(removeListener).toHaveBeenCalled();
-                        expect(otherRemoveListener).toHaveBeenCalled();
-
-                        addListener.reset();
-                        otherAddListener.reset();
-                        composition.add(object);
-                        expect(addListener).toHaveBeenCalled();
-                        expect(otherAddListener).toHaveBeenCalled();
-
-                        removeListener.reset();
-                        otherRemoveListener.reset();
-                        otherComposition.remove(object);
-                        expect(removeListener).toHaveBeenCalled();
-                        expect(otherRemoveListener).toHaveBeenCalled();
-
-                        addListener.reset();
-                        otherAddListener.reset();
-                        otherComposition.add(object);
-                        expect(addListener).toHaveBeenCalled();
-                        expect(otherAddListener).toHaveBeenCalled();
-                    });
+                expect(domainObject.composition.length).toBe(4);
+                expect(domainObject.composition[3]).toEqual(mockChildObject.identifier);
            });
        });

@@ -139,7 +163,9 @@ define([
                                key: 'thing'
                            }
                        ]);
-                    }
+                    },
+                    add: jasmine.createSpy('add'),
+                    remove: jasmine.createSpy('remove')
                };
                domainObject = {
                    identifier: {
@@ -169,6 +195,25 @@ define([
                    });
                });
            });
+            describe('Calling add or remove', function () {
+                let mockChildObject;
+
+                beforeEach(function () {
+                    mockChildObject = {
+                        identifier: {key: 'mock-key', namespace: ''}
+                    };
+                    composition.add(mockChildObject);
+                });
+
+                it('calls add on the provider', function () {
+                    expect(customProvider.add).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
+                });
+
+                it('calls remove on the provider', function () {
+                    composition.remove(mockChildObject);
+                    expect(customProvider.remove).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
+                });
+            });
        });

        describe('dynamic custom composition', function () {
--- a/src/api/composition/CompositionCollection.js
+++ b/src/api/composition/CompositionCollection.js
@@ -25,7 +25,6 @@ define([
 ], function (
    _
 ) {
-
    /**
     * A CompositionCollection represents the list of domain objects contained
     * by another domain object. It provides methods for loading this
@@ -56,13 +55,13 @@ define([
        this.listeners = {
            add: [],
            remove: [],
-            load: []
+            load: [],
+            reorder: []
        };
        this.onProviderAdd = this.onProviderAdd.bind(this);
        this.onProviderRemove = this.onProviderRemove.bind(this);
    }

-
    /**
     * Listen for changes to this composition.  Supports 'add', 'remove', and
     * 'load' events.
@@ -75,7 +74,9 @@ define([
        if (!this.listeners[event]) {
            throw new Error('Event not supported by composition: ' + event);
        }
-
+        if (!this.mutationListener) {
+            this._synchronize();
+        }
        if (this.provider.on && this.provider.off) {
            if (event === 'add') {
                this.provider.on(
@@ -91,6 +92,13 @@ define([
                    this.onProviderRemove,
                    this
                );
+            } if (event === 'reorder') {
+                this.provider.on(
+                    this.domainObject,
+                    'reorder',
+                    this.onProviderReorder,
+                    this
+                )
            }
        }

@@ -124,6 +132,8 @@ define([

        this.listeners[event].splice(index, 1);
        if (this.listeners[event].length === 0) {
+            this._destroy();
+
            // Remove provider listener if this is the last callback to
            // be removed.
            if (this.provider.off && this.provider.on) {
@@ -141,6 +151,13 @@ define([
                        this.onProviderRemove,
                        this
                    );
+                } else if (event === 'reorder') {
+                    this.provider.off(
+                        this.domainObject,
+                        'reorder',
+                        this.onProviderReorder,
+                        this
+                    );
                }
            }
        }
@@ -160,6 +177,9 @@ define([
     */
    CompositionCollection.prototype.add = function (child, skipMutate) {
        if (!skipMutate) {
+            if (!this.publicAPI.composition.checkPolicy(this.domainObject, child)) {
+                throw `Object of type ${child.type} cannot be added to object of type ${this.domainObject.type}`;
+            }
            this.provider.add(this.domainObject, child.identifier);
        } else {
            this.emit('add', child);
@@ -209,6 +229,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
@@ -228,16 +271,29 @@ define([
        this.remove(child, true);
    };

+    CompositionCollection.prototype._synchronize = function () {
+        this.mutationListener = this.publicAPI.objects.observe(this.domainObject, '*', (newDomainObject) => {
+            this.domainObject = JSON.parse(JSON.stringify(newDomainObject));
+        });
+    };
+
+    CompositionCollection.prototype._destroy = function () {
+        if (this.mutationListener) {
+            this.mutationListener();
+            delete this.mutationListener;
+        }
+    };
+
    /**
     * 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);
            }
        });
    };
--- a/src/api/composition/DefaultCompositionProvider.js
+++ b/src/api/composition/DefaultCompositionProvider.js
@@ -48,24 +48,11 @@ define([
        this.listeningTo = {};
        this.onMutation = this.onMutation.bind(this);

-        this.cannotContainDuplicates = this.cannotContainDuplicates.bind(this);
        this.cannotContainItself = this.cannotContainItself.bind(this);

-        compositionAPI.addPolicy(this.cannotContainDuplicates);
        compositionAPI.addPolicy(this.cannotContainItself);
    }

-    /**
-     * @private
-     */
-    DefaultCompositionProvider.prototype.cannotContainDuplicates = function (parent, child) {
-        return this.appliesTo(parent) &&
-            parent.composition.findIndex((composeeId) => {
-                return composeeId.namespace === child.identifier.namespace &&
-                    composeeId.key === child.identifier.key;
-            }) === -1;
-    }
-
    /**
     * @private
     */
@@ -126,6 +113,7 @@ define([
            objectListeners = this.listeningTo[keyString] = {
                add: [],
                remove: [],
+                reorder: [],
                composition: [].slice.apply(domainObject.composition)
            };
        }
@@ -160,7 +148,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];
        }
    };
@@ -198,9 +186,66 @@ define([
     * @memberof module:openmct.CompositionProvider#
     * @method add
     */
-    DefaultCompositionProvider.prototype.add = function (domainObject, child) {
-        throw new Error('Default Provider does not implement adding.');
-        // TODO: this needs to be synchronized via mutation
+    DefaultCompositionProvider.prototype.add = function (parent, childId) {
+        if (!this.includes(parent, childId)) {
+            parent.composition.push(childId);
+            this.publicAPI.objects.mutate(parent, 'composition', parent.composition);
+        }
+    };
+    /**
+     * @private
+     */
+    DefaultCompositionProvider.prototype.includes = function (parent, childId) {
+        return parent.composition.findIndex(composee =>
+            this.publicAPI.objects.areIdsEqual(composee, childId)) !== -1;
+    };
+
+    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);
+            }
+        }
    };

    /**
--- a/src/api/contextMenu/ContextMenuAPI.js
+++ b/src/api/contextMenu/ContextMenuAPI.js
@@ -49,6 +49,9 @@ class ContextMenuAPI {
     *           a single sentence or short paragraph) of this kind of view
     * @property {string} cssClass the CSS class to apply to labels for this
     *           view (to add icons, for instance)
+     * @property {string} key unique key to identify the context menu action
+     *           (used in custom context menu eg table rows, to identify which actions to include)
+     * @property {boolean} hideInDefaultMenu optional flag to hide action from showing in the default context menu (tree item)
     */
    /**
     * @method appliesTo
@@ -72,12 +75,21 @@ class ContextMenuAPI {
    /**
     * @private
     */
-    _showContextMenuForObjectPath(objectPath, x, y) {
+    _showContextMenuForObjectPath(objectPath, x, y, actionsToBeIncluded) {
+
        let applicableActions = this._allActions.filter((action) => {
-            if (action.appliesTo === undefined) {
-                return true;
+
+            if (actionsToBeIncluded) {
+                if (action.appliesTo === undefined && actionsToBeIncluded.includes(action.key)) {
+                    return true;
+                }
+                return action.appliesTo(objectPath, actionsToBeIncluded) && actionsToBeIncluded.includes(action.key);
+            } else {
+                if (action.appliesTo === undefined) {
+                    return true;
+                }
+                return action.appliesTo(objectPath) && !action.hideInDefaultMenu;
            }
-            return action.appliesTo(objectPath);
        });

        if (this._activeContextMenu) {
--- a/src/api/indicators/SimpleIndicator.js
+++ b/src/api/indicators/SimpleIndicator.js
@@ -28,7 +28,7 @@ define(['zepto', './res/indicator-template.html'],
            this.openmct = openmct;
            this.element = $(indicatorTemplate)[0];

-            this.textElement = this.element.querySelector('.indicator-text');
+            this.textElement = this.element.querySelector('.js-indicator-text');

            //Set defaults
            this.text('New Indicator');
--- a/src/api/indicators/res/indicator-template.html
+++ b/src/api/indicators/res/indicator-template.html
@@ -1,3 +1,3 @@
-<div class="ls-indicator" title="">
-    <span class="label indicator-text"></span>
+<div class="c-indicator c-indicator--clickable c-indicator--simple" title="">
+    <span class="label js-indicator-text c-indicator__label"></span>
 </div>
--- a/src/api/notifications/NotificationAPI.js
+++ b/src/api/notifications/NotificationAPI.js
@@ -42,7 +42,7 @@ import EventEmitter from 'EventEmitter';
 *
 * @typedef {object} NotificationModel
 * @property {string} message The message to be displayed by the notification
- * @property {number | 'unknown'} [progress] The progres of some ongoing task. Should be a number between 0 and 100, or 
+ * @property {number | 'unknown'} [progress] The progres of some ongoing task. Should be a number between 0 and 100, or
 * with the string literal 'unknown'.
 * @property {string} [progressText] A message conveying progress of some ongoing task.

--- a/src/api/objects/MutableObject.js
+++ b/src/api/objects/MutableObject.js
@@ -21,8 +21,10 @@
 *****************************************************************************/

 define([
+    './object-utils.js',
    'lodash'
 ], function (
+    utils,
    _
 ) {
    var ANY_OBJECT_EVENT = "mutation";
@@ -41,7 +43,9 @@ define([
    }

    function qualifiedEventName(object, eventName) {
-        return [object.identifier.key, eventName].join(':');
+        var keystring = utils.makeKeyString(object.identifier);
+
+        return [keystring, eventName].join(':');
    }

    MutableObject.prototype.stopListening = function () {
--- a/src/api/objects/ObjectAPI.js
+++ b/src/api/objects/ObjectAPI.js
@@ -215,6 +215,32 @@ define([
        return utils.makeKeyString(identifier);
    };

+    /**
+     * Given any number of identifiers, will return true if they are all equal, otherwise false.
+     * @param {module:openmct.ObjectAPI~Identifier[]} identifiers
+     */
+    ObjectAPI.prototype.areIdsEqual = function (...identifiers) {
+        return identifiers.map(utils.parseKeyString)
+            .every(identifier => {
+                return identifier === identifiers[0] ||
+                    (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.
     *
--- a/src/api/overlays/Overlay.js
+++ b/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 {
--- a/src/api/overlays/components/DialogComponent.vue
+++ b/src/api/overlays/components/DialogComponent.vue
@@ -27,10 +27,16 @@
 <style lang="scss">
    @import "~styles/sass-base";

+    @mixin legacyMessage() {
+        flex: 0 1 auto;
+        font-family: symbolsfont;
+        font-size: $messageIconD; // Singleton message in a dialog
+        margin-right: $interiorMarginLg;
+    }
+
    .c-message {
        display: flex;
        align-items: center;
-        padding: $interiorMarginLg;

        > * + * {
            margin-left: $interiorMarginLg;
@@ -58,7 +64,44 @@
        &__title,
        &__action-text {
            font-size: 1.2em; // TEMP
+        }

+        &--simple {
+            // Icon and text elements only
+            &:before {
+                font-size: 30px !important;
+            }
+
+            [class*='__text'] {
+                font-size: 1.25em;
+            }
+        }
+
+        /************************** LEGACY */
+        &.message-severity-info:before {
+            @include legacyMessage();
+            content: $glyph-icon-info;
+            color: $colorInfo;
+        }
+
+        &.message-severity-alert:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-rect;
+            color: $colorWarningLo;
+        }
+
+        &.message-severity-error:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-triangle;
+            color: $colorWarningHi;
+        }
+
+        // Messages in a list
+        .c-overlay__messages & {
+            padding: $interiorMarginLg;
+            &:before {
+                font-size: $messageListIconD;
+            }
        }
    }
 </style>
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@@ -56,16 +56,46 @@
        }

        &__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;
+            overflow: hidden;
+        }
+
+        &__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;
+            height: 0; // Chrome 73 overflow bug fix
            overflow: auto;
+            padding-right: $interiorMargin; // fend off scroll bar
        }

        &__button-bar {
@@ -89,18 +119,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 +155,7 @@
            }
        }

+        .t-dialog-sm .l-overlay-small, // Legacy dialog support
        .l-overlay-fit {
            .c-overlay__outer {
                @include overlaySizing(auto);
--- a/src/api/telemetry/TelemetryAPI.js
+++ b/src/api/telemetry/TelemetryAPI.js
@@ -280,7 +280,11 @@ define([
        if (!provider) {
            return Promise.reject('No provider found');
        }
-        return provider.request.apply(provider, arguments);
+        return provider.request.apply(provider, arguments).catch((rejected) => {
+            this.openmct.notifications.error('Error requesting telemetry data, see console for details');
+            console.error(rejected);
+            return Promise.reject(rejected);
+        });
    };

    /**
@@ -297,7 +301,7 @@ define([
     * @returns {Function} a function which may be called to terminate
     *          the subscription
     */
-    TelemetryAPI.prototype.subscribe = function (domainObject, callback) {
+    TelemetryAPI.prototype.subscribe = function (domainObject, callback, options) {
        var provider = this.findSubscriptionProvider(domainObject);

        if (!this.subscribeCache) {
@@ -316,7 +320,7 @@ define([
                        subscriber.callbacks.forEach(function (cb) {
                            cb(value);
                        });
-                    });
+                    }, options);
            } else {
                subscriber.unsubscribe = function () {};
            }
--- a/src/api/telemetry/TelemetryAPISpec.js
+++ b/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);
+                });
+            });
+        })
    });
 });
--- a/src/api/telemetry/TelemetryMetadataManager.js
+++ b/src/api/telemetry/TelemetryMetadataManager.js
@@ -116,14 +116,18 @@ 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 () {
+        return this.valueMetadatas.filter(metadatum => metadatum.filters && metadatum.filters.length > 0);
+    }
+
    TelemetryMetadataManager.prototype.getDefaultDisplayValue = function () {
        let valueMetadata = this.valuesForHints(['range'])[0];

--- a/src/exporters/CSVExporter.js
+++ b/src/exporters/CSVExporter.js
@@ -32,6 +32,6 @@ class CSVExporter {
        let blob = new Blob([csvText], { type: "text/csv" });
        saveAs(blob, filename);
    }
-};
+}

 export default CSVExporter;
--- a/src/plugins/LADTable/LADTableSetViewProvider.js
+++ b/src/plugins/LADTable/LADTableSetViewProvider.js
@@ -35,7 +35,10 @@ define([
            canView: function (domainObject) {
                return domainObject.type === 'LadTableSet';
            },
-            view: function (domainObject) {
+            canEdit: function (domainObject) {
+                return domainObject.type === 'LadTableSet';
+            },
+            view: function (domainObject, isEditing, objectPath) {
                let component;

                return {
@@ -46,7 +49,8 @@ define([
                            },
                            provide: {
                                openmct,
-                                domainObject
+                                domainObject,
+                                objectPath
                            },
                            el: element,
                            template: '<lad-table-set></lad-table-set>'
--- a/src/plugins/LADTable/LADTableViewProvider.js
+++ b/src/plugins/LADTable/LADTableViewProvider.js
@@ -21,7 +21,7 @@
 *****************************************************************************/

 define([
-    './components/LadTable.vue',
+    './components/LADTable.vue',
    'vue'
 ], function (
    LadTableComponent,
@@ -35,7 +35,10 @@ define([
            canView: function (domainObject) {
                return domainObject.type === 'LadTable';
            },
-            view: function (domainObject) {
+            canEdit: function (domainObject) {
+                return domainObject.type === 'LadTable';
+            },
+            view: function (domainObject, isEditing, objectPath) {
                let component;

                return {
@@ -46,7 +49,8 @@ define([
                            },
                            provide: {
                                openmct,
-                                domainObject
+                                domainObject,
+                                objectPath
                            },
                            el: element,
                            template: '<lad-table-component></lad-table-component>'
--- a/src/plugins/LADTable/components/LADRow.vue
+++ b/src/plugins/LADTable/components/LADRow.vue
@@ -1,3 +1,4 @@
+
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -21,7 +22,7 @@
 *****************************************************************************/

 <template>
-    <tr>
+    <tr @contextmenu.prevent="showContextMenu">
        <td>{{name}}</td>
        <td>{{timestamp}}</td>
        <td :class="valueClass">
@@ -35,15 +36,25 @@
 </style>

 <script>
+
+const CONTEXT_MENU_ACTIONS = [
+    'viewHistoricalData',
+    'remove'
+];
+
 export default {
-    inject: ['openmct'],
+    inject: ['openmct', 'objectPath'],
    props: ['domainObject'],
    data() {
+        let currentObjectPath = this.objectPath.slice();
+        currentObjectPath.unshift(this.domainObject);
+
        return {
            name: this.domainObject.name,
            timestamp: '---',
            value: '---',
-            valueClass: ''
+            valueClass: '',
+            currentObjectPath
        }
    },
    methods: {
@@ -73,11 +84,15 @@ export default {
                .request(this.domainObject, {strategy: 'latest'})
                .then((array) => this.updateValues(array[array.length - 1]));

+        },
+        showContextMenu(event) {
+           this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
        }
    },
    mounted() {
        this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
        this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+        this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);

        this.limitEvaluator = openmct
            .telemetry
--- a/src/plugins/LADTable/components/LADTable.vue
+++ b/src/plugins/LADTable/components/LADTable.vue
@@ -41,10 +41,10 @@

 <script>
 import lodash from 'lodash';
-import LadRow from './LadRow.vue';
+import LadRow from './LADRow.vue';

 export default {
-    inject: ['openmct', 'domainObject'],
+    inject: ['openmct', 'domainObject', 'objectPath'],
    components: {
        LadRow
    },
@@ -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>
--- a/src/plugins/LADTable/components/LadTableSet.vue
+++ b/src/plugins/LADTable/components/LadTableSet.vue
@@ -52,7 +52,7 @@

 <script>
    import lodash from 'lodash';
-    import LadRow from './LadRow.vue';
+    import LadRow from './LADRow.vue';

    export default {
    inject: ['openmct', 'domainObject'],
@@ -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);
--- a/src/plugins/clearData/clearDataAction.js
+++ b/src/plugins/clearData/clearDataAction.js
@@ -19,21 +19,21 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-.app-logo {
-    background: url('../images/logo-app.svg') no-repeat center center;
-}

-.l-splash-holder {
-    background: #333;
-    .s-splash {
-        border-radius: 10px;
-        box-shadow: 0 5px 50px 25px rgba(255, 255, 255, 0.1);
-    }
-}
-
-.s-splash {
-    background-image: url('../images/bg-splash.jpg');
-    &:after {
-        background-image: url('../images/logo-app-shdw.svg');
+export default class ClearDataAction {
+    constructor(openmct, appliesToObjects) {
+        this.name = 'Clear Data';
+        this.description = 'Clears current data for object, unsubscribes and resubscribes to data';
+
+        this._openmct = openmct;
+        this._appliesToObjects = appliesToObjects;
+    }
+    invoke(objectPath) {
+        this._openmct.objectViews.emit('clearData', objectPath[0]);
+    }
+    appliesTo(objectPath) {
+        let contextualDomainObject = objectPath[0];
+
+        return this._appliesToObjects.filter(type => contextualDomainObject.type === type).length;
    }
 }
--- a/src/plugins/clearData/components/globalClearIndicator.vue
+++ b/src/plugins/clearData/components/globalClearIndicator.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="c-indicator c-indicator--clickable icon-session">
+        <span class="label c-indicator__label">
+            <button @click="globalClearEmit">Clear All Data</button>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    methods: {
+        globalClearEmit() {
+            this.openmct.objectViews.emit('clearData');
+        }
+    }
+}
+</script>
--- a/platform/commonUI/browse/src/windowing/WindowTitler.js
+++ b/platform/commonUI/browse/src/windowing/WindowTitler.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2019, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
@@ -20,32 +20,35 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

-define(
-    [],
-    function () {
+define([
+    './components/globalClearIndicator.vue',
+    './clearDataAction',
+    'vue'
+], function (
+    GlobaClearIndicator,
+    ClearDataAction,
+    Vue
+) {
+    return function plugin(appliesToObjects) {
+        appliesToObjects = appliesToObjects || [];

-        /**
-         * Updates the title of the current window to reflect the name
-         * of the currently navigated-to domain object.
-         * @memberof platform/commonUI/browse
-         * @constructor
-         */
-        function WindowTitler(navigationService, $rootScope, $document) {
-            // Look up name of the navigated domain object...
-            function getNavigatedObjectName() {
-                var navigatedObject = navigationService.getNavigation();
-                return navigatedObject && navigatedObject.getModel().name;
-            }
+        return function install(openmct) {
+            let component = new Vue ({
+                    provide: {
+                        openmct
+                    },
+                    components: {
+                        GlobalClearIndicator: GlobaClearIndicator.default
+                    },
+                    template: '<GlobalClearIndicator></GlobalClearIndicator>'
+                }),
+                indicator = {
+                    element: component.$mount().$el
+                };

-            // Set the window title...
-            function setTitle(name) {
-                $document[0].title = name;
-            }
+            openmct.indicators.add(indicator);

-            // Watch the former, and invoke the latter
-            $rootScope.$watch(getNavigatedObjectName, setTitle);
-        }
-
-        return WindowTitler;
-    }
-);
+            openmct.contextMenu.registerAction(new ClearDataAction.default(openmct, appliesToObjects));
+        };
+    };
+});
--- a/src/plugins/clearData/test/clearDataActionSpec.js
+++ b/src/plugins/clearData/test/clearDataActionSpec.js
@@ -0,0 +1,62 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import ClearDataActionPlugin  from '../plugin.js';
+import ClearDataAction from '../clearDataAction.js';
+
+describe('When the Clear Data Plugin is installed,', function () {
+    var mockObjectViews = jasmine.createSpyObj('objectViews', ['emit']),
+        mockIndicatorProvider = jasmine.createSpyObj('indicators', ['add']),
+        mockContextMenuProvider = jasmine.createSpyObj('contextMenu', ['registerAction']),
+        openmct = {
+            objectViews: mockObjectViews,
+            indicators: mockIndicatorProvider,
+            contextMenu: mockContextMenuProvider,
+            install: function (plugin) {
+                plugin(this);
+            }
+        },
+        mockObjectPath = [
+            {name: 'mockObject1'},
+            {name: 'mockObject2'}
+        ];
+
+    it('Global Clear Indicator is installed', function () {
+        openmct.install(ClearDataActionPlugin([]));
+
+        expect(mockIndicatorProvider.add).toHaveBeenCalled();
+    });
+
+    it('Clear Data context menu action is installed', function () {
+        openmct.install(ClearDataActionPlugin([]));
+
+        expect(mockContextMenuProvider.registerAction).toHaveBeenCalled();
+    });
+
+    it('clear data action emits a clearData event when invoked', function () {
+        let action = new ClearDataAction(openmct);
+
+        action.invoke(mockObjectPath);
+
+        expect(mockObjectViews.emit).toHaveBeenCalledWith('clearData', mockObjectPath[0]);
+    });
+});
--- a/src/plugins/displayLayout/AlphanumericFormatViewProvider.js
+++ b/src/plugins/displayLayout/AlphanumericFormatViewProvider.js
@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define([
+    './components/AlphanumericFormatView.vue',
+    'vue'
+], function (AlphanumericFormatView, Vue) {
+
+    function AlphanumericFormatViewProvider(openmct, options) {
+        function isTelemetryObject(selectionPath) {
+            let selectedObject = selectionPath[0].context.item;
+            let parentObject = selectionPath[1].context.item;
+            return parentObject &&
+                parentObject.type === 'layout' &&
+                selectedObject &&
+                openmct.telemetry.isTelemetryObject(selectedObject) &&
+                !options.showAsView.includes(selectedObject.type)
+        }
+
+        return {
+            key: 'alphanumeric-format',
+            name: 'Alphanumeric Format',
+            canView: function (selection) {
+                if (selection.length === 0 || selection[0].length === 1) {
+                    return false;
+                }
+
+                return selection.every(isTelemetryObject);
+            },
+            view: function (domainObject, isEditing, objectPath) {
+                let component;
+                return {
+                    show: function (element) {
+                        component = new Vue({
+                            provide: {
+                                openmct,
+                                objectPath
+                            },
+                            components: {
+                                AlphanumericFormatView: AlphanumericFormatView.default
+                            },
+                            template: '<alphanumeric-format-view></alphanumeric-format-view>',
+                            el: element
+                        });
+                    },
+                    destroy: function () {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            },
+            priority: function () {
+                return 1;
+            }
+        }
+    }
+
+    return AlphanumericFormatViewProvider;
+});
--- a/src/plugins/displayLayout/DisplayLayoutToolbar.js
+++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js
@@ -28,11 +28,17 @@ 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
-                // is inside a layout, or the main layout is selected.
-                return (openmct.editor.isEditing() && selection &&
-                    ((selection[1] && selection[1].context.item && selection[1].context.item.type === 'layout') ||
-                        (selection[0].context.item && selection[0].context.item.type === 'layout')));
+                if (!selection || selection.length === 0) {
+                    return false;
+                }
+
+                let selectionPath = selection[0];
+                let selectedObject = selectionPath[0];
+                let selectedParent = selectionPath[1];
+
+                // Apply the layout toolbar if the selected object is inside a layout, or the main layout is selected.
+                return (selectedParent && selectedParent.context.item && selectedParent.context.item.type === 'layout') ||
+                    (selectedObject.context.item && selectedObject.context.item.type === 'layout');
            },
            toolbar: function (selection) {
                const DIALOG_FORM = {
@@ -73,190 +79,72 @@ define([], function () {
                    return openmct.$injector.get('dialogService').getUserInput(form, {});
                }

-                function getPath() {
-                    return `configuration.items[${selection[0].context.index}]`;
+                function getPath(selectionPath) {
+                    return `configuration.items[${selectionPath[0].context.index}]`;
                }

-                let selectedParent = selection[1] && selection[1].context.item,
-                    selectedObject = selection[0].context.item,
-                    layoutItem = selection[0].context.layoutItem,
-                    toolbar = [];
-
-                if (selectedObject && selectedObject.type === 'layout') {
-                    toolbar.push({
-                        control: "menu",
-                        domainObject: selectedObject,
-                        method: function (option) {
-                            let name = option.name.toLowerCase();
-                            let form = DIALOG_FORM[name];
-                            if (form) {
-                                getUserInput(form)
-                                    .then(element => selection[0].context.addElement(name, element));
-                            } else {
-                                selection[0].context.addElement(name);
-                            }
-                        },
-                        key: "add",
-                        icon: "icon-plus",
-                        label: "Add",
-                        options: [
-                            {
-                                "name": "Box",
-                                "class": "icon-box-round-corners"
-                            },
-                            {
-                                "name": "Line",
-                                "class": "icon-line-horz"
-                            },
-                            {
-                                "name": "Text",
-                                "class": "icon-font"
-                            },
-                            {
-                                "name": "Image",
-                                "class": "icon-image"
-                            }
-                        ]
+                function getAllTypes(selection) {
+                    return selection.filter(selectionPath => {
+                        let type = selectionPath[0].context.layoutItem.type;
+                        return type === 'text-view' ||
+                            type === 'telemetry-view' ||
+                            type === 'box-view' ||
+                            type === 'image-view' ||
+                            type === 'line-view' ||
+                            type === 'subobject-view';
                    });
                }

-                if (!layoutItem) {
-                    return toolbar;
-                }
-
-                let separator = {
-                    control: "separator"
-                };
-                let remove = {
-                    control: "button",
-                    domainObject: selectedParent,
-                    icon: "icon-trash",
-                    title: "Delete the selected object",
-                    method: function () {
-                        let removeItem = selection[1].context.removeItem;
-                        let prompt = openmct.overlays.dialog({
-                            iconClass: 'alert',
-                            message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
-                            buttons: [
+                function getAddButton(selection, selectionPath) {
+                    if (selection.length === 1) {
+                        selectionPath = selectionPath || selection[0];
+                        return {
+                            control: "menu",
+                            domainObject: selectionPath[0].context.item,
+                            method: function (option) {
+                                let name = option.name.toLowerCase();
+                                let form = DIALOG_FORM[name];
+                                if (form) {
+                                    getUserInput(form)
+                                        .then(element => selectionPath[0].context.addElement(name, element));
+                                } else {
+                                    selectionPath[0].context.addElement(name);
+                                }
+                            },
+                            key: "add",
+                            icon: "icon-plus",
+                            label: "Add",
+                            options: [
                                {
-                                    label: 'Ok',
-                                    emphasis: 'true',
-                                    callback: function () {
-                                        removeItem(layoutItem, selection[0].context.index);
-                                        prompt.dismiss();
-                                    }
+                                    "name": "Box",
+                                    "class": "icon-box-round-corners"
                                },
                                {
-                                    label: 'Cancel',
-                                    callback: function () {
-                                        prompt.dismiss();
-                                    }
+                                    "name": "Line",
+                                    "class": "icon-line-horz"
+                                },
+                                {
+                                    "name": "Text",
+                                    "class": "icon-font"
+                                },
+                                {
+                                    "name": "Image",
+                                    "class": "icon-image"
                                }
                            ]
-                        });
+                        };
                    }
-                };
-                let stackOrder = {
-                    control: "menu",
-                    domainObject: selectedParent,
-                    icon: "icon-layers",
-                    title: "Move the selected object above or below other objects",
-                    options: [
-                        {
-                            name: "Move to Top",
-                            value: "top",
-                            class: "icon-arrow-double-up"
-                        },
-                        {
-                            name: "Move Up",
-                            value: "up",
-                            class: "icon-arrow-up"
-                        },
-                        {
-                            name: "Move Down",
-                            value: "down",
-                            class: "icon-arrow-down"
-                        },
-                        {
-                            name: "Move to Bottom",
-                            value: "bottom",
-                            class: "icon-arrow-double-down"
-                        }
-                    ],
-                    method: function (option) {
-                        selection[1].context.orderItem(option.value, selection[0].context.index);
-                    }
-                };
-                let useGrid = {
-                    control: "toggle-button",
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".useGrid";
-                    },
-                    options: [
-                        {
-                            value: false,
-                            icon: "icon-grid-snap-to",
-                            title: "Grid snapping enabled"
-                        },
-                        {
-                            value: true,
-                            icon: "icon-grid-snap-no",
-                            title: "Grid snapping disabled"
-                        }
-                    ]
-                };
-                let x = {
-                    control: "input",
-                    type: "number",
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".x";
-                    },
-                    label: "X:",
-                    title: "X position"
-                },
-                y = {
-                    control: "input",
-                    type: "number",
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".y";
-                    },
-                    label: "Y:",
-                    title: "Y position",
-                },
-                width = {
-                    control: 'input',
-                    type: 'number',
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".width";
-                    },
-                    label: 'W:',
-                    title: 'Resize object width'
-                },
-                height = {
-                    control: 'input',
-                    type: 'number',
-                    domainObject: selectedParent,
-                    property: function () {
-                        return getPath() + ".height";
-                    },
-                    label: 'H:',
-                    title: 'Resize object height'
-                };
+                }

-                if (layoutItem.type === 'subobject-view') {
-                    if (toolbar.length > 0) {
-                        toolbar.push(separator);
-                    }
-
-                    toolbar.push({
+                function getToggleFrameButton(selectedParent, selection) {
+                    return {
                        control: "toggle-button",
                        domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".hasFrame";
+                        applicableSelectedItems: selection.filter(selectionPath =>
+                            selectionPath[0].context.layoutItem.type === 'subobject-view'
+                        ),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".hasFrame";
                        },
                        options: [
                            {
@@ -270,52 +158,186 @@ define([], function () {
                                title: "Frame hidden"
                            }
                        ]
-                    });
-                    toolbar.push(separator);
-                    toolbar.push(stackOrder);
-                    toolbar.push(x);
-                    toolbar.push(y);
-                    toolbar.push(width);
-                    toolbar.push(height);
-                    toolbar.push(useGrid);
-                    toolbar.push(separator);
-                    toolbar.push(remove);
-                } else {
+                    };
+                }
+
+                function getRemoveButton(selectedParent, selectionPath, selection) {
+                    return {
+                        control: "button",
+                        domainObject: selectedParent,
+                        icon: "icon-trash",
+                        title: "Delete the selected object",
+                        method: function () {
+                            let removeItem = selectionPath[1].context.removeItem;
+                            let prompt = openmct.overlays.dialog({
+                                iconClass: 'alert',
+                                message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
+                                buttons: [
+                                    {
+                                        label: 'Ok',
+                                        emphasis: 'true',
+                                        callback: function () {
+                                            removeItem(getAllTypes(selection));
+                                            prompt.dismiss();
+                                        }
+                                    },
+                                    {
+                                        label: 'Cancel',
+                                        callback: function () {
+                                            prompt.dismiss();
+                                        }
+                                    }
+                                ]
+                            });
+                        }
+                    };
+                }
+
+                function getStackOrder(selectedParent, selectionPath) {
+                    return {
+                        control: "menu",
+                        domainObject: selectedParent,
+                        icon: "icon-layers",
+                        title: "Move the selected object above or below other objects",
+                        options: [
+                            {
+                                name: "Move to Top",
+                                value: "top",
+                                class: "icon-arrow-double-up"
+                            },
+                            {
+                                name: "Move Up",
+                                value: "up",
+                                class: "icon-arrow-up"
+                            },
+                            {
+                                name: "Move Down",
+                                value: "down",
+                                class: "icon-arrow-down"
+                            },
+                            {
+                                name: "Move to Bottom",
+                                value: "bottom",
+                                class: "icon-arrow-double-down"
+                            }
+                        ],
+                        method: function (option) {
+                            selectionPath[1].context.orderItem(option.value, getAllTypes(selection));
+                        }
+                    };
+                }
+
+                function getXInput(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: getAllTypes(selection),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".x";
+                            },
+                            label: "X:",
+                            title: "X position"
+                        };
+                    }
+                }
+
+                function getYInput(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: getAllTypes(selection),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".y";
+                            },
+                            label: "Y:",
+                            title: "Y position"
+                        };
+                    }
+                }
+
+                function getWidthInput(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: 'input',
+                            type: 'number',
+                            domainObject: selectedParent,
+                            applicableSelectedItems: getAllTypes(selection),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".width";
+                            },
+                            label: 'W:',
+                            title: 'Resize object width'
+                        };
+                    }
+                }
+
+                function getHeightInput(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: 'input',
+                            type: 'number',
+                            domainObject: selectedParent,
+                            applicableSelectedItems: getAllTypes(selection),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".height";
+                            },
+                            label: 'H:',
+                            title: 'Resize object height'
+                        };
+                    }
+                }
+
+                function getX2Input(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'line-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".x2";
+                            },
+                            label: "X2:",
+                            title: "X2 position"
+                        };
+                    }
+                }
+
+                function getY2Input(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'line-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".y2";
+                            },
+                            label: "Y2:",
+                            title: "Y2 position"
+                        };
+                    }
+                }
+
+                function getTextSizeMenu(selectedParent, selection) {
                    const TEXT_SIZE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128];
-                    let fill = {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".fill";
-                        },
-                        icon: "icon-paint-bucket",
-                        title: "Set fill color"
-                    },
-                    stroke = {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".stroke";
-                        },
-                        icon: "icon-line-horz",
-                        title: "Set border color"
-                    },
-                    color = {
-                        control: "color-picker",
-                        domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".color";
-                        },
-                        icon: "icon-font",
-                        mandatory: true,
-                        title: "Set text color",
-                        preventNone: true
-                    },
-                    size = {
+                    return {
                        control: "select-menu",
                        domainObject: selectedParent,
-                        property: function () {
-                            return getPath() + ".size";
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' || type === 'telemetry-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".size";
                        },
                        title: "Set text size",
                        options: TEXT_SIZE.map(size => {
@@ -324,13 +346,128 @@ define([], function () {
                            };
                        })
                    };
+                }

-                    if (layoutItem.type === 'telemetry-view') {
-                        let displayMode = {
+                function getFillMenu(selectedParent, selection) {
+                    return {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' ||
+                                type === 'telemetry-view' ||
+                                type === 'box-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".fill";
+                        },
+                        icon: "icon-paint-bucket",
+                        title: "Set fill color"
+                    };
+                }
+
+                function getStrokeMenu(selectedParent, selection) {
+                    return {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' ||
+                                type === 'telemetry-view' ||
+                                type === 'box-view' ||
+                                type === 'image-view' ||
+                                type === 'line-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".stroke";
+                        },
+                        icon: "icon-line-horz",
+                        title: "Set border color"
+                    };
+                }
+
+                function getTextColorMenu(selectedParent, selection) {
+                    return {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            let type = selectionPath[0].context.layoutItem.type;
+                            return type === 'text-view' || type === 'telemetry-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath) + ".color";
+                        },
+                        icon: "icon-font",
+                        mandatory: true,
+                        title: "Set text color",
+                        preventNone: true
+                    };
+                }
+
+                function getURLButton(selectedParent, selection) {
+                    return {
+                        control: "button",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            return selectionPath[0].context.layoutItem.type === 'image-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath);
+                        },
+                        icon: "icon-image",
+                        title: "Edit image properties",
+                        dialog: DIALOG_FORM.image
+                    };
+                }
+
+                function getTextButton(selectedParent, selection) {
+                    return {
+                        control: "button",
+                        domainObject: selectedParent,
+                        applicableSelectedItems: selection.filter(selectionPath => {
+                            return selectionPath[0].context.layoutItem.type === 'text-view';
+                        }),
+                        property: function (selectionPath) {
+                            return getPath(selectionPath);
+                        },
+                        icon: "icon-gear",
+                        title: "Edit text properties",
+                        dialog: DIALOG_FORM.text
+                    };
+                }
+
+                function getTelemetryValueMenu(selectionPath, selection) {
+                    if (selection.length === 1) {
+                        return {
+                            control: "select-menu",
+                            domainObject: selectionPath[1].context.item,
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'telemetry-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".value";
+                            },
+                            title: "Set value",
+                            options: openmct.telemetry.getMetadata(selectionPath[0].context.item).values().map(value => {
+                                return {
+                                    name: value.name,
+                                    value: value.key
+                                }
+                            })
+                        };
+                    }
+                }
+
+                function getDisplayModeMenu(selectedParent, selection) {
+                    if (selection.length === 1) {
+                        return {
                            control: "select-menu",
                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".displayMode";
+                            applicableSelectedItems: selection.filter(selectionPath => {
+                                return selectionPath[0].context.layoutItem.type === 'telemetry-view';
+                            }),
+                            property: function (selectionPath) {
+                                return getPath(selectionPath) + ".displayMode";
                            },
                            title: "Set display mode",
                            options: [
@@ -347,146 +484,196 @@ define([], function () {
                                    value: "value"
                                }
                            ]
-                        },
-                        value = {
-                            control: "select-menu",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".value";
-                            },
-                            title: "Set value",
-                            options: openmct.telemetry.getMetadata(selectedObject).values().map(value => {
-                                return {
-                                    name: value.name,
-                                    value: value.key
-                                }
-                            })
                        };
-                        toolbar = [
-                            displayMode,
-                            separator,
-                            value,
-                            separator,
-                            fill,
-                            stroke,
-                            color,
-                            separator,
-                            size,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            height,
-                            width,
-                            useGrid,
-                            separator,
-                            remove
-                        ];
-                    } else if (layoutItem.type === 'text-view') {
-                        let text = {
-                            control: "button",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath();
-                            },
-                            icon: "icon-gear",
-                            title: "Edit text properties",
-                            dialog: DIALOG_FORM['text']
-                        };
-                        toolbar = [
-                            fill,
-                            stroke,
-                            separator,
-                            color,
-                            size,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            height,
-                            width,
-                            useGrid,
-                            separator,
-                            text,
-                            separator,
-                            remove
-                        ];
-                    } else if (layoutItem.type === 'box-view') {
-                        toolbar = [
-                            fill,
-                            stroke,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            height,
-                            width,
-                            useGrid,
-                            separator,
-                            remove
-                        ];
-                    } else if (layoutItem.type === 'image-view') {
-                        let url = {
-                            control: "button",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath();
-                            },
-                            icon: "icon-image",
-                            title: "Edit image properties",
-                            dialog: DIALOG_FORM['image']
-                        };
-                        toolbar = [
-                            stroke,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            height,
-                            width,
-                            useGrid,
-                            separator,
-                            url,
-                            separator,
-                            remove
-                        ];
-                    } else if (layoutItem.type === 'line-view') {
-                        let x2 = {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".x2";
-                            },
-                            label: "X2:",
-                            title: "X2 position"
-                        },
-                        y2 = {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".y2";
-                            },
-                            label: "Y2:",
-                            title: "Y2 position",
-                        };
-                        toolbar = [
-                            stroke,
-                            separator,
-                            stackOrder,
-                            x,
-                            y,
-                            x2,
-                            y2,
-                            useGrid,
-                            separator,
-                            remove
-                        ];
                    }
                }

-                return toolbar;
+                function getSeparator() {
+                    return {
+                        control: "separator"
+                    };
+                }
+
+                function isMainLayoutSelected(selectionPath) {
+                    let selectedObject = selectionPath[0].context.item;
+                    return selectedObject && selectedObject.type === 'layout' &&
+                        !selectionPath[0].context.layoutItem;
+                }
+
+                if (isMainLayoutSelected(selection[0])) {
+                    return [getAddButton(selection)];
+                }
+
+                let toolbar = {
+                    'add-menu': [],
+                    'toggle-frame': [],
+                    'display-mode': [],
+                    'telemetry-value': [],
+                    'style': [],
+                    'text-style': [],
+                    'position': [],
+                    'text': [],
+                    'url': [],
+                    'remove': []
+                };
+
+                selection.forEach(selectionPath => {
+                    let selectedParent = selectionPath[1].context.item;
+                    let layoutItem = selectionPath[0].context.layoutItem;
+
+                    if (layoutItem.type === 'subobject-view') {
+                        if (toolbar['add-menu'].length === 0 && selectionPath[0].context.item.type === 'layout') {
+                            toolbar['add-menu'] = [getAddButton(selection, selectionPath)];
+                        }
+                        if (toolbar['toggle-frame'].length === 0) {
+                            toolbar['toggle-frame'] = [getToggleFrameButton(selectedParent, selection)];
+                        }
+                        if (toolbar.position.length === 0) {
+                            toolbar.position = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.remove.length === 0) {
+                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'telemetry-view') {
+                        if (toolbar['display-mode'].length === 0) {
+                            toolbar['display-mode'] = [getDisplayModeMenu(selectedParent, selection)];
+                        }
+                        if (toolbar['telemetry-value'].length === 0) {
+                            toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selection)];
+                        }
+                        if (toolbar.style.length < 2) {
+                            toolbar.style = [
+                                getFillMenu(selectedParent, selection),
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['text-style'].length === 0) {
+                            toolbar['text-style'] = [
+                                getTextColorMenu(selectedParent, selection),
+                                getTextSizeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.position.length === 0) {
+                            toolbar.position = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.remove.length === 0) {
+                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'text-view') {
+                        if (toolbar.style.length < 2) {
+                            toolbar.style = [
+                                getFillMenu(selectedParent, selection),
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar['text-style'].length === 0) {
+                            toolbar['text-style'] = [
+                                getTextColorMenu(selectedParent, selection),
+                                getTextSizeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.position.length === 0) {
+                            toolbar.position = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.text.length === 0) {
+                            toolbar.text = [getTextButton(selectedParent, selection)];
+                        }
+                        if (toolbar.remove.length === 0) {
+                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'box-view') {
+                        if (toolbar.style.length < 2) {
+                            toolbar.style = [
+                                getFillMenu(selectedParent, selection),
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.position.length === 0) {
+                            toolbar.position = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.remove.length === 0) {
+                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'image-view') {
+                        if (toolbar.style.length === 0) {
+                            toolbar.style = [
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.position.length === 0) {
+                            toolbar.position = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getHeightInput(selectedParent, selection),
+                                getWidthInput(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.url.length === 0) {
+                            toolbar.url = [getURLButton(selectedParent, selection)];
+                        }
+                        if (toolbar.remove.length === 0) {
+                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    } else if (layoutItem.type === 'line-view') {
+                        if (toolbar.style.length === 0) {
+                            toolbar.style = [
+                                getStrokeMenu(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.position.length === 0) {
+                            toolbar.position = [
+                                getStackOrder(selectedParent, selectionPath),
+                                getXInput(selectedParent, selection),
+                                getYInput(selectedParent, selection),
+                                getX2Input(selectedParent, selection),
+                                getY2Input(selectedParent, selection)
+                            ];
+                        }
+                        if (toolbar.remove.length === 0) {
+                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selection)];
+                        }
+                    }
+                });
+
+                let toolbarArray = Object.values(toolbar);
+                return _.flatten(toolbarArray.reduce((accumulator, group, index) => {
+                    group = group.filter(control => control !== undefined);
+
+                    if (group.length > 0) {
+                        accumulator.push(group);
+
+                        if (index < toolbarArray.length - 1) {
+                            accumulator.push(getSeparator());
+                        }
+                    }
+
+                    return accumulator;
+                }, []));
            }
        }
    }
--- a/src/plugins/displayLayout/DisplayLayoutType.js
+++ b/src/plugins/displayLayout/DisplayLayoutType.js
@@ -31,7 +31,7 @@ define(function () {
                domainObject.composition = [];
                domainObject.configuration = {
                    items: [],
-                    layoutGrid: [10, 10],
+                    layoutGrid: [10, 10]
                };
            },
            form: [
--- a/src/plugins/displayLayout/LayoutDrag.js
+++ b/src/plugins/displayLayout/LayoutDrag.js
@@ -95,7 +95,7 @@ define(
         * @param {number[]} pixelDelta the offset from the
         *        original position, in pixels
         */
-        LayoutDrag.prototype.getAdjustedPosition = function (pixelDelta) {
+        LayoutDrag.prototype.getAdjustedPositionAndDimensions = function (pixelDelta) {
            var gridDelta = toGridDelta(this.gridSize, pixelDelta);
            return {
                position: max(add(
@@ -109,6 +109,16 @@ define(
            };
        };

+        LayoutDrag.prototype.getAdjustedPosition = function (pixelDelta) {
+            var gridDelta = toGridDelta(this.gridSize, pixelDelta);
+            return {
+                position: max(add(
+                    this.rawPosition.position,
+                    multiply(gridDelta, this.posFactor)
+                ), [0, 0])
+            };
+        };
+
        return LayoutDrag;

    }
--- a/src/plugins/displayLayout/components/AlphanumericFormatView.vue
+++ b/src/plugins/displayLayout/components/AlphanumericFormatView.vue
@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+<template>
+    <div class="c-properties" v-if="isEditing">
+        <div class="c-properties__header">Alphanumeric Format</div>
+        <ul class="c-properties__section">
+            <li class="c-properties__row">
+                <div class="c-properties__label" title="Printf formatting for the selected telemetry">
+                    <label for="telemetryPrintfFormat">Format</label>
+                </div>
+                <div class="c-properties__value">
+                    <input id="telemetryPrintfFormat"
+                        type="text"
+                        @change="formatTelemetry"
+                        :value="telemetryFormat"
+                        :placeholder="nonMixedFormat ? '' : 'Mixed'"
+                    >
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        inject: ['openmct'],
+        data() {
+            let selectionPath = this.openmct.selection.get()[0];
+            return {
+                isEditing: this.openmct.editor.isEditing(),
+                telemetryFormat: undefined,
+                nonMixedFormat: false
+            }
+        },
+        methods: {
+            toggleEdit(isEditing) {
+                this.isEditing = isEditing;
+            },
+            formatTelemetry(event) {
+                let newFormat = event.currentTarget.value;
+                this.openmct.selection.get().forEach(selectionPath => {
+                    selectionPath[0].context.updateTelemetryFormat(newFormat);    
+                });
+                this.telemetryFormat = newFormat;
+            },
+            handleSelection(selection) {
+                if (selection.length === 0 || selection[0].length < 2) {
+                    return;
+                }
+
+                let format = selection[0][0].context.layoutItem.format;
+                this.nonMixedFormat = selection.every(selectionPath => {
+                    return selectionPath[0].context.layoutItem.format === format;
+                });
+
+                this.telemetryFormat = this.nonMixedFormat ? format : '';
+            }
+        },
+        mounted() {
+            this.openmct.editor.on('isEditing', this.toggleEdit);
+            this.openmct.selection.on('change', this.handleSelection);
+            this.handleSelection(this.openmct.selection.get());
+        },
+        destroyed() {
+            this.openmct.editor.off('isEditing', this.toggleEdit);
+            this.openmct.selection.off('change', this.handleSelection);
+        }
+    }
+
+</script>
--- a/src/plugins/displayLayout/components/BoxView.vue
+++ b/src/plugins/displayLayout/components/BoxView.vue
@@ -23,7 +23,8 @@
 <template>
    <layout-frame :item="item"
                  :grid-size="gridSize"
-                  @endDrag="(item, updates) => $emit('endDrag', item, updates)">
+                  @move="(gridDelta) => $emit('move', gridDelta)"
+                  @endMove="() => $emit('endMove')">
        <div class="c-box-view"
             :style="style">
        </div>
@@ -54,8 +55,7 @@
                x: 1,
                y: 1,
                width: 10, 
-                height: 5,
-                useGrid: true
+                height: 5
            };
        },
        inject: ['openmct'],
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -23,8 +23,11 @@
 <template>
    <div class="l-layout"
         @dragover="handleDragOver"
-         @click="bypassSelection"
-         @drop="handleDrop">
+         @click.capture="bypassSelection"
+         @drop="handleDrop"
+         :class="{
+            'is-multi-selected': selectedLayoutItems.length > 1
+            }">
        <!-- Background grid -->
        <div class="l-layout__grid-holder c-grid">
            <div class="c-grid__x l-grid l-grid-x"
@@ -39,18 +42,39 @@
                   :is="item.type"
                   :item="item"
                   :key="item.id"
-                   :gridSize="item.useGrid ? gridSize : [1, 1]"
+                   :gridSize="gridSize"
                   :initSelect="initSelectIndex === index"
                   :index="index"
-                   @endDrag="endDrag"
-        >
+                   :multiSelect="selectedLayoutItems.length > 1"
+                   @move="move"
+                   @endMove="endMove"
+                   @endLineResize='endLineResize'
+                   @formatChanged='updateTelemetryFormat'>
        </component>
+        <edit-marquee v-if='showMarquee'
+                      :gridSize="gridSize"
+                      :selectedLayoutItems="selectedLayoutItems"
+                      @endResize="endResize">
+        </edit-marquee>
    </div>
 </template>

 <style lang="scss">
    @import "~styles/sass-base";

+    @mixin displayMarquee($c) {
+        > .c-frame-edit {
+            // All other frames
+            //@include test($c, 0.4);
+            display: block;
+        }
+        > .c-frame > .c-frame-edit {
+            // Line object frame
+            //@include test($c, 0.4);
+            display: block;
+        }
+    }
+
    .l-layout {
        @include abs();
        display: flex;
@@ -70,7 +94,7 @@
        .l-shell__main-container {
            &[s-selected],
            &[s-selected-parent] {
-                // Display grid in main layout holder when editing
+                // Display grid and allow edit marquee to display in main layout holder when editing
                > .l-layout {
                    background: $editUIGridColorBg;

@@ -84,7 +108,7 @@
        .l-layout__frame {
            &[s-selected],
            &[s-selected-parent] {
-                // Display grid in nested layouts when editing
+                // Display grid and allow edit marquee to display in nested layouts when editing
                > * > * > .l-layout {
                    background: $editUIGridColorBg;
                    box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
@@ -95,10 +119,21 @@
                }
            }
        }
+
+        /*********************** EDIT MARQUEE CONTROL */
+        *[s-selected-parent] {
+            > .l-layout {
+                // When main shell layout is the parent
+                @include displayMarquee(deeppink);
+            }
+            > * > * > * {
+                // When a sub-layout is the parent
+                @include displayMarquee(blue);
+            }
+        }
    }
 </style>

-
 <script>
    import uuid from 'uuid';

@@ -108,6 +143,7 @@
    import TextView from './TextView.vue'
    import LineView from './LineView.vue'
    import ImageView from './ImageView.vue'
+    import EditMarquee from './EditMarquee.vue'

    const ITEM_TYPE_VIEW_MAP = {
        'subobject-view': SubobjectView,
@@ -123,6 +159,10 @@
        down: -1,
        bottom: Number.NEGATIVE_INFINITY
    };
+    const DRAG_OBJECT_TRANSFER_PREFIX = 'openmct/domain-object/';
+
+    let components = ITEM_TYPE_VIEW_MAP;
+    components['edit-marquee'] = EditMarquee;

    function getItemDefinition(itemType, ...options) {
        let itemView = ITEM_TYPE_VIEW_MAP[itemType];
@@ -139,7 +179,8 @@
            let domainObject = JSON.parse(JSON.stringify(this.domainObject));
            return {
                internalDomainObject: domainObject,
-                initSelectIndex: undefined
+                initSelectIndex: undefined,
+                selection: []
            };
        },
        computed: {
@@ -148,82 +189,145 @@
            },
            layoutItems() {
                return this.internalDomainObject.configuration.items;
+            },
+            selectedLayoutItems() {
+                return this.layoutItems.filter(item => {
+                    return this.itemIsInCurrentSelection(item);
+                });
+            },
+            showMarquee() {
+                let selectionPath = this.selection[0];
+                let singleSelectedLine = this.selection.length === 1 &&
+                    selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type === 'line-view';
+                return selectionPath && selectionPath.length > 1 && !singleSelectedLine;
            }
        },
-        inject: ['openmct'],
+        inject: ['openmct', 'options', 'objectPath'],
        props: ['domainObject'],
-        components: ITEM_TYPE_VIEW_MAP,
+        components: components,
        methods: {
            addElement(itemType, element) {
                this.addItem(itemType + '-view', element);
            },
            setSelection(selection) {
-                if (selection.length === 0) {
-                    return;
-                }
-
-                if (this.removeSelectionListener) {
-                    this.removeSelectionListener();
-                }
-
-                let itemIndex = selection[0].context.index;
-
-                if (itemIndex !== undefined) {
-                    this.attachSelectionListener(itemIndex);
-                }
+                this.selection = selection;
            },
-            attachSelectionListener(index) {
-                let path = `configuration.items[${index}].useGrid`;
-                this.removeSelectionListener = this.openmct.objects.observe(this.internalDomainObject, path, function (value) {
-                    let item = this.layoutItems[index];
-
-                    if (value) {
-                        item.x = Math.round(item.x / this.gridSize[0]);
-                        item.y = Math.round(item.y / this.gridSize[1]);
-                        item.width = Math.round(item.width / this.gridSize[0]);
-                        item.height = Math.round(item.height / this.gridSize[1]);
-
-                        if (item.x2) {
-                            item.x2 = Math.round(item.x2 / this.gridSize[0]);
-                        }
-                        if (item.y2) {
-                            item.y2 = Math.round(item.y2 / this.gridSize[1]);
-                        }
-                    } else {
-                        item.x = this.gridSize[0] * item.x;
-                        item.y = this.gridSize[1] * item.y;
-                        item.width = this.gridSize[0] * item.width;
-                        item.height = this.gridSize[1] * item.height;
-
-                        if (item.x2) {
-                            item.x2 = this.gridSize[0] * item.x2;
-                        }
-                        if (item.y2) {
-                            item.y2 = this.gridSize[1] * item.y2;
-                        }
-                    }
-                    item.useGrid = value;
-                    this.mutate(`configuration.items[${index}]`, item);
-                }.bind(this));
+            itemIsInCurrentSelection(item) {
+                return this.selection.some(selectionPath =>
+                    selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.id === item.id);
            },
            bypassSelection($event) {
                if (this.dragInProgress) {
                    if ($event) {
                        $event.stopImmediatePropagation();
                    }
+                    this.dragInProgress = false;
                    return;
                }
            },
-            endDrag(item, updates) {
+            endLineResize(item, updates) {
                this.dragInProgress = true;
-                setTimeout(function () {
-                    this.dragInProgress = false;
-                }.bind(this), 0);
-
                let index = this.layoutItems.indexOf(item);
                Object.assign(item, updates);
                this.mutate(`configuration.items[${index}]`, item);
            },
+            endResize(scaleWidth, scaleHeight, marqueeStart, marqueeOffset) {
+                this.dragInProgress = true;
+                this.layoutItems.forEach(item => {
+                    if (this.itemIsInCurrentSelection(item)) {
+                        let itemXInMarqueeSpace = item.x - marqueeStart.x;
+                        let itemXInMarqueeSpaceAfterScale = Math.round(itemXInMarqueeSpace * scaleWidth);
+                        item.x = itemXInMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
+
+                        let itemYInMarqueeSpace = item.y - marqueeStart.y;
+                        let itemYInMarqueeSpaceAfterScale = Math.round(itemYInMarqueeSpace * scaleHeight);
+                        item.y = itemYInMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
+
+                        if (item.x2) {
+                            let itemX2InMarqueeSpace = item.x2 - marqueeStart.x;
+                            let itemX2InMarqueeSpaceAfterScale = Math.round(itemX2InMarqueeSpace * scaleWidth);
+                            item.x2 = itemX2InMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
+                        } else {
+                            item.width = Math.round(item.width * scaleWidth);
+                        }
+
+                        if (item.y2) {
+                            let itemY2InMarqueeSpace = item.y2 - marqueeStart.y;
+                            let itemY2InMarqueeSpaceAfterScale = Math.round(itemY2InMarqueeSpace * scaleHeight);
+                            item.y2 = itemY2InMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
+                        } else {
+                            item.height = Math.round(item.height * scaleHeight);
+                        }
+                    }
+                });
+                this.mutate("configuration.items", this.layoutItems);
+            },
+            move(gridDelta) {
+                this.dragInProgress = true;
+
+                if (!this.initialPositions) {
+                    this.initialPositions = {};
+                    _.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => {
+                        if (selectedItem.type === 'line-view') {
+                            this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2];
+                            this.startingMinX2 = this.startingMinX2 !== undefined ? Math.min(this.startingMinX2, selectedItem.x2) : selectedItem.x2;
+                            this.startingMinY2 = this.startingMinY2 !== undefined ? Math.min(this.startingMinY2, selectedItem.y2) : selectedItem.y2;
+                        } else {
+                            this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
+                        }
+
+                        this.startingMinX = this.startingMinX !== undefined ? Math.min(this.startingMinX, selectedItem.x) : selectedItem.x;
+                        this.startingMinY = this.startingMinY !== undefined ? Math.min(this.startingMinY, selectedItem.y) : selectedItem.y;
+                    });
+                }
+
+                let layoutItems = this.layoutItems.map(item => {
+                    if (this.initialPositions[item.id]) {
+                        this.updateItemPosition(item, gridDelta);
+                    }
+                    return item;
+                });
+            },
+            updateItemPosition(item, gridDelta) {
+                let startingPosition = this.initialPositions[item.id];
+                let [startingX, startingY, startingX2, startingY2] = startingPosition;
+
+                if (this.startingMinX + gridDelta[0] >= 0) {
+                    if (item.x2 !== undefined) {
+                        if (this.startingMinX2 + gridDelta[0] >= 0) {
+                            item.x = startingX + gridDelta[0];
+                        }
+                    } else {
+                        item.x = startingX + gridDelta[0];
+                    }
+                }
+
+                if (this.startingMinY + gridDelta[1] >= 0) {
+                    if (item.y2 !== undefined) {
+                        if (this.startingMinY2 + gridDelta[1] >= 0) {
+                            item.y = startingY + gridDelta[1];
+                        }
+                    } else {
+                        item.y = startingY + gridDelta[1];
+                    }
+                }
+
+                if (item.x2 !== undefined && this.startingMinX2 + gridDelta[0] >= 0 && this.startingMinX + gridDelta[0] >= 0) {
+                    item.x2 = startingX2 + gridDelta[0];
+                }
+
+                if (item.y2 !== undefined && this.startingMinY2 + gridDelta[1] >= 0 && this.startingMinY + gridDelta[1] >= 0) {
+                    item.y2 = startingY2 + gridDelta[1];
+                }
+            },
+            endMove() {
+                this.mutate('configuration.items', this.layoutItems);
+                this.initialPositions = undefined;
+                this.startingMinX = undefined;
+                this.startingMinY = undefined;
+                this.startingMinX2 = undefined;
+                this.startingMinY2 = undefined;
+            },
            mutate(path, value) {
                this.openmct.objects.mutate(this.internalDomainObject, path, value);
            },
@@ -264,12 +368,25 @@
                    }
                }
            },
-            handleDragOver($event){
-                $event.preventDefault();
+            containsObject(identifier) {
+                return _.get(this.internalDomainObject, 'composition')
+                    .some(childId => this.openmct.objects.areIdsEqual(childId, identifier));
+            },
+            handleDragOver($event) {
+                // Get the ID of the dragged object
+                let draggedKeyString = $event.dataTransfer.types
+                    .filter(type => type.startsWith(DRAG_OBJECT_TRANSFER_PREFIX))
+                    .map(type => type.substring(DRAG_OBJECT_TRANSFER_PREFIX.length))[0];
+                
+                // If the layout already contains the given object, then shortcut the default dragover behavior and 
+                // potentially allow drop. Display layouts allow drag drop of duplicate telemetry objects.
+                if (this.containsObject(draggedKeyString)){
+                    $event.preventDefault();
+                }
            },
            isTelemetry(domainObject) {
-                if (this.openmct.telemetry.isTelemetryObject(domainObject)
-                    && domainObject.type !== 'summary-widget') {
+                if (this.openmct.telemetry.isTelemetryObject(domainObject) && 
+                    !this.options.showAsView.includes(domainObject.type)) {
                    return true;
                } else {
                    return false;
@@ -298,11 +415,15 @@
                    this.objectViewMap[keyString] = true;
                }
            },
-            removeItem(item, index) {
+            removeItem(selectedItems) {
+                let indices = [];
                this.initSelectIndex = -1;
-                this.layoutItems.splice(index, 1);
+                selectedItems.forEach(selectedItem => {
+                    indices.push(selectedItem[0].context.index);
+                    this.untrackItem(selectedItem[0].context.layoutItem);
+                });
+                _.pullAt(this.layoutItems, indices);
                this.mutate("configuration.items", this.layoutItems);
-                this.untrackItem(item);
                this.$el.click();
            },
            untrackItem(item) {
@@ -368,21 +489,80 @@
                this.mutate("configuration.items", layoutItems);
                this.$el.click();
            },
-            orderItem(position, index) {
+            orderItem(position, selectedItems) {
                let delta = ORDERS[position];
-                let newIndex = Math.max(Math.min(index + delta, this.layoutItems.length - 1), 0);
-                let item = this.layoutItems[index];
+                let indices = [];
+                let newIndex = -1;
+                let items = [];

-                if (newIndex !== index) {
-                    this.layoutItems.splice(index, 1);
-                    this.layoutItems.splice(newIndex, 0, item);
-                    this.mutate('configuration.items', this.layoutItems);
+                Object.assign(items, this.layoutItems);
+                this.selectedLayoutItems.forEach(selectedItem => {
+                    indices.push(this.layoutItems.indexOf(selectedItem));
+                });
+                indices.sort((a, b) => a - b);

-                    if (this.removeSelectionListener) {
-                        this.removeSelectionListener();
-                        this.attachSelectionListener(newIndex);
-                    }
+                if (position === 'top' || position === 'up') {
+                    indices.reverse();
                }
+
+                if (position === 'top' || position === 'bottom') {
+                    this.moveToTopOrBottom(position, indices, items, delta);
+                } else {
+                    this.moveUpOrDown(position, indices, items, delta);
+                }
+
+                this.mutate('configuration.items', this.layoutItems);
+            },
+            moveUpOrDown(position, indices, items, delta) {
+                let previousItemIndex = -1;
+                let newIndex = -1;
+
+                indices.forEach((itemIndex, index) => {
+                    let isAdjacentItemSelected = position === 'up' ?
+                        itemIndex + 1 === previousItemIndex :
+                        itemIndex - 1 === previousItemIndex;
+
+                    if (index > 0 && isAdjacentItemSelected) {
+                        if (position === 'up') {
+                            newIndex -= 1;
+                        } else {
+                            newIndex += 1;
+                        }
+                    } else {
+                        newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
+                    }
+
+                    previousItemIndex = itemIndex;
+                    this.updateItemOrder(newIndex, itemIndex, items);
+                });
+            },
+            moveToTopOrBottom(position, indices, items, delta) {
+                let newIndex = -1;
+
+                indices.forEach((itemIndex, index) => {
+                    if (index === 0) {
+                        newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
+                    } else {
+                        if (position === 'top') {
+                            newIndex -= 1;
+                        } else {
+                            newIndex += 1;
+                        }
+                    }
+
+                    this.updateItemOrder(newIndex, itemIndex, items);
+                });
+            },
+            updateItemOrder(newIndex, itemIndex, items) {
+                if (newIndex !== itemIndex) {
+                    this.layoutItems.splice(itemIndex, 1);
+                    this.layoutItems.splice(newIndex, 0, items[itemIndex]);
+                }
+            },
+            updateTelemetryFormat(item, format) {
+                let index = _.findIndex(this.layoutItems, item);
+                item.format = format;
+                this.mutate(`configuration.items[${index}]`, item);
            }
        },
        mounted() {
@@ -397,14 +577,10 @@
            this.composition.load();
        },
        destroyed: function () {
-            this.openmct.off('change', this.setSelection);
+            this.openmct.selection.off('change', this.setSelection);
            this.composition.off('add', this.addChild);
            this.composition.off('remove', this.removeChild);
            this.unlisten();
-
-            if (this.removeSelectionListener) {
-                this.removeSelectionListener();
-            }
        }
    }
 </script>
--- a/src/plugins/displayLayout/components/EditMarquee.vue
+++ b/src/plugins/displayLayout/components/EditMarquee.vue
@@ -0,0 +1,233 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+<template>
+        <!-- Resize handles -->
+        <div class="c-frame-edit" :style="style">
+            <div class="c-frame-edit__handle c-frame-edit__handle--nw"
+                 @mousedown="startResize([1,1], [-1,-1], $event)"></div>
+            <div class="c-frame-edit__handle c-frame-edit__handle--ne"
+                 @mousedown="startResize([0,1], [1,-1], $event)"></div>
+            <div class="c-frame-edit__handle c-frame-edit__handle--sw"
+                 @mousedown="startResize([1,0], [-1,1], $event)"></div>
+            <div class="c-frame-edit__handle c-frame-edit__handle--se"
+                 @mousedown="startResize([0,0], [1,1], $event)"></div>
+        </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-frame-edit {
+        // In Layouts, this is the editing rect and handles
+        display: none; // Set to display: block in DisplayLayout.vue
+        pointer-events: none;
+        @include abs();
+        border: $editMarqueeBorder;
+
+        &__handle {
+            $d: 6px;
+            $o: floor($d * -0.5);
+            background: $editFrameColorHandleFg;
+            box-shadow: $editFrameColorHandleBg 0 0 0 2px;
+            pointer-events: all;
+            position: absolute;
+            width: $d; height: $d;
+            top: auto; right: auto; bottom: auto; left: auto;
+
+            &:before {
+                // Extended hit area
+                @include abs(-10px);
+                content: '';
+                display: block;
+                z-index: 0;
+            }
+
+            &:hover {
+                background: $editUIColor;
+            }
+
+            &--nwse {
+                cursor: nwse-resize;
+            }
+
+            &--nw {
+                cursor: nw-resize;
+                left: $o; top: $o;
+            }
+
+            &--ne {
+                cursor: ne-resize;
+                right: $o; top: $o;
+            }
+
+            &--se {
+                cursor: se-resize;
+                right: $o; bottom: $o;
+            }
+
+            &--sw {
+                cursor: sw-resize;
+                left: $o; bottom: $o;
+            }
+        }
+    }
+</style>
+
+
+<script>
+    import LayoutDrag from './../LayoutDrag'
+
+    export default {
+        inject: ['openmct'],
+        props: {
+            selectedLayoutItems: Array,
+            gridSize: Array
+        },        
+        data() {
+            return {
+                dragPosition: undefined
+            }
+        },
+        computed: {
+            style() {
+                let x = Number.POSITIVE_INFINITY;
+                let y = Number.POSITIVE_INFINITY;
+                let width = Number.NEGATIVE_INFINITY;
+                let height = Number.NEGATIVE_INFINITY;
+
+                this.selectedLayoutItems.forEach(item => {
+                    if (item.x2 !== undefined) {
+                        let lineWidth = Math.abs(item.x - item.x2);
+                        let lineMinX = Math.min(item.x, item.x2);
+                        x = Math.min(lineMinX, x);
+                        width = Math.max(lineWidth + lineMinX, width);
+                    } else {
+                        x = Math.min(item.x, x);
+                        width = Math.max(item.width + item.x, width);
+                    }
+
+                    if (item.y2 !== undefined) {
+                        let lineHeight = Math.abs(item.y - item.y2);
+                        let lineMinY = Math.min(item.y, item.y2);
+                        y = Math.min(lineMinY, y);
+                        height = Math.max(lineHeight + lineMinY, height);
+                    } else {
+                        y = Math.min(item.y, y);
+                        height = Math.max(item.height + item.y, height);
+                    }
+                });
+
+                if (this.dragPosition) {
+                    [x, y] = this.dragPosition.position;
+                    [width, height] = this.dragPosition.dimensions;
+                } else {
+                    width = width - x;
+                    height = height - y;
+                }
+
+                this.marqueePosition = {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height
+                }
+                return this.getMarqueeStyle(x, y, width, height);
+            }
+        },
+        methods: {
+            getMarqueeStyle(x, y, width, height) {
+                return {
+                    left: (this.gridSize[0] * x) + 'px',
+                    top: (this.gridSize[1] * y) + 'px',
+                    width: (this.gridSize[0] * width) + 'px',
+                    height: (this.gridSize[1] * height) + 'px'
+                };
+            },
+            updatePosition(event) {
+                let currentPosition = [event.pageX, event.pageY];
+                this.initialPosition = this.initialPosition || currentPosition;
+                this.delta = currentPosition.map(function (value, index) {
+                    return value - this.initialPosition[index];
+                }.bind(this));
+            },
+            startResize(posFactor, dimFactor, event) {
+                document.body.addEventListener('mousemove', this.continueResize);
+                document.body.addEventListener('mouseup', this.endResize);
+                this.marqueeStartPosition = {
+                    position: [this.marqueePosition.x, this.marqueePosition.y],
+                    dimensions: [this.marqueePosition.width, this.marqueePosition.height]
+                };
+                this.updatePosition(event);
+                this.activeDrag = new LayoutDrag(this.marqueeStartPosition, posFactor, dimFactor, this.gridSize);
+                event.preventDefault();
+            },
+            continueResize(event) {
+                event.preventDefault();
+                this.updatePosition(event);
+                this.dragPosition = this.activeDrag.getAdjustedPositionAndDimensions(this.delta);
+            },
+            endResize(event) {
+                document.body.removeEventListener('mousemove', this.continueResize);
+                document.body.removeEventListener('mouseup', this.endResize);
+                this.continueResize(event);
+
+                let marqueeStartWidth = this.marqueeStartPosition.dimensions[0];
+                let marqueeStartHeight = this.marqueeStartPosition.dimensions[1];
+                let marqueeStartX = this.marqueeStartPosition.position[0];
+                let marqueeStartY = this.marqueeStartPosition.position[1];
+
+                let marqueeEndX = this.dragPosition.position[0];
+                let marqueeEndY = this.dragPosition.position[1];
+                let marqueeEndWidth = this.dragPosition.dimensions[0];
+                let marqueeEndHeight = this.dragPosition.dimensions[1];
+
+                let scaleWidth =  marqueeEndWidth / marqueeStartWidth;
+                let scaleHeight =  marqueeEndHeight / marqueeStartHeight;
+
+                let marqueeStart = {
+                    x: marqueeStartX,
+                    y: marqueeStartY,
+                    height: marqueeStartWidth,
+                    width: marqueeStartHeight
+                };
+                let marqueeEnd = {
+                    x: marqueeEndX,
+                    y: marqueeEndY,
+                    width: marqueeEndWidth,
+                    height: marqueeEndHeight
+                };
+                let marqueeOffset = {
+                    x: marqueeEnd.x - marqueeStart.x,
+                    y: marqueeEnd.y - marqueeStart.y
+                };
+
+                this.$emit('endResize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
+                this.dragPosition = undefined;
+                this.initialPosition = undefined;
+                this.marqueeStartPosition = undefined;
+                this.delta = undefined;
+                event.preventDefault();
+            }
+        }
+    }
+</script>
--- a/Show More
+++ b/Show More