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

@@ -33,13 +33,7 @@ define([
                     formatString: '%0.2f',
                     hints: {
                         range: 1
-                    },
-                    filters: ['equals']
-                    /*
-                    filters: [{
-                        comparator: 'equals',
-                        possibleValues: [1,2,3,4]
-                    }]*/
+                    }
                 },
                 {
                     key: "cos",

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/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))
-                    let progressText = ["Estimated time" +
+                    notificationModel.progress = Math.min(100, Math.floor(notificationModel.progress + Math.random() * 30));
+                    notificationModel.progressText = ["Estimated time" +
                     " remaining:" +
-                    " about ", 60 - Math.floor((progress / 100) * 60), " seconds"].join(" ");
-                    notification.progress(progress, progressText);
-
-                    if (progress < 100) {
+                    " about ", 60 - Math.floor((notificationModel.progress / 100) * 60), " seconds"].join(" ");
+                    if (notificationModel.progress < 100) {
                         $timeout(function () {
                             incrementProgress(notificationModel);
                         }, 1000);
                     }
                 }
 
-                notification = notificationService.notify(notificationModel);
+                notificationService.notify(notificationModel);
                 incrementProgress();
             };
 

index.html

@@ -36,9 +36,7 @@
     <body>
     </body>
     <script>
-        const FIVE_MINUTES = 5 * 60 * 1000;
-        const THIRTY_MINUTES = 30 * 60 * 1000;
-
+        var THIRTY_MINUTES = 30 * 60 * 1000;
         [
             'example/eventGenerator',
             'example/styleguide'
@@ -69,8 +67,8 @@
                     timeSystem: 'utc',
                     clock: 'local',
                     clockOffsets: {
-                        start: - THIRTY_MINUTES,
-                        end: FIVE_MINUTES
+                        start: -25 * 60 * 1000,
+                        end: 5 * 60 * 1000
                     }
                 }
             ]
@@ -78,9 +76,8 @@
         openmct.install(openmct.plugins.SummaryWidget());
         openmct.install(openmct.plugins.Notebook());
         openmct.install(openmct.plugins.FolderView());
-        openmct.install(openmct.plugins.Tabs());
-        openmct.install(openmct.plugins.FlexibleLayout());
-        openmct.install(openmct.plugins.LADTable());
+        openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
+        openmct.time.timeSystem('utc');
         openmct.start();
     </script>
 </html>

package.json

@@ -58,6 +58,7 @@
     "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,7 @@ 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",
@@ -52,6 +53,7 @@ define([
     NavigateAction,
     OrphanNavigationHandler,
     NewTabAction,
+    FullscreenAction,
     WindowTitler,
     browseTemplate,
     browseObjectTemplate,
@@ -223,6 +225,13 @@ define([
                     "group": "windowing",
                     "cssClass": "icon-new-window",
                     "priority": "preferred"
+                },
+                {
+                    "key": "fullscreen",
+                    "implementation": FullscreenAction,
+                    "category": "view-control",
+                    "group": "windowing",
+                    "priority": "default"
                 }
             ],
             "runs": [
@@ -256,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/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/dialog/res/templates/message.html

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

platform/commonUI/dialog/src/OverlayService.js

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

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,
@@ -166,7 +188,7 @@ define([
                     "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",
-                        "openmct"
+                        "notificationService"
                     ],
                     "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/RemoveAction.js

@@ -42,9 +42,9 @@ define([
      * @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;
     }
 
@@ -53,6 +53,7 @@ define([
      */
     RemoveAction.prototype.perform = function () {
         var dialog,
+            dialogService = this.dialogService,
             domainObject = this.domainObject,
             navigationService = this.navigationService;
         /*
@@ -103,13 +104,13 @@ define([
          * capability. Based on object's location and selected object's location
          * user may be navigated to existing parent object
          */
-        function removeFromContext() {
-            var contextCapability = domainObject.getCapability('context'),
+        function removeFromContext(object) {
+            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);
         }
@@ -118,7 +119,7 @@ define([
          * Pass in the function to remove the domain object so it can be
          * associated with an 'OK' button press
          */
-        dialog = new RemoveDialog(this.openmct, domainObject, removeFromContext);
+        dialog = new RemoveDialog(dialogService, domainObject, removeFromContext);
         dialog.show();
     };
 

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

@@ -36,8 +36,8 @@ define([], function () {
      * @memberof platform/commonUI/edit
      * @constructor
      */
-    function RemoveDialog(openmct, domainObject, removeCallback) {
-        this.openmct = openmct;
+    function RemoveDialog(dialogService, domainObject, removeCallback) {
+        this.dialogService = dialogService;
         this.domainObject = domainObject;
         this.removeCallback = removeCallback;
     }
@@ -46,26 +46,31 @@ define([], function () {
      * Display a dialog to confirm the removal of a domain object.
      */
     RemoveDialog.prototype.show = function () {
-        let dialog = this.openmct.overlays.dialog({
-            title: 'Remove ' + this.domainObject.getModel().name,
-            iconClass: 'alert',
-            message: 'Warning! This action will permanently remove this object. Are you sure you want to continue?',
-            buttons: [
-                {
+        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: () => {
-                        this.removeCallback();
+                    callback: function () {
+                        removeCallback(domainObject);
                         dialog.dismiss();
                     }
                 },
-                {
-                    label: 'Cancel',
-                    callback: () => {
-                        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
         );
     };
 
@@ -169,17 +169,15 @@ function (
         }
 
         function saveAfterClone(clonedObject) {
-            return this.openmct.editor.save().then(() => {
-                // Force mutation for search indexing
-                clonedObject.useCapability('mutation', (model) => {
-                    return model;
-                });
-                return clonedObject;
-            })
+            return domainObject.getCapability("editor").save()
+                .then(resolveWith(clonedObject));
         }
 
         function finishEditing(clonedObject) {
-            return fetchObject(clonedObject.getId())
+            return domainObject.getCapability("editor").finish()
+                .then(function () {
+                    return fetchObject(clonedObject.getId());
+                });
         }
 
         function onSuccess(object) {

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.');
-
-            if (!this.openmct.editor.isEditing()) {
-                this.openmct.editor.edit();
-                this.domainObject.getCapability('status').set('editing', true);
-            }
+            this.openmct.editor.edit();
+            this.domainObject.getCapability('status').set('editing', true);
         };
 
         /**
@@ -85,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;
@@ -97,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,26 +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() {
-                // openmct.editor.save();
+                return editorCapability.save()
+                    .then(closeEditor);
             }
 
             function onCancel() {
-                openmct.editor.cancel();
+                return closeEditor();
             }
 
             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();
-            newObject.getCapability("action").perform("save-as").then(onSave, onCancel);
-            // TODO: support editing object without saving object first.
-            // Which means we have to toggle createwizard afterwards.  For now,
-            // We will disable this.
+            editAction = newObject.getCapability("action").getActions("edit")[0];
+            //If an edit action is available, perform it
+            if (editAction) {
+                return editAction.perform();
+            } 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,10 +56,15 @@ 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({
@@ -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/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(
-                    "overlayAPI",
-                    ["dialog"]
+                mockDialogService = jasmine.createSpyObj(
+                    "dialogService",
+                    ["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]
-                        .buttons[0].callback();
+                    mockDialogService.showBlockingMessage.calls.mostRecent().args[0]
+                        .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]
-                        .buttons[0].callback();
+                    mockDialogService.showBlockingMessage.calls.mostRecent().args[0]
+                        .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]
-                        .buttons[0].callback();
+                    mockDialogService.showBlockingMessage.calls.mostRecent().args[0]
+                        .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]
-                        .buttons[0].callback();
+                    mockDialogService.showBlockingMessage.calls.mostRecent().args[0]
+                        .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/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/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/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/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/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/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/src/NotificationIndicatorController.js

@@ -35,33 +35,20 @@ define(
          * @param dialogService
          * @constructor
          */
-        function NotificationIndicatorController($scope, openmct, dialogService) {
-            $scope.notifications = openmct.notifications.notifications;
-            $scope.highest = openmct.notifications.highest;
+        function NotificationIndicatorController($scope, notificationService, dialogService) {
+            $scope.notifications = notificationService.notifications;
+            $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",
-                        "openmct"
+                        "$injector"
                     ],
                     "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'),
-                    selectedObject.useCapability('adapter'));
+                this.policyService.allow(
+                    'composition',
+                    containerObject,
+                    selectedObject
+                );
         };
 
         /**

platform/entanglement/bundle.js

@@ -170,7 +170,7 @@ define([
                     "description": "Provides a service for moving objects",
                     "implementation": MoveService,
                     "depends": [
-                        "openmct",
+                        "policyService",
                         "linkService",
                         "$q"
                     ]
@@ -181,7 +181,7 @@ define([
                     "description": "Provides a service for linking objects",
                     "implementation": LinkService,
                     "depends": [
-                        "openmct"
+                        "policyService"
                     ]
                 },
                 {
@@ -192,7 +192,7 @@ define([
                     "depends": [
                         "$q",
                         "policyService",
-                        "openmct"
+                        "now"
                     ]
                 },
                 {

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) {
-            this.openmct = openmct;
+        function LinkService(policyService) {
+            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) {
-            this.openmct = openmct;
+        function MoveService(policyService, linkService) {
+            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(
-                parentCandidate.useCapability('adapter'),
-                object.useCapability('adapter')
+            return this.policyService.allow(
+                "composition",
+                parentCandidate,
+                object
             );
         };
 

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="c-clock__timezone">
-		{{clock.zone()}}
-	</div>
-	<div class="c-clock__value">
-		{{clock.text()}}
-	</div>
-	<div class="c-clock__ampm">
-		{{clock.ampm()}}
+<div class="l-time-display l-digital l-clock s-clock" ng-controller="ClockController as clock">
+	<div class="l-elem-wrapper">
+	    <span class="l-elem timezone">
+	        {{clock.zone()}}
+	    </span>
+	    <span class="l-elem value active">
+	        {{clock.text()}}
+	    </span>
+	    <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="c-timer__controls">
-        <button ng-click="timer.clickStopButton()"
-                ng-hide="timer.timerState == 'stopped'"
-                title="Reset"
-                class="c-timer__ctrl-reset c-click-icon c-click-icon--major icon-reset"></button>
-        <button ng-click="timer.clickButton()"
-                title="{{timer.buttonText()}}"
-                class="c-timer__ctrl-pause-play c-click-icon c-click-icon--major {{timer.buttonCssClass()}}"></button>
-    </div>
-    <div class="c-timer__direction {{timer.signClass()}}"
-        ng-hide="!timer.signClass()"></div>
-	<div class="c-timer__value">{{timer.text() || "--:--:--"}}
+<div class="l-time-display l-digital l-timer s-timer s-state-{{timer.timerState}}" ng-controller="TimerController as timer">
+	<div class="l-elem-wrapper l-flex-row">
+        <div class="l-elem-wrapper l-flex-row controls">
+            <a ng-click="timer.clickStopButton()"
+               title="Stop"
+               class="flex-elem s-icon-button t-btn-stop icon-box"></a>
+            <a ng-click="timer.clickButton()"
+               title="{{timer.buttonText()}}"
+               class="flex-elem s-icon-button t-btn-pauseplay {{timer.buttonCssClass()}}"></a>
+        </div>
+	    <span class="flex-elem l-value {{timer.signClass()}}">
+	        <span class="value"
+		        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/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/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" 
-    class='form-control shell'>
-    <span class='field control {{structure.cssClass}}'>
-        <image 
-               class="c-ne__embed__snap-thumb"
-               src="{{imageUrl || structure.src}}"
-               ng-click="previewImage(imageUrl || structure.src)"
-               name="mctControl">
-        </image>
-        <br>
-        <a title="Annotate" class="s-button icon-pencil" ng-click="annotateImage(ngModel, field, imageUrl || structure.src)">
-            <span class="title-label">Annotate</span>
-        </a>
+<div
+    class="l-fixed-position-text l-telemetry"
+    ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color(), 'font-size': ngModel.size() }"
+    >
+    <span
+        class="l-elem l-value l-obj-val-format"
+        data-value="{{ngModel.value}}"
+        ng-class="ngModel.cssClass"
+        >
+        {{ngModel.value}}
     </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>

platform/features/layout/res/templates/fixed.html

@@ -0,0 +1,62 @@
+<!--
+ Open MCT, Copyright (c) 2014-2018, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="t-fixed-position l-fixed-position"
+     ng-controller="FixedController as controller">
+
+    <!-- Background grid -->
+    <div class="l-grid-holder" ng-click="controller.bypassSelection($event)">
+        <div class="l-grid l-grid-x"
+             ng-if="!controller.getGridSize()[0] < 3"
+             ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
+        <div class="l-grid l-grid-y"
+             ng-if="!controller.getGridSize()[1] < 3"
+             ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
+    </div>
+
+    <!-- Fixed position elements -->
+    <div ng-repeat="element in controller.getElements()"
+         class="l-fixed-position-item s-selectable s-moveable s-hover-border"
+         ng-style="element.style"
+         mct-selectable="controller.getContext(element)"
+         mct-init-select="controller.shouldSelect(element)">
+        <mct-include key="element.template"
+                     parameters="{ gridSize: controller.getGridSize() }"
+                     ng-model="element">
+        </mct-include>
+    </div>
+    <!-- Selection highlight, handles -->
+    <span class="s-selected s-moveable" ng-if="controller.isElementSelected()">
+        <div class="l-fixed-position-item t-edit-handle-holder"
+             mct-drag-down="controller.moveHandle().startDrag()"
+             mct-drag="controller.moveHandle().continueDrag(delta)"
+             mct-drag-up="controller.endDrag()"
+             ng-style="controller.getSelectedElementStyle()">
+        </div>
+        <div ng-repeat="handle in controller.handles()"
+             class="l-fixed-position-item-handle edit-corner"
+             ng-style="handle.style()"
+             mct-drag-down="handle.startDrag()"
+             mct-drag="handle.continueDrag(delta)"
+             mct-drag-up="controller.endDrag(handle)">
+        </div>
+    </span>
+</div>

platform/features/layout/res/templates/frame.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 class="frame frame-template t-frame-inner abs has-local-controls t-object-type-{{ domainObject.getModel().type }}">
+    <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 h-local-controls local-controls-hidden">
+            <mct-representation
+                    key="'switcher'"
+                    ng-model="representation"
+                    mct-object="domainObject">
+            </mct-representation>
+            <a class="s-button icon-expand t-btn-view-large"
+               title="View large"
+               mct-trigger-modal>
+            </a>
+        </div>
+    </div>
+    <div class="abs object-holder">
+        <mct-representation
+                key="representation.selected.key"
+                mct-object="representation.selected.key && domainObject">
+        </mct-representation>
+    </div>
+</div>

platform/features/layout/src/FixedController.js

@@ -0,0 +1,711 @@
+/*****************************************************************************
+ * 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(
+    [
+        'lodash',
+        './FixedProxy',
+        './elements/ElementProxies',
+        './FixedDragHandle',
+        '../../../../src/api/objects/object-utils'
+    ],
+    function (
+        _,
+        FixedProxy,
+        ElementProxies,
+        FixedDragHandle,
+        objectUtils
+    ) {
+
+        var DEFAULT_DIMENSIONS = [2, 1];
+
+        // Convert from element x/y/width/height to an
+        // appropriate ng-style argument, to position elements.
+        function convertPosition(elementProxy) {
+            if (elementProxy.getStyle) {
+                return elementProxy.getStyle();
+            }
+
+            var gridSize = elementProxy.getGridSize();
+
+            // Multiply position/dimensions by grid size
+            return {
+                left: (gridSize[0] * elementProxy.element.x) + 'px',
+                top: (gridSize[1] * elementProxy.element.y) + 'px',
+                width: (gridSize[0] * elementProxy.element.width) + 'px',
+                height: (gridSize[1] * elementProxy.element.height) + 'px'
+            };
+        }
+
+        /**
+         * The FixedController is responsible for supporting the
+         * Fixed Position view. It arranges frames according to saved
+         * configuration and provides methods for updating these based on
+         * mouse movement.
+         * @memberof platform/features/layout
+         * @constructor
+         * @param {Scope} $scope the controller's Angular scope
+         */
+        function FixedController($scope, $q, dialogService, openmct, $element) {
+            this.names = {}; // Cache names by ID
+            this.values = {}; // Cache values by ID
+            this.elementProxiesById = {};
+            this.telemetryObjects = {};
+            this.subscriptions = {};
+            this.openmct = openmct;
+            this.$element = $element;
+            this.$scope = $scope;
+            this.dialogService = dialogService;
+            this.$q = $q;
+            this.newDomainObject = $scope.domainObject.useCapability('adapter');
+            this.fixedViewSelectable = false;
+
+            var self = this;
+            [
+                'digest',
+                'fetchHistoricalData',
+                'getTelemetry',
+                'setDisplayedValue',
+                'subscribeToObject',
+                'unsubscribe',
+                'updateView'
+            ].forEach(function (name) {
+                self[name] = self[name].bind(self);
+            });
+
+            // Decorate an element for display
+            function makeProxyElement(element, index, elements) {
+                var ElementProxy = ElementProxies[element.type],
+                    e = ElementProxy && new ElementProxy(element, index, elements, self.gridSize);
+
+                if (e) {
+                    // Provide a displayable position (convert from grid to px)
+                    e.style = convertPosition(e);
+                    // Template names are same as type names, presently
+                    e.template = element.type;
+                }
+
+                return e;
+            }
+
+            // Decorate elements in the current configuration
+            function refreshElements() {
+                var elements = (((self.newDomainObject.configuration || {})['fixed-display'] || {}).elements || []);
+
+                // Create the new proxies...
+                self.elementProxies = elements.map(makeProxyElement);
+
+                if (self.selectedElementProxy) {
+                    // If selection is not in array, select parent.
+                    // Otherwise, set the element to select after refresh.
+                    var index = elements.indexOf(self.selectedElementProxy.element);
+                    if (index === -1) {
+                        self.$element[0].click();
+                    } else if (!self.elementToSelectAfterRefresh) {
+                        self.elementToSelectAfterRefresh = self.elementProxies[index].element;
+                    }
+                }
+
+                // Finally, rebuild lists of elements by id to
+                // facilitate faster update when new telemetry comes in.
+                self.elementProxiesById = {};
+                self.elementProxies.forEach(function (elementProxy) {
+                    var id = elementProxy.id;
+                    if (elementProxy.element.type === 'fixed.telemetry') {
+                        // Provide it a cached name/value to avoid flashing
+                        elementProxy.name = self.names[id];
+                        elementProxy.value = self.values[id];
+                        self.elementProxiesById[id] = self.elementProxiesById[id] || [];
+                        self.elementProxiesById[id].push(elementProxy);
+                    }
+                });
+            }
+
+            // Trigger a new query for telemetry data
+            function updateDisplayBounds(bounds, isTick) {
+                if (!isTick) {
+                    //Reset values
+                    self.values = {};
+                    refreshElements();
+
+                    //Fetch new data
+                    Object.values(self.telemetryObjects).forEach(function (object) {
+                        self.fetchHistoricalData(object);
+                    });
+                }
+            }
+
+            // Add an element to this view
+            function addElement(element) {
+                var index;
+                var elements = (((self.newDomainObject.configuration || {})['fixed-display'] || {}).elements || []);
+                elements.push(element);
+
+                if (self.selectedElementProxy) {
+                    index = elements.indexOf(self.selectedElementProxy.element);
+                }
+
+                self.mutate("configuration['fixed-display'].elements", elements);
+                elements = (self.newDomainObject.configuration)['fixed-display'].elements || [];
+                self.elementToSelectAfterRefresh = elements[elements.length - 1];
+
+                if (self.selectedElementProxy) {
+                    // Update the selected element with the new
+                    // value since newDomainOject is mutated.
+                    self.selectedElementProxy.element = elements[index];
+                }
+                refreshElements();
+            }
+
+            // Position a panel after a drop event
+            function handleDrop(e, id, position) {
+                // Don't handle this event if it has already been handled
+                if (e.defaultPrevented) {
+                    return;
+                }
+
+                e.preventDefault();
+
+                // Store the position of this element.
+                // color is set to "" to let the CSS theme determine the default color
+                addElement({
+                    type: "fixed.telemetry",
+                    x: Math.floor(position.x / self.gridSize[0]),
+                    y: Math.floor(position.y / self.gridSize[1]),
+                    id: id,
+                    stroke: "transparent",
+                    color: "",
+                    titled: true,
+                    width: DEFAULT_DIMENSIONS[0],
+                    height: DEFAULT_DIMENSIONS[1],
+                    useGrid: true
+                });
+
+                // Subscribe to the new object to get telemetry
+                self.openmct.objects.get(id).then(function (object) {
+                    self.getTelemetry(object);
+                });
+            }
+
+            this.elementProxies = [];
+            this.addElement = addElement;
+            this.refreshElements = refreshElements;
+            this.fixedProxy = new FixedProxy(this.addElement, this.$q, this.dialogService);
+
+            this.composition = this.openmct.composition.get(this.newDomainObject);
+            this.composition.on('add', this.onCompositionAdd, this);
+            this.composition.on('remove', this.onCompositionRemove, this);
+            this.composition.load();
+
+            // Position panes where they are dropped
+            $scope.$on("mctDrop", handleDrop);
+
+            $scope.$on("$destroy", this.destroy.bind(this));
+
+            // Respond to external bounds changes
+            this.openmct.time.on("bounds", updateDisplayBounds);
+
+            this.openmct.selection.on('change', this.setSelection.bind(this));
+            this.$element.on('click', this.bypassSelection.bind(this));
+            this.unlisten = this.openmct.objects.observe(this.newDomainObject, '*', function (obj) {
+                this.newDomainObject = JSON.parse(JSON.stringify(obj));
+                this.updateElementPositions(this.newDomainObject.layoutGrid);
+            }.bind(this));
+
+            this.updateElementPositions(this.newDomainObject.layoutGrid);
+            refreshElements();
+        }
+
+        FixedController.prototype.updateElementPositions = function (layoutGrid) {
+            this.gridSize = layoutGrid;
+
+            this.elementProxies.forEach(function (elementProxy) {
+                elementProxy.setGridSize(this.gridSize);
+                elementProxy.style = convertPosition(elementProxy);
+            }.bind(this));
+        };
+
+        FixedController.prototype.onCompositionAdd = function (object) {
+            this.getTelemetry(object);
+        };
+
+        FixedController.prototype.onCompositionRemove = function (identifier) {
+            // Defer mutation of newDomainObject to prevent mutating an
+            // outdated version since this is triggered by a composition change.
+            setTimeout(function () {
+                var id = objectUtils.makeKeyString(identifier);
+                var elements = this.newDomainObject.configuration['fixed-display'].elements || [];
+                var newElements = elements.filter(function (proxy) {
+                    return proxy.id !== id;
+                });
+                this.mutate("configuration['fixed-display'].elements", newElements);
+
+                if (this.subscriptions[id]) {
+                    this.subscriptions[id]();
+                    delete this.subscriptions[id];
+                }
+
+                delete this.telemetryObjects[id];
+                this.refreshElements();
+            }.bind(this));
+        };
+
+        /**
+         * Removes an element from the view.
+         *
+         * @param {Object} elementProxy the element proxy to remove.
+         */
+        FixedController.prototype.remove = function (elementProxy) {
+            var element = elementProxy.element;
+            var elements = this.newDomainObject.configuration['fixed-display'].elements || [];
+            elements.splice(elements.indexOf(element), 1);
+
+            if (element.type === 'fixed.telemetry') {
+                this.newDomainObject.composition = this.newDomainObject.composition.filter(function (identifier) {
+                    return objectUtils.makeKeyString(identifier) !== element.id;
+                });
+            }
+
+            this.mutate("configuration['fixed-display'].elements", elements);
+            this.refreshElements();
+
+        };
+
+        /**
+         * Adds a new element to the view.
+         *
+         * @param {string} type the type of element to add. Supported types are:
+         * `fixed.image`
+         * `fixed.box`
+         * `fixed.text`
+         * `fixed.line`
+         */
+        FixedController.prototype.add = function (type) {
+            this.fixedProxy.add(type);
+        };
+
+        /**
+         * Change the display order of the element proxy.
+         */
+        FixedController.prototype.order = function (elementProxy, position) {
+            var elements = elementProxy.order(position);
+
+            // Find the selected element index in the updated array.
+            var selectedElemenetIndex = elements.indexOf(this.selectedElementProxy.element);
+
+            this.mutate("configuration['fixed-display'].elements", elements);
+            elements = (this.newDomainObject.configuration)['fixed-display'].elements || [];
+
+            // Update the selected element with the new
+            // value since newDomainOject is mutated.
+            this.selectedElementProxy.element = elements[selectedElemenetIndex];
+            this.refreshElements();
+        };
+
+        FixedController.prototype.generateDragHandle = function (elementProxy, elementHandle) {
+            var index = this.elementProxies.indexOf(elementProxy);
+
+            if (elementHandle) {
+                elementHandle.element = elementProxy.element;
+                elementProxy = elementHandle;
+            }
+
+            return new FixedDragHandle(
+                elementProxy,
+                "configuration['fixed-display'].elements[" + index + "]",
+                this
+            );
+        };
+
+        FixedController.prototype.generateDragHandles = function (elementProxy) {
+            return elementProxy.handles().map(function (handle) {
+                return this.generateDragHandle(elementProxy, handle);
+            }, this);
+        };
+
+        FixedController.prototype.updateSelectionStyle = function () {
+            this.selectedElementProxy.style = convertPosition(this.selectedElementProxy);
+        };
+
+        FixedController.prototype.setSelection = function (selectable) {
+            var selection = selectable[0];
+
+            if (this.selectionListeners) {
+                this.selectionListeners.forEach(function (l) {
+                    l();
+                });
+            }
+
+            this.selectionListeners = [];
+
+            if (!selection) {
+                return;
+            }
+
+            if (selection.context.elementProxy) {
+                this.selectedElementProxy = selection.context.elementProxy;
+                this.attachSelectionListeners();
+                this.mvHandle = this.generateDragHandle(this.selectedElementProxy);
+                this.resizeHandles = this.generateDragHandles(this.selectedElementProxy);
+            } else {
+                // Make fixed view selectable if it's not already.
+                if (!this.fixedViewSelectable && selectable.length === 1) {
+                    this.fixedViewSelectable = true;
+                    selection.context.fixedController = this;
+                    this.openmct.selection.select(selection);
+                }
+
+                this.resizeHandles = [];
+                this.mvHandle = undefined;
+                this.selectedElementProxy = undefined;
+            }
+        };
+
+        FixedController.prototype.attachSelectionListeners = function () {
+            var index = this.elementProxies.indexOf(this.selectedElementProxy);
+            var path = "configuration['fixed-display'].elements[" + index + "]";
+
+            this.selectionListeners.push(this.openmct.objects.observe(this.newDomainObject, path + ".useGrid", function (newValue) {
+                if (this.selectedElementProxy.useGrid() !== newValue) {
+                    this.selectedElementProxy.useGrid(newValue);
+                    this.updateSelectionStyle();
+                    this.openmct.objects.mutate(this.newDomainObject, path, this.selectedElementProxy.element);
+                }
+            }.bind(this)));
+            [
+                "width",
+                "height",
+                "stroke",
+                "fill",
+                "x",
+                "y",
+                "x1",
+                "y1",
+                "x2",
+                "y2",
+                "color",
+                "size",
+                "text",
+                "titled"
+            ].forEach(function (property) {
+                this.selectionListeners.push(this.openmct.objects.observe(this.newDomainObject, path + "." + property, function (newValue) {
+                    this.selectedElementProxy.element[property] = newValue;
+                    this.updateSelectionStyle();
+                }.bind(this)));
+            }.bind(this));
+        };
+
+        FixedController.prototype.destroy = function () {
+            this.unsubscribe();
+            this.unlisten();
+            this.openmct.time.off("bounds", this.updateDisplayBounds);
+            this.openmct.selection.off("change", this.setSelection);
+            this.composition.off('add', this.onCompositionAdd, this);
+            this.composition.off('remove', this.onCompositionRemove, this);
+        };
+
+        /**
+         * A rate-limited digest function. Caps digests at 60Hz
+         * @private
+         */
+        FixedController.prototype.digest = function () {
+            var self = this;
+
+            if (!this.digesting) {
+                this.digesting = true;
+                requestAnimationFrame(function () {
+                    self.$scope.$digest();
+                    self.digesting = false;
+                });
+            }
+        };
+
+        /**
+         * Unsubscribe all listeners
+         * @private
+         */
+        FixedController.prototype.unsubscribe = function () {
+            Object.values(this.subscriptions).forEach(function (unsubscribeFunc) {
+                unsubscribeFunc();
+            });
+            this.subscriptions = {};
+            this.telemetryObjects = {};
+        };
+
+        /**
+         * Subscribe to the given domain object
+         * @private
+         * @param {object} object  Domain object to subscribe to
+         * @returns {object} The provided object, for chaining.
+         */
+        FixedController.prototype.subscribeToObject = function (object) {
+            var self = this;
+            var timeAPI = this.openmct.time;
+            var id = objectUtils.makeKeyString(object.identifier);
+            this.subscriptions[id] = self.openmct.telemetry.subscribe(object, function (datum) {
+                if (timeAPI.clock() !== undefined) {
+                    self.updateView(object, datum);
+                }
+            }, {});
+
+            return object;
+        };
+
+        /**
+         * Print the values from the given datum against the provided object in the view.
+         * @private
+         * @param {object} telemetryObject The domain object associated with the given telemetry data
+         * @param {object} datum The telemetry datum containing the values to print
+         */
+        FixedController.prototype.updateView = function (telemetryObject, datum) {
+            var metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+            var valueMetadata = this.chooseValueMetadataToDisplay(metadata);
+            var formattedTelemetryValue = this.getFormattedTelemetryValueForKey(valueMetadata, datum);
+            var limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
+            var alarm = limitEvaluator && limitEvaluator.evaluate(datum, valueMetadata);
+
+            this.setDisplayedValue(
+                telemetryObject,
+                formattedTelemetryValue,
+                alarm && alarm.cssClass
+            );
+            this.digest();
+        };
+
+        /**
+         * @private
+         */
+        FixedController.prototype.getFormattedTelemetryValueForKey = function (valueMetadata, datum) {
+            var formatter = this.openmct.telemetry.getValueFormatter(valueMetadata);
+
+            return formatter.format(datum);
+        };
+
+        /**
+         * @private
+         */
+        FixedController.prototype.chooseValueMetadataToDisplay = function (metadata) {
+            // If there is a range value, show that preferentially
+            var valueMetadata = metadata.valuesForHints(['range'])[0];
+
+            // If no range is defined, default to the highest priority non time-domain data.
+            if (valueMetadata === undefined) {
+                var valuesOrderedByPriority = metadata.values();
+                valueMetadata = valuesOrderedByPriority.filter(function (values) {
+                    return !(values.hints.domain);
+                })[0];
+            }
+
+            return valueMetadata;
+        };
+
+        /**
+         * Request the last historical data point for the given domain object
+         * @param {object} object
+         * @returns {object} the provided object for chaining.
+         */
+        FixedController.prototype.fetchHistoricalData = function (object) {
+            var bounds = this.openmct.time.bounds();
+            var self = this;
+
+            self.openmct.telemetry.request(object, {start: bounds.start, end: bounds.end, size: 1})
+                .then(function (data) {
+                    if (data.length > 0) {
+                        self.updateView(object, data[data.length - 1]);
+                    }
+                });
+
+            return object;
+        };
+
+
+        /**
+         * Print a value to the onscreen element associated with a given telemetry object.
+         * @private
+         * @param {object} telemetryObject The telemetry object associated with the value
+         * @param {string | number} value The value to print to screen
+         * @param {string} [cssClass] an optional CSS class to apply to the onscreen element.
+         */
+        FixedController.prototype.setDisplayedValue = function (telemetryObject, value, cssClass) {
+            var id = objectUtils.makeKeyString(telemetryObject.identifier);
+            var self = this;
+
+            (self.elementProxiesById[id] || []).forEach(function (element) {
+                self.names[id] = telemetryObject.name;
+                self.values[id] = value;
+                element.name = self.names[id];
+                element.value = self.values[id];
+                element.cssClass = cssClass;
+            });
+        };
+
+        FixedController.prototype.getTelemetry = function (domainObject) {
+            var id = objectUtils.makeKeyString(domainObject.identifier);
+
+            if (this.subscriptions[id]) {
+                this.subscriptions[id]();
+                delete this.subscriptions[id];
+            }
+            delete this.telemetryObjects[id];
+
+            if (!this.openmct.telemetry.isTelemetryObject(domainObject)) {
+                return;
+            }
+
+            // Initialize display
+            this.telemetryObjects[id] = domainObject;
+            this.setDisplayedValue(domainObject, "");
+
+            return Promise.resolve(domainObject)
+                .then(this.fetchHistoricalData)
+                .then(this.subscribeToObject);
+        };
+
+        /**
+         * Get the size of the grid, in pixels. The returned array
+         * is in the form `[x, y]`.
+         * @returns {number[]} the grid size
+         * @memberof platform/features/layout.FixedController#
+         */
+        FixedController.prototype.getGridSize = function () {
+            return this.gridSize;
+        };
+
+        /**
+         * Get an array of elements in this panel; these are
+         * decorated proxies for both selection and display.
+         * @returns {Array} elements in this panel
+         */
+        FixedController.prototype.getElements = function () {
+            return this.elementProxies;
+        };
+
+        /**
+         * Checks if the element should be selected or not.
+         *
+         * @param elementProxy the element to check
+         * @returns {boolean} true if the element should be selected.
+         */
+        FixedController.prototype.shouldSelect = function (elementProxy) {
+            if (elementProxy.element === this.elementToSelectAfterRefresh) {
+                delete this.elementToSelectAfterRefresh;
+                return true;
+            } else {
+                return false;
+            }
+        };
+
+        /**
+         * Checks if an element is currently selected.
+         *
+         * @returns {boolean} true if an element is selected.
+         */
+        FixedController.prototype.isElementSelected = function () {
+            return (this.selectedElementProxy) ? true : false;
+        };
+
+        /**
+         * Gets the style for the selected element.
+         *
+         * @returns {string} element style
+         */
+        FixedController.prototype.getSelectedElementStyle = function () {
+            return (this.selectedElementProxy) ? this.selectedElementProxy.style : undefined;
+        };
+
+        /**
+         * Gets the selected element.
+         *
+         * @returns the selected element
+         */
+        FixedController.prototype.getSelectedElement = function () {
+            return this.selectedElementProxy;
+        };
+
+        /**
+         * Prevents the event from bubbling up if drag is in progress.
+         */
+        FixedController.prototype.bypassSelection = function ($event) {
+            if (this.dragInProgress) {
+                if ($event) {
+                    $event.stopPropagation();
+                }
+                return;
+            }
+        };
+
+        /**
+         * Get drag handles.
+         * @returns {platform/features/layout.FixedDragHandle[]}
+         *          drag handles for the current selection
+         */
+        FixedController.prototype.handles = function () {
+            return this.resizeHandles;
+        };
+
+        /**
+         * Get the handle to handle dragging to reposition an element.
+         * @returns {platform/features/layout.FixedDragHandle} the drag handle
+         */
+        FixedController.prototype.moveHandle = function () {
+            return this.mvHandle;
+        };
+
+        /**
+         * Gets the selection context.
+         *
+         * @param elementProxy the element proxy
+         * @returns {object} the context object which includes elementProxy
+         */
+        FixedController.prototype.getContext = function (elementProxy) {
+            return {
+                elementProxy: elementProxy,
+                fixedController: this
+            };
+        };
+
+        /**
+         * End drag.
+         *
+         * @param handle the resize handle
+         */
+        FixedController.prototype.endDrag = function (handle) {
+            this.dragInProgress = true;
+
+            setTimeout(function () {
+                this.dragInProgress = false;
+            }.bind(this), 0);
+
+            if (handle) {
+                handle.endDrag();
+            } else {
+                this.moveHandle().endDrag();
+            }
+        };
+
+        FixedController.prototype.mutate = function (path, value) {
+            this.openmct.objects.mutate(this.newDomainObject, path, value);
+        };
+
+        return FixedController;
+    }
+);

platform/features/layout/src/FixedDragHandle.js

@@ -0,0 +1,110 @@
+/*****************************************************************************
+ * 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 () {
+
+        // Drag handle dimensions
+        var DRAG_HANDLE_SIZE = [6, 6];
+
+        /**
+         * Template-displayable drag handle for an element in fixed
+         * position mode.
+         *
+         * @param elementHandle the element handle
+         * @param configPath the configuration path of an element
+         * @param {Object} fixedControl the fixed controller
+         * @memberof platform/features/layout
+         * @constructor
+         */
+        function FixedDragHandle(elementHandle, configPath, fixedControl) {
+            this.elementHandle = elementHandle;
+            this.configPath = configPath;
+            this.fixedControl = fixedControl;
+        }
+
+        /**
+         * Get a CSS style to position this drag handle.
+         *
+         * @returns CSS style object (for `ng-style`)
+         * @memberof platform/features/layout.FixedDragHandle#
+         */
+        FixedDragHandle.prototype.style = function () {
+            var gridSize = this.elementHandle.getGridSize();
+
+            // Adjust from grid to pixel coordinates
+            var x = this.elementHandle.x() * gridSize[0],
+                y = this.elementHandle.y() * gridSize[1];
+
+            // Convert to a CSS style centered on that point
+            return {
+                left: (x - DRAG_HANDLE_SIZE[0] / 2) + 'px',
+                top: (y - DRAG_HANDLE_SIZE[1] / 2) + 'px',
+                width: DRAG_HANDLE_SIZE[0] + 'px',
+                height: DRAG_HANDLE_SIZE[1] + 'px'
+            };
+        };
+
+        /**
+         * Start a drag gesture. This should be called when a drag
+         * begins to track initial state.
+         */
+        FixedDragHandle.prototype.startDrag = function () {
+            // Cache initial x/y positions
+            this.dragging = {
+                x: this.elementHandle.x(),
+                y: this.elementHandle.y()
+            };
+        };
+
+        /**
+         * Continue a drag gesture; update x/y positions.
+         *
+         * @param {number[]} delta x/y pixel difference since drag started
+         */
+        FixedDragHandle.prototype.continueDrag = function (delta) {
+            var gridSize = this.elementHandle.getGridSize();
+
+            if (this.dragging) {
+                // Update x/y positions (snapping to grid)
+                var newX = this.dragging.x + Math.round(delta[0] / gridSize[0]);
+                var newY = this.dragging.y + Math.round(delta[1] / gridSize[1]);
+
+                this.elementHandle.x(Math.max(0, newX));
+                this.elementHandle.y(Math.max(0, newY));
+                this.fixedControl.updateSelectionStyle();
+            }
+        };
+
+        /**
+         * End a drag gesture. This should be called when a drag
+         * concludes to trigger commit of changes.
+         */
+        FixedDragHandle.prototype.endDrag = function () {
+            this.dragging = undefined;
+            this.fixedControl.mutate(this.configPath, this.elementHandle.element);
+        };
+
+        return FixedDragHandle;
+    }
+);

platform/features/layout/src/FixedProxy.js

@@ -0,0 +1,76 @@
+/*****************************************************************************
+ * 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(
+    ['./elements/ElementFactory'],
+    function (ElementFactory) {
+
+        /**
+         * Proxy for configuring a fixed position view via the toolbar.
+         * @memberof platform/features/layout
+         * @constructor
+         * @param {Function} addElementCallback callback to invoke when
+         *        elements are created
+         * @param $q Angular's $q, for promise-handling
+         * @param {DialogService} dialogService dialog service to use
+         *        when adding a new element will require user input
+         */
+        function FixedProxy(addElementCallback, $q, dialogService) {
+            this.factory = new ElementFactory(dialogService);
+            this.$q = $q;
+            this.addElementCallback = addElementCallback;
+        }
+
+        /**
+         * Add a new visual element to this view. Supported types are:
+         *
+         * * `fixed.image`
+         * * `fixed.box`
+         * * `fixed.text`
+         * * `fixed.line`
+         *
+         * @param {string} type the type of element to add
+         */
+        FixedProxy.prototype.add = function (type) {
+            var addElementCallback = this.addElementCallback;
+
+            // Place a configured element into the view configuration
+            function addElement(element) {
+                // Configure common properties of the element
+                element.x = element.x || 0;
+                element.y = element.y || 0;
+                element.width = element.width || 1;
+                element.height = element.height || 1;
+                element.type = type;
+                element.useGrid = true;
+
+                // Finally, add it to the view's configuration
+                addElementCallback(element);
+            }
+
+            // Defer creation to the factory
+            this.$q.when(this.factory.createElement(type)).then(addElement);
+        };
+
+        return FixedProxy;
+    }
+);

platform/features/layout/src/LayoutCompositionPolicy.js

@@ -20,18 +20,32 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import LegacyContextMenuAction from './LegacyContextMenuAction';
+define(
+    [],
+    function () {
 
-export default function LegacyActionAdapter(openmct, legacyActions) {
-    function contextualCategoryOnly(action) {
-        if (action.category === 'contextual' || (Array.isArray(action.category) && action.category.includes('contextual'))) {
-            return true;
+        /**
+         * Defines composition policy for Display Layout objects.
+         * They cannot contain folders.
+         * @constructor
+         * @memberof platform/features/layout
+         * @implements {Policy.<View, DomainObject>}
+         */
+        function LayoutCompositionPolicy() {
         }
-        console.warn(`DEPRECATION WARNING: Action ${action.definition.key} in bundle ${action.bundle.path} is non-contextual and should be migrated.`);
-        return false;
-    }
 
-    legacyActions.filter(contextualCategoryOnly)
-        .map(LegacyAction => new LegacyContextMenuAction(openmct, LegacyAction))
-        .forEach(openmct.contextMenu.registerAction);
-}
+        LayoutCompositionPolicy.prototype.allow = function (parent, child) {
+            var parentType = parent.getCapability('type');
+            if (parentType.instanceOf('layout') &&
+                child.getCapability('type').instanceOf('folder')) {
+
+                return false;
+            }
+
+            return true;
+        };
+
+        return LayoutCompositionPolicy;
+    }
+);
+

platform/features/layout/src/LayoutDrag.js

@@ -0,0 +1,115 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Handles drag interactions on frames in layouts. This will
+         * provides new positions/dimensions for frames based on
+         * relative pixel positions provided; these will take into account
+         * the grid size (in a snap-to sense) and will enforce some minimums
+         * on both position and dimensions.
+         *
+         * The provided position and dimensions factors will determine
+         * whether this is a move or a resize, and what type of resize it
+         * will be. For instance, a position factor of [1, 1]
+         * will move a frame along with the mouse as the drag
+         * proceeds, while a dimension factor of [0, 0] will leave
+         * dimensions unchanged. Combining these in different
+         * ways results in different handles; a position factor of
+         * [1, 0] and a dimensions factor of [-1, 0] will implement
+         * a left-edge resize, as the horizontal position will move
+         * with the mouse while the horizontal dimensions shrink in
+         * kind (and vertical properties remain unmodified.)
+         *
+         * @param {object} rawPosition the initial position/dimensions
+         *                 of the frame being interacted with
+         * @param {number[]} posFactor the position factor
+         * @param {number[]} dimFactor the dimensions factor
+         * @param {number[]} the size of each grid element, in pixels
+         * @constructor
+         * @memberof platform/features/layout
+         */
+        function LayoutDrag(rawPosition, posFactor, dimFactor, gridSize) {
+            this.rawPosition = rawPosition;
+            this.posFactor = posFactor;
+            this.dimFactor = dimFactor;
+            this.gridSize = gridSize;
+        }
+
+        // Convert a delta from pixel coordinates to grid coordinates,
+        // rounding to whole-number grid coordinates.
+        function toGridDelta(gridSize, pixelDelta) {
+            return pixelDelta.map(function (v, i) {
+                return Math.round(v / gridSize[i]);
+            });
+        }
+
+        // Utility function to perform element-by-element multiplication
+        function multiply(array, factors) {
+            return array.map(function (v, i) {
+                return v * factors[i];
+            });
+        }
+
+        // Utility function to perform element-by-element addition
+        function add(array, other) {
+            return array.map(function (v, i) {
+                return v + other[i];
+            });
+        }
+
+        // Utility function to perform element-by-element max-choosing
+        function max(array, other) {
+            return array.map(function (v, i) {
+                return Math.max(v, other[i]);
+            });
+        }
+
+
+        /**
+         * Get a new position object in grid coordinates, with
+         * position and dimensions both offset appropriately
+         * according to the factors supplied in the constructor.
+         * @param {number[]} pixelDelta the offset from the
+         *        original position, in pixels
+         */
+        LayoutDrag.prototype.getAdjustedPosition = function (pixelDelta) {
+            var gridDelta = toGridDelta(this.gridSize, pixelDelta);
+            return {
+                position: max(add(
+                    this.rawPosition.position,
+                    multiply(gridDelta, this.posFactor)
+                ), [0, 0]),
+                dimensions: max(add(
+                    this.rawPosition.dimensions,
+                    multiply(gridDelta, this.dimFactor)
+                ), [1, 1])
+            };
+        };
+
+        return LayoutDrag;
+
+    }
+);

platform/features/layout/src/MCTTriggerModal.js

@@ -0,0 +1,105 @@
+/*****************************************************************************
+ * 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',
+    '../../../commonUI/general/src/services/Overlay'
+], function (
+    $,
+    Overlay
+) {
+    /**
+     * MCT Trigger Modal is intended for use in only one location: inside the
+     * object-header to allow views in a layout to be popped out in a modal.
+     * Users can close the modal and go back to normal, and everything generally
+     * just works fine.
+     *
+     * This code is sensitive to how our html is constructed-- particularly with
+     * how it locates the the container of an element in a layout. However, it
+     * should be able to handle slight relocations so long as it is always a
+     * descendent of a `.frame` element.
+     */
+    function MCTTriggerModal($document) {
+
+        function link($scope, $element) {
+            var actions = $scope.domainObject.getCapability('action'),
+                notebookAction = actions.getActions({key: 'notebook-new-entry'})[0];
+
+            var frame = $element.parent();
+
+            for (var i = 0; i < 10; i++) {
+                if (frame.hasClass('frame')) {
+                    break;
+                }
+                frame = frame.parent();
+            }
+            if (!frame.hasClass('frame')) {
+                $element.remove();
+                return;
+            }
+
+            frame = frame[0];
+
+            var layoutContainer = frame.parentElement;
+
+            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,
+                $scope: $scope,
+                $element: frame,
+                overlayWillMount: function () {
+                    $(frame).removeClass('frame frame-template');
+                    layoutContainer.removeChild(frame);
+                },
+                overlayDidUnmount: function () {
+                    $(frame).addClass('frame frame-template');
+                    layoutContainer.appendChild(frame);
+                },
+                browseBarButtons: notebookButton
+            });
+
+            $element.on('click', overlayService.toggleOverlay);
+            $scope.$on('$destroy', function () {
+                $element.off('click', overlayService.toggleOverlay);
+            });
+        }
+
+        return {
+            restrict: 'A',
+            link: link
+        };
+    }
+
+    return MCTTriggerModal;
+
+});

platform/features/layout/src/elements/AccessorMutator.js

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Utility function for creating getter-setter functions,
+         * since these are frequently useful for element proxies.
+         *
+         * An optional third argument may be supplied in order to
+         * constrain or modify arguments when using as a setter;
+         * this argument is a function which takes two arguments
+         * (the current value for the property, and the requested
+         * new value.) This is useful when values need to be kept
+         * in certain ranges; specifically, to keep x/y positions
+         * non-negative in a fixed position view.
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param {Object} object the object to get/set values upon
+         * @param {string} key the property to get/set
+         * @param {function} [updater] function used to process updates
+         */
+        function AccessorMutator(object, key, updater) {
+            return function (value) {
+                if (arguments.length > 0) {
+                    object[key] = updater ?
+                        updater(value, object[key]) :
+                        value;
+                }
+                return object[key];
+            };
+        }
+
+        return AccessorMutator;
+    }
+);

platform/features/layout/src/elements/BoxProxy.js

@@ -0,0 +1,61 @@
+/*****************************************************************************
+ * 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(
+    ['./ElementProxy', './AccessorMutator'],
+    function (ElementProxy, AccessorMutator) {
+
+        /**
+         * Selection proxy for Box elements in a fixed position view.
+         * Also serves as a superclass for Text elements, since those
+         * elements have a superset of Box properties.
+         *
+         * Note that arguments here are meant to match those expected
+         * by `Array.prototype.map`
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param element the fixed position element, as stored in its
+         *        configuration
+         * @param index the element's index within its array
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
+         * @param {Array} elements the full array of elements
+         */
+        function BoxProxy(element, index, elements, gridSize) {
+            var proxy = new ElementProxy(element, index, elements, gridSize);
+
+            /**
+             * Get/set this element's fill color. (Omitting the
+             * argument makes this act as a getter.)
+             * @method
+             * @param {string} fill the new fill color
+             * @returns {string} the fill color
+             * @memberof platform/features/layout.BoxProxy#
+             */
+            proxy.fill = new AccessorMutator(element, 'fill');
+
+            return proxy;
+        }
+
+        return BoxProxy;
+    }
+);

platform/features/layout/src/elements/ElementFactory.js

@@ -0,0 +1,114 @@
+/*****************************************************************************
+ * 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 () {
+
+        var INITIAL_STATES = {
+                "fixed.image": {
+                    stroke: "transparent"
+                },
+                "fixed.box": {
+                    fill: "#717171",
+                    border: "transparent",
+                    stroke: "transparent"
+                },
+                "fixed.line": {
+                    x: 5,
+                    y: 9,
+                    x2: 6,
+                    y2: 6,
+                    stroke: "#717171"
+                },
+                "fixed.text": {
+                    fill: "transparent",
+                    stroke: "transparent"
+                }
+            },
+            DIALOGS = {
+                "fixed.image": {
+                    name: "Image Properties",
+                    sections: [
+                        {
+                            rows: [
+                                {
+                                    key: "url",
+                                    control: "textfield",
+                                    name: "Image URL",
+                                    "cssClass": "l-input-lg",
+                                    required: true
+                                }
+                            ]
+                        }
+                    ]
+                },
+                "fixed.text": {
+                    name: "Text Element Properties",
+                    sections: [
+                        {
+                            rows: [
+                                {
+                                    key: "text",
+                                    control: "textfield",
+                                    name: "Text",
+                                    required: true
+                                }
+                            ]
+                        }
+                    ]
+                }
+            };
+
+        /**
+         * The ElementFactory creates new instances of elements for the
+         * fixed position view, prompting for user input where necessary.
+         * @param {DialogService} dialogService service to request user input
+         * @memberof platform/features/layout
+         * @constructor
+         */
+        function ElementFactory(dialogService) {
+            this.dialogService = dialogService;
+        }
+
+        /**
+         * Create a new element for the fixed position view.
+         * @param {string} type the type of element to create
+         * @returns {Promise|object} the created element, or a promise
+         *          for that element
+         */
+        ElementFactory.prototype.createElement = function (type) {
+            var initialState = INITIAL_STATES[type] || {};
+
+            // Clone that state
+            initialState = JSON.parse(JSON.stringify(initialState));
+
+            // Show a dialog to configure initial state, if appropriate
+            return DIALOGS[type] ? this.dialogService.getUserInput(
+                DIALOGS[type],
+                initialState
+            ) : initialState;
+        };
+
+        return ElementFactory;
+    }
+);

platform/features/layout/src/elements/ElementProxies.js

@@ -20,23 +20,16 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './tabs'
-], function (
-    Tabs
-) {
-    return function plugin() {
-        return function install(openmct) {
-            openmct.objectViews.addProvider(new Tabs(openmct));
+define(
+    ['./TelemetryProxy', './ImageProxy', './LineProxy', './BoxProxy', './TextProxy'],
+    function (TelemetryProxy, ImageProxy, LineProxy, BoxProxy, TextProxy) {
 
-            openmct.types.addType('tabs', {
-                name: "Tabs View",
-                creatable: true,
-                cssClass: 'icon-tabs-view',
-                initialize(domainObject) {
-                    domainObject.composition = [];
-                }
-            });
+        return {
+            "fixed.telemetry": TelemetryProxy,
+            "fixed.line": LineProxy,
+            "fixed.box": BoxProxy,
+            "fixed.image": ImageProxy,
+            "fixed.text": TextProxy
         };
-    };
-});
+    }
+);

platform/features/layout/src/elements/ElementProxy.js

@@ -0,0 +1,209 @@
+/*****************************************************************************
+ * 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(
+    ['./AccessorMutator', './ResizeHandle', './UnitAccessorMutator'],
+    function (AccessorMutator, ResizeHandle, UnitAccessorMutator) {
+
+        // Index deltas for changes in order
+        var ORDERS = {
+            top: Number.POSITIVE_INFINITY,
+            up: 1,
+            down: -1,
+            bottom: Number.NEGATIVE_INFINITY
+        };
+
+        // Mininmum pixel height and width for objects
+        var MIN_WIDTH = 10;
+        var MIN_HEIGHT = 10;
+
+        // Ensure a value is non-negative (for x/y setters)
+        function clamp(value) {
+            return Math.max(value, 0);
+        }
+
+        /**
+         * Abstract superclass for other classes which provide useful
+         * interfaces upon an elements in a fixed position view.
+         * This handles the generic operations (e.g. remove) so that
+         * subclasses only need to implement element-specific behaviors.
+         *
+         * Note that arguments here are meant to match those expected
+         * by `Array.prototype.map`
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param element the fixed position element, as stored in its
+         *        configuration
+         * @param index the element's index within its array
+         * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
+         */
+        function ElementProxy(element, index, elements, gridSize) {
+            /**
+             * The element as stored in the view configuration.
+             * @memberof platform/features/layout.ElementProxy#
+             */
+            this.element = element;
+
+            /**
+             * The current grid size of the layout.
+             * @memberof platform/features/layout.ElementProxy#
+             */
+            this.gridSize = gridSize || [1,1]; //Ensure a reasonable default
+
+            /**
+             * Get and/or set the x position of this element.
+             * Units are in fixed position grid space.
+             * @param {number} [x] the new x position (if setting)
+             * @returns {number} the x position
+             * @memberof platform/features/layout.ElementProxy#
+             */
+            this.x = new AccessorMutator(element, 'x', clamp);
+
+            /**
+             * Get and/or set the y position of this element.
+             * Units are in fixed position grid space.
+             * @param {number} [y] the new y position (if setting)
+             * @returns {number} the y position
+             * @memberof platform/features/layout.ElementProxy#
+             */
+            this.y = new AccessorMutator(element, 'y', clamp);
+
+            /**
+             * Get and/or set the stroke color of this element.
+             * @param {string} [stroke] the new stroke color (if setting)
+             * @returns {string} the stroke color
+             * @memberof platform/features/layout.ElementProxy#
+             */
+            this.stroke = new AccessorMutator(element, 'stroke');
+
+            /**
+             * Get and/or set the width of this element.
+             * Units are in fixed position grid space.
+             * @param {number} [w] the new width (if setting)
+             * @returns {number} the width
+             * @memberof platform/features/layout.ElementProxy#
+             */
+            this.width = new AccessorMutator(element, 'width');
+
+            /**
+             * Get and/or set the height of this element.
+             * Units are in fixed position grid space.
+             * @param {number} [h] the new height (if setting)
+             * @returns {number} the height
+             * @memberof platform/features/layout.ElementProxy#
+             */
+            this.height = new AccessorMutator(element, 'height');
+
+            this.useGrid = new UnitAccessorMutator(this);
+            this.index = index;
+            this.elements = elements;
+            this.resizeHandles = [new ResizeHandle(this, this.element)];
+        }
+
+        /**
+         * Change the display order of this element.
+         * @param {string} o where to move this element;
+         *        one of "top", "up", "down", or "bottom"
+         * @return {Array} the full array of elements
+         */
+        ElementProxy.prototype.order = function (o) {
+            var index = this.index,
+                elements = this.elements,
+                element = this.element,
+                delta = ORDERS[o] || 0,
+                desired = Math.max(
+                    Math.min(index + delta, elements.length - 1),
+                    0
+                );
+            // Move to the desired index, if this is a change
+            if ((desired !== index) && (elements[index] === element)) {
+                // Splice out the current element
+                elements.splice(index, 1);
+                // Splice it back in at the correct index
+                elements.splice(desired, 0, element);
+                // Track change in index (proxy should be recreated
+                // anyway, but be consistent)
+                this.index = desired;
+            }
+
+            return elements;
+        };
+
+        /**
+         * Get handles to control specific features of this element,
+         * e.g. corner size.
+         * @return {platform/features/layout.ElementHandle[]} handles
+         *         for moving/resizing this element
+         */
+        ElementProxy.prototype.handles = function () {
+            return this.resizeHandles;
+        };
+
+        /**
+         * Returns which grid size the element is currently using.
+         * @return {number[]} The current grid size in [x,y] form if the element
+         *                    is currently using the grid, [1,1] if it is using
+         *                    pixels.
+         */
+        ElementProxy.prototype.getGridSize = function () {
+            var gridSize;
+            // Default to using the grid if useGrid was not defined
+            if (typeof this.element.useGrid === 'undefined') {
+                this.element.useGrid = true;
+            }
+            if (this.element.useGrid) {
+                gridSize = this.gridSize;
+            } else {
+                gridSize = [1,1];
+            }
+            return gridSize;
+        };
+
+        /**
+         * Set the current grid size stored by this element proxy
+         * @param {number[]} gridSize The current layout grid size in [x,y] form
+         */
+        ElementProxy.prototype.setGridSize = function (gridSize) {
+            this.gridSize = gridSize;
+        };
+
+        /**
+         * Get the current minimum element width in grid units
+         * @return {number} The current minimum element width
+         */
+        ElementProxy.prototype.getMinWidth = function () {
+            return Math.ceil(MIN_WIDTH / this.getGridSize()[0]);
+        };
+
+        /**
+         * Get the current minimum element height in grid units
+         * @return {number} The current minimum element height
+         */
+        ElementProxy.prototype.getMinHeight = function () {
+            return Math.ceil(MIN_HEIGHT / this.getGridSize()[1]);
+        };
+
+        return ElementProxy;
+    }
+);

platform/features/layout/src/elements/ImageProxy.js

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * 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(
+    ['./ElementProxy', './AccessorMutator'],
+    function (ElementProxy, AccessorMutator) {
+
+        /**
+         * Selection proxy for Image elements in a fixed position view.
+         *
+         * Note that arguments here are meant to match those expected
+         * by `Array.prototype.map`
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param element the fixed position element, as stored in its
+         *        configuration
+         * @param index the element's index within its array
+         * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
+         * @augments {platform/features/layout.ElementProxy}
+         */
+        function ImageProxy(element, index, elements, gridSize) {
+            var proxy = new ElementProxy(element, index, elements, gridSize);
+
+            /**
+             * Get and/or set the displayed text of this element.
+             * @param {string} [text] the new text (if setting)
+             * @returns {string} the text
+             * @memberof platform/features/layout.ImageProxy#
+             */
+            proxy.url = new AccessorMutator(element, 'url');
+
+            return proxy;
+        }
+
+        return ImageProxy;
+    }
+);

platform/features/layout/src/elements/LineHandle.js

@@ -0,0 +1,94 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Handle for changing x/y position of a line's end point.
+         * This is used to support drag handles for line elements
+         * in a fixed position view. Field names for opposite ends
+         * are provided to avoid zero-length lines.
+         * @memberof platform/features/layout
+         * @constructor
+         * @param element the line element
+         * @param {string} xProperty field which stores x position
+         * @param {string} yProperty field which stores y position
+         * @param {string} xOther field which stores x of other end
+         * @param {string} yOther field which stores y of other end
+         * @implements {platform/features/layout.ElementHandle}
+         */
+        function LineHandle(element, elementProxy, xProperty, yProperty, xOther, yOther) {
+            this.elementProxy = elementProxy;
+            this.element = element;
+            this.xProperty = xProperty;
+            this.yProperty = yProperty;
+            this.xOther = xOther;
+            this.yOther = yOther;
+        }
+
+        LineHandle.prototype.x = function (value) {
+            var element = this.element,
+                xProperty = this.xProperty,
+                yProperty = this.yProperty,
+                xOther = this.xOther,
+                yOther = this.yOther;
+
+            if (arguments.length > 0) {
+                // Ensure we stay in view
+                value = Math.max(value, 0);
+                // Make sure end points will still be different
+                if (element[yOther] !== element[yProperty] ||
+                    element[xOther] !== value) {
+                    element[xProperty] = value;
+                }
+            }
+            return element[xProperty];
+        };
+
+        LineHandle.prototype.y = function (value) {
+            var element = this.element,
+                xProperty = this.xProperty,
+                yProperty = this.yProperty,
+                xOther = this.xOther,
+                yOther = this.yOther;
+
+            if (arguments.length > 0) {
+                // Ensure we stay in view
+                value = Math.max(value, 0);
+                // Make sure end points will still be different
+                if (element[xOther] !== element[xProperty] ||
+                    element[yOther] !== value) {
+                    element[yProperty] = value;
+                }
+            }
+            return element[yProperty];
+        };
+
+        LineHandle.prototype.getGridSize = function () {
+            return this.elementProxy.getGridSize();
+        };
+
+        return LineHandle;
+
+    }
+);

platform/features/layout/src/elements/LineProxy.js

@@ -0,0 +1,171 @@
+/*****************************************************************************
+ * 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(
+    ['./ElementProxy', './LineHandle', './AccessorMutator'],
+    function (ElementProxy, LineHandle, AccessorMutator) {
+
+        /**
+         * Selection/diplay proxy for line elements of a fixed position
+         * view.
+         * @memberof platform/features/layout
+         * @constructor
+         * @param element the fixed position element, as stored in its
+         *        configuration
+         * @param index the element's index within its array
+         * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
+         * @augments {platform/features/layout.ElementProxy}
+         */
+        function LineProxy(element, index, elements, gridSize) {
+            var proxy = new ElementProxy(element, index, elements, gridSize),
+                handles = [
+                    new LineHandle(element, proxy, 'x', 'y', 'x2', 'y2'),
+                    new LineHandle(element, proxy, 'x2', 'y2', 'x', 'y')
+                ];
+
+            /**
+             * Gets style specific to line proxy.
+             */
+            proxy.getStyle = function () {
+                var layoutGridSize = proxy.getGridSize();
+
+                return {
+                    left: (layoutGridSize[0] * proxy.x()) + 'px',
+                    top: (layoutGridSize[1] * proxy.y()) + 'px',
+                    width: (layoutGridSize[0] * proxy.width()) + 'px',
+                    height: (layoutGridSize[1] * proxy.height()) + 'px'
+                };
+            };
+
+            /**
+             * Get the top-left x coordinate, in grid space, of
+             * this line's bounding box.
+             * @returns {number} the x coordinate
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.x = function (v) {
+                var x = Math.min(element.x, element.x2),
+                    delta = Math.max(v, 0) - x;
+                if (arguments.length > 0 && delta) {
+                    element.x += delta;
+                    element.x2 += delta;
+                }
+                return x;
+            };
+
+            /**
+             * Get the top-left y coordinate, in grid space, of
+             * this line's bounding box.
+             * @returns {number} the y coordinate
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.y = function (v) {
+                var y = Math.min(element.y, element.y2),
+                    delta = Math.max(v, 0) - y;
+                if (arguments.length > 0 && delta) {
+                    element.y += delta;
+                    element.y2 += delta;
+                }
+                return y;
+            };
+
+            /**
+             * Get the width, in grid space, of
+             * this line's bounding box.
+             * @returns {number} the width
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.width = function () {
+                return Math.max(Math.abs(element.x - element.x2), 1);
+            };
+
+            /**
+             * Get the height, in grid space, of
+             * this line's bounding box.
+             * @returns {number} the height
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.height = function () {
+                return Math.max(Math.abs(element.y - element.y2), 1);
+            };
+
+            /**
+             * Get the x position, in grid units relative to
+             * the top-left corner, of the first point in this line
+             * segment.
+             * @returns {number} the x position of the first point
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.x1 = function () {
+                return element.x - proxy.x();
+            };
+
+            /**
+             * Get the y position, in grid units relative to
+             * the top-left corner, of the first point in this line
+             * segment.
+             * @returns {number} the y position of the first point
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.y1 = function () {
+                return element.y - proxy.y();
+            };
+
+            /**
+             * Get the x position, in grid units relative to
+             * the top-left corner, of the second point in this line
+             * segment.
+             * @returns {number} the x position of the second point
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.x2 = function () {
+                return element.x2 - proxy.x();
+            };
+
+            /**
+             * Get the y position, in grid units relative to
+             * the top-left corner, of the second point in this line
+             * segment.
+             * @returns {number} the y position of the second point
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.y2 = function () {
+                return element.y2 - proxy.y();
+            };
+
+            /**
+             * Get element handles for changing the position of end
+             * points of this line.
+             * @returns {LineHandle[]} line handles for both end points
+             * @memberof platform/features/layout.LineProxy#
+             */
+            proxy.handles = function () {
+                return handles;
+            };
+
+            return proxy;
+        }
+
+        return LineProxy;
+    }
+);

platform/features/layout/src/elements/ResizeHandle.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 () {
+
+        /**
+         * @interface platform/features/layout.ElementHandle
+         * @private
+         */
+
+        /**
+         * Handle for changing width/height properties of an element.
+         * This is used to support drag handles for different
+         * element types in a fixed position view.
+         * @memberof platform/features/layout
+         * @constructor
+         */
+        function ResizeHandle(elementProxy, element) {
+            this.elementProxy = elementProxy;
+            this.element = element;
+        }
+
+        ResizeHandle.prototype.x = function (value) {
+            var element = this.element;
+            if (arguments.length > 0) {
+                element.width = Math.max(
+                    this.elementProxy.getMinWidth(),
+                    value - element.x
+                );
+            }
+            return element.x + element.width;
+        };
+
+        ResizeHandle.prototype.y = function (value) {
+            var element = this.element;
+            if (arguments.length > 0) {
+                element.height = Math.max(
+                    this.elementProxy.getMinHeight(),
+                    value - element.y
+                );
+            }
+            return element.y + element.height;
+        };
+
+        ResizeHandle.prototype.getGridSize = function () {
+            return this.elementProxy.getGridSize();
+        };
+
+        return ResizeHandle;
+
+    }
+);

platform/features/layout/src/elements/TelemetryProxy.js

@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * 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(
+    ['./TextProxy'],
+    function (TextProxy) {
+
+        /**
+         * Selection proxy for telemetry elements in a fixed position view.
+         *
+         * Note that arguments here are meant to match those expected
+         * by `Array.prototype.map`
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param element the fixed position element, as stored in its
+         *        configuration
+         * @param index the element's index within its array
+         * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] form
+         * @augments {platform/features/layout.ElementProxy}
+         */
+        function TelemetryProxy(element, index, elements, gridSize) {
+            var proxy = new TextProxy(element, index, elements, gridSize);
+
+            // Expose the domain object identifier
+            proxy.id = element.id;
+
+            // Don't expose text configuration
+            delete proxy.text;
+
+            return proxy;
+        }
+
+        return TelemetryProxy;
+    }
+);

platform/features/layout/src/elements/TextProxy.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(
+    ['./BoxProxy', './AccessorMutator'],
+    function (BoxProxy, AccessorMutator) {
+
+        /**
+         * Selection proxy for Text elements in a fixed position view.
+         *
+         * Note that arguments here are meant to match those expected
+         * by `Array.prototype.map`
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param element the fixed position element, as stored in its
+         *        configuration
+         * @param index the element's index within its array
+         * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
+         * @augments {platform/features/layout.ElementProxy}
+         */
+        function TextProxy(element, index, elements, gridSize) {
+            var proxy = new BoxProxy(element, index, elements, gridSize);
+
+            /**
+             * Get and/or set the text color of this element.
+             * @param {string} [color] the new text color (if setting)
+             * @returns {string} the text color
+             * @memberof platform/features/layout.TextProxy#
+             */
+            proxy.color = new AccessorMutator(element, 'color');
+
+            /**
+             * Get and/or set the displayed text of this element.
+             * @param {string} [text] the new text (if setting)
+             * @returns {string} the text
+             * @memberof platform/features/layout.TextProxy#
+             */
+            proxy.text = new AccessorMutator(element, 'text');
+
+            /**
+             * Get and/or set the text size of this element.
+             *
+             * @param {string} [size] the new text size (if setting)
+             * @returns {string} the text size
+             * @memberof platform/features/layout.TextProxy#
+             */
+            proxy.size = new AccessorMutator(element, 'size');
+
+            if (proxy.size() === undefined) {
+                proxy.size("13px");
+            }
+
+            return proxy;
+        }
+
+        return TextProxy;
+    }
+);

platform/features/layout/src/elements/UnitAccessorMutator.js

@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Variant of AccessorMutator to handle the specific case of updating
+         * useGrid, in order update the positions appropriately from within
+         * the scope of UnitAccessorMutator
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param {ElementProxy} proxy ElementProxy object to perform the update
+         *                             upon
+         */
+        function UnitAccessorMutator(elementProxy) {
+            var self = this;
+
+            this.elementProxy = elementProxy;
+            return function (useGrid) {
+                var current = elementProxy.element.useGrid;
+                if (arguments.length > 0) {
+                    elementProxy.element.useGrid = useGrid;
+                    if (useGrid && !current) {
+                        self.convertCoordsTo('grid');
+                    } else if (!useGrid && current) {
+                        self.convertCoordsTo('px');
+                    }
+                }
+
+                return elementProxy.element.useGrid;
+            };
+        }
+
+        /**
+         * For the elementProxy object called upon, convert its element's
+         * coordinates and size from pixels to grid units, or vice-versa.
+         * @param {string} unit When called with 'px', converts grid units to
+         *                      pixels; when called with 'grid', snaps element
+         *                      to grid units
+         */
+        UnitAccessorMutator.prototype.convertCoordsTo = function (unit) {
+            var proxy = this.elementProxy,
+                gridSize = proxy.gridSize,
+                element = proxy.element,
+                minWidth = proxy.getMinWidth(),
+                minHeight = proxy.getMinHeight();
+            if (unit === 'px') {
+                element.x = element.x * gridSize[0];
+                element.y = element.y * gridSize[1];
+                element.width = element.width * gridSize[0];
+                element.height = element.height * gridSize[1];
+                if (element.x2 && element.y2) {
+                    element.x2 = element.x2 * gridSize[0];
+                    element.y2 = element.y2 * gridSize[1];
+                }
+            } else if (unit === 'grid') {
+                element.x = Math.round(element.x / gridSize[0]);
+                element.y = Math.round(element.y / gridSize[1]);
+                element.width = Math.max(Math.round(element.width / gridSize[0]), minWidth);
+                element.height = Math.max(Math.round(element.height / gridSize[1]), minHeight);
+                if (element.x2 && element.y2) {
+                    element.x2 = Math.round(element.x2 / gridSize[0]);
+                    element.y2 = Math.round(element.y2 / gridSize[1]);
+                }
+            }
+        };
+
+        return UnitAccessorMutator;
+    }
+);

platform/features/layout/test/FixedControllerSpec.js

@@ -0,0 +1,641 @@
+/*****************************************************************************
+ * 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/FixedController",
+        "zepto"
+    ],
+    function (
+        FixedController,
+        $
+    ) {
+
+        describe("The Fixed Position controller", function () {
+            var mockScope,
+                mockQ,
+                mockDialogService,
+                mockFormatter,
+                mockDomainObject,
+                mockEvent,
+                testGrid,
+                testModel,
+                testConfiguration,
+                mockOpenMCT,
+                mockTelemetryAPI,
+                mockCompositionAPI,
+                mockCompositionCollection,
+                mockChildren,
+                mockConductor,
+                mockMetadata,
+                mockTimeSystem,
+                mockLimitEvaluator,
+                mockSelection,
+                mockObjects,
+                mockNewDomainObject,
+                unlistenFunc,
+                $element = [],
+                selectable = [],
+                controller;
+
+            // Utility function; find a $on calls for a given expression.
+            function findOn(expr) {
+                var on;
+                mockScope.$on.calls.all().forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        on = call.args[1];
+                    }
+                });
+                return on;
+            }
+
+            function makeMockDomainObject(id) {
+                return {
+                    identifier: {
+                        key: "domainObject-" + id,
+                        namespace: ""
+                    },
+                    name: "Point " + id
+                };
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj(
+                    '$scope',
+                    ["$on", "$watch", "$digest", "commit"]
+                );
+                mockQ = jasmine.createSpyObj('$q', ['when']);
+                mockDialogService = jasmine.createSpyObj(
+                    'dialogService',
+                    ['getUserInput']
+                );
+                mockFormatter = jasmine.createSpyObj(
+                    'telemetryFormatter',
+                    ['format']
+                );
+                mockFormatter.format.and.callFake(function (valueMetadata) {
+                    return "Formatted " + valueMetadata.value;
+                });
+
+                mockConductor = jasmine.createSpyObj('conductor', [
+                    'on',
+                    'off',
+                    'bounds',
+                    'timeSystem',
+                    'clock'
+                ]);
+                mockConductor.bounds.and.returnValue({});
+                mockTimeSystem = {
+                    metadata: {
+                        key: 'key'
+                    }
+                };
+                mockConductor.timeSystem.and.returnValue(mockTimeSystem);
+
+                mockEvent = jasmine.createSpyObj(
+                    'event',
+                    ['preventDefault']
+                );
+
+                mockTelemetryAPI = jasmine.createSpyObj('telemetry',
+                    [
+                        'subscribe',
+                        'request',
+                        'isTelemetryObject',
+                        'getMetadata',
+                        'limitEvaluator',
+                        'getValueFormatter'
+                    ]
+                );
+                mockTelemetryAPI.isTelemetryObject.and.returnValue(true);
+                mockTelemetryAPI.request.and.returnValue(Promise.resolve([]));
+
+                testGrid = [123, 456];
+                testModel = {
+                    composition: ['a', 'b', 'c'],
+                    layoutGrid: testGrid
+                };
+                testConfiguration = { elements: [
+                    { type: "fixed.telemetry", id: 'a', x: 1, y: 1, useGrid: true},
+                    { type: "fixed.telemetry", id: 'b', x: 1, y: 1, useGrid: true},
+                    { type: "fixed.telemetry", id: 'c', x: 1, y: 1, useGrid: true}
+                ]};
+
+                mockChildren = testModel.composition.map(makeMockDomainObject);
+                mockCompositionCollection = jasmine.createSpyObj('compositionCollection', [
+                    'load',
+                    'on',
+                    'off'
+                ]);
+                mockCompositionAPI = jasmine.createSpyObj('composition', [
+                    'get'
+                ]);
+                mockCompositionAPI.get.and.returnValue(mockCompositionCollection);
+                mockCompositionCollection.load.and.returnValue(
+                    Promise.resolve(mockChildren)
+                );
+
+                mockScope.model = testModel;
+                mockScope.configuration = testConfiguration;
+
+                mockNewDomainObject = jasmine.createSpyObj("newDomainObject", [
+                    'layoutGrid',
+                    'configuration',
+                    'composition'
+                ]);
+                mockNewDomainObject.layoutGrid = testGrid;
+                mockNewDomainObject.configuration = {
+                    'fixed-display': testConfiguration
+                };
+                mockNewDomainObject.composition = ['a', 'b', 'c'];
+
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    ['getId', 'getModel', 'getCapability', 'useCapability']
+                );
+                mockDomainObject.useCapability.and.returnValue(mockNewDomainObject);
+                mockScope.domainObject = mockDomainObject;
+
+                selectable[0] = {
+                    context: {
+                        oldItem: mockDomainObject
+                    }
+                };
+                mockSelection = jasmine.createSpyObj("selection", [
+                    'select',
+                    'on',
+                    'off',
+                    'get'
+                ]);
+                mockSelection.get.and.returnValue([]);
+
+                unlistenFunc = jasmine.createSpy("unlisten");
+                mockObjects = jasmine.createSpyObj('objects', [
+                    'observe',
+                    'get'
+                ]);
+                mockObjects.observe.and.returnValue(unlistenFunc);
+
+                mockOpenMCT = {
+                    time: mockConductor,
+                    telemetry: mockTelemetryAPI,
+                    composition: mockCompositionAPI,
+                    selection: mockSelection,
+                    objects: mockObjects
+                };
+
+                $element = $('<div></div>');
+                spyOn($element[0], 'click');
+
+                mockMetadata = jasmine.createSpyObj('mockMetadata', [
+                    'valuesForHints',
+                    'value',
+                    'values'
+                ]);
+                mockMetadata.value.and.returnValue({
+                    key: 'value'
+                });
+
+                mockMetadata.valuesForHints.and.callFake(function (hints) {
+                    if (hints === ['domain']) {
+                        return [{
+                            key: 'time'
+                        }];
+                    } else {
+                        return [{
+                            key: 'value'
+                        }];
+                    }
+                });
+
+                mockLimitEvaluator = jasmine.createSpyObj('limitEvaluator', [
+                    'evaluate'
+                ]);
+
+                mockLimitEvaluator.evaluate.and.returnValue({});
+
+                mockTelemetryAPI.getMetadata.and.returnValue(mockMetadata);
+                mockTelemetryAPI.limitEvaluator.and.returnValue(mockLimitEvaluator);
+                mockTelemetryAPI.getValueFormatter.and.returnValue(mockFormatter);
+
+                controller = new FixedController(
+                    mockScope,
+                    mockQ,
+                    mockDialogService,
+                    mockOpenMCT,
+                    $element
+                );
+                spyOn(controller, "mutate");
+            });
+
+            it("subscribes a domain object", function () {
+                var object = makeMockDomainObject("mock");
+
+                return controller.getTelemetry(object).then(function () {
+                    expect(mockTelemetryAPI.subscribe).toHaveBeenCalledWith(
+                        object,
+                        jasmine.any(Function),
+                        jasmine.any(Object)
+                    );
+                });
+            });
+
+            it("releases subscription when a domain objects is removed", function () {
+                var unsubscribe = jasmine.createSpy('unsubscribe');
+                var unsubscribePromise = new Promise(function (resolve) {
+                    unsubscribe.and.callFake(resolve);
+                });
+                var object = makeMockDomainObject("mock");
+
+                mockTelemetryAPI.subscribe.and.returnValue(unsubscribe);
+                return controller.getTelemetry(object).then(function () {
+                    controller.onCompositionRemove(object.identifier);
+                    return unsubscribePromise;
+                }).then(function () {
+                    expect(unsubscribe).toHaveBeenCalled();
+                });
+            });
+
+            it("exposes visible elements based on configuration", function () {
+                var elements = controller.getElements();
+
+                expect(elements.length).toEqual(3);
+                expect(elements[0].id).toEqual('a');
+                expect(elements[1].id).toEqual('b');
+                expect(elements[2].id).toEqual('c');
+            });
+
+            it("allows elements to be selected", function () {
+                selectable[0].context.elementProxy = controller.getElements()[1];
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                expect(controller.isElementSelected()).toBe(true);
+            });
+
+            it("allows selection retrieval", function () {
+                var elements = controller.getElements();
+                selectable[0].context.elementProxy = elements[1];
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                expect(controller.getSelectedElement()).toEqual(elements[1]);
+            });
+
+            it("selects the parent view when selected element is removed", function () {
+                var elements = controller.getElements();
+                selectable[0].context.elementProxy = elements[1];
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+                controller.remove(elements[1]);
+
+                expect($element[0].click).toHaveBeenCalled();
+            });
+
+            it("retains selections during refresh", function () {
+                // Get elements; remove one of them; trigger refresh.
+                // Same element (at least by index) should still be selected.
+                var elements = controller.getElements();
+                selectable[0].context.elementProxy = elements[1];
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                expect(controller.getSelectedElement()).toEqual(elements[1]);
+
+                controller.remove(elements[2]);
+                elements = controller.getElements();
+
+                // Verify removal, as test assumes this
+                expect(elements.length).toEqual(2);
+
+                expect(controller.shouldSelect(elements[1])).toBe(true);
+            });
+
+            it("Displays received values for telemetry elements", function () {
+                var elements;
+                var mockTelemetry = {
+                    time: 100,
+                    value: 200
+                };
+                var testElement = {};
+                var telemetryObject = {
+                    identifier: {
+                        key: '12345'
+                    }
+                };
+                mockConductor.clock.and.returnValue({});
+                controller.elementProxiesById = {};
+                controller.elementProxiesById['12345'] = [testElement];
+                controller.elementProxies = [testElement];
+
+                controller.subscribeToObject(telemetryObject);
+                mockTelemetryAPI.subscribe.calls.mostRecent().args[1](mockTelemetry);
+
+                return new Promise(function (resolve) {
+                    mockScope.$digest.and.callFake(resolve);
+                }).then(function () {
+                    // Get elements that controller is now exposing
+                    elements = controller.getElements();
+
+                    // Formatted values should be available
+                    expect(elements[0].value).toEqual("Formatted 200");
+                });
+            });
+
+            it("updates elements styles when grid size changes", function () {
+                // Grid size is initially set to testGrid which is [123, 456]
+                var originalLeft = controller.getElements()[0].style.left;
+
+                // Change the grid size
+                controller.updateElementPositions([20, 20]);
+
+                expect(controller.getElements()[0].style.left).not.toEqual(originalLeft);
+            });
+
+            it("listens for drop events", function () {
+                mockScope.domainObject = mockDomainObject;
+                mockScope.model = testModel;
+
+                // Layout should position panels according to
+                // where the user dropped them, so it needs to
+                // listen for drop events.
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    'mctDrop',
+                    jasmine.any(Function)
+                );
+
+                // Verify precondition
+                expect(testConfiguration.elements.length).toEqual(3);
+
+                // Notify that a drop occurred
+                testModel.composition.push('d');
+
+                mockObjects.get.and.returnValue(Promise.resolve([]));
+
+                findOn('mctDrop')(
+                    mockEvent,
+                    'd',
+                    { x: 300, y: 100 }
+                );
+
+                // Should have added an element
+                expect(testConfiguration.elements.length).toEqual(4);
+
+                // ...and prevented default...
+                expect(mockEvent.preventDefault).toHaveBeenCalled();
+            });
+
+            it("ignores drops when default has been prevented", function () {
+                // Avoids redundant drop-handling, WTD-1233
+                mockEvent.defaultPrevented = true;
+
+                // Notify that a drop occurred
+                testModel.composition.push('d');
+                findOn('mctDrop')(
+                    mockEvent,
+                    'd',
+                    { x: 300, y: 100 }
+                );
+
+                // Should NOT have added an element
+                expect(testConfiguration.elements.length).toEqual(3);
+            });
+
+            it("unsubscribes when destroyed", function () {
+                var unsubscribe = jasmine.createSpy('unsubscribe');
+                var object = makeMockDomainObject("mock");
+
+                mockTelemetryAPI.subscribe.and.returnValue(unsubscribe);
+
+                return controller.getTelemetry(object).then(function () {
+                    expect(unsubscribe).not.toHaveBeenCalled();
+                    // Destroy the scope
+                    findOn('$destroy')();
+
+                    expect(unsubscribe).toHaveBeenCalled();
+                });
+            });
+
+            it("exposes its grid size", function () {
+                expect(controller.getGridSize()).toEqual(testGrid);
+            });
+
+            it("exposes drag handles", function () {
+                var handles;
+                selectable[0].context.elementProxy = controller.getElements()[1];
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                // Should have a non-empty array of handles
+                handles = controller.handles();
+
+                expect(handles).toEqual(jasmine.any(Array));
+                expect(handles.length).not.toEqual(0);
+
+                // And they should have start/continue/end drag methods
+                handles.forEach(function (handle) {
+                    expect(handle.startDrag).toEqual(jasmine.any(Function));
+                    expect(handle.continueDrag).toEqual(jasmine.any(Function));
+                    expect(handle.endDrag).toEqual(jasmine.any(Function));
+                });
+            });
+
+            it("exposes a move handle", function () {
+                selectable[0].context.elementProxy = controller.getElements()[1];
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                // Should have a move handle
+                var handle = controller.moveHandle();
+
+                // And it should have start/continue/end drag methods
+                expect(handle.startDrag).toEqual(jasmine.any(Function));
+                expect(handle.continueDrag).toEqual(jasmine.any(Function));
+                expect(handle.endDrag).toEqual(jasmine.any(Function));
+            });
+
+            it("updates selection style during drag", function () {
+                var oldStyle;
+                selectable[0].context.elementProxy = controller.getElements()[1];
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
+
+                // Get style
+                oldStyle = controller.getSelectedElementStyle();
+
+                // Start a drag gesture
+                controller.moveHandle().startDrag();
+
+                // Haven't moved yet; style shouldn't have updated yet
+                expect(controller.getSelectedElementStyle()).toEqual(oldStyle);
+
+                // Drag a little
+                controller.moveHandle().continueDrag([1000, 100]);
+
+                // Style should have been updated
+                expect(controller.getSelectedElementStyle()).not.toEqual(oldStyle);
+            });
+
+            it("cleans up selection on scope destroy", function () {
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    '$destroy',
+                    jasmine.any(Function)
+                );
+
+                mockScope.$on.calls.mostRecent().args[1]();
+
+                expect(mockOpenMCT.selection.off).toHaveBeenCalledWith(
+                    'change',
+                    jasmine.any(Function)
+                );
+            });
+
+            describe("on display bounds changes", function () {
+                var testBounds;
+                var boundsChangeCallback;
+                var objectOne;
+                var objectTwo;
+
+                beforeEach(function () {
+                    testBounds = { start: 123, end: 321 };
+                    boundsChangeCallback = mockConductor.on.calls.mostRecent().args[1];
+                    objectOne = {};
+                    objectTwo = {};
+                    controller.telemetryObjects = [
+                        objectOne,
+                        objectTwo
+                    ];
+                    spyOn(controller, "fetchHistoricalData");
+                    controller.fetchHistoricalData.and.callThrough();
+                });
+
+                it("registers a bounds change listener", function () {
+                    expect(mockConductor.on).toHaveBeenCalledWith("bounds", jasmine.any(Function));
+                });
+
+                it("requests only a single point", function () {
+                    mockConductor.clock.and.returnValue(undefined);
+                    boundsChangeCallback(testBounds);
+                    expect(mockTelemetryAPI.request.calls.count()).toBe(2);
+
+                    mockTelemetryAPI.request.calls.all().forEach(function (call) {
+                        expect(call.args[1].size).toBe(1);
+                    });
+                });
+
+                it("Does not fetch historical data on tick", function () {
+                    boundsChangeCallback(testBounds, true);
+                    expect(mockTelemetryAPI.request.calls.count()).toBe(0);
+                });
+            });
+
+            describe("on receipt of telemetry", function () {
+                var mockTelemetryObject;
+                var testValue;
+                var testElement;
+
+                beforeEach(function () {
+                    mockTelemetryObject = {
+                        identifier: {
+                            key: '12345'
+                        }
+                    };
+                    testValue = 30;
+                    testElement = {};
+
+                    controller.elementProxiesById = {};
+                    controller.elementProxiesById['12345'] = [testElement];
+                    controller.elementProxies = [testElement];
+                });
+
+                it("updates displayed values from historical telemetry", function () {
+                    spyOn(controller, "updateView");
+                    controller.updateView.and.callThrough();
+
+                    mockTelemetryAPI.request.and.returnValue(Promise.resolve([{
+                        time: 100,
+                        value: testValue
+                    }]));
+
+                    controller.fetchHistoricalData(mockTelemetryObject);
+
+                    return new Promise(function (resolve) {
+                        mockScope.$digest.and.callFake(resolve);
+                    }).then(function () {
+                        expect(controller.updateView).toHaveBeenCalled();
+                        expect(controller.getElements()[0].value)
+                            .toEqual("Formatted " + testValue);
+                    });
+                });
+
+                it("selects an range value to display, if available", function () {
+                    mockMetadata.valuesForHints.and.returnValue([
+                        {
+                            key: 'range',
+                            source: 'range'
+                        }
+                    ]);
+                    var key = controller.chooseValueMetadataToDisplay(mockMetadata).source;
+                    expect(key).toEqual('range');
+                });
+
+                it("selects the first non-domain value to display, if no range available", function () {
+                    mockMetadata.valuesForHints.and.returnValue([]);
+                    mockMetadata.values.and.returnValue([
+                        {
+                            key: 'domain',
+                            source: 'domain',
+                            hints: {
+                                domain: 1
+                            }
+                        },
+                        {
+                            key: 'image',
+                            source: 'image',
+                            hints: {
+                                image: 1
+                            }
+                        }
+                    ]);
+                    var key = controller.chooseValueMetadataToDisplay(mockMetadata).source;
+                    expect(key).toEqual('image');
+                });
+
+                it("reflects limit status", function () {
+                    mockLimitEvaluator.evaluate.and.returnValue({cssClass: "alarm-a"});
+                    controller.updateView(mockTelemetryObject, [{
+                        time: 100,
+                        value: testValue
+                    }]);
+
+                    return new Promise(function (resolve) {
+                        mockScope.$digest.and.callFake(resolve);
+                    }).then(function () {
+                        // Limit-based CSS classes should be available
+                        expect(controller.getElements()[0].cssClass).toEqual("alarm-a");
+                    });
+                });
+
+                it("listens for selection change events", function () {
+                    expect(mockOpenMCT.selection.on).toHaveBeenCalledWith(
+                        'change',
+                        jasmine.any(Function)
+                    );
+                });
+
+            });
+        });
+    }
+);

platform/features/layout/test/FixedDragHandleSpec.js

@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * 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/FixedDragHandle'],
+    function (FixedDragHandle) {
+
+        var TEST_GRID_SIZE = [13, 33];
+
+        describe("A fixed position drag handle", function () {
+            var mockElementHandle,
+                mockConfigPath,
+                mockFixedControl,
+                handle;
+
+            beforeEach(function () {
+                mockElementHandle = jasmine.createSpyObj(
+                    'elementHandle',
+                    ['x', 'y','getGridSize']
+                );
+                mockElementHandle.x.and.returnValue(6);
+                mockElementHandle.y.and.returnValue(8);
+                mockElementHandle.getGridSize.and.returnValue(TEST_GRID_SIZE);
+
+                mockFixedControl = jasmine.createSpyObj(
+                    'fixedControl',
+                    ['updateSelectionStyle', 'mutate']
+                );
+                mockFixedControl.updateSelectionStyle.and.returnValue();
+                mockFixedControl.mutate.and.returnValue();
+
+                mockConfigPath = jasmine.createSpy('configPath');
+
+                handle = new FixedDragHandle(
+                    mockElementHandle,
+                    mockConfigPath,
+                    mockFixedControl
+                );
+            });
+
+            it("provides a style for positioning", function () {
+                var style = handle.style();
+                // 6 grid coords * 13 pixels - 3 pixels for centering
+                expect(style.left).toEqual('75px');
+                // 8 grid coords * 33 pixels - 3 pixels for centering
+                expect(style.top).toEqual('261px');
+            });
+
+            it("allows handles to be dragged", function () {
+                handle.startDrag();
+                handle.continueDrag([16, 8]);
+
+                // Should update x/y, snapped to grid
+                expect(mockElementHandle.x).toHaveBeenCalledWith(7);
+                expect(mockElementHandle.y).toHaveBeenCalledWith(8);
+
+                handle.continueDrag([-16, -35]);
+
+                // Should have interpreted relative to initial state
+                expect(mockElementHandle.x).toHaveBeenCalledWith(5);
+                expect(mockElementHandle.y).toHaveBeenCalledWith(7);
+
+                // Should have called updateSelectionStyle once per continueDrag
+                expect(mockFixedControl.updateSelectionStyle.calls.count()).toEqual(2);
+
+                // Finally, ending drag should mutate
+                handle.endDrag();
+                expect(mockFixedControl.mutate).toHaveBeenCalled();
+            });
+
+        });
+    }
+);

platform/features/layout/test/FixedProxySpec.js

@@ -0,0 +1,71 @@
+/*****************************************************************************
+ * 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/FixedProxy'],
+    function (FixedProxy) {
+
+        describe("Fixed Position view's selection proxy", function () {
+            var mockCallback,
+                mockQ,
+                mockDialogService,
+                mockPromise,
+                proxy;
+
+            beforeEach(function () {
+                mockCallback = jasmine.createSpy('callback');
+                mockQ = jasmine.createSpyObj('$q', ['when']);
+                mockDialogService = jasmine.createSpyObj('dialogService', ['getUserInput']);
+                mockPromise = jasmine.createSpyObj('promise', ['then']);
+
+                mockQ.when.and.returnValue(mockPromise);
+
+                proxy = new FixedProxy(mockCallback, mockQ, mockDialogService);
+            });
+
+            it("handles promised element creation", function () {
+                // The element factory may return promises (e.g. if
+                // user input is required) so make sure proxy is wrapping these
+                proxy.add("fixed.box");
+                expect(mockQ.when).toHaveBeenCalled();
+            });
+
+            it("notifies its callback when an element is created", function () {
+                proxy.add("fixed.box");
+                // Callback should not have been invoked yet
+                expect(mockCallback).not.toHaveBeenCalled();
+                // Resolve the promise
+                mockPromise.then.calls.mostRecent().args[0]({});
+                // Should have fired the callback
+                expect(mockCallback).toHaveBeenCalledWith({
+                    type: "fixed.box",
+                    x: 0,
+                    y: 0,
+                    width: 1,
+                    height: 1,
+                    useGrid: true
+                });
+            });
+
+        });
+    }
+);

platform/features/layout/test/LayoutCompositionPolicySpec.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.
+ *****************************************************************************/
+
+define(
+    ["../src/LayoutCompositionPolicy"],
+    function (LayoutCompositionPolicy) {
+        describe("Layout's composition policy", function () {
+            var mockChild,
+                mockCandidateObj,
+                mockCandidate,
+                mockContext,
+                candidateType,
+                contextType,
+                policy;
+
+            beforeEach(function () {
+                mockChild = jasmine.createSpyObj(
+                    'childObject',
+                    ['getCapability']
+                );
+                mockCandidate =
+                    jasmine.createSpyObj('candidateType', ['instanceOf']);
+                mockContext =
+                    jasmine.createSpyObj('contextType', ['instanceOf']);
+
+                mockCandidateObj = jasmine.createSpyObj('domainObj', [
+                    'getCapability'
+                ]);
+                mockCandidateObj.getCapability.and.returnValue(mockCandidate);
+
+                mockChild.getCapability.and.returnValue(mockContext);
+
+                mockCandidate.instanceOf.and.callFake(function (t) {
+                    return t === candidateType;
+                });
+                mockContext.instanceOf.and.callFake(function (t) {
+                    return t === contextType;
+                });
+
+                policy = new LayoutCompositionPolicy();
+            });
+
+            it("disallows folders in layouts", function () {
+                candidateType = 'layout';
+                contextType = 'folder';
+                expect(policy.allow(mockCandidateObj, mockChild)).toBe(false);
+            });
+
+            it("does not disallow folders elsewhere", function () {
+                candidateType = 'nonlayout';
+                contextType = 'folder';
+                expect(policy.allow(mockCandidateObj, mockChild)).toBe(true);
+            });
+
+            it("allows things other than folders in layouts", function () {
+                candidateType = 'layout';
+                contextType = 'nonfolder';
+                expect(policy.allow(mockCandidateObj, mockChild)).toBe(true);
+            });
+
+        });
+    }
+);

platform/features/layout/test/LayoutDragSpec.js

@@ -0,0 +1,81 @@
+/*****************************************************************************
+ * 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/LayoutDrag"],
+    function (LayoutDrag) {
+
+        describe("A Layout drag handler", function () {
+            var testPosition = {
+                position: [8, 11],
+                dimensions: [3, 2]
+            };
+
+            it("changes position by a supplied factor, rounding by grid size", function () {
+                var handler = new LayoutDrag(
+                    testPosition,
+                    [1, 1],
+                    [0, 0],
+                    [10, 20]
+                );
+
+                expect(handler.getAdjustedPosition([37, 84])).toEqual({
+                    position: [12, 15],
+                    dimensions: [3, 2]
+                });
+                expect(handler.getAdjustedPosition([-37, 84])).toEqual({
+                    position: [4, 15],
+                    dimensions: [3, 2]
+                });
+            });
+
+            it("changes dimensions by a supplied factor, rounding by grid size", function () {
+                var handler = new LayoutDrag(
+                    testPosition,
+                    [0, 0],
+                    [1, 1],
+                    [10, 20]
+                );
+
+                expect(handler.getAdjustedPosition([37, 84])).toEqual({
+                    position: [8, 11],
+                    dimensions: [7, 6]
+                });
+            });
+
+            it("allows mixing dimension and position factors", function () {
+                var handler = new LayoutDrag(
+                    testPosition,
+                    [0, 1],
+                    [-1, 0],
+                    [10, 20]
+                );
+
+                expect(handler.getAdjustedPosition([11, 84])).toEqual({
+                    position: [8, 15],
+                    dimensions: [2, 2]
+                });
+            });
+
+        });
+    }
+);

platform/features/layout/test/MCTTriggerModalSpec.js

@@ -0,0 +1,128 @@
+/*****************************************************************************
+ * 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([
+    '../src/MCTTriggerModal'
+], function (
+    MCTTriggerModal
+) {
+    describe('MCTTriggerModal', function () {
+        var $scope,
+            $element,
+            frame,
+            layoutContainer,
+            $document,
+            mctTriggerModal;
+
+        function makeElement(classes, parentEl) {
+            var elem = jasmine.createSpyObj('element.' + classes.join('.'), [
+                'hasClass',
+                'parent'
+            ]);
+            elem.hasClass.and.callFake(function (className) {
+                return classes.indexOf(className) !== -1;
+            });
+            elem.parent.and.returnValue(parentEl);
+            var div = document.createElement('div');
+            div.className = classes.join(' ');
+            parentEl[0].appendChild(div);
+            elem[0] = div;
+            return elem;
+        }
+
+
+        beforeEach(function () {
+            $scope = jasmine.createSpyObj('$scope', ['$on']);
+            $scope.domainObject = { getCapability: function () {
+                return { getActions: function () {
+                    return [];
+                }};
+            }};
+
+            $element = jasmine.createSpyObj('$element', [
+                'parent',
+                'remove',
+                'on',
+                'off'
+            ]);
+            layoutContainer = document.createElement('div');
+            frame = makeElement(['frame'], [layoutContainer]);
+            var child = makeElement([], frame);
+            for (var i = 0; i < 5; i++) {
+                child = makeElement([], child);
+            }
+            $element.parent.and.returnValue(child);
+            $document = [jasmine.createSpyObj('document', ['createElement'])];
+            $document[0].body = document.createElement('div');
+            $document[0].createElement.and.callFake(function (tag) {
+                return document.createElement(tag);
+            });
+
+            mctTriggerModal = new MCTTriggerModal($document);
+        });
+
+        it('is a directive definition', function () {
+            expect(mctTriggerModal.restrict).toBe('A');
+            expect(mctTriggerModal.link).toEqual(jasmine.any(Function));
+        });
+
+        describe('link', function () {
+            beforeEach(function () {
+                mctTriggerModal.link($scope, $element);
+            });
+
+            it('attaches handlers to $element', function () {
+                expect($element.on).toHaveBeenCalledWith(
+                    'click',
+                    jasmine.any(Function)
+                );
+            });
+
+            it('cleans up on $scope $destroy', function () {
+                expect($scope.$on).toHaveBeenCalledWith(
+                    '$destroy',
+                    jasmine.any(Function)
+                );
+                $scope.$on.calls.mostRecent().args[1]();
+                expect($element.off).toHaveBeenCalledWith(
+                    'click',
+                    jasmine.any(Function)
+                );
+            });
+
+            it('opens and closes overlays', function () {
+                [
+                    'a.close', 'a.t-done', '.abs.blocker'
+                ].forEach(function (selector) {
+                    $element.on.calls.mostRecent().args[1]();
+                    var container = $document[0].body.querySelector('.t-contents');
+                    expect(container.children[0]).toBe(frame[0]);
+                    expect(layoutContainer.children[0]).not.toBe(frame[0]);
+                    $document[0].body.querySelector(selector)
+                        .dispatchEvent(new Event('click'));
+                    expect(container.children[0]).not.toBe(frame[0]);
+                    expect(layoutContainer.children[0]).toBe(frame[0]);
+                });
+            });
+        });
+    });
+});

platform/features/layout/test/elements/AccessorMutatorSpec.js

@@ -0,0 +1,50 @@
+/*****************************************************************************
+ * 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/elements/AccessorMutator'],
+    function (AccessorMutator) {
+
+        describe("An accessor-mutator", function () {
+            var testObject,
+                am;
+
+            beforeEach(function () {
+                testObject = { t: 42, other: 100 };
+                am = new AccessorMutator(testObject, 't');
+            });
+
+            it("allows access to a property", function () {
+                expect(am()).toEqual(42);
+            });
+
+            it("allows mutation of a property", function () {
+                expect(am("some other value")).toEqual("some other value");
+                expect(testObject).toEqual({
+                    t: "some other value",
+                    other: 100
+                });
+            });
+
+        });
+    }
+);

platform/features/layout/test/elements/BoxProxySpec.js

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * 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/elements/BoxProxy'],
+    function (BoxProxy) {
+
+        describe("A fixed position box proxy", function () {
+            var testElement,
+                testElements,
+                proxy;
+
+            beforeEach(function () {
+                testElement = {
+                    x: 1,
+                    y: 2,
+                    width: 42,
+                    height: 24,
+                    fill: "transparent"
+                };
+                testElements = [{}, {}, testElement, {}];
+                proxy = new BoxProxy(
+                    testElement,
+                    testElements.indexOf(testElement),
+                    testElements
+                );
+            });
+
+            it("provides getter/setter for fill color", function () {
+                expect(proxy.fill()).toEqual('transparent');
+                expect(proxy.fill('#FFF')).toEqual('#FFF');
+                expect(proxy.fill()).toEqual('#FFF');
+            });
+        });
+    }
+);

platform/features/layout/test/elements/ElementFactorySpec.js

@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * 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/elements/ElementFactory'],
+    function (ElementFactory) {
+
+        var DIALOG_ELEMENTS = ['image', 'text'],
+            NON_DIALOG_ELEMENTS = ['box', 'line'];
+
+        describe("The fixed position element factory", function () {
+            var mockDialogService,
+                mockPromise,
+                factory;
+
+            beforeEach(function () {
+                mockDialogService = jasmine.createSpyObj(
+                    'dialogService',
+                    ['getUserInput']
+                );
+                mockPromise = jasmine.createSpyObj(
+                    'promise',
+                    ['then']
+                );
+
+                mockDialogService.getUserInput.and.returnValue(mockPromise);
+                mockPromise.then.and.returnValue(mockPromise);
+
+                factory = new ElementFactory(mockDialogService);
+            });
+
+            DIALOG_ELEMENTS.forEach(function (type) {
+                it("shows a dialog for " + type + " elements", function () {
+                    expect(factory.createElement('fixed.' + type))
+                        .toEqual(mockPromise);
+                    expect(mockDialogService.getUserInput).toHaveBeenCalled();
+                });
+            });
+
+            NON_DIALOG_ELEMENTS.forEach(function (type) {
+                it("immediately provides " + type + " elements", function () {
+                    var result = factory.createElement('fixed.' + type);
+                    expect(result).toBeDefined();
+                    expect(result).not.toEqual(mockPromise);
+                    expect(mockDialogService.getUserInput).not.toHaveBeenCalled();
+                });
+            });
+        });
+    }
+);

platform/features/layout/test/elements/ElementProxiesSpec.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(
+    ['../../src/elements/ElementProxies'],
+    function (ElementProxies) {
+
+        // Expect these element types to have proxies
+        var ELEMENT_TYPES = [
+            "fixed.telemetry",
+            "fixed.line",
+            "fixed.box",
+            "fixed.text",
+            "fixed.image"
+        ];
+
+        // Verify that the set of proxies exposed matches the specific
+        // list above.
+        describe("The set of element proxies", function () {
+            ELEMENT_TYPES.forEach(function (t) {
+                it("exposes a proxy wrapper for " + t + " elements", function () {
+                    expect(typeof ElementProxies[t]).toEqual('function');
+                });
+            });
+
+            it("exposes no additional wrappers", function () {
+                expect(Object.keys(ElementProxies).length)
+                    .toEqual(ELEMENT_TYPES.length);
+            });
+        });
+    }
+);

platform/features/layout/test/elements/ElementProxySpec.js

@@ -0,0 +1,98 @@
+/*****************************************************************************
+ * 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/elements/ElementProxy'],
+    function (ElementProxy) {
+
+        describe("A fixed position element proxy", function () {
+            var testElement,
+                testElements,
+                proxy;
+
+            beforeEach(function () {
+                testElement = {
+                    x: 1,
+                    y: 2,
+                    stroke: '#717171',
+                    width: 42,
+                    height: 24,
+                    useGrid: true
+                };
+                testElements = [{}, {}, testElement, {}];
+                proxy = new ElementProxy(
+                    testElement,
+                    testElements.indexOf(testElement),
+                    testElements,
+                    [13,21]
+                );
+            });
+
+            it("exposes element properties", function () {
+                Object.keys(testElement).forEach(function (k) {
+                    expect(proxy[k]()).toEqual(testElement[k]);
+                });
+            });
+
+            it("allows order to be changed", function () {
+                proxy.order("down");
+                expect(testElements).toEqual([{}, testElement, {}, {}]);
+                proxy.order("up");
+                expect(testElements).toEqual([{}, {}, testElement, {}]);
+                proxy.order("bottom");
+                expect(testElements).toEqual([testElement, {}, {}, {}]);
+                proxy.order("top");
+                expect(testElements).toEqual([{}, {}, {}, testElement]);
+            });
+
+            it("ensures x/y values are non-negative", function () {
+                proxy.x(-1);
+                proxy.y(-400);
+                expect(proxy.x()).toEqual(0);
+                expect(proxy.y()).toEqual(0);
+            });
+
+            it("allows modifying the current grid size", function () {
+                proxy.setGridSize([112,420]);
+                expect(proxy.gridSize).toEqual([112,420]);
+            });
+
+            it("returns the current grid size only if the element snaps to grid", function () {
+                expect(proxy.getGridSize()).toEqual([13,21]);
+                proxy.useGrid(false);
+                expect(proxy.getGridSize()).toEqual([1,1]);
+            });
+
+            it("returns the mininum height and width of an element currently used units", function () {
+                // Assumes mininum height and width are 10, in pixels
+                expect(proxy.getMinWidth()).toEqual(1);
+                expect(proxy.getMinHeight()).toEqual(1);
+                proxy.setGridSize([7,4]);
+                expect(proxy.getMinWidth()).toEqual(2);
+                expect(proxy.getMinHeight()).toEqual(3);
+                proxy.useGrid(false);
+                expect(proxy.getMinWidth()).toEqual(10);
+                expect(proxy.getMinHeight()).toEqual(10);
+            });
+        });
+    }
+);

platform/features/layout/test/elements/ImageProxySpec.js

@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * 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/elements/ImageProxy'],
+    function (ImageProxy) {
+
+        describe("A fixed position image proxy", function () {
+            var testElement,
+                testElements,
+                proxy;
+
+            beforeEach(function () {
+                testElement = {
+                    x: 1,
+                    y: 2,
+                    width: 42,
+                    height: 24,
+                    url: "http://www.nasa.gov"
+                };
+                testElements = [{}, {}, testElement, {}];
+                proxy = new ImageProxy(
+                    testElement,
+                    testElements.indexOf(testElement),
+                    testElements
+                );
+            });
+
+            it("provides getter/setter for image URL", function () {
+                expect(proxy.url()).toEqual("http://www.nasa.gov");
+                expect(proxy.url("http://www.nasa.gov/some.jpg"))
+                    .toEqual("http://www.nasa.gov/some.jpg");
+                expect(proxy.url()).toEqual("http://www.nasa.gov/some.jpg");
+            });
+        });
+    }
+);

platform/features/layout/test/elements/LineHandleSpec.js

@@ -0,0 +1,81 @@
+/*****************************************************************************
+ * 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/elements/LineHandle'],
+    function (LineHandle) {
+
+        describe("A fixed position drag handle", function () {
+            var testElement,
+                mockElementProxy,
+                handle,
+                TEST_GRID_SIZE = [45, 21];
+
+            beforeEach(function () {
+                testElement = {
+                    x: 3,
+                    y: 42,
+                    x2: 8,
+                    y2: 11,
+                    useGrid: true
+                };
+                mockElementProxy = jasmine.createSpyObj('elementProxy', ['getGridSize']);
+                mockElementProxy.getGridSize.and.returnValue(TEST_GRID_SIZE);
+
+                handle = new LineHandle(testElement, mockElementProxy, 'x', 'y', 'x2', 'y2');
+            });
+
+            it("provides x/y grid coordinates for its corner", function () {
+                expect(handle.x()).toEqual(3);
+                expect(handle.y()).toEqual(42);
+            });
+
+            it("changes x and y positions", function () {
+                handle.x(30);
+                expect(testElement.x).toEqual(30);
+                handle.y(40);
+                expect(testElement.y).toEqual(40);
+            });
+
+            it("disallows values less than zero", function () {
+                handle.x(-1);
+                handle.y(-400);
+                expect(testElement.x).toEqual(0);
+                expect(testElement.y).toEqual(0);
+            });
+
+            it("ensures that end points remain different", function () {
+                handle.x(testElement.x2);
+                handle.y(testElement.y2);
+                // First change should have been fine, because y was different
+                expect(testElement.x).toEqual(testElement.x2);
+                // Second change should have been rejected
+                expect(testElement.y).not.toEqual(testElement.y2);
+            });
+
+            it("returns the correct grid size", function () {
+                expect(handle.getGridSize()).toEqual(TEST_GRID_SIZE);
+            });
+
+        });
+    }
+);

platform/features/layout/test/elements/LineProxySpec.js

@@ -0,0 +1,95 @@
+/*****************************************************************************
+ * 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/elements/LineProxy'],
+    function (LineProxy) {
+
+        describe("A fixed position line proxy", function () {
+            var vertical, horizontal, diagonal, reversed;
+
+            beforeEach(function () {
+                vertical = { x: 1, y: 4, x2: 1, y2: 8};
+                horizontal = { x: 3, y: 3, x2: 12, y2: 3};
+                diagonal = { x: 3, y: 8, x2: 5, y2: 11};
+                reversed = { x2: 3, y2: 8, x: 5, y: 11};
+            });
+
+            it("ensures visible width for vertical lines", function () {
+                expect(new LineProxy(vertical).width()).toEqual(1);
+            });
+
+            it("ensures visible height for horizontal lines", function () {
+                expect(new LineProxy(horizontal).height()).toEqual(1);
+            });
+
+            it("provides a bounding box for lines", function () {
+                var proxy = new LineProxy(diagonal);
+                expect(proxy.x()).toEqual(3);
+                expect(proxy.y()).toEqual(8);
+                expect(proxy.width()).toEqual(2);
+                expect(proxy.height()).toEqual(3);
+            });
+
+            it("bounds lines identically regardless of point order", function () {
+                // That is, x(), width(), y(), and height() should always give
+                // the same results for the same line segments, regardless of
+                // which point is x,y and which is x2,y2
+                ['x', 'y', 'width', 'height'].forEach(function (method) {
+                    expect(new LineProxy(diagonal)[method]())
+                        .toEqual(new LineProxy(reversed)[method]());
+                });
+            });
+
+            it("adjusts both ends when mutating x", function () {
+                var proxy = new LineProxy(diagonal);
+                proxy.x(6);
+                expect(diagonal).toEqual({ x: 6, y: 8, x2: 8, y2: 11});
+            });
+
+            it("adjusts both ends when mutating y", function () {
+                var proxy = new LineProxy(diagonal);
+                proxy.y(6);
+                expect(diagonal).toEqual({ x: 3, y: 6, x2: 5, y2: 9});
+            });
+
+            it("provides internal positions for SVG lines", function () {
+                var proxy;
+                proxy = new LineProxy(diagonal);
+                expect(proxy.x1()).toEqual(0);
+                expect(proxy.y1()).toEqual(0);
+                expect(proxy.x2()).toEqual(2);
+                expect(proxy.y2()).toEqual(3);
+                proxy = new LineProxy(reversed);
+                expect(proxy.x1()).toEqual(2);
+                expect(proxy.y1()).toEqual(3);
+                expect(proxy.x2()).toEqual(0);
+                expect(proxy.y2()).toEqual(0);
+            });
+
+            it("provides handles for both ends", function () {
+                expect(new LineProxy(diagonal).handles().length).toEqual(2);
+            });
+
+        });
+    }
+);