Context Menu WIP

app.js

@@ -46,7 +46,7 @@ webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
 webpackConfig.plugins.push(function() { this.plugin('watch-run', function(watching, callback) { console.log('Begin compile at ' + new Date()); callback(); }) });
 
 webpackConfig.entry.openmct = [
-    'webpack-hot-middleware/client?reload=true',
+    'webpack-hot-middleware/client',
     webpackConfig.entry.openmct
 ];
 

example/eventGenerator/bundle.js

@@ -49,7 +49,7 @@ define([
                 {
                     "key": "eventGenerator",
                     "name": "Event Message Generator",
-                    "cssClass": "icon-generator-events",
+                    "cssClass": "icon-folder-new",
                     "description": "For development use. Creates sample event message data that mimics a live data stream.",
                     "priority": 10,
                     "features": "creation",

example/generator/GeneratorMetadataProvider.js

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

example/generator/SinewaveLimitProvider.js

@@ -37,25 +37,25 @@ define([
         },
         LIMITS = {
             rh: {
-                cssClass: "is-limit--upr is-limit--red",
+                cssClass: "s-limit-upr s-limit-red",
                 low: RED,
                 high: Number.POSITIVE_INFINITY,
                 name: "Red High"
             },
             rl: {
-                cssClass: "is-limit--lwr is-limit--red",
+                cssClass: "s-limit-lwr s-limit-red",
                 high: -RED,
                 low: Number.NEGATIVE_INFINITY,
                 name: "Red Low"
             },
             yh: {
-                cssClass: "is-limit--upr is-limit--yellow",
+                cssClass: "s-limit-upr s-limit-yellow",
                 low: YELLOW,
                 high: RED,
                 name: "Yellow High"
             },
             yl: {
-                cssClass: "is-limit--lwr is-limit--yellow",
+                cssClass: "s-limit-lwr s-limit-yellow",
                 low: -RED,
                 high: -YELLOW,
                 name: "Yellow Low"

example/generator/plugin.js

@@ -38,19 +38,20 @@ define([
         openmct.types.addType("example.state-generator", {
             name: "State Generator",
             description: "For development use.  Generates test enumerated telemetry by cycling through a given set of states",
-            cssClass: "icon-generator-telemetry",
+            cssClass: "icon-telemetry",
             creatable: true,
             form: [
                 {
                     name: "State Duration (seconds)",
-                    control: "numberfield",
+                    control: "textfield",
                     cssClass: "l-input-sm l-numeric",
                     key: "duration",
                     required: true,
                     property: [
                         "telemetry",
                         "duration"
-                    ]
+                    ],
+                    pattern: "^\\d*(\\.\\d*)?$"
                 }
             ],
             initialize: function (object) {
@@ -65,7 +66,7 @@ define([
         openmct.types.addType("generator", {
             name: "Sine Wave Generator",
             description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
-            cssClass: "icon-generator-telemetry",
+            cssClass: "icon-telemetry",
             creatable: true,
             form: [
                 {

example/notifications/res/dialog-launch.html

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

example/notifications/res/notification-launch.html

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

example/notifications/src/NotificationLaunchController.js

@@ -79,34 +79,30 @@ define(
              * periodically, tracking an ongoing process.
              */
             $scope.newProgress = function () {
-                let progress = 0;
                 var notificationModel = {
                     title: "Progress notification example",
                     severity: "info",
-                    progress: progress,
+                    progress: 0,
                     actionText: getExampleActionText()
                 };
-                let notification;
 
                 /**
                  * Simulate an ongoing process and update the progress bar.
                  * @param notification
                  */
                 function incrementProgress() {
-                    progress = Math.min(100, Math.floor(progress + Math.random() * 30))
+                    notificationModel.progress = Math.min(100, Math.floor(notificationModel.progress + Math.random() * 30));
-                    let progressText = ["Estimated time" +
+                    notificationModel.progressText = ["Estimated time" +
                     " remaining:" +
-                    " about ", 60 - Math.floor((progress / 100) * 60), " seconds"].join(" ");
+                    " about ", 60 - Math.floor((notificationModel.progress / 100) * 60), " seconds"].join(" ");
-                    notification.progress(progress, progressText);
+                    if (notificationModel.progress < 100) {
-
-                    if (progress < 100) {
                         $timeout(function () {
                             incrementProgress(notificationModel);
                         }, 1000);
                     }
                 }
 
-                notification = notificationService.notify(notificationModel);
+                notificationService.notify(notificationModel);
                 incrementProgress();
             };
 

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/styles/openmct.css">
+        <link rel="stylesheet" href="dist/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,9 +36,7 @@
     <body>
     </body>
     <script>
-        const FIVE_MINUTES = 5 * 60 * 1000;
+        var THIRTY_MINUTES = 30 * 60 * 1000;
-        const THIRTY_MINUTES = 30 * 60 * 1000;
-
         [
             'example/eventGenerator',
             'example/styleguide'
@@ -50,12 +48,10 @@
         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: [
                 {
@@ -71,17 +67,17 @@
                     timeSystem: 'utc',
                     clock: 'local',
                     clockOffsets: {
-                        start: - THIRTY_MINUTES,
+                        start: -25 * 60 * 1000,
-                        end: FIVE_MINUTES
+                        end: 5 * 60 * 1000
                     }
                 }
             ]
         }));
         openmct.install(openmct.plugins.SummaryWidget());
         openmct.install(openmct.plugins.Notebook());
-        openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
+        openmct.install(openmct.plugins.FolderView());
-        openmct.install(openmct.plugins.ObjectMigration());
+        openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
-        openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
+        openmct.time.timeSystem('utc');
         openmct.start();
     </script>
 </html>

package.json

@@ -1,10 +1,9 @@
 {
   "name": "openmct",
-  "version": "1.0.0-beta",
+  "version": "0.14.0-SNAPSHOT",
   "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",
@@ -26,7 +25,7 @@
     "eventemitter3": "^1.2.0",
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
-    "fast-sass-loader": "1.4.6",
+    "fast-sass-loader": "^1.4.5",
     "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "git-rev-sync": "^1.4.0",
@@ -56,9 +55,10 @@
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
     "painterro": "^0.2.65",
-    "printj": "^1.2.1",
+    "printj": "^1.1.0",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
+    "screenfull": "^3.3.2",
     "split": "^1.0.0",
     "style-loader": "^0.21.0",
     "v8-compile-cache": "^1.1.0",

platform/commonUI/browse/bundle.js

@@ -31,6 +31,8 @@ define([
     "./src/navigation/NavigateAction",
     "./src/navigation/OrphanNavigationHandler",
     "./src/windowing/NewTabAction",
+    "./src/windowing/FullscreenAction",
+    "./src/windowing/WindowTitler",
     "./res/templates/browse.html",
     "./res/templates/browse-object.html",
     "./res/templates/browse/object-header.html",
@@ -51,6 +53,8 @@ define([
     NavigateAction,
     OrphanNavigationHandler,
     NewTabAction,
+    FullscreenAction,
+    WindowTitler,
     browseTemplate,
     browseObjectTemplate,
     objectHeaderTemplate,
@@ -221,9 +225,24 @@ define([
                     "group": "windowing",
                     "cssClass": "icon-new-window",
                     "priority": "preferred"
+                },
+                {
+                    "key": "fullscreen",
+                    "implementation": FullscreenAction,
+                    "category": "view-control",
+                    "group": "windowing",
+                    "priority": "default"
                 }
             ],
             "runs": [
+                {
+                    "implementation": WindowTitler,
+                    "depends": [
+                        "navigationService",
+                        "$rootScope",
+                        "$document"
+                    ]
+                },
                 {
                     "implementation": OrphanNavigationHandler,
                     "depends": [
@@ -246,6 +265,18 @@ define([
                     key: "inspectorRegion",
                     template: inspectorRegionTemplate
                 }
+            ],
+            "licenses": [
+                {
+                    "name": "screenfull.js",
+                    "version": "1.2.0",
+                    "description": "Wrapper for cross-browser usage of fullscreen API",
+                    "author": "Sindre Sorhus",
+                    "website": "https://github.com/sindresorhus/screenfull.js/",
+                    "copyright": "Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)",
+                    "license": "license-mit",
+                    "link": "https://github.com/sindresorhus/screenfull.js/blob/gh-pages/license"
+                }
             ]
         }
     });

platform/commonUI/browse/src/windowing/FullscreenAction.js

@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/**
+ * Module defining FullscreenAction. Created by vwoeltje on 11/18/14.
+ */
+define(
+    ["screenfull"],
+    function (screenfull) {
+
+        var ENTER_FULLSCREEN = "Enter full screen mode",
+            EXIT_FULLSCREEN = "Exit full screen mode";
+
+        /**
+         * The fullscreen action toggles between fullscreen display
+         * and regular in-window display.
+         * @memberof platform/commonUI/browse
+         * @constructor
+         * @implements {Action}
+         */
+        function FullscreenAction(context) {
+            this.context = context;
+        }
+
+        FullscreenAction.prototype.perform = function () {
+            screenfull.toggle();
+        };
+
+        FullscreenAction.prototype.getMetadata = function () {
+            // We override getMetadata, because the icon cssClass and
+            // description need to be determined at run-time
+            // based on whether or not we are currently
+            // full screen.
+            var metadata = Object.create(FullscreenAction);
+            metadata.cssClass = screenfull.isFullscreen ? "icon-fullscreen-expand" : "icon-fullscreen-collapse";
+            metadata.description = screenfull.isFullscreen ?
+                EXIT_FULLSCREEN : ENTER_FULLSCREEN;
+            metadata.group = "windowing";
+            metadata.context = this.context;
+            return metadata;
+        };
+
+        return FullscreenAction;
+    }
+);

platform/commonUI/browse/src/windowing/WindowTitler.js

@@ -0,0 +1,51 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * 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;
+            }
+
+            // Set the window title...
+            function setTitle(name) {
+                $document[0].title = name;
+            }
+
+            // Watch the former, and invoke the latter
+            $rootScope.$watch(getNavigatedObjectName, setTitle);
+        }
+
+        return WindowTitler;
+    }
+);

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

@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/**
+ * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
+ */
+define(
+    ["../../src/windowing/FullscreenAction", "screenfull"],
+    function (FullscreenAction, screenfull) {
+
+        describe("The fullscreen action", function () {
+            var action,
+                oldToggle;
+
+            beforeEach(function () {
+                // Screenfull is not shimmed or injected, so
+                // we need to spy on it in the global scope.
+                oldToggle = screenfull.toggle;
+
+                screenfull.toggle = jasmine.createSpy("toggle");
+
+                action = new FullscreenAction({});
+            });
+
+            afterEach(function () {
+                screenfull.toggle = oldToggle;
+            });
+
+            it("toggles fullscreen mode when performed", function () {
+                action.perform();
+                expect(screenfull.toggle).toHaveBeenCalled();
+            });
+
+            it("provides displayable metadata", function () {
+                expect(action.getMetadata().cssClass).toBeDefined();
+            });
+
+        });
+    }
+);

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

platform/commonUI/dialog/bundle.js

@@ -28,7 +28,6 @@ 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'
@@ -40,7 +39,6 @@ define([
     dialogTemplate,
     overlayBlockingMessageTemplate,
     messageTemplate,
-    notificationMessageTemplate,
     overlayMessageListTemplate,
     overlayTemplate,
     legacyRegistry
@@ -65,8 +63,7 @@ define([
                     "depends": [
                         "$document",
                         "$compile",
-                        "$rootScope",
+                        "$rootScope"
-                        "$timeout"
                     ]
                 }
             ],
@@ -91,10 +88,6 @@ define([
                     "key": "message",
                     "template": messageTemplate
                 },
-                {
-                    "key": "notification-message",
-                    "template": notificationMessageTemplate
-                },
                 {
                     "key": "overlay-message-list",
                     "template": overlayMessageListTemplate

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

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

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

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

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

@@ -1,25 +0,0 @@
-<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>

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

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

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

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

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

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

platform/commonUI/dialog/src/OverlayService.js

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

platform/commonUI/dialog/test/OverlayServiceSpec.js

@@ -35,20 +35,16 @@ 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", ["append"]);
+                mockBody = jasmine.createSpyObj("body", ["prepend"]);
                 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);
@@ -58,8 +54,7 @@ define(
                 overlayService = new OverlayService(
                     mockDocument,
                     mockCompile,
-                    mockRootScope,
+                    mockRootScope
-                    mockTimeout
                 );
             });
 
@@ -72,7 +67,7 @@ define(
 
             it("adds the templated element to the body", function () {
                 overlayService.createOverlay("test", {});
-                expect(mockBody.append).toHaveBeenCalledWith(mockElement);
+                expect(mockBody.prepend).toHaveBeenCalledWith(mockElement);
             });
 
             it("places the provided model/key in its template's scope", function () {

platform/commonUI/edit/bundle.js

@@ -23,6 +23,7 @@
 define([
     "./src/controllers/EditActionController",
     "./src/controllers/EditPanesController",
+    "./src/controllers/ElementsController",
     "./src/controllers/EditObjectController",
     "./src/actions/EditAndComposeAction",
     "./src/actions/EditAction",
@@ -32,7 +33,11 @@ define([
     "./src/actions/SaveAndStopEditingAction",
     "./src/actions/SaveAsAction",
     "./src/actions/CancelAction",
+    "./src/policies/EditActionPolicy",
     "./src/policies/EditPersistableObjectsPolicy",
+    "./src/policies/EditableLinkPolicy",
+    "./src/policies/EditableMovePolicy",
+    "./src/policies/EditContextualActionPolicy",
     "./src/representers/EditRepresenter",
     "./src/capabilities/EditorCapability",
     "./src/capabilities/TransactionCapabilityDecorator",
@@ -42,6 +47,7 @@ define([
     "./src/creation/LocatorController",
     "./src/creation/CreationPolicy",
     "./src/creation/CreateActionProvider",
+    "./src/creation/AddActionProvider",
     "./src/creation/CreationService",
     "./res/templates/create/locator.html",
     "./res/templates/create/create-button.html",
@@ -49,11 +55,13 @@ define([
     "./res/templates/library.html",
     "./res/templates/edit-object.html",
     "./res/templates/edit-action-buttons.html",
+    "./res/templates/elements.html",
     "./res/templates/topbar-edit.html",
     'legacyRegistry'
 ], function (
     EditActionController,
     EditPanesController,
+    ElementsController,
     EditObjectController,
     EditAndComposeAction,
     EditAction,
@@ -63,7 +71,11 @@ define([
     SaveAndStopEditingAction,
     SaveAsAction,
     CancelAction,
+    EditActionPolicy,
     EditPersistableObjectsPolicy,
+    EditableLinkPolicy,
+    EditableMovePolicy,
+    EditContextualActionPolicy,
     EditRepresenter,
     EditorCapability,
     TransactionCapabilityDecorator,
@@ -73,6 +85,7 @@ define([
     LocatorController,
     CreationPolicy,
     CreateActionProvider,
+    AddActionProvider,
     CreationService,
     locatorTemplate,
     createButtonTemplate,
@@ -80,6 +93,7 @@ define([
     libraryTemplate,
     editObjectTemplate,
     editActionButtonsTemplate,
+    elementsTemplate,
     topbarEditTemplate,
     legacyRegistry
 ) {
@@ -101,6 +115,14 @@ define([
                         "$scope"
                     ]
                 },
+                {
+                    "key": "ElementsController",
+                    "implementation": ElementsController,
+                    "depends": [
+                        "$scope",
+                        "openmct"
+                    ]
+                },
                 {
                     "key": "EditObjectController",
                     "implementation": EditObjectController,
@@ -160,13 +182,13 @@ define([
                 },
                 {
                     "key": "remove",
-                    "category": "legacy",
+                    "category": "contextual",
                     "implementation": RemoveAction,
                     "cssClass": "icon-trash",
                     "name": "Remove",
                     "description": "Remove this object from its containing object.",
                     "depends": [
-                        "openmct",
+                        "dialogService",
                         "navigationService"
                     ]
                 },
@@ -203,10 +225,10 @@ define([
                     "description": "Save changes made to these objects.",
                     "depends": [
                         "$injector",
+                        "policyService",
                         "dialogService",
                         "copyService",
-                        "notificationService",
+                        "notificationService"
-                        "openmct"
                     ],
                     "priority": "mandatory"
                 },
@@ -223,11 +245,28 @@ define([
                 }
             ],
             "policies": [
+                {
+                    "category": "action",
+                    "implementation": EditActionPolicy
+                },
                 {
                     "category": "action",
                     "implementation": EditPersistableObjectsPolicy,
                     "depends": ["openmct"]
                 },
+                {
+                    "category": "action",
+                    "implementation": EditContextualActionPolicy,
+                    "depends": ["navigationService", "editModeBlacklist", "nonEditContextBlacklist"]
+                },
+                {
+                    "category": "action",
+                    "implementation": EditableMovePolicy
+                },
+                {
+                    "category": "action",
+                    "implementation": EditableLinkPolicy
+                },
                 {
                     "implementation": CreationPolicy,
                     "category": "creation"
@@ -257,6 +296,13 @@ define([
                         "action"
                     ]
                 },
+                {
+                    "key": "edit-elements",
+                    "template": elementsTemplate,
+                    "gestures": [
+                        "drop"
+                    ]
+                },
                 {
                     "key": "topbar-edit",
                     "template": topbarEditTemplate
@@ -273,6 +319,12 @@ define([
                     ]
                 }
             ],
+            "templates": [
+                {
+                    key: "elementsPool",
+                    template: elementsTemplate
+                }
+            ],
             "components": [
                 {
                     "type": "decorator",
@@ -304,6 +356,18 @@ define([
                         "policyService"
                     ]
                 },
+                {
+                    "key": "AddActionProvider",
+                    "provides": "actionService",
+                    "type": "provider",
+                    "implementation": AddActionProvider,
+                    "depends": [
+                        "$q",
+                        "typeService",
+                        "dialogService",
+                        "policyService"
+                    ]
+                },
                 {
                     "key": "CreationService",
                     "provides": "creationService",
@@ -324,6 +388,16 @@ define([
                     ]
                 }
             ],
+            "constants": [
+                {
+                    "key": "editModeBlacklist",
+                    "value": ["copy", "follow", "link", "locate"]
+                },
+                {
+                    "key": "nonEditContextBlacklist",
+                    "value": ["copy", "follow", "properties", "move", "link", "remove", "locate"]
+                }
+            ],
             "capabilities": [
                 {
                     "key": "editor",

platform/commonUI/edit/res/templates/elements.html

@@ -0,0 +1,49 @@
+<!--
+ 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.
+-->
+<div ng-controller="ElementsController" class="flex-elem l-flex-col holder grows">
+    <mct-include key="'input-filter'"
+                 class="flex-elem holder"
+                 ng-model="filterBy">
+    </mct-include>
+    <div class="flex-elem grows vscroll scroll-pad">
+        <ul class="tree" id="inspector-elements-tree"
+            ng-if="composition.length > 0">
+            <li ng-repeat="containedObject in composition | filter:searchElements">
+                <span class="tree-item">
+                    <span class="grippy-sm"
+                          ng-if="composition.length > 1"
+                          data-id="{{ containedObject.id }}"
+                          mct-drag-down="dragDown($event)"
+                          mct-drag="drag($event)"
+                          mct-drag-up="dragUp($event)">
+                    </span>
+                    <mct-representation
+                            class="rep-object-label"
+                            key="'label'"
+                            mct-object="containedObject">
+                    </mct-representation>
+                </span>
+            </li>
+        </ul>
+        <div ng-if="composition.length === 0">No contained elements</div>    
+    </div>
+</div>

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 = JSON.parse(JSON.stringify(property.getDefinition()));
+                        var row = Object.create(property.getDefinition());
                         row.key = index;
                         return row;
                     }).filter(function (row) {

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

@@ -23,7 +23,11 @@
 /**
  * Module defining RemoveAction. Created by vwoeltje on 11/17/14.
  */
-define([], function () {
+define([
+    './RemoveDialog'
+], function (
+    RemoveDialog
+) {
 
     /**
      * Construct an action which will remove the provided object manifestation.
@@ -38,9 +42,9 @@ define([], function () {
      * @constructor
      * @implements {Action}
      */
-    function RemoveAction(openmct, navigationService, context) {
+    function RemoveAction(dialogService, navigationService, context) {
         this.domainObject = (context || {}).domainObject;
-        this.openmct = openmct;
+        this.dialogService = dialogService;
         this.navigationService = navigationService;
     }
 
@@ -49,6 +53,7 @@ define([], function () {
      */
     RemoveAction.prototype.perform = function () {
         var dialog,
+            dialogService = this.dialogService,
             domainObject = this.domainObject,
             navigationService = this.navigationService;
         /*
@@ -99,18 +104,23 @@ define([], function () {
          * capability. Based on object's location and selected object's location
          * user may be navigated to existing parent object
          */
-        function removeFromContext() {
+        function removeFromContext(object) {
-            var contextCapability = domainObject.getCapability('context'),
+            var contextCapability = object.getCapability('context'),
                 parent = contextCapability.getParent();
 
             // If currently within path of removed object(s),
             // navigates to existing object up tree
-            checkObjectNavigation(domainObject, parent);
+            checkObjectNavigation(object, parent);
 
             return parent.useCapability('mutation', doMutate);
         }
 
-        removeFromContext();
+        /*
+         * Pass in the function to remove the domain object so it can be
+         * associated with an 'OK' button press
+         */
+        dialog = new RemoveDialog(dialogService, domainObject, removeFromContext);
+        dialog.show();
     };
 
     // Object needs to have a parent for Remove to be applicable

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

@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * 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(dialogService, domainObject, removeCallback) {
+        this.dialogService = dialogService;
+        this.domainObject = domainObject;
+        this.removeCallback = removeCallback;
+    }
+
+    /**
+     * Display a dialog to confirm the removal of a domain object.
+     */
+    RemoveDialog.prototype.show = function () {
+        var dialog,
+            domainObject = this.domainObject,
+            removeCallback = this.removeCallback,
+            model = {
+                title: 'Remove ' + domainObject.getModel().name,
+                actionText: 'Warning! This action will permanently remove this object. Are you sure you want to continue?',
+                severity: 'alert',
+                primaryOption: {
+                    label: 'OK',
+                    callback: function () {
+                        removeCallback(domainObject);
+                        dialog.dismiss();
+                    }
+                },
+                options: [
+                    {
+                        label: 'Cancel',
+                        callback: function () {
+                            dialog.dismiss();
+                        }
+                    }
+                ]
+            };
+
+        dialog = this.dialogService.showBlockingMessage(model);
+    };
+
+    return RemoveDialog;
+});

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

@@ -40,20 +40,20 @@ function (
          */
     function SaveAsAction(
         $injector,
+        policyService,
         dialogService,
         copyService,
         notificationService,
-        openmct,
         context
     ) {
         this.domainObject = (context || {}).domainObject;
         this.injectObjectService = function () {
             this.objectService = $injector.get("objectService");
         };
+        this.policyService = policyService;
         this.dialogService = dialogService;
         this.copyService = copyService;
         this.notificationService = notificationService;
-        this.openmct = openmct;
     }
 
     /**
@@ -63,7 +63,7 @@ function (
         return new CreateWizard(
             this.domainObject,
             parent,
-            this.openmct
+            this.policyService
         );
     };
 
@@ -92,7 +92,16 @@ function (
          * @memberof platform/commonUI/edit.SaveAction#
          */
     SaveAsAction.prototype.perform = function () {
-        return this.save();
+        // Discard the current root view (which will be the editing
+        // UI, which will have been pushed atop the Browse UI.)
+        function returnToBrowse(object) {
+            if (object) {
+                object.getCapability("action").perform("navigate");
+            }
+            return object;
+        }
+
+        return this.save().then(returnToBrowse);
     };
 
     /**
@@ -160,22 +169,15 @@ function (
         }
 
         function saveAfterClone(clonedObject) {
-            return this.openmct.editor.save().then(() => {
+            return domainObject.getCapability("editor").save()
-                // Force mutation for search indexing
+                .then(resolveWith(clonedObject));
-                return clonedObject;
-            })
         }
 
         function finishEditing(clonedObject) {
-            return fetchObject(clonedObject.getId())
+            return domainObject.getCapability("editor").finish()
-        }
+                .then(function () {
-
+                    return fetchObject(clonedObject.getId());
-        function indexForSearch(savedObject) {
+                });
-            savedObject.useCapability('mutation', (model) => {
-                return model;
-            });
-
-            return savedObject;
         }
 
         function onSuccess(object) {
@@ -188,7 +190,7 @@ function (
             if (reason !== "user canceled") {
                 self.notificationService.error("Save Failed");
             }
-            throw reason;
+            return false;
         }
 
         return getParent(domainObject)
@@ -199,7 +201,6 @@ function (
             .then(undirtyOriginals)
             .then(saveAfterClone)
             .then(finishEditing)
-            .then(indexForSearch)
             .then(hideBlockingDialog)
             .then(onSuccess)
             .catch(onFailure);

platform/commonUI/edit/src/capabilities/EditorCapability.js

@@ -51,11 +51,8 @@ define(
          */
         EditorCapability.prototype.edit = function () {
             console.warn('DEPRECATED: cannot edit via edit capability, use openmct.editor instead.');
-
+            this.openmct.editor.edit();
-            if (!this.openmct.editor.isEditing()) {
+            this.domainObject.getCapability('status').set('editing', true);
-                this.openmct.editor.edit();
-                this.domainObject.getCapability('status').set('editing', true);
-            }
         };
 
         /**
@@ -64,6 +61,7 @@ define(
          * @returns boolean
          */
         EditorCapability.prototype.inEditContext = function () {
+            console.warn('DEPRECATION WARNING: isEditing checks must be done via openmct.editor.');
             return this.openmct.editor.isEditing();
         };
 
@@ -73,6 +71,7 @@ define(
          * @returns {*}
          */
         EditorCapability.prototype.isEditContextRoot = function () {
+            console.warn('DEPRECATION WARNING: isEditing checks must be done via openmct.editor.');
             return this.openmct.editor.isEditing();
         };
 
@@ -83,7 +82,6 @@ define(
          */
         EditorCapability.prototype.save = function () {
             console.warn('DEPRECATED: cannot save via edit capability, use openmct.editor instead.');
-            return Promise.resolve();
         };
 
         EditorCapability.prototype.invoke = EditorCapability.prototype.edit;
@@ -95,7 +93,6 @@ define(
          */
         EditorCapability.prototype.finish = function () {
             console.warn('DEPRECATED: cannot finish via edit capability, use openmct.editor instead.');
-            return Promise.resolve();
         };
 
         /**

platform/commonUI/edit/src/controllers/ElementsController.js

@@ -0,0 +1,197 @@
+/*****************************************************************************
+ * 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(
+    ['zepto'],
+    function ($) {
+
+        /**
+         * The ElementsController prepares the elements view for display
+         *
+         * @constructor
+         */
+        function ElementsController($scope, openmct) {
+            this.scope = $scope;
+            this.scope.composition = [];
+            this.openmct = openmct;
+            this.dragDown = this.dragDown.bind(this);
+            this.dragUp = this.dragUp.bind(this);
+
+            var self = this;
+
+            function filterBy(text) {
+                if (typeof text === 'undefined') {
+                    return $scope.searchText;
+                } else {
+                    $scope.searchText = text;
+                }
+            }
+
+            function searchElements(value) {
+                if ($scope.searchText) {
+                    return value.getModel().name.toLowerCase().search(
+                        $scope.searchText.toLowerCase()) !== -1;
+                } else {
+                    return true;
+                }
+            }
+
+            function setSelection(selection) {
+                if (!selection[0]) {
+                    return;
+                }
+
+                if (self.mutationListener) {
+                    self.mutationListener();
+                    delete self.mutationListener;
+                }
+
+                var domainObject = selection[0].context.oldItem;
+                self.refreshComposition(domainObject);
+
+                if (domainObject) {
+
+                    self.mutationListener = domainObject.getCapability('mutation')
+                        .listen(self.refreshComposition.bind(self, domainObject));
+                }
+            }
+
+            $scope.filterBy = filterBy;
+            $scope.searchElements = searchElements;
+
+            openmct.selection.on('change', setSelection);
+            setSelection(openmct.selection.get());
+
+            $scope.dragDown = this.dragDown;
+            $scope.drag = this.drag;
+            $scope.dragUp = this.dragUp;
+
+            $scope.$on("$destroy", function () {
+                openmct.selection.off("change", setSelection);
+            });
+        }
+
+        /**
+         * Invoked on DragStart - Adds reordering class to parent UL element
+         * Sets selected object ID, to be used on Drag End
+         *
+         * @param {object} event | Mouse Event
+         */
+        ElementsController.prototype.dragDown = function (event) {
+            if (!this.parentUL) {
+                this.parentUL = $(document).find('#inspector-elements-tree');
+            }
+
+            this.selectedTreeItem = $(event.target).parent();
+            this.selectedObjectId = event.target.getAttribute('data-id');
+
+            this.parentUL.addClass('reordering');
+            this.selectedTreeItem.addClass('reorder-actor');
+        };
+
+        /**
+         * Invoked on dragEnd - Removes selected object from position in composition
+         * and replaces it at the target position. Composition is then updated with current
+         * scope
+         *
+         * @param {object} event - Mouse Event
+         */
+        ElementsController.prototype.dragUp = function (event) {
+            this.targetObjectId = event.target.getAttribute('data-id');
+
+            if (this.targetObjectId && this.selectedObjectId) {
+                var selectedObjectPosition,
+                    targetObjectPosition;
+
+                selectedObjectPosition = findObjectInCompositionFromId(this.selectedObjectId, this.scope.composition);
+                targetObjectPosition = findObjectInCompositionFromId(this.targetObjectId, this.scope.composition);
+
+                if ((selectedObjectPosition !== -1) && (targetObjectPosition !== -1)) {
+                    var selectedObject = this.scope.composition.splice(selectedObjectPosition, 1),
+                        selection = this.openmct.selection.get(),
+                        domainObject = selection ? selection[0].context.oldItem : undefined;
+
+                    this.scope.composition.splice(targetObjectPosition, 0, selectedObject[0]);
+
+                    if (domainObject) {
+                        domainObject.getCapability('mutation').mutate(function (model) {
+                            model.composition = this.scope.composition.map(function (dObject) {
+                                return dObject.id;
+                            });
+                        }.bind(this));
+                    }
+                }
+            }
+
+            if (this.parentUL) {
+                this.parentUL.removeClass('reordering');
+            }
+
+            if (this.selectedTreeItem) {
+                this.selectedTreeItem.removeClass('reorder-actor');
+            }
+        };
+
+        ElementsController.prototype.drag = function (event) {
+
+        };
+
+        /**
+         * Gets the composition for the selected object and populates the scope with it.
+         *
+         * @param domainObject the selected object
+         * @private
+         */
+        ElementsController.prototype.refreshComposition = function (domainObject) {
+            var refreshTracker = {};
+            this.currentRefresh = refreshTracker;
+
+            var selectedObjectComposition = domainObject && domainObject.useCapability('composition');
+            if (selectedObjectComposition) {
+                selectedObjectComposition.then(function (composition) {
+                    if (this.currentRefresh === refreshTracker) {
+                        this.scope.composition = composition;
+                    }
+                }.bind(this));
+            } else {
+                this.scope.composition = [];
+            }
+        };
+
+        /**
+         * Finds position of object with given ID in Composition
+         *
+         * @param {String} id
+         * @param {Array} composition
+         * @private
+         */
+        function findObjectInCompositionFromId(id, composition) {
+            var mapped = composition.map(function (element) {
+                return element.id;
+            });
+
+            return mapped.indexOf(id);
+        }
+
+        return ElementsController;
+    }
+);

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

@@ -0,0 +1,133 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/**
+ * Module defining AddAction. Created by ahenry on 01/21/16.
+ */
+define(
+    [
+        './CreateWizard'
+    ],
+    function (CreateWizard) {
+
+        /**
+         * The Add Action is performed to create new instances of
+         * domain objects of a specific type that are subobjects of an
+         * object being edited. This is the action that is performed when a
+         * user uses the Add menu option.
+         *
+         * @memberof platform/commonUI/browse
+         * @implements {Action}
+         * @constructor
+         *
+         * @param {Type} type the type of domain object to create
+         * @param {DomainObject} parent the domain object that should
+         *        act as a container for the newly-created object
+         *        (note that the user will have an opportunity to
+         *        override this)
+         * @param {ActionContext} context the context in which the
+         *        action is being performed
+         * @param {DialogService} dialogService
+         */
+        function AddAction(type, parent, context, $q, dialogService, policyService) {
+            this.metadata = {
+                key: 'add',
+                cssClass: type.getCssClass(),
+                name: type.getName(),
+                type: type.getKey(),
+                description: type.getDescription(),
+                context: context
+            };
+
+            this.type = type;
+            this.parent = parent;
+            this.$q = $q;
+            this.dialogService = dialogService;
+            this.policyService = policyService;
+        }
+
+        /**
+         *
+         * Create a new object of the given type.
+         * This will prompt for user input first.
+         *
+         * @returns {Promise} that will be resolved with the object that the
+         * action was originally invoked on (ie. the 'parent')
+         */
+        AddAction.prototype.perform = function () {
+            var newModel = this.type.getInitialModel(),
+                newObject,
+                parentObject = this.parent,
+                wizard;
+
+            newModel.type = this.type.getKey();
+            newObject = parentObject.getCapability('instantiation').instantiate(newModel);
+            newObject.useCapability('mutation', function (model) {
+                model.location = parentObject.getId();
+            });
+
+            wizard = new CreateWizard(newObject, this.parent, this.policyService);
+
+            function populateObjectFromInput(formValue) {
+                return wizard.populateObjectFromInput(formValue, newObject);
+            }
+
+            function persistAndReturn(domainObject) {
+                return domainObject.getCapability('persistence')
+                    .persist()
+                    .then(function () {
+                        return domainObject;
+                    });
+            }
+
+            function addToParent(populatedObject) {
+                parentObject.getCapability('composition').add(populatedObject);
+                return persistAndReturn(parentObject);
+            }
+
+            return this.dialogService
+                .getUserInput(wizard.getFormStructure(false), wizard.getInitialFormValue())
+                .then(populateObjectFromInput)
+                .then(persistAndReturn)
+                .then(addToParent);
+
+        };
+
+
+        /**
+         * Metadata associated with a Add action.
+         * @typedef {ActionMetadata} AddActionMetadata
+         * @property {string} type the key for the type of domain object
+         *           to be created
+         */
+
+        /**
+         * Get metadata about this action.
+         * @returns {AddActionMetadata} metadata about this action
+         */
+        AddAction.prototype.getMetadata = function () {
+            return this.metadata;
+        };
+
+        return AddAction;
+    }
+);

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

@@ -0,0 +1,82 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/**
+ * Module defining AddActionProvider.js. Created by ahenry on 01/21/16.
+ */
+define(
+    ["./AddAction"],
+    function (AddAction) {
+
+        /**
+         * The AddActionProvider is an ActionProvider which introduces
+         * an Add action for creating sub objects.
+         *
+         * @memberof platform/commonUI/browse
+         * @constructor
+         * @implements {ActionService}
+         *
+         * @param {TypeService} typeService the type service, used to discover
+         *        available types
+         * @param {DialogService} dialogService the dialog service, used by
+         *        specific Create actions to get user input to populate the
+         *        model of the newly-created domain object.
+         * @param {CreationService} creationService the creation service (also
+         *        introduced in this bundle), responsible for handling actual
+         *        object creation.
+         */
+        function AddActionProvider($q, typeService, dialogService, policyService) {
+            this.typeService = typeService;
+            this.dialogService = dialogService;
+            this.$q = $q;
+            this.policyService = policyService;
+        }
+
+        AddActionProvider.prototype.getActions = function (actionContext) {
+            var context = actionContext || {},
+                key = context.key,
+                destination = context.domainObject;
+
+            // We only provide Add actions, and we need a
+            // domain object to serve as the container for the
+            // newly-created object (although the user may later
+            // make a different selection)
+            if (key !== 'add' || !destination) {
+                return [];
+            }
+
+            // Introduce one create action per type
+            return ['timeline', 'activity'].map(function (type) {
+                return new AddAction(
+                    this.typeService.getType(type),
+                    destination,
+                    context,
+                    this.$q,
+                    this.dialogService,
+                    this.policyService
+                );
+            }, this);
+        };
+
+        return AddActionProvider;
+    }
+);

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

@@ -44,7 +44,7 @@ define(
          * @param {ActionContext} context the context in which the
          *        action is being performed
          */
-        function CreateAction(type, parent, context, openmct) {
+        function CreateAction(type, parent, context) {
             this.metadata = {
                 key: 'create',
                 cssClass: type.getCssClass(),
@@ -55,7 +55,6 @@ define(
             };
             this.type = type;
             this.parent = parent;
-            this.openmct = openmct;
         }
 
         /**
@@ -64,44 +63,37 @@ define(
          */
         CreateAction.prototype.perform = function () {
             var newModel = this.type.getInitialModel(),
-                openmct = this.openmct,
+                newObject,
-                newObject;
+                editAction,
+                editorCapability;
+
+            function closeEditor() {
+                return editorCapability.finish();
+            }
+
+            function onSave() {
+                return editorCapability.save()
+                    .then(closeEditor);
+            }
 
             function onCancel() {
-                openmct.editor.cancel();
+                return closeEditor();
-            }
-
-            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());
-                        })
-                        .join('/');
-
-                window.location.href = url;
-
-                if (isFirstViewEditable(object.useCapability('adapter'))) {
-                    openmct.editor.edit();
-                }
             }
 
             newModel.type = this.type.getKey();
             newModel.location = this.parent.getId();
             newObject = this.parent.useCapability('instantiation', newModel);
+            editorCapability = newObject.hasCapability('editor') && newObject.getCapability("editor");
 
-            openmct.editor.edit();
+            editAction = newObject.getCapability("action").getActions("edit")[0];
-            newObject.getCapability("action").perform("save-as").then(navigateAndEdit, onCancel);
+            //If an edit action is available, perform it
-            // TODO: support editing object without saving object first.
+            if (editAction) {
-            // Which means we have to toggle createwizard afterwards.  For now,
+                return editAction.perform();
-            // We will disable this.
+            } else if (editorCapability) {
+                //otherwise, use the save as action
+                editorCapability.edit();
+                return newObject.getCapability("action").perform("save-as").then(onSave, onCancel);
+            }
         };
 
 

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

@@ -34,13 +34,13 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreateWizard(domainObject, parent, openmct) {
+        function CreateWizard(domainObject, parent, policyService) {
             this.type = domainObject.getCapability('type');
             this.model = domainObject.getModel();
             this.domainObject = domainObject;
             this.properties = this.type.getProperties();
             this.parent = parent;
-            this.openmct = openmct;
+            this.policyService = policyService;
         }
 
         /**
@@ -56,17 +56,22 @@ define(
          */
         CreateWizard.prototype.getFormStructure = function (includeLocation) {
             var sections = [],
-                domainObject = this.domainObject;
+                domainObject = this.domainObject,
+                policyService = this.policyService;
 
             function validateLocation(parent) {
-                return parent && this.openmct.composition.checkPolicy(parent.useCapability('adapter'), domainObject.useCapability('adapter'));
+                return parent && policyService.allow(
+                    "composition",
+                    parent,
+                    domainObject
+                );
             }
 
             sections.push({
                 name: "Properties",
                 rows: this.properties.map(function (property, index) {
                     // Property definition is same as form row definition
-                    var row = JSON.parse(JSON.stringify(property.getDefinition()));
+                    var row = Object.create(property.getDefinition());
 
                     // Use index as the key into the formValue;
                     // this correlates to the indexing provided by
@@ -88,7 +93,7 @@ define(
                     rows: [{
                         name: "Save In",
                         control: "locator",
-                        validate: validateLocation.bind(this),
+                        validate: validateLocation,
                         key: "createParent"
                     }]
                 });

platform/commonUI/edit/src/policies/EditActionPolicy.js

@@ -0,0 +1,111 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Policy controlling when the `edit` and/or `properties` actions
+         * can appear as applicable actions of the `view-control` category
+         * (shown as buttons in the top-right of browse mode.)
+         * @memberof platform/commonUI/edit
+         * @constructor
+         * @implements {Policy.<Action, ActionContext>}
+         */
+        function EditActionPolicy(policyService) {
+            this.policyService = policyService;
+        }
+
+        /**
+         * Get a count of views which are not flagged as non-editable.
+         * @private
+         */
+        EditActionPolicy.prototype.countEditableViews = function (context) {
+            var domainObject = context.domainObject,
+                count = 0,
+                type, views;
+
+            if (!domainObject) {
+                return count;
+            }
+
+            type = domainObject.getCapability('type');
+            views = domainObject.useCapability('view');
+
+
+            // A view is editable unless explicitly flagged as not
+            (views || []).forEach(function (view) {
+                if (isEditable(view) ||
+                    (view.key === 'plot' && type.getKey() === 'telemetry.panel') ||
+                    (view.key === 'table' && type.getKey() === 'table') ||
+                    (view.key === 'rt-table' && type.getKey() === 'rttable')
+                ) {
+                    count++;
+                }
+            });
+
+            function isEditable(view) {
+                if (typeof view.editable === Function) {
+                    return view.editable(domainObject.useCapability('adapter'));
+                } else {
+                    return view.editable === true;
+                }
+            }
+
+            return count;
+        };
+
+        /**
+         * Checks whether the domain object is currently being edited. If
+         * so, the edit action is not applicable.
+         * @param context
+         * @returns {*|boolean}
+         */
+        function isEditing(context) {
+            var domainObject = (context || {}).domainObject;
+            return domainObject &&
+                domainObject.hasCapability('editor') &&
+                domainObject.getCapability('editor').isEditContextRoot();
+        }
+
+        EditActionPolicy.prototype.allow = function (action, context) {
+            var key = action.getMetadata().key,
+                category = (context || {}).category;
+
+            // Restrict 'edit' to cases where there are editable
+            // views (similarly, restrict 'properties' to when
+            // the converse is true), and where the domain object is not
+            // already being edited.
+            if (key === 'edit') {
+                return this.countEditableViews(context) > 0 && !isEditing(context);
+            } else if (key === 'properties' && category === 'view-control') {
+                return this.countEditableViews(context) < 1 && !isEditing(context);
+            }
+
+            // Like all policies, allow by default.
+            return true;
+        };
+
+        return EditActionPolicy;
+    }
+);

platform/commonUI/edit/src/policies/EditContextualActionPolicy.js

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Policy controlling whether the context menu is visible when
+         * objects are being edited
+         * @param navigationService
+         * @param editModeBlacklist A blacklist of actions disallowed from
+         * context menu when navigated object is being edited
+         * @param nonEditContextBlacklist A blacklist of actions disallowed
+         * from context menu of non-editable objects, when navigated object
+         * is being edited
+         * @constructor
+         * @param editModeBlacklist A blacklist of actions disallowed from
+         * context menu when navigated object is being edited
+         * @param nonEditContextBlacklist A blacklist of actions disallowed
+         * from context menu of non-editable objects, when navigated object
+         * @implements {Policy.<Action, ActionContext>}
+         */
+        function EditContextualActionPolicy(navigationService, editModeBlacklist, nonEditContextBlacklist) {
+            this.navigationService = navigationService;
+
+            //The list of objects disallowed on target object when in edit mode
+            this.editModeBlacklist = editModeBlacklist;
+            //The list of objects disallowed on target object that is not in
+            // edit mode (ie. the context menu in the tree on the LHS).
+            this.nonEditContextBlacklist = nonEditContextBlacklist;
+        }
+
+        EditContextualActionPolicy.prototype.allow = function (action, context) {
+            var selectedObject = context.domainObject,
+                navigatedObject = this.navigationService.getNavigation(),
+                actionMetadata = action.getMetadata ? action.getMetadata() : {};
+
+            // if (navigatedObject.hasCapability("editor") && navigatedObject.getCapability("editor").isEditContextRoot()) {
+                if (selectedObject.hasCapability("editor") && selectedObject.getCapability("editor").inEditContext()) {
+                    return this.editModeBlacklist.indexOf(actionMetadata.key) === -1;
+                } else {
+                    //Target is in the context menu
+                    return this.nonEditContextBlacklist.indexOf(actionMetadata.key) === -1;
+                }
+            // } else {
+            //     return true;
+            // }
+        };
+
+        return EditContextualActionPolicy;
+    }
+);

platform/commonUI/edit/src/policies/EditableLinkPolicy.js

@@ -0,0 +1,51 @@
+/*****************************************************************************
+ * 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 () {
+
+    /**
+     * Policy suppressing links when the linked-to domain object is in
+     * edit mode. Domain objects being edited may not have been persisted,
+     * so creating links to these can result in inconsistent state.
+     *
+     * @memberof platform/commonUI/edit
+     * @constructor
+     * @implements {Policy.<View, DomainObject>}
+     */
+    function EditableLinkPolicy() {
+    }
+
+    EditableLinkPolicy.prototype.allow = function (action, context) {
+        var key = action.getMetadata().key,
+            object;
+
+        if (key === 'link') {
+            object = context.selectedObject || context.domainObject;
+            return !(object.hasCapability("editor") && object.getCapability("editor").inEditContext());
+        }
+
+        // Like all policies, allow by default.
+        return true;
+    };
+
+    return EditableLinkPolicy;
+});

platform/commonUI/edit/src/policies/EditableMovePolicy.js

@@ -0,0 +1,52 @@
+/*****************************************************************************
+ * 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 () {
+
+    /**
+     * Policy suppressing move actions among editable and non-editable
+     * domain objects.
+     * @memberof platform/commonUI/edit
+     * @constructor
+     * @implements {Policy.<View, DomainObject>}
+     */
+    function EditableMovePolicy() {
+    }
+
+    EditableMovePolicy.prototype.allow = function (action, context) {
+        var domainObject = context.domainObject,
+            selectedObject = context.selectedObject,
+            key = action.getMetadata().key,
+            isDomainObjectEditing = domainObject.hasCapability('editor') &&
+                domainObject.getCapability('editor').inEditContext();
+
+        if (key === 'move' && isDomainObjectEditing) {
+            return !!selectedObject && selectedObject.hasCapability('editor') &&
+                selectedObject.getCapability('editor').inEditContext();
+        }
+
+        // Like all policies, allow by default.
+        return true;
+    };
+
+    return EditableMovePolicy;
+});

platform/commonUI/edit/src/policies/EditableViewPolicy.js

@@ -0,0 +1,49 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Policy controlling which views should be visible in Edit mode.
+         * @memberof platform/commonUI/edit
+         * @constructor
+         * @implements {Policy.<View, DomainObject>}
+         */
+        function EditableViewPolicy() {
+        }
+
+        EditableViewPolicy.prototype.allow = function (view, domainObject) {
+            // If a view is flagged as non-editable, only allow it
+            // while we're not in Edit mode.
+            if ((view || {}).editable === false) {
+                return !(domainObject.hasCapability('editor') && domainObject.getCapability('editor').inEditContext());
+            }
+
+            // Like all policies, allow by default.
+            return true;
+        };
+
+        return EditableViewPolicy;
+    }
+);

platform/commonUI/edit/src/representers/EditToolbar.js

@@ -0,0 +1,254 @@
+/*****************************************************************************
+ * 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/api/objects/object-utils',
+        'lodash'
+    ],
+    function (
+        objectUtils,
+        _
+    ) {
+
+        /**
+         * Provides initial structure and state (as suitable for provision
+         * to the `mct-toolbar` directive) for a view's toolbar, based on
+         * that view's declaration of what belongs in its toolbar and on
+         * the current selection.
+         *
+         * @param $scope the Angular scope
+         * @param {Object} openmct the openmct object
+         * @param structure the toolbar structure
+         * @memberof platform/commonUI/edit
+         * @constructor
+         */
+        function EditToolbar($scope, openmct, structure) {
+            this.toolbarStructure = [];
+            this.properties = [];
+            this.toolbarState = [];
+            this.openmct = openmct;
+            this.domainObjectsById = {};
+            this.unobserveObjects = [];
+            this.stateTracker = [];
+
+            $scope.$watchCollection(this.getState.bind(this), this.handleStateChanges.bind(this));
+            $scope.$on("$destroy", this.destroy.bind(this));
+
+            this.updateToolbar(structure);
+            this.registerListeners(structure);
+        }
+
+        /**
+         * Updates the toolbar with a new structure.
+         *
+         * @param {Array} structure the toolbar structure
+         */
+        EditToolbar.prototype.updateToolbar = function (structure) {
+            var self = this;
+
+            function addKey(item) {
+                self.stateTracker.push({
+                    id: objectUtils.makeKeyString(item.domainObject.identifier),
+                    domainObject: item.domainObject,
+                    property: item.property
+                });
+                self.properties.push(item.property);
+
+                return self.properties.length - 1; // Return index of property
+            }
+
+            function convertItem(item) {
+                var converted = Object.create(item || {});
+
+                if (item.property) {
+                    converted.key = addKey(item);
+                }
+
+                if (item.method) {
+                    converted.click = function (value) {
+                        item.method(value);
+                    };
+                }
+
+                return converted;
+            }
+
+            // Get initial value for a given property
+            function initializeState(property) {
+                var result;
+                structure.forEach(function (item) {
+                    if (item.property === property) {
+                        result = _.get(item.domainObject, item.property);
+                    }
+                });
+
+                return result;
+            }
+
+            // Tracks the domain object and property for every element in the state array
+            this.stateTracker = [];
+            this.toolbarStructure = structure.map(convertItem);
+            this.toolbarState = this.properties.map(initializeState);
+        };
+
+        /**
+         * Gets the structure of the toolbar, as appropriate to
+         * pass to `mct-toolbar`.
+         *
+         * @returns {Array} the toolbar structure
+         */
+        EditToolbar.prototype.getStructure = function () {
+            return this.toolbarStructure;
+        };
+
+        /**
+         * Gets the current state of the toolbar, as appropriate
+         * to two-way bind to the state handled by `mct-toolbar`.
+         *
+         * @returns {Array} state of the toolbar
+         */
+        EditToolbar.prototype.getState = function () {
+            return this.toolbarState;
+        };
+
+        /**
+         * Mutates the domain object's property with a new value.
+         *
+         * @param {Object} dominObject the domain object
+         * @param {string} property the domain object's property to update
+         * @param value the property's new value
+         */
+        EditToolbar.prototype.updateDomainObject = function (domainObject, property, value) {
+            this.openmct.objects.mutate(domainObject, property, value);
+        };
+
+        /**
+         * Updates state with the new value.
+         *
+         * @param {number} index the index of the corresponding
+         *        element in the state array
+         * @param value the new value to update the state array with
+         */
+        EditToolbar.prototype.updateState = function (index, value) {
+            this.toolbarState[index] = value;
+        };
+
+        /**
+         * Register listeners for domain objects to watch for updates.
+         *
+         * @param {Array} the toolbar structure
+         */
+        EditToolbar.prototype.registerListeners = function (structure) {
+            var self = this;
+
+            function observeObject(domainObject, id) {
+                var unobserveObject = self.openmct.objects.observe(domainObject, '*', function (newObject) {
+                    self.domainObjectsById[id].newObject = JSON.parse(JSON.stringify(newObject));
+                    self.scheduleStateUpdate();
+                });
+                self.unobserveObjects.push(unobserveObject);
+            }
+
+            structure.forEach(function (item) {
+                var domainObject = item.domainObject;
+                var id = objectUtils.makeKeyString(domainObject.identifier);
+
+                if (!self.domainObjectsById[id]) {
+                    self.domainObjectsById[id] = {
+                        domainObject: domainObject,
+                        properties: []
+                    };
+                    observeObject(domainObject, id);
+                }
+
+                self.domainObjectsById[id].properties.push(item.property);
+            });
+        };
+
+        /**
+         * Delays updating the state.
+         */
+        EditToolbar.prototype.scheduleStateUpdate = function () {
+            if (this.stateUpdateScheduled) {
+                return;
+            }
+
+            this.stateUpdateScheduled = true;
+            setTimeout(this.updateStateAfterMutation.bind(this));
+        };
+
+        EditToolbar.prototype.updateStateAfterMutation = function () {
+            this.stateTracker.forEach(function (state, index) {
+                if (!this.domainObjectsById[state.id].newObject) {
+                    return;
+                }
+
+                var domainObject = this.domainObjectsById[state.id].domainObject;
+                var newObject = this.domainObjectsById[state.id].newObject;
+                var currentValue = _.get(domainObject, state.property);
+                var newValue = _.get(newObject, state.property);
+
+                state.domainObject = newObject;
+
+                if (currentValue !== newValue) {
+                    this.updateState(index, newValue);
+                }
+            }, this);
+
+            Object.values(this.domainObjectsById).forEach(function (tracker) {
+                if (tracker.newObject) {
+                    tracker.domainObject = tracker.newObject;
+                }
+                delete tracker.newObject;
+            });
+            this.stateUpdateScheduled = false;
+        };
+
+        /**
+         * Removes the listeners.
+         */
+        EditToolbar.prototype.deregisterListeners = function () {
+            this.unobserveObjects.forEach(function (unobserveObject) {
+                unobserveObject();
+            });
+            this.unobserveObjects = [];
+        };
+
+        EditToolbar.prototype.handleStateChanges = function (state) {
+            (state || []).map(function (newValue, index) {
+                var domainObject = this.stateTracker[index].domainObject;
+                var property = this.stateTracker[index].property;
+                var currentValue = _.get(domainObject, property);
+
+                if (currentValue !== newValue) {
+                    this.updateDomainObject(domainObject, property, newValue);
+                }
+            }, this);
+        };
+
+        EditToolbar.prototype.destroy = function () {
+            this.deregisterListeners();
+        };
+
+        return EditToolbar;
+    }
+);

platform/commonUI/edit/src/services/TransactionManager.js

@@ -77,19 +77,14 @@ define([], function () {
                 return promiseFn().then(nextFn);
             };
         }
-        /**
-         * 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] =
+        if (!this.isScheduled(id)) {
-            this.transactionService.addToTransaction(
+            this.clearTransactionFns[id] =
-                chain(onCommit, release),
+                this.transactionService.addToTransaction(
-                chain(onCancel, release)
+                    chain(onCommit, release),
-            );
+                    chain(onCancel, release)
+                );
+        }
     };
 
     /**

platform/commonUI/edit/test/actions/RemoveActionSpec.js

@@ -29,7 +29,7 @@ define(
                 actionContext,
                 capabilities,
                 mockContext,
-                mockOverlayAPI,
+                mockDialogService,
                 mockDomainObject,
                 mockMutation,
                 mockNavigationService,
@@ -68,9 +68,9 @@ define(
                     }
                 };
 
-                mockOverlayAPI = jasmine.createSpyObj(
+                mockDialogService = jasmine.createSpyObj(
-                    "overlayAPI",
+                    "dialogService",
-                    ["dialog"]
+                    ["showBlockingMessage"]
                 );
 
                 mockNavigationService = jasmine.createSpyObj(
@@ -96,7 +96,7 @@ define(
 
                 actionContext = { domainObject: mockDomainObject };
 
-                action = new RemoveAction({overlays: mockOverlayAPI}, mockNavigationService, actionContext);
+                action = new RemoveAction(mockDialogService, mockNavigationService, actionContext);
             });
 
             it("only applies to objects with parents", function () {
@@ -118,7 +118,7 @@ define(
 
                 action.perform();
 
-                expect(mockOverlayAPI.dialog).toHaveBeenCalled();
+                expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
 
                 // Also check that no mutation happens at this point
                 expect(mockParent.useCapability).not.toHaveBeenCalledWith("mutation", jasmine.any(Function));
@@ -158,13 +158,13 @@ define(
                     mockGrandchildContext = jasmine.createSpyObj("context", ["getParent"]);
                     mockRootContext = jasmine.createSpyObj("context", ["getParent"]);
 
-                    mockOverlayAPI.dialog.and.returnValue(mockDialogHandle);
+                    mockDialogService.showBlockingMessage.and.returnValue(mockDialogHandle);
                 });
 
                 it("mutates the parent when performed", function () {
                     action.perform();
-                    mockOverlayAPI.dialog.calls.mostRecent().args[0]
+                    mockDialogService.showBlockingMessage.calls.mostRecent().args[0]
-                        .buttons[0].callback();
+                        .primaryOption.callback();
 
                     expect(mockMutation.invoke)
                         .toHaveBeenCalledWith(jasmine.any(Function));
@@ -174,8 +174,8 @@ define(
                     var mutator, result;
 
                     action.perform();
-                    mockOverlayAPI.dialog.calls.mostRecent().args[0]
+                    mockDialogService.showBlockingMessage.calls.mostRecent().args[0]
-                        .buttons[0].callback();
+                        .primaryOption.callback();
 
                     mutator = mockMutation.invoke.calls.mostRecent().args[0];
                     result = mutator(model);
@@ -212,8 +212,8 @@ define(
                     mockType.hasFeature.and.returnValue(true);
 
                     action.perform();
-                    mockOverlayAPI.dialog.calls.mostRecent().args[0]
+                    mockDialogService.showBlockingMessage.calls.mostRecent().args[0]
-                        .buttons[0].callback();
+                        .primaryOption.callback();
 
                     // Expects navigation to parent of domainObject (removed object)
                     expect(mockNavigationService.setNavigation).toHaveBeenCalledWith(mockParent);
@@ -242,8 +242,8 @@ define(
                     mockType.hasFeature.and.returnValue(true);
 
                     action.perform();
-                    mockOverlayAPI.dialog.calls.mostRecent().args[0]
+                    mockDialogService.showBlockingMessage.calls.mostRecent().args[0]
-                        .buttons[0].callback();
+                        .primaryOption.callback();
 
                     // Expects no navigation to occur
                     expect(mockNavigationService.setNavigation).not.toHaveBeenCalled();

platform/commonUI/edit/test/controllers/ElementsControllerSpec.js

@@ -0,0 +1,184 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global describe,it,expect,beforeEach,jasmine*/
+
+define(
+    ["../../src/controllers/ElementsController"],
+    function (ElementsController) {
+
+        describe("The Elements Pane controller", function () {
+            var mockScope,
+                mockOpenMCT,
+                mockSelection,
+                mockDomainObject,
+                mockMutationCapability,
+                mockCompositionCapability,
+                mockCompositionObjects,
+                mockComposition,
+                mockUnlisten,
+                selectable = [],
+                controller;
+
+            function mockPromise(value) {
+                return {
+                    then: function (thenFunc) {
+                        return mockPromise(thenFunc(value));
+                    }
+                };
+            }
+
+            function createDomainObject() {
+                return {
+                    useCapability: function () {
+                        return mockCompositionCapability;
+                    }
+                };
+            }
+
+            beforeEach(function () {
+                mockComposition = ["a", "b"];
+                mockCompositionObjects = mockComposition.map(createDomainObject);
+                mockCompositionCapability = mockPromise(mockCompositionObjects);
+
+                mockUnlisten = jasmine.createSpy('unlisten');
+                mockMutationCapability = jasmine.createSpyObj("mutationCapability", [
+                    "listen"
+                ]);
+                mockMutationCapability.listen.and.returnValue(mockUnlisten);
+                mockDomainObject = jasmine.createSpyObj("domainObject", [
+                    "getCapability",
+                    "useCapability"
+                ]);
+                mockDomainObject.useCapability.and.returnValue(mockCompositionCapability);
+                mockDomainObject.getCapability.and.returnValue(mockMutationCapability);
+
+                mockScope = jasmine.createSpyObj("$scope", ['$on']);
+                mockSelection = jasmine.createSpyObj("selection", [
+                    'on',
+                    'off',
+                    'get'
+                ]);
+                mockSelection.get.and.returnValue([]);
+                mockOpenMCT = {
+                    selection: mockSelection
+                };
+
+                selectable[0] = {
+                    context: {
+                        oldItem: mockDomainObject
+                    }
+                };
+
+                spyOn(ElementsController.prototype, 'refreshComposition').and.callThrough();
+
+                controller = new ElementsController(mockScope, mockOpenMCT);
+            });
+
+            function getModel(model) {
+                return function () {
+                    return model;
+                };
+            }
+
+            it("filters objects in elements pool based on input text and" +
+                " object name", function () {
+                var objects = [
+                    {
+                        getModel: getModel({name: "first element"})
+                    },
+                    {
+                        getModel: getModel({name: "second element"})
+                    },
+                    {
+                        getModel: getModel({name: "third element"})
+                    },
+                    {
+                        getModel: getModel({name: "THIRD Element 1"})
+                    }
+                ];
+
+                mockScope.filterBy("third element");
+                expect(objects.filter(mockScope.searchElements).length).toBe(2);
+                mockScope.filterBy("element");
+                expect(objects.filter(mockScope.searchElements).length).toBe(4);
+            });
+
+            it("refreshes composition on selection", function () {
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                expect(ElementsController.prototype.refreshComposition).toHaveBeenCalledWith(mockDomainObject);
+            });
+
+            it("listens on mutation and refreshes composition", function () {
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                expect(mockDomainObject.getCapability).toHaveBeenCalledWith('mutation');
+                expect(mockMutationCapability.listen).toHaveBeenCalled();
+                expect(ElementsController.prototype.refreshComposition.calls.count()).toBe(1);
+
+                mockMutationCapability.listen.calls.mostRecent().args[0](mockDomainObject);
+
+                expect(ElementsController.prototype.refreshComposition.calls.count()).toBe(2);
+            });
+
+            it("cleans up mutation listener when selection changes", function () {
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                expect(mockMutationCapability.listen).toHaveBeenCalled();
+
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                expect(mockUnlisten).toHaveBeenCalled();
+            });
+
+            it("does not listen on mutation for element proxy selectable", function () {
+                selectable[0] = {
+                    context: {
+                        elementProxy: {}
+                    }
+                };
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                expect(mockDomainObject.getCapability).not.toHaveBeenCalledWith('mutation');
+            });
+
+            it("checks concurrent changes to composition", function () {
+                var secondMockComposition = ["a", "b", "c"],
+                    secondMockCompositionObjects = secondMockComposition.map(createDomainObject),
+                    firstCompositionCallback,
+                    secondCompositionCallback;
+
+                spyOn(mockCompositionCapability, "then").and.callThrough();
+
+                controller.refreshComposition(mockDomainObject);
+                controller.refreshComposition(mockDomainObject);
+
+                firstCompositionCallback = mockCompositionCapability.then.calls.all()[0].args[0];
+                secondCompositionCallback = mockCompositionCapability.then.calls.all()[1].args[0];
+                secondCompositionCallback(secondMockCompositionObjects);
+                firstCompositionCallback(mockCompositionObjects);
+
+                expect(mockScope.composition).toBe(secondMockCompositionObjects);
+            });
+        });
+    }
+);

platform/commonUI/edit/test/creation/AddActionProviderSpec.js

@@ -0,0 +1,105 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/**
+ * MCTRepresentationSpec. Created by ahenry on 01/21/14.
+ */
+define(
+    ["../../src/creation/AddActionProvider"],
+    function (AddActionProvider) {
+
+        describe("The add action provider", function () {
+            var mockTypeService,
+                mockDialogService,
+                mockPolicyService,
+                mockTypeMap,
+                mockTypes,
+                mockDomainObject,
+                mockQ,
+                provider;
+
+            function createMockType(name) {
+                var mockType = jasmine.createSpyObj(
+                    "type" + name,
+                    [
+                        "getKey",
+                        "getGlyph",
+                        "getCssClass",
+                        "getName",
+                        "getDescription",
+                        "getProperties",
+                        "getInitialModel",
+                        "hasFeature"
+                    ]
+                );
+                mockType.hasFeature.and.returnValue(true);
+                mockType.getName.and.returnValue(name);
+                mockType.getKey.and.returnValue(name);
+                return mockType;
+            }
+
+            beforeEach(function () {
+                mockTypeService = jasmine.createSpyObj(
+                    "typeService",
+                    ["getType"]
+                );
+                mockDialogService = {};
+                mockPolicyService = {};
+                mockDomainObject = {};
+
+                mockTypes = [
+                    "timeline",
+                    "activity",
+                    "other"
+                ].map(createMockType);
+                mockTypeMap = {};
+
+                mockTypes.forEach(function (type) {
+                    mockTypeMap[type.getKey()] = type;
+                });
+
+                mockTypeService.getType.and.callFake(function (key) {
+                    return mockTypeMap[key];
+                });
+
+                provider = new AddActionProvider(
+                    mockQ,
+                    mockTypeService,
+                    mockDialogService,
+                    mockPolicyService
+                );
+            });
+
+            it("provides actions for timeline and activity", function () {
+                var actions = provider.getActions({
+                    key: "add",
+                    domainObject: mockDomainObject
+                });
+                expect(actions.length).toBe(2);
+                expect(actions[0].metadata.type).toBe('timeline');
+                expect(actions[1].metadata.type).toBe('activity');
+
+                // Make sure it was creation which was used to check
+            });
+        });
+    }
+);

platform/commonUI/edit/test/policies/EditActionPolicySpec.js

@@ -0,0 +1,138 @@
+/*****************************************************************************
+ * 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/policies/EditActionPolicy"],
+    function (EditActionPolicy) {
+
+        describe("The Edit action policy", function () {
+            var editableView,
+                nonEditableView,
+                testViews,
+                testContext,
+                mockDomainObject,
+                mockEditAction,
+                mockPropertiesAction,
+                mockTypeCapability,
+                mockEditorCapability,
+                capabilities,
+                plotView,
+                policy;
+
+            beforeEach(function () {
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    [
+                        'useCapability',
+                        'hasCapability',
+                        'getCapability'
+                    ]
+                );
+                mockEditorCapability = jasmine.createSpyObj('editorCapability', ['isEditContextRoot']);
+                mockTypeCapability = jasmine.createSpyObj('type', ['getKey']);
+                capabilities = {
+                    'editor': mockEditorCapability,
+                    'type': mockTypeCapability
+                };
+
+                mockEditAction = jasmine.createSpyObj('edit', ['getMetadata']);
+                mockPropertiesAction = jasmine.createSpyObj('edit', ['getMetadata']);
+
+                mockDomainObject.getCapability.and.callFake(function (capability) {
+                    return capabilities[capability];
+                });
+                mockDomainObject.hasCapability.and.callFake(function (capability) {
+                    return !!capabilities[capability];
+                });
+
+                editableView = { editable: true };
+                nonEditableView = { editable: false };
+                plotView = { key: "plot", editable: false };
+                testViews = [];
+
+                mockDomainObject.useCapability.and.callFake(function (c) {
+                    // Provide test views, only for the view capability
+                    return c === 'view' && testViews;
+                });
+
+                mockEditAction.getMetadata.and.returnValue({ key: 'edit' });
+                mockPropertiesAction.getMetadata.and.returnValue({ key: 'properties' });
+
+                testContext = {
+                    domainObject: mockDomainObject,
+                    category: 'view-control'
+                };
+
+                policy = new EditActionPolicy();
+            });
+
+            it("allows the edit action when there are editable views", function () {
+                testViews = [editableView];
+                expect(policy.allow(mockEditAction, testContext)).toBe(true);
+            });
+
+            it("allows the edit properties action when there are no editable views", function () {
+                testViews = [nonEditableView, nonEditableView];
+                expect(policy.allow(mockPropertiesAction, testContext)).toBe(true);
+            });
+
+            it("disallows the edit action when there are no editable views", function () {
+                testViews = [nonEditableView, nonEditableView];
+                expect(policy.allow(mockEditAction, testContext)).toBe(false);
+            });
+
+            it("disallows the edit properties action when there are" +
+                " editable views", function () {
+                testViews = [editableView];
+                expect(policy.allow(mockPropertiesAction, testContext)).toBe(false);
+            });
+
+            it("disallows the edit action when object is already being" +
+                " edited", function () {
+                testViews = [editableView];
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
+                expect(policy.allow(mockEditAction, testContext)).toBe(false);
+            });
+
+            it("allows editing of panels in plot view", function () {
+                testViews = [plotView];
+                mockTypeCapability.getKey.and.returnValue('telemetry.panel');
+
+                expect(policy.allow(mockEditAction, testContext)).toBe(true);
+            });
+
+            it("disallows editing of plot view when object not a panel type", function () {
+                testViews = [plotView];
+                mockTypeCapability.getKey.and.returnValue('something.else');
+
+                expect(policy.allow(mockEditAction, testContext)).toBe(false);
+            });
+
+
+            it("allows the edit properties outside of the 'view-control' category", function () {
+                testViews = [nonEditableView];
+                testContext.category = "something-else";
+                expect(policy.allow(mockPropertiesAction, testContext)).toBe(true);
+            });
+        });
+    }
+);

platform/commonUI/edit/test/policies/EditContextualActionPolicySpec.js

@@ -0,0 +1,120 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global describe,it,expect,beforeEach,jasmine*/
+
+define(
+    ["../../src/policies/EditContextualActionPolicy"],
+    function (EditContextualActionPolicy) {
+
+        describe("The Edit contextual action policy", function () {
+            var policy,
+                navigationService,
+                mockAction,
+                context,
+                navigatedObject,
+                mockDomainObject,
+                mockEditorCapability,
+                metadata,
+                editModeBlacklist = ["copy", "follow", "window", "link", "locate"],
+                nonEditContextBlacklist = ["copy", "follow", "properties", "move", "link", "remove", "locate"];
+
+            beforeEach(function () {
+                mockEditorCapability = jasmine.createSpyObj("editorCapability", ["isEditContextRoot", "inEditContext"]);
+
+                navigatedObject = jasmine.createSpyObj("navigatedObject", ["hasCapability", "getCapability"]);
+                navigatedObject.getCapability.and.returnValue(mockEditorCapability);
+                navigatedObject.hasCapability.and.returnValue(false);
+
+
+                mockDomainObject = jasmine.createSpyObj("domainObject", ["hasCapability", "getCapability"]);
+                mockDomainObject.hasCapability.and.returnValue(false);
+                mockDomainObject.getCapability.and.returnValue(mockEditorCapability);
+
+                navigationService = jasmine.createSpyObj("navigationService", ["getNavigation"]);
+                navigationService.getNavigation.and.returnValue(navigatedObject);
+
+                metadata = {key: "move"};
+                mockAction = jasmine.createSpyObj("action", ["getMetadata"]);
+                mockAction.getMetadata.and.returnValue(metadata);
+
+                context = {domainObject: mockDomainObject};
+
+                policy = new EditContextualActionPolicy(navigationService, editModeBlacklist, nonEditContextBlacklist);
+            });
+
+            it('Allows all actions when navigated object not in edit mode', function () {
+                expect(policy.allow(mockAction, context)).toBe(true);
+            });
+
+            it('Allows "window" action when navigated object in edit mode,' +
+                ' but selected object not in edit mode ', function () {
+                navigatedObject.hasCapability.and.returnValue(true);
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
+                metadata.key = "window";
+                expect(policy.allow(mockAction, context)).toBe(true);
+            });
+
+            it('Allows "remove" action when navigated object in edit mode,' +
+                ' and selected object not editable, but its parent is.',
+            function () {
+                var mockParent = jasmine.createSpyObj("parentObject", ["hasCapability"]),
+                    mockContextCapability = jasmine.createSpyObj("contextCapability", ["getParent"]);
+
+                mockParent.hasCapability.and.returnValue(true);
+                mockContextCapability.getParent.and.returnValue(mockParent);
+                navigatedObject.hasCapability.and.returnValue(true);
+
+                mockDomainObject.getCapability.and.returnValue(mockContextCapability);
+                mockDomainObject.hasCapability.and.callFake(function (capability) {
+                    switch (capability) {
+                    case "editor": return false;
+                    case "context": return true;
+                    }
+                });
+                metadata.key = "remove";
+
+                expect(policy.allow(mockAction, context)).toBe(true);
+            });
+
+            it('Disallows "move" action when navigated object in edit mode,' +
+                ' but selected object not in edit mode ', function () {
+                navigatedObject.hasCapability.and.returnValue(true);
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
+                mockEditorCapability.inEditContext.and.returnValue(false);
+                metadata.key = "move";
+                expect(policy.allow(mockAction, context)).toBe(false);
+            });
+
+            it('Disallows copy action when navigated object and' +
+                ' selected object in edit mode', function () {
+                navigatedObject.hasCapability.and.returnValue(true);
+                mockDomainObject.hasCapability.and.returnValue(true);
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
+                mockEditorCapability.inEditContext.and.returnValue(true);
+
+                metadata.key = "copy";
+                expect(policy.allow(mockAction, context)).toBe(false);
+            });
+
+        });
+    }
+);

platform/commonUI/edit/test/policies/EditableViewPolicySpec.js

@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * 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/policies/EditableViewPolicy"],
+    function (EditableViewPolicy) {
+
+        describe("The editable view policy", function () {
+            var mockDomainObject,
+                testMode,
+                policy;
+
+            beforeEach(function () {
+                testMode = true; // Act as if we're in Edit mode by default
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    ['hasCapability', 'getCapability']
+                );
+                mockDomainObject.getCapability.and.returnValue({
+                    inEditContext: function () {
+                        return true;
+                    }
+                });
+                mockDomainObject.hasCapability.and.callFake(function (c) {
+                    return (c === 'editor') && testMode;
+                });
+
+                policy = new EditableViewPolicy();
+            });
+
+            it("disallows views in edit mode that are flagged as non-editable", function () {
+                expect(policy.allow({ editable: false }, mockDomainObject))
+                    .toBeFalsy();
+            });
+
+            it("allows views in edit mode that are flagged as editable", function () {
+                expect(policy.allow({ editable: true }, mockDomainObject))
+                    .toBeTruthy();
+            });
+
+            it("allows any view outside of edit mode", function () {
+                var testViews = [
+                    { editable: false },
+                    { editable: true },
+                    { someKey: "some value" }
+                ];
+                testMode = false; // Act as if we're not in Edit mode
+
+                testViews.forEach(function (testView) {
+                    expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
+                });
+            });
+
+            it("treats views with no defined 'editable' property as editable", function () {
+                expect(policy.allow({ someKey: "some value" }, mockDomainObject))
+                    .toBeTruthy();
+            });
+        });
+    }
+);

platform/commonUI/edit/test/representers/EditToolbarSpec.js

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * 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/representers/EditToolbar'],
+    function (EditToolbar) {
+
+        describe("An Edit mode toolbar", function () {
+            var mockOpenMCT,
+                mockScope,
+                mockObjects,
+                mockDomainObject,
+                testStructure,
+                toolbar;
+
+            beforeEach(function () {
+                mockOpenMCT = jasmine.createSpy('openmct', ['objects']);
+                mockObjects = jasmine.createSpyObj('objects', ['observe']);
+                mockObjects.observe.and.returnValue();
+                mockOpenMCT.objects = mockObjects;
+                mockScope = jasmine.createSpyObj("$scope", [
+                    "$watchCollection",
+                    "$on"
+                ]);
+                mockScope.$watchCollection.and.returnValue();
+                mockDomainObject = jasmine.createSpyObj("domainObject", [
+                    'identifier'
+                ]);
+
+                testStructure = [
+                    { name: "A", property: "a", domainObject: mockDomainObject },
+                    { name: "B", property: "b", domainObject: mockDomainObject },
+                    { name: "C", property: "c", domainObject: mockDomainObject },
+                    { name: "X", property: "x", domainObject: mockDomainObject },
+                    { name: "Y", property: "y", domainObject: mockDomainObject },
+                    { name: "Z", property: "z", domainObject: mockDomainObject },
+                    { name: "M", method: "m", domainObject: mockDomainObject }
+                ];
+
+                toolbar = new EditToolbar(mockScope, mockOpenMCT, testStructure);
+            });
+
+            it("adds click functions when a method is specified", function () {
+                var structure = toolbar.getStructure();
+                expect(structure[6].click).toBeDefined();
+            });
+
+            it("adds key for controls that define a property", function () {
+                var structure = toolbar.getStructure();
+                expect(structure[0].key).toEqual(0);
+            });
+        });
+    }
+);
+
+

platform/commonUI/edit/test/services/TransactionManagerSpec.js

@@ -93,33 +93,24 @@ define(
                     expect(mockOnCancel).toHaveBeenCalled();
                 });
 
-                describe("Adds callbacks to transaction", function () {
+                it("ignores subsequent calls for the same object", function () {
-                    beforeEach(function () {
+                    manager.addToTransaction(
-                        spyOn(manager, 'clearTransactionsFor');
+                        testId,
-                        manager.clearTransactionsFor.and.callThrough();
+                        jasmine.createSpy(),
-                    });
+                        jasmine.createSpy()
+                    );
+                    expect(mockTransactionService.addToTransaction.calls.count())
+                        .toEqual(1);
+                });
 
-                    it("and clears pending calls if same object", function () {
+                it("accepts subsequent calls for other objects", function () {
-                        manager.addToTransaction(
+                    manager.addToTransaction(
-                            testId,
+                        'other-id',
-                            jasmine.createSpy(),
+                        jasmine.createSpy(),
-                            jasmine.createSpy()
+                        jasmine.createSpy()
-                        );
+                    );
-                        expect(manager.clearTransactionsFor).toHaveBeenCalledWith(testId);
+                    expect(mockTransactionService.addToTransaction.calls.count())
-                    });
+                        .toEqual(2);
-
-                    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 () {

platform/commonUI/general/bundle.js

@@ -31,6 +31,7 @@ define([
     "./src/controllers/TreeNodeController",
     "./src/controllers/ActionGroupController",
     "./src/controllers/ToggleController",
+    "./src/controllers/ContextMenuController",
     "./src/controllers/ClickAwayController",
     "./src/controllers/ViewSwitcherController",
     "./src/controllers/GetterSetterController",
@@ -48,6 +49,8 @@ define([
     "./src/directives/MCTSplitter",
     "./src/directives/MCTTree",
     "./src/directives/MCTIndicators",
+    "./src/directives/MCTPreview",
+    "./src/actions/MCTPreviewAction",
     "./src/filters/ReverseFilter",
     "./res/templates/bottombar.html",
     "./res/templates/controls/action-button.html",
@@ -62,11 +65,13 @@ define([
     "./res/templates/tree-node.html",
     "./res/templates/label.html",
     "./res/templates/controls/action-group.html",
+    "./res/templates/menu/context-menu.html",
     "./res/templates/controls/switcher.html",
     "./res/templates/object-inspector.html",
     "./res/templates/controls/selector.html",
     "./res/templates/controls/datetime-picker.html",
     "./res/templates/controls/datetime-field.html",
+    "./res/templates/preview.html",
     'legacyRegistry'
 ], function (
     UrlService,
@@ -79,6 +84,7 @@ define([
     TreeNodeController,
     ActionGroupController,
     ToggleController,
+    ContextMenuController,
     ClickAwayController,
     ViewSwitcherController,
     GetterSetterController,
@@ -96,6 +102,8 @@ define([
     MCTSplitter,
     MCTTree,
     MCTIndicators,
+    MCTPreview,
+    MCTPreviewAction,
     ReverseFilter,
     bottombarTemplate,
     actionButtonTemplate,
@@ -110,11 +118,13 @@ define([
     treeNodeTemplate,
     labelTemplate,
     actionGroupTemplate,
+    contextMenuTemplate,
     switcherTemplate,
     objectInspectorTemplate,
     selectorTemplate,
     datetimePickerTemplate,
     datetimeFieldTemplate,
+    previewTemplate,
     legacyRegistry
 ) {
 
@@ -242,6 +252,13 @@ define([
                     "key": "ToggleController",
                     "implementation": ToggleController
                 },
+                {
+                    "key": "ContextMenuController",
+                    "implementation": ContextMenuController,
+                    "depends": [
+                        "$scope"
+                    ]
+                },
                 {
                     "key": "ClickAwayController",
                     "implementation": ClickAwayController,
@@ -377,6 +394,31 @@ define([
                     "key": "mctIndicators",
                     "implementation": MCTIndicators,
                     "depends": ['openmct']
+                },
+                {
+                    "key": "mctPreview",
+                    "implementation": MCTPreview,
+                    "depends": [
+                        "$document"
+                    ]
+                }
+            ],
+            "actions": [
+                {
+                    "key": "mct-preview-action",
+                    "implementation": MCTPreviewAction,
+                    "name": "Preview",
+                    "cssClass": "hide-in-t-main-view icon-eye-open",
+                    "description": "Preview in large dialog",
+                    "category": [
+                        "contextual",
+                        "view-control"
+                    ],
+                    "depends": [
+                        "$compile",
+                        "$rootScope"
+                    ],
+                    "priority": "preferred"
                 }
             ],
             "constants": [
@@ -475,6 +517,13 @@ define([
                         "action"
                     ]
                 },
+                {
+                    "key": "context-menu",
+                    "template": contextMenuTemplate,
+                    "uses": [
+                        "action"
+                    ]
+                },
                 {
                     "key": "switcher",
                     "template": switcherTemplate,
@@ -485,6 +534,10 @@ define([
                 {
                     "key": "object-inspector",
                     "template": objectInspectorTemplate
+                },
+                {
+                    "key": "mct-preview",
+                    "template": previewTemplate
                 }
             ],
             "controls": [

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

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

platform/commonUI/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="c-object-label">
+<div class="t-object-label l-flex-row flex-elem grows">
-    <div class="c-object-label__type-icon {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
+    <div class="t-item-icon flex-elem {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
-    <div class='c-object-label__name'>{{model.name}}</div>
+    <div class='t-title-label flex-elem grows'>{{model.name}}</div>
 </div>

platform/commonUI/general/res/templates/menu/context-menu.html

@@ -0,0 +1,33 @@
+<!--
+ 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.
+-->
+<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
+    <div class="menu context-menu">
+        <ul>
+            <li ng-repeat="menuAction in menuActions"
+                ng-click="menuAction.perform()"
+                title="{{menuAction.getMetadata().description}}"
+                class="{{menuAction.getMetadata().cssClass}}">
+                {{menuAction.getMetadata().name}}
+            </li>
+        </ul>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,45 @@
+<!--
+ 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.
+-->
+<div class="t-frame-inner abs t-object-type-{{ domainObject.getModel().type }}" mct-preview>
+    <div class="abs object-browse-bar l-flex-row">
+        <div class="left flex-elem l-flex-row grows">
+            <mct-representation
+                    key="'object-header-frame'"
+                    mct-object="domainObject"
+                    class="l-flex-row flex-elem object-header grows">
+            </mct-representation>
+        </div>
+        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
+            <mct-representation
+                    key="'switcher'"
+                    ng-model="representation"
+                    mct-object="domainObject">
+            </mct-representation>
+        </div>
+    </div>
+    <div class="abs object-holder">
+        <mct-representation
+                key="representation.selected.key"
+                mct-object="representation.selected.key && domainObject">
+        </mct-representation>
+    </div>
+</div>

platform/commonUI/general/res/templates/progress-bar.html

@@ -1,10 +1,10 @@
 <span class="l-progress-bar s-progress-bar"
-      ng-class="{ indeterminate:ngModel.progressPerc === 'unknown' }">
+      ng-class="{ indeterminate:ngModel.unknownProgress }">
     <span class="progress-amt-holder">
-        <span class="progress-amt" style="width: {{ngModel.progressPerc === 'unknown' ? 100 : ngModel.progressPerc}}%"></span>
+        <span class="progress-amt" style="width: {{ngModel.progress}}%"></span>
     </span>
 </span>
 <div class="progress-info hint" ng-hide="ngModel.progressText === undefined">
-    <span class="progress-amt-text" ng-show="ngModel.progressPerc !== 'unknown' && ngModel.progressPerc > 0">{{ngModel.progressPerc}}% complete. </span>
+    <span class="progress-amt-text" ng-show="ngModel.progress > 0">{{ngModel.progress}}% complete. </span>
     {{ngModel.progressText}}
 </div>

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

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

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

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

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

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

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

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

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

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

platform/commonUI/general/src/actions/MCTPreviewAction.js

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * 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 () {
+
+        var PREVIEW_TEMPLATE = '<mct-representation key="\'mct-preview\'"' +
+                                    'class="t-rep-frame holder"' +
+                                    'mct-object="domainObject">' +
+                                '</mct-representation>';
+
+        function MCTPreviewAction($compile, $rootScope, context) {
+            context = context || {};
+            this.domainObject = context.selectedObject || context.domainObject;
+            this.$rootScope = $rootScope;
+            this.$compile = $compile;
+        }
+
+        MCTPreviewAction.prototype.perform = function () {
+            var newScope = this.$rootScope.$new();
+            newScope.domainObject = this.domainObject;
+
+            this.$compile(PREVIEW_TEMPLATE)(newScope);
+        };
+
+        MCTPreviewAction.appliesTo = function (context) {
+            var domainObject = (context || {}).domainObject,
+                status = domainObject.getCapability('status');
+
+            return !(status && status.get('editing'));
+        };
+
+        return MCTPreviewAction;
+    }
+);

platform/commonUI/general/src/controllers/BannerController.js

@@ -50,7 +50,7 @@ define(
             };
             $scope.dismiss = function (notification, $event) {
                 $event.stopPropagation();
-                notification.dismiss();
+                notification.dismissOrMinimize();
             };
             $scope.maximize = function (notification) {
                 if (notification.model.severity !== "info") {

platform/commonUI/general/src/controllers/ContextMenuController.js

@@ -0,0 +1,51 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/**
+ * Module defining ContextMenuController. Created by vwoeltje on 11/17/14.
+ */
+define(
+    [],
+    function () {
+
+        /**
+         * Controller for the context menu. Maintains an up-to-date
+         * list of applicable actions (those from category "contextual")
+         *
+         * @memberof platform/commonUI/general
+         * @constructor
+         */
+        function ContextMenuController($scope) {
+            // Refresh variable "menuActions" in the scope
+            function updateActions() {
+                $scope.menuActions = $scope.action ?
+                    $scope.action.getActions({ category: 'contextual' }) :
+                    [];
+            }
+
+            // Update using the action capability
+            $scope.$watch("action", updateActions);
+        }
+
+        return ContextMenuController;
+    }
+);

platform/commonUI/general/src/directives/MCTPreview.js

@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2016, 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(['zepto', '../services/Overlay'], function ($, Overlay) {
+    function MCTPreview($document) {
+
+        function link($scope, $element) {
+            var actions = $scope.domainObject.getCapability('action'),
+                notebookAction = actions.getActions({key: 'notebook-new-entry'})[0];
+
+            var notebookButton = notebookAction ?
+                [
+                    {
+                        class: 'icon-notebook new-notebook-entry',
+                        title: 'New Notebook Entry',
+                        clickHandler: function (event) {
+                            event.stopPropagation();
+                            notebookAction.perform();
+                        }
+                    }
+                ] : [];
+
+            var overlayService = new Overlay({
+                $document: $document,
+                $element: $element[0],
+                $scope: $scope,
+                browseBarButtons: notebookButton
+            });
+
+            overlayService.toggleOverlay();
+
+            $scope.$on('$destroy', function () {
+                $element.remove();
+            });
+        }
+
+        return {
+            restrict: 'A',
+            link: link
+        };
+    }
+
+    return MCTPreview;
+
+});

platform/commonUI/general/src/directives/MCTSelectable.js

@@ -54,7 +54,6 @@ define(
                     if (isDestroyed) {
                         return;
                     }
-
                     var removeSelectable = openmct.selection.selectable(
                         element[0],
                         scope.$eval(attrs.mctSelectable),

platform/commonUI/general/src/services/UrlService.js

@@ -82,7 +82,7 @@ define(
             }
             var searchPath = "?" + arr.join('&'),
                 newTabPath =
-                    "#" + this.urlForLocation(mode, domainObject) +
+                    "index.html#" + this.urlForLocation(mode, domainObject) +
                             searchPath;
             return newTabPath;
         };

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

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

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

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

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

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

platform/commonUI/general/test/controllers/ContextMenuControllerSpec.js

@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * 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/controllers/ContextMenuController"],
+    function (ContextMenuController) {
+
+        describe("The context menu controller", function () {
+            var mockScope,
+                mockActions,
+                controller;
+
+            beforeEach(function () {
+                mockActions = jasmine.createSpyObj("action", ["getActions"]);
+                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
+                controller = new ContextMenuController(mockScope);
+            });
+
+            it("watches scope that may change applicable actions", function () {
+                // The action capability
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "action",
+                    jasmine.any(Function)
+                );
+            });
+
+            it("populates the scope with grouped and ungrouped actions", function () {
+                mockScope.action = mockActions;
+                mockScope.parameters = { category: "test" };
+
+                mockActions.getActions.and.returnValue(["a", "b", "c"]);
+
+                // Call the watch
+                mockScope.$watch.calls.mostRecent().args[1]();
+
+                // Should have grouped and ungrouped actions in scope now
+                expect(mockScope.menuActions.length).toEqual(3);
+            });
+        });
+    }
+);

platform/commonUI/notification/bundle.js

@@ -23,13 +23,11 @@
 define([
     "./src/NotificationIndicatorController",
     "./src/NotificationIndicator",
-    "./src/NotificationService",
     "./res/notification-indicator.html",
     'legacyRegistry'
 ], function (
     NotificationIndicatorController,
     NotificationIndicator,
-    NotificationService,
     notificationIndicatorTemplate,
     legacyRegistry
 ) {
@@ -48,7 +46,7 @@ define([
                     "implementation": NotificationIndicatorController,
                     "depends": [
                         "$scope",
-                        "openmct",
+                        "notificationService",
                         "dialogService"
                     ]
                 }
@@ -63,7 +61,7 @@ define([
                 {
                     "key": "notificationService",
                     "implementation": function (openmct) {
-                        return new NotificationService.default(openmct);
+                        return openmct.notifications;
                     },
                     "depends": [
                         "openmct"

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

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

platform/commonUI/notification/src/NotificationIndicatorController.js

@@ -35,33 +35,20 @@ define(
          * @param dialogService
          * @constructor
          */
-        function NotificationIndicatorController($scope, openmct, dialogService) {
+        function NotificationIndicatorController($scope, notificationService, dialogService) {
-            $scope.notifications = openmct.notifications.notifications;
+            $scope.notifications = notificationService.notifications;
-            $scope.highest = openmct.notifications.highest;
+            $scope.highest = notificationService.highest;
 
             /**
              * 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: notificationsList
+                        messages: notificationService.notifications
                     }
                 });
 

platform/commonUI/notification/src/NotificationService.js

@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-export default class NotificationService {
-    constructor(openmct) {
-        this.openmct = openmct;
-    }
-    info(message) {
-        if (typeof message === 'string') {
-            return this.openmct.notifications.info(message);
-        } else {
-            if (message.hasOwnProperty('progress')) {
-                return this.openmct.notifications.progress(message.title, message.progress, message.progressText);
-            } else {
-                return this.openmct.notifications.info(message.title);
-            }
-        }
-    }
-    alert(message) {
-        if (typeof message === 'string') {
-            return this.openmct.notifications.alert(message);
-        } else {
-            return this.openmct.notifications.alert(message.title);
-        }
-    }
-    error(message) {
-        if (typeof message === 'string') {
-            return this.openmct.notifications.error(message);
-        } else {
-            return this.openmct.notifications.error(message.title);
-        }
-    }
-    notify(options) {
-        switch (options.severity) {
-        case 'info':
-            return this.info(options);
-        case 'alert':
-            return this.alert(options);
-        case 'error':
-            return this.error(options);
-        }
-    }
-    getAllNotifications() {
-        return this.openmct.notifications.notifications;
-    }
-}

platform/containment/bundle.js

@@ -58,8 +58,7 @@ define([
                     "category": "action",
                     "implementation": ComposeActionPolicy,
                     "depends": [
-                        "$injector",
+                        "$injector"
-                        "openmct"
                     ],
                     "message": "Objects of this type cannot contain objects of that type."
                 },

platform/containment/src/ComposeActionPolicy.js

@@ -36,11 +36,10 @@ define(
          * @memberof platform/containment
          * @implements {Policy.<Action, ActionContext>}
          */
-        function ComposeActionPolicy($injector, openmct) {
+        function ComposeActionPolicy($injector) {
             this.getPolicyService = function () {
                 return $injector.get('policyService');
             };
-            this.openmct = openmct;
         }
 
         ComposeActionPolicy.prototype.allowComposition = function (containerObject, selectedObject) {
@@ -50,8 +49,11 @@ define(
 
             // ...and delegate to the composition policy
             return containerObject.getId() !== selectedObject.getId() &&
-                this.openmct.composition.checkPolicy(containerObject.useCapability('adapter'),
+                this.policyService.allow(
-                    selectedObject.useCapability('adapter'));
+                    'composition',
+                    containerObject,
+                    selectedObject
+                );
         };
 
         /**

platform/core/src/runs/TransactingMutationListener.js

@@ -43,10 +43,23 @@ 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)) {
-                persistence.persist();
+
+                if (!wasActive) {
+                    transactionService.startTransaction();
+                }
+
+                transactionService.addToTransaction(
+                    persistence.persist.bind(persistence),
+                    persistence.refresh.bind(persistence)
+                );
+
+                if (!wasActive) {
+                    transactionService.commit();
+                }
             }
         });
     }

platform/core/test/runs/TransactingMutationListenerSpec.js

@@ -24,27 +24,22 @@ define(
     ["../../src/runs/TransactingMutationListener"],
     function (TransactingMutationListener) {
 
-        describe("TransactingMutationListener", function () {
+        xdescribe("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(
@@ -57,24 +52,18 @@ define(
                 );
 
                 mockTopic.and.callFake(function (t) {
-                    expect(t).toBe('mutation');
+                    return (t === 'mutation') && mockMutationTopic;
-                    return mockMutationTopic;
                 });
 
-                mockDomainObject.getId.and.returnValue('mockId');
                 mockDomainObject.getCapability.and.callFake(function (c) {
-                    expect(c).toBe('persistence');
+                    return (c === 'persistence') && mockPersistence;
-                    return mockPersistence;
                 });
-                mockModel = {};
-                mockDomainObject.getModel.and.returnValue(mockModel);
 
                 mockPersistence.persisted.and.returnValue(true);
 
                 return new TransactingMutationListener(
                     mockTopic,
-                    mockTransactionService,
+                    mockTransactionService
-                    mockCacheService
                 );
             });
 
@@ -83,27 +72,48 @@ define(
                     .toHaveBeenCalledWith(jasmine.any(Function));
             });
 
-            it("calls persist if the model has changed", function () {
+            [false, true].forEach(function (isActive) {
-                mockModel.persisted = Date.now();
+                var verb = isActive ? "is" : "isn't";
 
-                //Mark the model dirty by setting the mutated date later than the last persisted date.
+                function onlyWhenInactive(expectation) {
-                mockModel.modified = mockModel.persisted + 1;
+                    return isActive ? expectation.not : expectation;
+                }
 
-                mockMutationTopic.listen.calls.mostRecent()
+                describe("when a transaction " + verb + " active", function () {
-                    .args[0](mockDomainObject);
+                    var innerVerb = isActive ? "does" : "doesn't";
 
-                expect(mockPersistence.persist).toHaveBeenCalled();
+                    beforeEach(function () {
-            });
+                        mockTransactionService.isActive.and.returnValue(isActive);
+                    });
 
-            it("does not call persist if the model has not changed", function () {
+                    describe("and mutation occurs", function () {
-                mockModel.persisted = Date.now();
+                        beforeEach(function () {
+                            mockMutationTopic.listen.calls.mostRecent()
+                                .args[0](mockDomainObject);
+                        });
 
-                mockModel.modified = mockModel.persisted;
 
-                mockMutationTopic.listen.calls.mostRecent()
+                        it(innerVerb + " start a new transaction", function () {
-                    .args[0](mockDomainObject);
+                            onlyWhenInactive(
+                                expect(mockTransactionService.startTransaction)
+                            ).toHaveBeenCalled();
+                        });
 
-                expect(mockPersistence.persist).not.toHaveBeenCalled();
+                        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();
+                        });
+                    });
+                });
             });
         });
     }

platform/entanglement/bundle.js

@@ -24,6 +24,7 @@ define([
     "./src/actions/MoveAction",
     "./src/actions/CopyAction",
     "./src/actions/LinkAction",
+    "./src/actions/GoToOriginalAction",
     "./src/actions/SetPrimaryLocationAction",
     "./src/services/LocatingCreationDecorator",
     "./src/services/LocatingObjectDecorator",
@@ -40,6 +41,7 @@ define([
     MoveAction,
     CopyAction,
     LinkAction,
+    GoToOriginalAction,
     SetPrimaryLocationAction,
     LocatingCreationDecorator,
     LocatingObjectDecorator,
@@ -102,6 +104,14 @@ 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",
@@ -160,7 +170,7 @@ define([
                     "description": "Provides a service for moving objects",
                     "implementation": MoveService,
                     "depends": [
-                        "openmct",
+                        "policyService",
                         "linkService",
                         "$q"
                     ]
@@ -171,7 +181,7 @@ define([
                     "description": "Provides a service for linking objects",
                     "implementation": LinkService,
                     "depends": [
-                        "openmct"
+                        "policyService"
                     ]
                 },
                 {
@@ -182,7 +192,7 @@ define([
                     "depends": [
                         "$q",
                         "policyService",
-                        "openmct"
+                        "now"
                     ]
                 },
                 {

platform/entanglement/src/actions/GoToOriginalAction.js

@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * 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;
+    }
+);
+

platform/entanglement/src/services/CopyService.js

@@ -33,10 +33,9 @@ define(
          * @memberof platform/entanglement
          * @implements {platform/entanglement.AbstractComposeService}
          */
-        function CopyService($q, policyService, openmct) {
+        function CopyService($q, policyService) {
             this.$q = $q;
             this.policyService = policyService;
-            this.openmct = openmct;
         }
 
         CopyService.prototype.validate = function (object, parentCandidate) {
@@ -46,7 +45,11 @@ define(
             if (parentCandidate.getId() === object.getId()) {
                 return false;
             }
-            return this.openmct.composition.checkPolicy(parentCandidate.useCapability('adapter'), object.useCapability('adapter'));
+            return this.policyService.allow(
+                "composition",
+                parentCandidate,
+                object
+            );
         };
 
         /**

platform/entanglement/src/services/LinkService.js

@@ -32,8 +32,8 @@ define(
          * @memberof platform/entanglement
          * @implements {platform/entanglement.AbstractComposeService}
          */
-        function LinkService(openmct) {
+        function LinkService(policyService) {
-            this.openmct = openmct;
+            this.policyService = policyService;
         }
 
         LinkService.prototype.validate = function (object, parentCandidate) {
@@ -49,7 +49,11 @@ define(
             if (parentCandidate.getModel().composition.indexOf(object.getId()) !== -1) {
                 return false;
             }
-            return this.openmct.composition.checkPolicy(parentCandidate.useCapability('adapter'), object.useCapability('adapter'));
+            return this.policyService.allow(
+                "composition",
+                parentCandidate,
+                object
+            );
         };
 
         LinkService.prototype.perform = function (object, parentObject) {

platform/entanglement/src/services/MoveService.js

@@ -31,8 +31,8 @@ define(
          * @memberof platform/entanglement
          * @implements {platform/entanglement.AbstractComposeService}
          */
-        function MoveService(openmct, linkService) {
+        function MoveService(policyService, linkService) {
-            this.openmct = openmct;
+            this.policyService = policyService;
             this.linkService = linkService;
         }
 
@@ -53,9 +53,10 @@ define(
             if (parentCandidate.getModel().composition.indexOf(object.getId()) !== -1) {
                 return false;
             }
-            return this.openmct.composition.checkPolicy(
+            return this.policyService.allow(
-                parentCandidate.useCapability('adapter'),
+                "composition",
-                object.useCapability('adapter')
+                parentCandidate,
+                object
             );
         };
 

platform/entanglement/test/actions/GoToOriginalActionSpec.js

@@ -0,0 +1,93 @@
+/*****************************************************************************
+ * 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');
+            });
+
+        });
+    }
+);

platform/exporters/bundle.js

@@ -32,7 +32,7 @@ define([
                 {
                     key: "exportService",
                     implementation: function () {
-                        return new ExportService(saveAs.saveAs);
+                        return new ExportService(saveAs);
                     }
                 }
             ],

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

@@ -19,14 +19,16 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="c-clock l-time-display" ng-controller="ClockController as clock">
+<div class="l-time-display l-digital l-clock s-clock" ng-controller="ClockController as clock">
-	<div class="c-clock__timezone">
+	<div class="l-elem-wrapper">
-		{{clock.zone()}}
+	    <span class="l-elem timezone">
-	</div>
+	        {{clock.zone()}}
-	<div class="c-clock__value">
+	    </span>
-		{{clock.text()}}
+	    <span class="l-elem value active">
-	</div>
+	        {{clock.text()}}
-	<div class="c-clock__ampm">
+	    </span>
-		{{clock.ampm()}}
+	    <span class="l-elem ampm">
+	        {{clock.ampm()}}
+	    </span>
 	</div>
 </div>

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

@@ -19,19 +19,21 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="c-timer is-{{timer.timerState}}" ng-controller="TimerController as timer">
+<div class="l-time-display l-digital l-timer s-timer s-state-{{timer.timerState}}" ng-controller="TimerController as timer">
-    <div class="c-timer__controls">
+	<div class="l-elem-wrapper l-flex-row">
-        <button ng-click="timer.clickStopButton()"
+        <div class="l-elem-wrapper l-flex-row controls">
-                ng-hide="timer.timerState == 'stopped'"
+            <a ng-click="timer.clickStopButton()"
-                title="Reset"
+               title="Stop"
-                class="c-timer__ctrl-reset c-icon-button c-icon-button--major icon-reset"></button>
+               class="flex-elem s-icon-button t-btn-stop icon-box"></a>
-        <button ng-click="timer.clickButton()"
+            <a ng-click="timer.clickButton()"
-                title="{{timer.buttonText()}}"
+               title="{{timer.buttonText()}}"
-                class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major {{timer.buttonCssClass()}}"></button>
+               class="flex-elem s-icon-button t-btn-pauseplay {{timer.buttonCssClass()}}"></a>
-    </div>
+        </div>
-    <div class="c-timer__direction {{timer.signClass()}}"
+	    <span class="flex-elem l-value {{timer.signClass()}}">
-        ng-hide="!timer.signClass()"></div>
+	        <span class="value"
-	<div class="c-timer__value">{{timer.text() || "--:--:--"}}
+		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}
+            </span>
+	    </span>
+	    <span ng-controller="RefreshingController"></span>
 	</div>
-	<span class="c-timer__ng-controller u-contents" ng-controller="RefreshingController"></span>
 </div>

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

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

platform/features/fixed/bundle.js

@@ -0,0 +1,399 @@
+/*****************************************************************************
+ * 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([
+    "../layout/res/templates/fixed.html",
+    'legacyRegistry'
+], function (
+    fixedTemplate,
+    legacyRegistry
+) {
+
+    legacyRegistry.register("platform/features/fixed", {
+        "name": "Fixed position components.",
+        "description": "Plug in adding Fixed Position object type.",
+        "extensions": {
+            "views": [
+                {
+                    "key": "fixed-display",
+                    "name": "Fixed Position Display",
+                    "cssClass": "icon-box-with-dashed-lines",
+                    "type": "telemetry.fixed",
+                    "template": fixedTemplate,
+                    "uses": [],
+                    "editable": true
+                }
+            ],
+            "toolbars": [
+                {
+                    name: "Fixed Position Toolbar",
+                    key: "fixed.position",
+                    description: "Toolbar for the selected element inside a fixed position display.",
+                    forSelection: function (selection) {
+                        if (!selection) {
+                            return;
+                        }
+
+                        return (
+                            selection[0] && selection[0].context.elementProxy &&
+                            selection[1] && selection[1].context.item.type === 'telemetry.fixed' ||
+                            selection[0] && selection[0].context.item.type === 'telemetry.fixed'
+                        );
+                    },
+                    toolbar: function (selection) {
+                        var imageProperties = ["add", "remove", "order", "stroke", "useGrid", "x", "y", "height", "width", "url"];
+                        var boxProperties = ["add", "remove", "order", "stroke", "useGrid", "x", "y", "height", "width", "fill"];
+                        var textProperties = ["add", "remove", "order", "stroke", "useGrid", "x", "y", "height", "width", "fill", "color", "size", "text"];
+                        var lineProperties = ["add", "remove", "order", "stroke", "useGrid", "x", "y", "x2", "y2"];
+                        var telemetryProperties = ["add", "remove", "order", "stroke", "useGrid", "x", "y", "height", "width", "fill", "color", "size", "titled"];
+                        var fixedPageProperties = ["add"];
+
+                        var properties = [],
+                            fixedItem = selection[0] && selection[0].context.item,
+                            elementProxy = selection[0] && selection[0].context.elementProxy,
+                            domainObject = selection[1] && selection[1].context.item,
+                            path;
+
+                        if (elementProxy) {
+                            var type = elementProxy.element.type;
+                            path = "configuration['fixed-display'].elements[" + elementProxy.index + "]";
+                            properties =
+                                type === 'fixed.image' ? imageProperties :
+                                    type === 'fixed.text' ? textProperties :
+                                        type === 'fixed.box' ? boxProperties :
+                                            type === 'fixed.line' ? lineProperties :
+                                                type === 'fixed.telemetry' ? telemetryProperties : [];
+                        } else if (fixedItem) {
+                            properties = domainObject && domainObject.type === 'layout' ? [] : fixedPageProperties;
+                        }
+
+                        return [
+                            {
+                                control: "menu-button",
+                                domainObject: domainObject || selection[0].context.item,
+                                method: function (value) {
+                                    selection[0].context.fixedController.add(value);
+                                },
+                                key: "add",
+                                cssClass: "icon-plus",
+                                text: "Add",
+                                options: [
+                                    {
+                                        "name": "Box",
+                                        "cssClass": "icon-box",
+                                        "key": "fixed.box"
+                                    },
+                                    {
+                                        "name": "Line",
+                                        "cssClass": "icon-line-horz",
+                                        "key": "fixed.line"
+                                    },
+                                    {
+                                        "name": "Text",
+                                        "cssClass": "icon-T",
+                                        "key": "fixed.text"
+                                    },
+                                    {
+                                        "name": "Image",
+                                        "cssClass": "icon-image",
+                                        "key": "fixed.image"
+                                    }
+                                ]
+                            },
+                            {
+                                control: "menu-button",
+                                domainObject: domainObject,
+                                method: function (value) {
+                                    selection[0].context.fixedController.order(
+                                        selection[0].context.elementProxy,
+                                        value
+                                    );
+                                },
+                                key: "order",
+                                cssClass: "icon-layers",
+                                title: "Layering",
+                                description: "Move the selected object above or below other objects",
+                                options: [
+                                    {
+                                        "name": "Move to Top",
+                                        "cssClass": "icon-arrow-double-up",
+                                        "key": "top"
+                                    },
+                                    {
+                                        "name": "Move Up",
+                                        "cssClass": "icon-arrow-up",
+                                        "key": "up"
+                                    },
+                                    {
+                                        "name": "Move Down",
+                                        "cssClass": "icon-arrow-down",
+                                        "key": "down"
+                                    },
+                                    {
+                                        "name": "Move to Bottom",
+                                        "cssClass": "icon-arrow-double-down",
+                                        "key": "bottom"
+                                    }
+                                ]
+                            },
+                            {
+                                control: "color",
+                                domainObject: domainObject,
+                                property: path + ".fill",
+                                cssClass: "icon-paint-bucket",
+                                title: "Fill color",
+                                description: "Set fill color",
+                                key: 'fill'
+                            },
+                            {
+                                control: "color",
+                                domainObject: domainObject,
+                                property: path + ".stroke",
+                                cssClass: "icon-line-horz",
+                                title: "Border color",
+                                description: "Set border color",
+                                key: 'stroke'
+                            },
+                            {
+                                control: "dialog-button",
+                                domainObject: domainObject,
+                                property: path + ".url",
+                                cssClass: "icon-image",
+                                title: "Image Properties",
+                                description: "Edit image properties",
+                                key: 'url',
+                                dialog: {
+                                    control: "textfield",
+                                    name: "Image URL",
+                                    cssClass: "l-input-lg",
+                                    required: true
+                                }
+                            },
+                            {
+                                control: "color",
+                                domainObject: domainObject,
+                                property: path + ".color",
+                                cssClass: "icon-T",
+                                title: "Text color",
+                                mandatory: true,
+                                description: "Set text color",
+                                key: 'color'
+                            },
+                            {
+                                control: "select",
+                                domainObject: domainObject,
+                                property: path + ".size",
+                                title: "Text size",
+                                description: "Set text size",
+                                "options": [9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96].map(function (size) {
+                                    return { "name": size + " px", "value": size + "px" };
+                                }),
+                                key: 'size'
+                            },
+                            {
+                                control: "numberfield",
+                                domainObject: domainObject,
+                                property: path + ".x",
+                                text: "X",
+                                name: "X",
+                                key: "x",
+                                cssClass: "l-input-sm",
+                                min: "0"
+                            },
+                            {
+                                control: "numberfield",
+                                domainObject: domainObject,
+                                property: path + ".y",
+                                text: "Y",
+                                name: "Y",
+                                key: "y",
+                                cssClass: "l-input-sm",
+                                min: "0"
+                            },
+                            {
+                                control: "numberfield",
+                                domainObject: domainObject,
+                                property: path + ".x",
+                                text: "X1",
+                                name: "X1",
+                                key: "x1",
+                                cssClass: "l-input-sm",
+                                min: "0"
+                            },
+                            {
+                                control: "numberfield",
+                                domainObject: domainObject,
+                                property: path + ".y",
+                                text: "Y1",
+                                name: "Y1",
+                                key: "y1",
+                                cssClass: "l-input-sm",
+                                min: "0"
+                            },
+                            {
+                                control: "numberfield",
+                                domainObject: domainObject,
+                                property: path + ".x2",
+                                text: "X2",
+                                name: "X2",
+                                key: "x2",
+                                cssClass: "l-input-sm",
+                                min: "0"
+                            },
+                            {
+                                control: "numberfield",
+                                domainObject: domainObject,
+                                property: path + ".y2",
+                                text: "Y2",
+                                name: "Y2",
+                                key: "y2",
+                                cssClass: "l-input-sm",
+                                min: "0"
+                            },
+                            {
+                                control: "numberfield",
+                                domainObject: domainObject,
+                                property: path + ".height",
+                                text: "H",
+                                name: "H",
+                                key: "height",
+                                cssClass: "l-input-sm",
+                                description: "Resize object height",
+                                min: "1"
+                            },
+                            {
+                                control: "numberfield",
+                                domainObject: domainObject,
+                                property: path + ".width",
+                                text: "W",
+                                name: "W",
+                                key: "width",
+                                cssClass: "l-input-sm",
+                                description: "Resize object width",
+                                min: "1"
+                            },
+                            {
+                                control: "checkbox",
+                                domainObject: domainObject,
+                                property: path + ".useGrid",
+                                name: "Snap to Grid",
+                                key: "useGrid"
+                            },
+                            {
+                                control: "dialog-button",
+                                domainObject: domainObject,
+                                property: path + ".text",
+                                cssClass: "icon-gear",
+                                title: "Text Properties",
+                                description: "Edit text properties",
+                                key: "text",
+                                dialog: {
+                                    control: "textfield",
+                                    name: "Text",
+                                    required: true
+                                }
+                            },
+                            {
+                                control: "checkbox",
+                                domainObject: domainObject,
+                                property: path + ".titled",
+                                name: "Show Title",
+                                key: "titled"
+                            },
+                            {
+                                control: "button",
+                                domainObject: domainObject,
+                                method: function () {
+                                    selection[0].context.fixedController.remove(
+                                        selection[0].context.elementProxy
+                                    );
+                                },
+                                key: "remove",
+                                cssClass: "icon-trash"
+                            }
+                        ].filter(function (item) {
+                            var filtered;
+
+                            properties.forEach(function (property) {
+                                if (item.property && item.key === property ||
+                                    item.method && item.key === property) {
+                                    filtered = item;
+                                }
+                            });
+
+                            return filtered;
+                        });
+                    }
+                }
+            ],
+            "types": [
+                {
+                    "key": "telemetry.fixed",
+                    "name": "Fixed Position Display",
+                    "cssClass": "icon-box-with-dashed-lines",
+                    "description": "Collect and display telemetry elements in " +
+                    "alphanumeric format in a simple canvas workspace. " +
+                    "Elements can be positioned and sized. " +
+                    "Lines, boxes and images can be added as well.",
+                    "priority": 899,
+                    "delegates": [
+                        "telemetry"
+                    ],
+                    "features": "creation",
+                    "contains": [
+                        {
+                            "has": "telemetry"
+                        }
+                    ],
+                    "model": {
+                        "layoutGrid": [64, 16],
+                        "composition": []
+                    },
+                    "properties": [
+                        {
+                            "name": "Layout Grid",
+                            "control": "composite",
+                            "items": [
+                                {
+                                    "name": "Horizontal grid (px)",
+                                    "control": "textfield",
+                                    "cssClass": "l-input-sm l-numeric"
+                                },
+                                {
+                                    "name": "Vertical grid (px)",
+                                    "control": "textfield",
+                                    "cssClass": "l-input-sm l-numeric"
+                                }
+                            ],
+                            "pattern": "^(\\d*[1-9]\\d*)?$",
+                            "property": "layoutGrid",
+                            "conversion": "number[]"
+                        }
+                    ],
+                    "views": [
+                        "fixed-display"
+                    ]
+                }
+            ]
+        }
+    });
+});

platform/features/hyperlink/bundle.js

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

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

@@ -1,18 +1,22 @@
-<div class="t-imagery c-imagery" ng-controller="ImageryController as imagery">
+<div class="t-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">
+    <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">
+        ng-mouseenter="showLocalControls = true;"
-            <span class="holder flex-elem grows c-imagery__lc__sliders">
+        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">
                 <input class="icon-brightness" type="range"
                        min="0"
                        max="500"
-                       ng-model="filters.brightness" />
+                       ng-model="filters.brightness">
+                </input>
                 <input class="icon-contrast" type="range"
                        min="0"
                        max="500"
-                       ng-model="filters.contrast" />
+                       ng-model="filters.contrast">
+                </input>
             </span>
-            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
+            <span class="holder flex-elem t-reset-btn-holder">
                 <a class="s-icon-button icon-reset t-btn-reset"
                    ng-click="filters = { brightness: 100, contrast: 100 }"></a>
             </span>
@@ -29,14 +33,14 @@
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="l-datetime-w flex-elem grows">
-                <a class="c-button show-thumbs sm hidden icon-thumbs-strip"
+                <a class="s-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="c-button icon-pause pause-play"
+                <a class="s-button pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
-                    ng-class="{ 'is-paused': imagery.paused() }"></a>
+                    ng-class="{ paused: imagery.paused() }"></a>
                 <a href=""
                     class="s-button l-mag s-mag vsm icon-reset"
                     ng-click="clipped = false"

platform/features/layout/bundle.js

@@ -0,0 +1,356 @@
+/*****************************************************************************
+ * 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/LayoutController",
+    "./src/FixedController",
+    "./src/LayoutCompositionPolicy",
+    './src/MCTTriggerModal',
+    "./res/templates/layout.html",
+    "./res/templates/fixed.html",
+    "./res/templates/frame.html",
+    "./res/templates/elements/telemetry.html",
+    "./res/templates/elements/box.html",
+    "./res/templates/elements/line.html",
+    "./res/templates/elements/text.html",
+    "./res/templates/elements/image.html",
+    'legacyRegistry'
+], function (
+    LayoutController,
+    FixedController,
+    LayoutCompositionPolicy,
+    MCTTriggerModal,
+    layoutTemplate,
+    fixedTemplate,
+    frameTemplate,
+    telemetryTemplate,
+    boxTemplate,
+    lineTemplate,
+    textTemplate,
+    imageTemplate,
+    legacyRegistry
+) {
+
+    legacyRegistry.register("platform/features/layout", {
+        "name": "Layout components.",
+        "description": "Plug in adding Layout capabilities.",
+        "extensions": {
+            "views": [
+                {
+                    "key": "layout",
+                    "name": "Display Layout",
+                    "cssClass": "icon-layout",
+                    "type": "layout",
+                    "template": layoutTemplate,
+                    "editable": true,
+                    "uses": []
+                },
+                {
+                    "key": "fixed",
+                    "name": "Fixed Position",
+                    "cssClass": "icon-box-with-dashed-lines",
+                    "type": "telemetry.panel",
+                    "template": fixedTemplate,
+                    "uses": [
+                        "composition"
+                    ],
+                    "toolbar": {
+                        "sections": [
+                            {
+                                "items": [
+                                    {
+                                        "method": "add",
+                                        "cssClass": "icon-plus",
+                                        "control": "menu-button",
+                                        "text": "Add",
+                                        "title": "Add",
+                                        "description": "Add new items",
+                                        "options": [
+                                            {
+                                                "name": "Box",
+                                                "cssClass": "icon-box",
+                                                "key": "fixed.box"
+                                            },
+                                            {
+                                                "name": "Line",
+                                                "cssClass": "icon-line-horz",
+                                                "key": "fixed.line"
+                                            },
+                                            {
+                                                "name": "Text",
+                                                "cssClass": "icon-T",
+                                                "key": "fixed.text"
+                                            },
+                                            {
+                                                "name": "Image",
+                                                "cssClass": "icon-image",
+                                                "key": "fixed.image"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "items": [
+                                    {
+                                        "method": "order",
+                                        "cssClass": "icon-layers",
+                                        "control": "menu-button",
+                                        "title": "Layering",
+                                        "description": "Move the selected object above or below other objects",
+                                        "options": [
+                                            {
+                                                "name": "Move to Top",
+                                                "cssClass": "icon-arrow-double-up",
+                                                "key": "top"
+                                            },
+                                            {
+                                                "name": "Move Up",
+                                                "cssClass": "icon-arrow-up",
+                                                "key": "up"
+                                            },
+                                            {
+                                                "name": "Move Down",
+                                                "cssClass": "icon-arrow-down",
+                                                "key": "down"
+                                            },
+                                            {
+                                                "name": "Move to Bottom",
+                                                "cssClass": "icon-arrow-double-down",
+                                                "key": "bottom"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "property": "fill",
+                                        "cssClass": "icon-paint-bucket",
+                                        "title": "Fill color",
+                                        "description": "Set fill color",
+                                        "control": "color"
+                                    },
+                                    {
+                                        "property": "stroke",
+                                        "cssClass": "icon-line-horz",
+                                        "title": "Border color",
+                                        "description": "Set border color",
+                                        "control": "color"
+                                    },
+                                    {
+                                        "property": "color",
+                                        "cssClass": "icon-T",
+                                        "title": "Text color",
+                                        "description": "Set text color",
+                                        "mandatory": true,
+                                        "control": "color"
+                                    },
+                                    {
+                                        "property": "url",
+                                        "cssClass": "icon-image",
+                                        "control": "dialog-button",
+                                        "title": "Image Properties",
+                                        "description": "Edit image properties",
+                                        "dialog": {
+                                            "control": "textfield",
+                                            "name": "Image URL",
+                                            "cssClass": "l-input-lg",
+                                            "required": true
+                                        }
+                                    },
+                                    {
+                                        "property": "text",
+                                        "cssClass": "icon-gear",
+                                        "control": "dialog-button",
+                                        "title": "Text Properties",
+                                        "description": "Edit text properties",
+                                        "dialog": {
+                                            "control": "textfield",
+                                            "name": "Text",
+                                            "required": true
+                                        }
+                                    },
+                                    {
+                                        "method": "showTitle",
+                                        "cssClass": "icon-two-parts-both",
+                                        "control": "button",
+                                        "title": "Show title",
+                                        "description": "Show telemetry element title"
+                                    },
+                                    {
+                                        "method": "hideTitle",
+                                        "cssClass": "icon-two-parts-one-only",
+                                        "control": "button",
+                                        "title": "Hide title",
+                                        "description": "Hide telemetry element title"
+                                    }
+                                ]
+                            },
+                            {
+                                "items": [
+                                    {
+                                        "method": "remove",
+                                        "control": "button",
+                                        "cssClass": "icon-trash",
+                                        "title": "Delete",
+                                        "description": "Delete the selected item"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                }
+            ],
+            "representations": [
+                {
+                    "key": "frame",
+                    "template": frameTemplate
+                }
+            ],
+            "directives": [
+                {
+                    "key": "mctTriggerModal",
+                    "implementation": MCTTriggerModal,
+                    "depends": [
+                        "$document"
+                    ]
+                }
+            ],
+            "controllers": [
+                {
+                    "key": "LayoutController",
+                    "implementation": LayoutController,
+                    "depends": [
+                        "$scope",
+                        "$element",
+                        "openmct"
+                    ]
+                },
+                {
+                    "key": "FixedController",
+                    "implementation": FixedController,
+                    "depends": [
+                        "$scope",
+                        "$q",
+                        "dialogService",
+                        "openmct",
+                        "$element"
+                    ]
+                }
+            ],
+            "templates": [
+                {
+                    "key": "fixed.telemetry",
+                    "template": telemetryTemplate
+                },
+                {
+                    "key": "fixed.box",
+                    "template": boxTemplate
+                },
+                {
+                    "key": "fixed.line",
+                    "template": lineTemplate
+                },
+                {
+                    "key": "fixed.text",
+                    "template": textTemplate
+                },
+                {
+                    "key": "fixed.image",
+                    "template": imageTemplate
+                }
+            ],
+            "policies": [
+                {
+                    "category": "composition",
+                    "implementation": LayoutCompositionPolicy
+                }
+            ],
+            "toolbars": [
+                {
+                    name: "Display Layout Toolbar",
+                    key: "layout",
+                    description: "A toolbar for objects inside a display layout.",
+                    forSelection: function (selection) {
+                        // Apply the layout toolbar if the selected object is inside a layout.
+                        return (selection && selection[1] && selection[1].context.item.type === 'layout');
+                    },
+                    toolbar: function (selection) {
+                        return [
+                            {
+                                control: "checkbox",
+                                name: "Show frame",
+                                domainObject: selection[1].context.item,
+                                property: "configuration.layout.panels[" + selection[0].context.oldItem.id + "].hasFrame"
+                            }
+                        ];
+                    }
+                }
+            ],
+            "types": [
+                {
+                    "key": "layout",
+                    "name": "Display Layout",
+                    "cssClass": "icon-layout",
+                    "description": "Assemble other objects and components together into a reusable screen layout. Working in a simple canvas workspace, simply drag in the objects you want, position and size them. Save your design and view or edit it at any time.",
+                    "priority": 900,
+                    "features": "creation",
+                    "model": {
+                        "composition": [],
+                        configuration: {
+                            layout: {
+                                panels: {
+
+                                }
+                            }
+                        }
+                    },
+                    "properties": [
+                        {
+                            "name": "Layout Grid",
+                            "control": "composite",
+                            "pattern": "^(\\d*[1-9]\\d*)?$",
+                            "items": [
+                                {
+                                    "name": "Horizontal grid (px)",
+                                    "control": "textfield",
+                                    "cssClass": "l-input-sm l-numeric"
+                                },
+                                {
+                                    "name": "Vertical grid (px)",
+                                    "control": "textfield",
+                                    "cssClass": "l-input-sm l-numeric"
+                                }
+                            ],
+                            "key": "layoutGrid",
+                            "conversion": "number[]"
+                        },
+                        {
+                            "name": "Advanced",
+                            "control": "textfield",
+                            "key": "layoutAdvancedCss",
+                            "cssClass": "l-input-lg"
+                        }
+                    ]
+                }
+            ]
+        }
+    });
+});

platform/features/layout/res/templates/elements/box.html

@@ -0,0 +1,26 @@
+<!--
+ 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.
+-->
+<div
+	class="l-fixed-position-box"
+	ng-style="{ background: ngModel.fill(), border: '1px ' + ngModel.stroke() + ' solid' }"
+	>
+</div>

platform/features/layout/res/templates/elements/image.html

@@ -0,0 +1,26 @@
+<!--
+ 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.
+-->
+<div
+	ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
+    class="l-fixed-position-image"
+	>
+</div>

platform/features/layout/res/templates/elements/line.html

@@ -0,0 +1,31 @@
+<!--
+ 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.
+-->
+<svg ng-attr-width="{{ngModel.getGridSize()[0] * ngModel.width()}}"
+     ng-attr-height="{{ngModel.getGridSize()[1] * ngModel.height()}}">
+    <line ng-attr-x1="{{ngModel.getGridSize()[0] * ngModel.x1() + 1}}"
+          ng-attr-y1="{{ngModel.getGridSize()[1] * ngModel.y1() + 1}}"
+          ng-attr-x2="{{ngModel.getGridSize()[0] * ngModel.x2() + 1}}"
+          ng-attr-y2="{{ngModel.getGridSize()[1] * ngModel.y2() + 1}}"
+          ng-attr-stroke="{{ngModel.stroke()}}"
+          stroke-width="2">
+    </line>
+</svg>

platform/features/layout/res/templates/elements/telemetry.html

@@ -19,18 +19,21 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span ng-controller="SnapshotPreviewController" 
+<div
-    class='form-control shell'>
+    class="l-fixed-position-text l-telemetry"
-    <span class='field control {{structure.cssClass}}'>
+    ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color(), 'font-size': ngModel.size() }"
-        <image 
+    >
-               class="c-ne__embed__snap-thumb"
+    <span
-               src="{{imageUrl || structure.src}}"
+        class="l-elem l-value l-obj-val-format"
-               ng-click="previewImage(imageUrl || structure.src)"
+        data-value="{{ngModel.value}}"
-               name="mctControl">
+        ng-class="ngModel.cssClass"
-        </image>
+        >
-        <br>
+        {{ngModel.value}}
-        <a title="Annotate" class="s-button icon-pencil" ng-click="annotateImage(ngModel, field, imageUrl || structure.src)">
-            <span class="title-label">Annotate</span>
-        </a>
     </span>
-</span>
+    <span
+        class="l-elem l-title"
+        ng-show="ngModel.element.titled"
+        >
+        {{ngModel.name}}
+    </span>
+</div>

platform/features/layout/res/templates/elements/text.html

@@ -0,0 +1,27 @@
+<!--
+ 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.
+-->
+<div
+	class="l-fixed-position-text l-static-text"
+	ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color(), 'font-size': ngModel.size() }"
+	>
+    {{ngModel.element.text}}
+</div>