[Frontend] Set default widget colors and icon

Fixes #1668

API.md

@@ -505,7 +505,7 @@ MCT, it will be pre-configured to use the UTC time system, which is installed an
 
 The time bounds of an Open MCT application are defined as numbers, and a Time 
 System gives meaning and context to these numbers so that they can be correctly 
-interpreted. Time Systems are javscript objects that provide some information 
+interpreted. Time Systems are JavaScript objects that provide some information 
 about the current time reference frame. An example of defining and registering 
 a new time system is given below:
 

bower.json

@@ -18,7 +18,7 @@
     "node-uuid": "^1.4.7",
     "comma-separated-values": "^3.6.4",
     "FileSaver.js": "^0.0.2",
-    "zepto": "^1.1.6",
+    "zepto": "1.2.0",
     "eventemitter3": "^1.2.0",
     "lodash": "3.10.1",
     "almond": "~0.3.2",

example/generator/GeneratorProvider.js

@@ -59,7 +59,7 @@ define([
             if (domainObject.telemetry && domainObject.telemetry.hasOwnProperty(prop)) {
                 workerRequest[prop] = domainObject.telemetry[prop];
             }
-            if (request.hasOwnProperty(prop)) {
+            if (request && request.hasOwnProperty(prop)) {
                 workerRequest[prop] = request[prop];
             }
             if (!workerRequest[prop]) {

example/styleguide/bundle.js

@@ -16,6 +16,7 @@ define([
                 { "key": "styleguide.intro", "name": "Introduction", "cssClass": "icon-page", "description": "Introduction and overview to the style guide" },
                 { "key": "styleguide.standards", "name": "Standards", "cssClass": "icon-page", "description": "" },
                 { "key": "styleguide.colors", "name": "Colors", "cssClass": "icon-page", "description": "" },
+                { "key": "styleguide.status", "name": "status", "cssClass": "icon-page", "description": "Limits, telemetry paused, etc." },
                 { "key": "styleguide.glyphs", "name": "Glyphs", "cssClass": "icon-page", "description": "Glyphs overview" },
                 { "key": "styleguide.controls", "name": "Controls", "cssClass": "icon-page", "description": "Buttons, selects, HTML controls" },
                 { "key": "styleguide.input", "name": "Text Inputs", "cssClass": "icon-page", "description": "Various text inputs" },
@@ -25,6 +26,7 @@ define([
                 { "key": "styleguide.intro", "type": "styleguide.intro", "templateUrl": "templates/intro.html", "editable": false },
                 { "key": "styleguide.standards", "type": "styleguide.standards", "templateUrl": "templates/standards.html", "editable": false },
                 { "key": "styleguide.colors", "type": "styleguide.colors", "templateUrl": "templates/colors.html", "editable": false },
+                { "key": "styleguide.status", "type": "styleguide.status", "templateUrl": "templates/status.html", "editable": false },
                 { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "templateUrl": "templates/glyphs.html", "editable": false },
                 { "key": "styleguide.controls", "type": "styleguide.controls", "templateUrl": "templates/controls.html", "editable": false },
                 { "key": "styleguide.input", "type": "styleguide.input", "templateUrl": "templates/input.html", "editable": false },
@@ -47,6 +49,7 @@ define([
                             "intro",
                             "standards",
                             "colors",
+                            "status",
                             "glyphs",
                             "styleguide:ui-elements"
                         ]

example/styleguide/res/sass/_style-guide-base.scss

@@ -28,8 +28,8 @@
         color: $colorKey;
     }
 
-    h1, h2 {
-        color: pullForward($colorBodyFg, 20%);
+    h1, h2, strong, b {
+        color: pullForward($colorBodyFg, 50%);
     }
 
     h2 {
@@ -45,6 +45,10 @@
         text-transform: uppercase;
     }
 
+    strong, b {
+        font-weight: normal;
+    }
+
     .w-markup {
         //Wrap markup example "pre" element
         background-color: $colorCode;
@@ -54,6 +58,12 @@
         position: relative;
     }
 
+    .w-mct-example {
+        div {
+            margin-bottom: $interiorMarginLg;
+        }
+    }
+
     code,
     pre {
         font-size: 0.8rem;

example/styleguide/res/templates/mct-example.html

@@ -4,5 +4,5 @@
         <pre></pre>
     </span>
     <h3>Example</h3>
-    <div></div>
+    <div class="w-mct-example"></div>
 </div>

example/styleguide/res/templates/menus.html

@@ -121,7 +121,7 @@
         <h2>Palettes</h2>
         <div class="cols cols1-1">
             <div class="col">
-                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one.</p>
+                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one. Selected palette choices should utilize the <code>selected</code> CSS class to visualize indicate that state.</p>
                 <p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
             </div>
             <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
@@ -129,9 +129,9 @@
 <div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
     <span class="l-click-area" ng-click="toggle.toggle()"></span>
     <span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
-    <div class="menu l-color-palette" ng-show="toggle.isActive()">
+    <div class="menu l-palette l-color-palette" ng-show="toggle.isActive()">
         <div class="l-palette-row l-option-row">
-            <div class="l-palette-item s-palette-item " ng-click="ngModel[field] = 'transparent'"></div>
+            <div class="l-palette-item s-palette-item no-selection"></div>
             <span class="l-palette-item-label">None</span>
         </div>
         <div class="l-palette-row">
@@ -147,7 +147,7 @@
             <div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
         </div>
         <div class="l-palette-row">
-            <div class="l-palette-item s-palette-item" style="background: rgb(136, 32, 32);"></div>
+            <div class="l-palette-item s-palette-item selected" style="background: rgb(255, 0, 0);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>

example/styleguide/res/templates/status.html

@@ -0,0 +1,142 @@
+<!--
+ 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.
+-->
+<style>
+    .w-mct-example div[class*="s-limit"],
+    .w-mct-example div[class*="s-status"],
+    .w-mct-example div[class*="s-unsynced"],
+    .w-mct-example span[class*="s-limit"] {
+        border-radius: 4px;
+        padding: 3px 7px;
+    }
+    .w-mct-example table {
+        width: 100%;
+    }
+</style>
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Status Indication</h1>
+
+    <div class="l-section">
+        <h2>Overview</h2>
+        <p>Many elements in Open MCT need to articulate a dynamic status; Open MCT provides the following styles and conventions to handle this:</p>
+        <ul>
+            <li><strong>Limits</strong>: when telemetry values exceed minimum or maximum values, they can be violating limits. Limit styles include both color and iconography; color is used to indicate severity while icons are used to indicate direction, upper or lower.</li>
+            <li><strong>Status</strong>: Open MCT also provides a number or built-in Status styles allowing telemetry or other displayed information to be visually classified by type. Common uses for these classes are to visually denote event records.</li>
+            <li><strong>Synchronization</strong>: When the system is displaying real-time data, it is very important that displays clearly indicate when they are not doing so, such as when a plot if frozen while panning or zooming. Open MCT provides a style for this.</li>
+        </ul>
+    </div>
+
+    <div class="l-section">
+        <h2>Limits</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Limit CSS classes can be applied to any block or inline element. Open MCT limit classes set color and optionally an icon, but don't effect other properties. Yellow and red limit classes can be used as is, or allow the application of any custom icon available in Open MCT's glyphs library. &quot;Level&quot; limit classes - upper and lower - always use an icon in addition to a color; Open MCT doesn't support level limits without color.</p>
+                <ul>
+                    <li>Color only</li>
+                    <ul>
+                        <li><code>s-limit-yellow</code>: A yellow limit.</li>
+                        <li><code>s-limit-red</code>: A red limit.</li>
+                    </ul>
+                    <li>Color and icon</li>
+                    <ul>
+                        <li><code>s-limit-yellow-icon</code>: A yellow limit with icon.</li>
+                        <li><code>s-limit-red-icon</code>: A red limit with icon.</li>
+                    </ul>
+                    <li>Upper and lower limit indicators. Must be used with a color limit class to be visible.</li>
+                    <ul>
+                        <li><code>s-limit-upr</code>: Upper limit.
+                        </li>
+                        <li><code>s-limit-lwr</code>: Lower limit.
+                        </li>
+                    </ul>
+                </ul>
+            </div>
+<mct-example><div class="s-limit-yellow">Yellow limit</div>
+<div class="s-limit-red">Red limit</div>
+<div class="s-limit-yellow-icon">Yellow limit with icon</div>
+<div class="s-limit-red-icon">Red limit with icon</div>
+<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
+<div class="s-limit-red s-limit-upr">Upper red limit</div>
+<div class="s-limit-red icon-bell">Red Limit with a custom icon</div>
+<div>Some text with an <span class="s-limit-yellow-icon">inline element</span> showing a yellow limit.</div>
+
+<!-- Limits applied in a table -->
+<table>
+    <tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
+    <tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
+    <tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
+    <tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-bell">0.451</td><td>1.007</td></tr>
+</table>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Status</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Classes here can be applied to elements as needed.</p>
+                <ul>
+                    <li>Color only</li>
+                    <ul>
+                        <li><code>s-status-warning-hi</code></li>
+                        <li><code>s-status-warning-lo</code></li>
+                        <li><code>s-status-diagnostic</code></li>
+                        <li><code>s-status-info</code></li>
+                        <li><code>s-status-ok</code></li>
+                    </ul>
+                    <li>Color and icon</li>
+                    <ul>
+                        <li><code>s-status-warning-hi-icon</code></li>
+                        <li><code>s-status-warning-lo-icon</code></li>
+                        <li><code>s-status-diagnostic-icon</code></li>
+                        <li><code>s-status-info-icon</code></li>
+                        <li><code>s-status-ok-icon</code></li>
+                    </ul>
+                </ul>
+            </div>
+<mct-example><div class="s-status-warning-hi">WARNING HI</div>
+<div class="s-status-warning-lo">WARNING LOW</div>
+<div class="s-status-diagnostic">DIAGNOSTIC</div>
+<div class="s-status-info">INFO</div>
+<div class="s-status-ok">OK</div>
+<div class="s-status-warning-hi-icon">WARNING HI with icon</div>
+<div class="s-status-warning-lo-icon">WARNING LOW with icon</div>
+<div class="s-status-diagnostic-icon">DIAGNOSTIC with icon</div>
+<div class="s-status-info-icon">INFO with icon</div>
+<div class="s-status-ok-icon">OK with icon</div>
+<div class="s-status-warning-hi icon-gear">WARNING HI with custom icon</div>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Synchronization</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>When the system is operating in real-time streaming mode, it is important for views that display real-time data to clearly articulate when they are not, such as when a user zooms or pans a plot view, freezing that view. In that case, the CSS class <code>s-unsynced</code> should be applied to that view.</p>
+            </div>
+<mct-example><div class="s-unsynced">This element is unsynced</div>
+</mct-example>
+        </div>
+    </div>
+</div>

example/styleguide/src/ExampleStyleGuideModelProvider.js

@@ -34,6 +34,7 @@ define(
             pages['standards'] = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" };
             pages['colors'] = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" };
             pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" };
+            pages['status'] = { name: "Status Indication", type: "styleguide.status", location: "styleguide:home" };
             pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" };
             pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" };
             pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };

index.html

@@ -25,8 +25,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title></title>
-    <script src="bower_components/requirejs/require.js">
-    </script>
+    <script src="bower_components/requirejs/require.js"> </script>
     <script>
         var THIRTY_MINUTES = 30 * 60 * 1000;
 
@@ -43,13 +42,14 @@
             openmct.install(openmct.plugins.Generator());
             openmct.install(openmct.plugins.ExampleImagery());
             openmct.install(openmct.plugins.UTCTimeSystem());
+            openmct.install(openmct.plugins.ImportExport());
             openmct.install(openmct.plugins.Conductor({
                 menuOptions: [
                     {
                         name: "Fixed",
                         timeSystem: 'utc',
                         bounds: {
-                            start: Date.now() - 30 * 60 * 1000,
+                            start: Date.now() - THIRTY_MINUTES,
                             end: Date.now()
                         }
                     },
@@ -64,6 +64,7 @@
                     }
                 ]
             }));
+            openmct.install(openmct.plugins.SummaryWidget());
             openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
             openmct.time.timeSystem('utc');
             openmct.start();

package.json

@@ -21,7 +21,7 @@
     "bower": "^1.7.7",
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
-    "gulp": "^3.9.0",
+    "gulp": "^3.9.1",
     "gulp-header": "^1.8.8",
     "gulp-jscs": "^3.0.2",
     "gulp-jshint": "^2.0.0",

platform/commonUI/browse/bundle.js

@@ -107,7 +107,9 @@ define([
                     "depends": [
                         "$scope",
                         "agentService",
-                        "$window"
+                        "$window",
+                        "$location",
+                        "$attrs"
                     ]
                 },
                 {
@@ -134,7 +136,9 @@ define([
                         "$scope",
                         "agentService",
                         "$window",
-                        "navigationService"
+                        "navigationService",
+                        "$location",
+                        "$attrs"
                     ]
                 }
             ],

platform/commonUI/browse/res/templates/browse.html

@@ -24,7 +24,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="abs holder holder-main browse-area s-browse-area browse-wrapper"
          ng-controller="PaneController as modelPaneTree"
-         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'">
+         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'" hide-parameter="hideTree">
         <mct-split-pane class='abs contents'
                         anchor='left' alias="leftSide">
             <div class='split-pane-component treeview pane left'>
@@ -58,7 +58,8 @@
 
                 <div class='holder holder-object-and-inspector abs' id='content-area'
                      ng-controller="InspectorPaneController as modelPaneInspect"
-                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
+                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'" 
+                     hide-parameter="hideInspector">
 
                     <mct-split-pane class='l-object-and-inspector contents abs' anchor='right' alias="rightSide">
                         <div class='split-pane-component t-object pane primary-pane left'>

platform/commonUI/browse/src/InspectorPaneController.js

@@ -35,9 +35,8 @@ define(
          * @param navigationService
          * @constructor
          */
-        function InspectorPaneController($scope, agentService, $window, navigationService) {
-            PaneController.call(this, $scope, agentService, $window);
-
+        function InspectorPaneController($scope, agentService, $window, navigationService, $location, $attrs) {
+            PaneController.call(this, $scope, agentService, $window, $location, $attrs);
             var statusListener,
                 self = this;
 

platform/commonUI/browse/src/PaneController.js

@@ -31,12 +31,17 @@ define(
          * @constructor
          * @memberof platform/commonUI/browse
          */
-        function PaneController($scope, agentService, $window) {
+        function PaneController($scope, agentService, $window, $location, $attrs) {
             var self = this;
             this.agentService = agentService;
+            var hideParameterPresent = $location.search().hasOwnProperty($attrs.hideParameter);
 
-            // Fast and cheap: if this has been opened in a new window, hide panes by default
-            this.state = !$window.opener;
+            if ($attrs.hideParameter && hideParameterPresent) {
+                this.state = false;
+                $location.search($attrs.hideParameter, undefined);
+            } else {
+                this.state = true;
+            }
 
             /**
              * Callback to invoke when any selection occurs in the tree.
@@ -70,7 +75,7 @@ define(
          * @returns {boolean} true when visible
          */
         PaneController.prototype.visible = function () {
-            return this.state;
+            return !!this.state;
         };
 
         return PaneController;

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

@@ -38,6 +38,7 @@ define(
 
             this.urlService = urlService;
             this.open = function () {
+                arguments[0] += "&hideTree=true&hideInspector=true";
                 $window.open.apply($window, arguments);
             };
 

platform/commonUI/browse/test/InspectorPaneControllerSpec.js

@@ -33,7 +33,9 @@ define(
                 mockNavigationService,
                 mockNavigationUnlistener,
                 mockStatusUnlistener,
-                controller;
+                controller,
+                mockLocation,
+                mockAttrs;
 
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj("$scope", ["$on"]);
@@ -71,7 +73,12 @@ define(
                 mockDomainObject.hasCapability.andReturn(true);
                 mockDomainObject.getCapability.andReturn(mockStatusCapability);
 
-                controller = new InspectorPaneController(mockScope, mockAgentService, mockWindow, mockNavigationService);
+                mockLocation = jasmine.createSpyObj('location', ['search']);
+                mockLocation.search.andReturn({});
+
+                mockAttrs = {};
+
+                controller = new InspectorPaneController(mockScope, mockAgentService, mockWindow, mockNavigationService, mockLocation, mockAttrs);
             });
 
             it("listens for changes to navigation and attaches a status" +

platform/commonUI/browse/test/PaneControllerSpec.js

@@ -29,7 +29,9 @@ define(
                 mockAgentService,
                 mockDomainObjects,
                 mockWindow,
-                controller;
+                controller,
+                mockLocation,
+                mockAttrs;
 
             // We want to reinstantiate for each test case
             // because device state can influence constructor-time behavior
@@ -37,7 +39,9 @@ define(
                 return new PaneController(
                     mockScope,
                     mockAgentService,
-                    mockWindow
+                    mockWindow,
+                    mockLocation,
+                    mockAttrs
                 );
             }
 
@@ -59,6 +63,11 @@ define(
                     ["isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape"]
                 );
                 mockWindow = jasmine.createSpyObj("$window", ["open"]);
+
+                mockLocation = jasmine.createSpyObj('location', ['search']);
+                mockLocation.search.andReturn({});
+
+                mockAttrs = {};
             });
 
             it("is initially visible", function () {
@@ -86,6 +95,24 @@ define(
                 // Tree should have collapsed
                 expect(controller.visible()).toBeFalsy();
             });
+
+            describe("specifying hideParameter", function () {
+                beforeEach(function () {
+                    mockAttrs = {hideParameter: 'hideTree'};
+                });
+
+                it("sets pane state to false when in location.search", function () {
+                    mockLocation.search.andReturn({'hideTree': true});
+                    expect(instantiateController().visible()).toBe(false);
+                    expect(mockLocation.search).toHaveBeenCalledWith('hideTree', undefined);
+                });
+
+                it("sets state to true when not found in location.search", function () {
+                    mockLocation.search.andReturn({});
+                    expect(instantiateController().visible()).toBe(true);
+                    expect(mockLocation.search).not.toHaveBeenCalledWith('hideTree', undefined);
+                });
+            });
         });
     }
 );

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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="abs top-bar">
-    <div class="title">{{ngModel.title}}</div>
+    <div class="dialog-title">{{ngModel.title}}</div>
     <div class="hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
 </div>
 <div class='abs editor'>

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

@@ -1,11 +1,10 @@
 <div class="l-message"
      ng-class="'message-severity-' + ngModel.severity">
-    <div class="ui-symbol type-icon message-type"></div>
-    <div class="message-contents">
+    <div class="w-message-contents">
         <div class="top-bar">
             <div class="title">{{ngModel.title}}</div>
-            <div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
         </div>
+        <div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
         <div class="message-body">
             <div class="message-action">
                 {{ngModel.actionText}}
@@ -25,8 +24,6 @@
                ng-click="ngModel.primaryOption.callback()">
                 {{ngModel.primaryOption.label}}
             </a>
-
         </div>
-
     </div>
 </div>

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

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

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

@@ -21,7 +21,7 @@
 -->
 <mct-container key="overlay">
     <div class="abs top-bar">
-        <div class="title">{{ngModel.dialog.title}}</div>
+        <div class="dialog-title">{{ngModel.dialog.title}}</div>
         <div class="hint">{{ngModel.dialog.hint}}</div>
     </div>
     <div class='abs editor'>

platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "openmct-symbols-16px",
     "lastOpened": 0,
-    "created": 1502487054429
+    "created": 1505151140023
   },
   "iconSets": [
     {
@@ -636,13 +636,29 @@
           "code": 921670,
           "tempChar": ""
         },
+        {
+          "order": 138,
+          "id": 115,
+          "name": "icon-import",
+          "prevSize": 24,
+          "code": 921671,
+          "tempChar": ""
+        },
+        {
+          "order": 136,
+          "id": 116,
+          "name": "icon-export",
+          "prevSize": 24,
+          "code": 921672,
+          "tempChar": ""
+        },
         {
           "order": 37,
           "prevSize": 24,
           "name": "icon-activity",
           "id": 32,
           "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 36,
@@ -650,7 +666,7 @@
           "name": "icon-activity-mode",
           "id": 31,
           "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -658,7 +674,7 @@
           "name": "icon-autoflow-tabular",
           "id": 47,
           "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -666,7 +682,7 @@
           "name": "icon-clock",
           "id": 50,
           "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -674,7 +690,7 @@
           "name": "icon-database",
           "id": 53,
           "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 57,
@@ -682,7 +698,7 @@
           "name": "icon-database-query",
           "id": 52,
           "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 17,
@@ -690,7 +706,7 @@
           "name": "icon-dataset",
           "id": 12,
           "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 22,
@@ -698,7 +714,7 @@
           "name": "icon-datatable",
           "id": 17,
           "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -706,7 +722,7 @@
           "name": "icon-dictionary",
           "id": 54,
           "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 62,
@@ -714,7 +730,7 @@
           "name": "icon-folder",
           "id": 57,
           "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 66,
@@ -722,7 +738,7 @@
           "name": "icon-image",
           "id": 61,
           "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -730,7 +746,7 @@
           "name": "icon-layout",
           "id": 63,
           "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 77,
@@ -738,7 +754,7 @@
           "name": "icon-object",
           "id": 72,
           "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 78,
@@ -746,7 +762,7 @@
           "name": "icon-object-unknown",
           "id": 73,
           "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -754,7 +770,7 @@
           "name": "icon-packet",
           "id": 74,
           "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -762,7 +778,7 @@
           "name": "icon-page",
           "id": 75,
           "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 135,
@@ -770,7 +786,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -778,7 +794,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -786,7 +802,7 @@
           "name": "icon-session",
           "id": 5,
           "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -794,7 +810,7 @@
           "name": "icon-tabular",
           "id": 19,
           "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -802,7 +818,7 @@
           "name": "icon-tabular-lad",
           "id": 2,
           "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -810,7 +826,7 @@
           "name": "icon-tabular-lad-set",
           "id": 1,
           "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 8,
@@ -818,7 +834,7 @@
           "name": "icon-tabular-realtime",
           "id": 3,
           "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 23,
@@ -826,7 +842,7 @@
           "name": "icon-tabular-scrolling",
           "id": 18,
           "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 112,
@@ -834,7 +850,7 @@
           "name": "icon-telemetry",
           "id": 86,
           "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -842,7 +858,7 @@
           "name": "icon-telemetry-panel",
           "id": 85,
           "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 93,
@@ -850,7 +866,7 @@
           "name": "icon-timeline",
           "id": 88,
           "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 116,
@@ -858,7 +874,7 @@
           "name": "icon-timer-v1.5",
           "prevSize": 24,
           "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -866,7 +882,7 @@
           "name": "icon-topic",
           "id": 6,
           "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -874,7 +890,7 @@
           "name": "icon-box-with-dashed-lines",
           "id": 29,
           "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -882,7 +898,7 @@
           "name": "icon-summary-widget",
           "prevSize": 24,
           "code": 921904,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "metadata": {
@@ -2683,6 +2699,52 @@
             ]
           }
         },
+        {
+          "id": 115,
+          "paths": [
+            "M832 192.4v639.4c0 0.2-0.2 0.2-0.4 0.4h-319.6v192h320c105.6 0 192-86.4 192-192v-640.2c0-105.6-86.4-192-192-192h-320v192h319.6c0.2 0 0.4 0.2 0.4 0.4z",
+            "M192 704v192l384-384-384-384v192h-192v384z"
+          ],
+          "attrs": [
+            {},
+            {}
+          ],
+          "grid": 16,
+          "tags": [
+            "icon-import"
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {},
+              {}
+            ]
+          }
+        },
+        {
+          "id": 116,
+          "paths": [
+            "M192 831.66v-639.32l0.34-0.34h319.66v-192h-320c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h320v-192h-319.66z",
+            "M1024 512l-384-384v192h-192v384h192v192l384-384z"
+          ],
+          "attrs": [
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-export"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {},
+              {}
+            ]
+          }
+        },
         {
           "paths": [
             "M576 64h-256l320 320h-290.256c-44.264-76.516-126.99-128-221.744-128h-128v512h128c94.754 0 177.48-51.484 221.744-128h290.256l-320 320h256l448-448-448-448z"

platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg

@@ -85,6 +85,8 @@
 <glyph unicode="&#xe1044;" glyph-name="icon-grid-snap-no" d="M768 384h192v-64h-192v64zM256 384h192v-64h-192v64zM0 384h192v-64h-192v64zM640 448h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 704h64v-192h-64v192zM576 960h64v-192h-64v192zM576 192h64v-192h-64v192z" />
 <glyph unicode="&#xe1045;" glyph-name="icon-frame-show" d="M0 896v-896h1024v896h-1024zM896 128h-768v640h768v-640zM192 704h384v-128h-384v128z" />
 <glyph unicode="&#xe1046;" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
+<glyph unicode="&#xe1047;" glyph-name="icon-import" d="M832 767.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 256v-192l384 384-384 384v-192h-192v-384z" />
+<glyph unicode="&#xe1048;" glyph-name="icon-export" d="M192 128.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 448l-384 384v-192h-192v-384h192v-192l384 384z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />

platform/commonUI/general/res/sass/_archetypes.scss

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 /********************************************* COLUMN LAYOUTS STYLES */
-/*@mixin cols($totalCols, $span) {
+@mixin cols($totalCols, $span) {
     $cw: 100% / $totalCols;
     min-width: (500px / $totalCols) * $span;
     @if ($totalCols != $span) {
@@ -89,7 +89,7 @@
         @include clearfix;
         padding: $interiorMargin 0;
     }
-}*/
+}
 
 /********************************************* FLEX STYLES */
 .l-flex-row,

platform/commonUI/general/res/sass/_constants.scss

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 /************************** FEATURES */
-$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
+$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported
 
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
 $bodyMargin: 10px;
@@ -82,7 +82,7 @@ $tabularTdPadTB: 2px;
 /*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
-$imageThumbsWrapperH: $imageThumbsD * 1.4;
+$imageThumbsWrapperH: 155px;
 $imageThumbPad: 1px;
 /*************** Ticks */
 $ticksH: 25px;

platform/commonUI/general/res/sass/_fixed-position.scss

@@ -52,6 +52,7 @@
 			font-size: 0.8rem;
 			$p: 1px;
 			line-height: 100%;
+            overflow: hidden;
 			&.l-static-text {
 				padding: $p;
 			}

platform/commonUI/general/res/sass/_global.scss

@@ -180,6 +180,20 @@ a.disabled {
     @include ellipsize();
 }
 
+.no-selection {
+    // aka selection = "None". Used in palettes and their menu buttons.
+    $c: red; $s: 48%; $e: 52%;
+    @include background-image(linear-gradient(-45deg,
+        transparent $s - 5%,
+        $c $s,
+        $c $e,
+        transparent $e + 5%
+    ));
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+
 .scrolling,
 .scroll {
     overflow: auto;

platform/commonUI/general/res/sass/_glyphs.scss

@@ -1,3 +1,24 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
 @mixin glyphBefore($unicode, $family: 'symbolsfont') {
     &:before {
         content: $unicode;
@@ -92,6 +113,8 @@ $glyph-icon-grid-snap-to: '\e1043';
 $glyph-icon-grid-snap-no: '\e1044';
 $glyph-icon-frame-show: '\e1045';
 $glyph-icon-frame-hide: '\e1046';
+$glyph-icon-import: '\e1047';
+$glyph-icon-export: '\e1048';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -204,6 +227,8 @@ $glyph-icon-summary-widget: '\e1130';
 .icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
 .icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
 .icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
+.icon-import {  @include glyphBefore($glyph-icon-import); }
+.icon-export {  @include glyphBefore($glyph-icon-export); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }

platform/commonUI/general/res/sass/_limits.scss

@@ -1,39 +0,0 @@
-@mixin limitGlyph($iconColor, $glyph: $glyph-icon-alert-triangle) {
-    &:before {
-        color: $iconColor;
-        content: $glyph;
-        font-family: symbolsfont;
-        font-size: 0.8em;
-        display: inline;
-        margin-right: $interiorMarginSm;
-    }
-
-}
-
-.s-limit-red { background: $colorLimitRedBg !important; }
-.s-limit-yellow { background: $colorLimitYellowBg !important; }
-
-// Handle limit when applied to a tr
-tr[class*="s-limit"] {
-    &.s-limit-red td:first-child {
-        @include limitGlyph($colorLimitRedIc);
-    }
-    &.s-limit-yellow td:first-child {
-        @include limitGlyph($colorLimitYellowIc);
-    }
-    &.s-limit-upr td:first-child:before { content: $glyph-icon-arrow-double-up; }
-    &.s-limit-lwr td:first-child:before { content: $glyph-icon-arrow-double-down; }
-}
-
-// Handle limit when applied directly to a non-tr element
-// Assume this is applied to the element that displays the limit value
-:not(tr)[class*="s-limit"] {
-    &.s-limit-red {
-        @include limitGlyph($colorLimitRedIc);
-    }
-    &.s-limit-yellow {
-        @include limitGlyph($colorLimitYellowIc);
-    }
-    &.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
-    &.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
-}

platform/commonUI/general/res/sass/_main.scss

@@ -27,7 +27,7 @@
 @import "about";
 @import "text";
 @import "icons";
-@import "limits";
+@import "status";
 @import "data-status";
 @import "helpers/bubbles";
 @import "helpers/splitter";
@@ -37,7 +37,7 @@
 /********************************* CONTROLS */
 @import "controls/breadcrumb";
 @import "controls/buttons";
-@import "controls/color-palette";
+@import "controls/palette";
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
@@ -80,3 +80,4 @@
 @import "autoflow";
 @import "features/imagery";
 @import "features/time-display";
+@import "widgets";

platform/commonUI/general/res/sass/_status.scss

@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*************************************************** MIXINS */
+@mixin formulateStatusColors($c) {
+    // Sets bg and icon colors for elements
+    background: rgba($c, 0.4) !important;
+    &:before { color: $c !important; }
+}
+
+
+
+/*************************************************** GENERAL */
+.s-limit-yellow,
+.s-limit-red,
+.s-limit-yellow-icon,
+.s-limit-red-icon,
+.s-status-warning-lo,
+.s-status-warning-hi,
+.s-status-diagnostic,
+.s-status-command,
+.s-status-info,
+.s-status-ok,
+.s-status-warning-lo-icon,
+.s-status-warning-hi-icon,
+.s-status-diagnostic-icon,
+.s-status-command-icon,
+.s-status-info-icon,
+.s-status-ok-icon {
+    @include trans-prop-nice($props: background, $dur: 500ms);
+    &:before {
+        content:'';
+        font-family: symbolsfont;
+        font-size: 0.8em;
+        display: inline;
+        margin-right: $interiorMarginSm;
+    }
+}
+
+
+/*************************************************** LIMITS */
+.s-limit-yellow, .s-limit-yellow-icon {
+    @include formulateStatusColors($colorWarningLo);
+}
+
+.s-limit-red, .s-limit-red-icon {
+    @include formulateStatusColors($colorWarningHi);
+}
+
+.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
+.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
+.s-limit-yellow-icon:before,
+.s-limit-red-icon:before { content: $glyph-icon-alert-triangle; }
+
+/*************************************************** STATUS */
+.s-status-warning-hi, .s-status-warning-hi-icon {  @include formulateStatusColors($colorWarningHi); }
+.s-status-warning-lo, .s-status-warning-lo-icon {  @include formulateStatusColors($colorWarningLo); }
+.s-status-diagnostic, .s-status-diagnostic-icon {  @include formulateStatusColors($colorDiagnostic); }
+.s-status-info, .s-status-info-icon {  @include formulateStatusColors($colorInfo); }
+.s-status-ok, .s-status-ok-icon {  @include formulateStatusColors($colorOk); }
+
+.s-status-warning-hi-icon:before { content: $glyph-icon-alert-triangle; }
+.s-status-warning-lo-icon:before { content: $glyph-icon-alert-rect; }
+.s-status-diagnostic-icon:before { content: $glyph-icon-eye-open; }
+.s-status-info-icon:before { content: $glyph-icon-info; }
+.s-status-ok-icon:before { content: $glyph-icon-check; }
+
+

platform/commonUI/general/res/sass/_widgets.scss

@@ -0,0 +1,266 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/************************************************************* WIDGET OBJECT */
+.l-summary-widget {
+    // Widget layout classes here
+    @include ellipsize();
+    display: inline-block;
+    text-align: center;
+    .widget-label:before {
+        // Widget icon
+        font-size: 0.9em;
+        margin-right: $interiorMarginSm;
+    }
+}
+
+.s-summary-widget {
+    // Widget style classes here
+    @include boxShdw($shdwBtns);
+    border-radius: $basicCr;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    padding: $interiorMarginLg $interiorMarginLg * 2;
+    cursor: pointer;
+    pointer-events: none;
+    &[href] {
+        pointer-events: inherit;
+    }
+}
+
+.widget-edit-holder {
+    // Hide edit area when in browse mode
+    display: none;
+}
+
+.widget-rule-header {
+    @extend .l-flex-row;
+    @include align-items(center);
+    margin-bottom: $interiorMargin;
+    > .flex-elem {
+        &:not(:first-child) {
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+.widget-rule-content,
+.w-widget-test-data-content {
+    @include trans-prop-nice($props: (height, min-height, opacity), $dur: 250ms);
+    min-height: 0;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+    &.expanded {
+        min-height: 50px;
+        height: auto;
+        opacity: 1;
+        pointer-events: inherit;
+    }
+}
+
+.widget-rule-content.expanded {
+    overflow: visible !important;
+}
+
+.w-widget-test-data-content {
+    .l-enable {
+        padding: $interiorMargin 0;
+    }
+
+    .w-widget-test-data-items {
+        max-height: 20vh;
+        overflow-y: scroll !important;
+        padding-right: $interiorMargin;
+    }
+}
+
+.l-widget-thumb-wrapper,
+.l-compact-form label {
+    $ruleLabelW: 40%;
+    $ruleLabelMaxW: 150px;
+    @include display(flex);
+    max-width: $ruleLabelMaxW;
+    width: $ruleLabelW;
+}
+
+.t-message-widget-no-data {
+    display: none;
+}
+
+/********************************************************** EDITING A WIDGET */
+.s-status-editing > mct-view > .w-summary-widget {
+    // Classes for editor layout while editing a widget
+    // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
+    // being edited.
+    @include absPosDefault();
+    @extend .l-flex-col;
+
+    > .l-summary-widget {
+        // Main view of the summary widget
+        margin: 30px auto;
+    }
+
+    .widget-edit-holder {
+        display: flex; // Overrides display: none during Browse mode
+    }
+
+    &.s-status-no-data {
+        .widget-edit-holder {
+            opacity: 0.3;
+            pointer-events: none;
+        }
+        .t-message-widget-no-data {
+            display: flex;
+        }
+    }
+
+
+    .l-compact-form {
+        // Overrides on .l-compact-form
+        ul {
+            &:last-child { margin: 0; }
+            li {
+                @include align-items(flex-start);
+                @include flex-wrap(nowrap);
+                line-height: 230%; // Provide enough space when controls wrap
+                padding: 2px 0;
+                &:not(.widget-rule-header) {
+                    &:not(.connects-to-previous) {
+                        border-top: 1px solid $colorFormLines;
+                    }
+                }
+                &.connects-to-previous {
+                    padding: $interiorMargin 0;
+                }
+
+                > label {
+                    display: block; // Needed to align text to right
+                    text-align: right;
+                }
+            }
+        }
+
+        &.s-widget-test-data-item {
+            // Single line of ul li label span, etc.
+            ul {
+                li {
+                    border: none !important;
+                    > label {
+                        display: inline-block;
+                        width: auto;
+                        text-align: left;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.widget-edit-holder {
+    font-size: 0.8rem;
+}
+
+.widget-rules-wrapper {
+    // Wrapper area that holds n rules
+    box-sizing: border-box;
+    overflow-y: scroll;
+    padding-right: $interiorMargin;
+}
+
+.l-widget-rule,
+.l-widget-test-data-item {
+    box-sizing: border-box;
+    margin-bottom: $interiorMarginSm;
+    padding: $interiorMargin $interiorMarginLg;
+}
+
+.l-widget-thumb-wrapper {
+    @extend .l-flex-row;
+    @include align-items(center);
+    > span { display: block; }
+    .grippy-holder,
+    .view-control {
+        margin-right: $interiorMargin;
+        width: 1em;
+        height: 1em;
+    }
+
+    .widget-thumb {
+        @include flex(1 1 auto);
+        width: 100%;
+    }
+}
+
+.rule-title {
+    @include flex(0 1 auto);
+    color: pullForward($colorBodyFg, 50%);
+}
+
+.rule-description {
+    @include flex(1 1 auto);
+    @include ellipsize();
+    color: pushBack($colorBodyFg, 20%);
+}
+
+.s-widget-rule,
+.s-widget-test-data-item {
+    background-color: rgba($colorBodyFg, 0.1);
+    border-radius: $basicCr;
+}
+
+.widget-thumb {
+    @include ellipsize();
+    @extend .s-summary-widget;
+    @extend .l-summary-widget;
+    padding: $interiorMarginSm $interiorMargin;
+}
+
+// Hide and show elements in the rule-header on hover
+.l-widget-rule,
+.l-widget-test-data-item {
+    .grippy,
+    .l-rule-action-buttons-wrapper,
+    .l-condition-action-buttons-wrapper,
+    .l-widget-test-data-item-action-buttons-wrapper {
+        @include trans-prop-nice($props: opacity, $dur: 500ms);
+        opacity: 0;
+    }
+    &:hover {
+        .grippy,
+        .l-rule-action-buttons-wrapper,
+        .l-widget-test-data-item-action-buttons-wrapper {
+            @include trans-prop-nice($props: opacity, $dur: 0);
+            opacity: 1;
+        }
+    }
+    .t-condition {
+        &:hover {
+            .l-condition-action-buttons-wrapper {
+                @include trans-prop-nice($props: opacity, $dur: 0);
+                opacity: 1;
+            }
+        }
+    }
+}

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -33,7 +33,6 @@ $pad: $interiorMargin * $baseRatio;
     height: $btnStdH;
     line-height: $btnStdH;
     padding: 0 $pad;
-    vertical-align: top;
 
     &.labeled:before {
         // Icon when it's included

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -72,11 +72,13 @@
     }
 }
 
+// Hyperlink objects
 .s-hyperlink {
-    // Hyperlink objects
+    .label {
+        font-size: 0.8rem !important;
+    }
     &:not(.s-button) {
         color: $colorKey;
-        font-size: 0.8rem;
         &:hover { color: $colorKeyHov; }
     }
 }
@@ -255,7 +257,7 @@ input[type="number"] {
 input[type="text"].lg {  width: 100% !important; }
 .l-input-med input[type="text"],
 input[type="text"].med { width: 200px !important; }
-input[type="text"].sm {  width: 50px !important; }
+input[type="text"].sm, input[type="number"].sm {  width: 50px !important; }
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }
 
@@ -285,14 +287,13 @@ textarea.lg { position: relative; height: 300px; }
 .select {
     @include btnSubtle($bg: $colorSelectBg);
     @extend .icon-arrow-down; // Context arrow
-    @if $shdwBtns != none {
-        margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
-    }
+    //@if $shdwBtns != none { margin: 0 0 2px 0; } // Needed to avoid dropshadow from being clipped by parent containers
     display: inline-block;
     padding: 0 $interiorMargin;
     overflow: hidden;
     position: relative;
-    line-height: $formInputH;
+    //height: $btnStdH;
+    //line-height: $btnStdH;
     select {
         @include appearance(none);
         box-sizing: border-box;
@@ -307,12 +308,13 @@ textarea.lg { position: relative; height: 300px; }
         }
     }
     &:before {
-        //@include contextArrow();
-        pointer-events: none;
-        color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
+        @include transform(translateY(-50%));
+        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
         display: block;
+        pointer-events: none;
         position: absolute;
-        right: $interiorMargin; top: 0;
+        right: $interiorMargin;
+        top: 50%;
     }
 }
 
@@ -704,6 +706,30 @@ textarea {
     }
 }
 
+.view-switcher,
+.t-btn-view-large {
+    @include trans-prop-nice-fade($controlFadeMs);
+}
+
+.view-control {
+    @extend .icon-arrow-right;
+    cursor: pointer;
+    font-size: 0.75em;
+    &:before {
+        position: absolute;
+        @include trans-prop-nice(transform, 100ms);
+        @include transform-origin(center);
+    }
+    &.expanded:before {
+        @include transform(rotate(90deg));
+    }
+}
+
+.grippy {
+    @extend .icon-grippy;
+    cursor: move;
+}
+
 /******************************************************** BROWSER ELEMENTS */
 body.desktop {
     ::-webkit-scrollbar {

platform/commonUI/general/res/sass/controls/_menus.scss

@@ -36,15 +36,20 @@
 		margin-left: $interiorMarginSm;
 	}
 
+    .icon-swatch,
     .color-swatch {
         // Used in color menu buttons in toolbar
         $d: 10px;
         display: inline-block;
         border: 1px solid rgba($colorBtnFg, 0.2);
         height: $d; width: $d;
+        line-height: $d;
         vertical-align: middle;
         margin-left: $interiorMarginSm;
         margin-top: -2px;
+        &:not(.no-selection) {
+            border-color: transparent;
+        }
     }
 
 	&:after {

platform/commonUI/general/res/sass/controls/_messages.scss

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
+/******************************************************************* STATUS BLOCK ELEMS */
 @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
 	$bgPb: 30%;
 	$bgPbD: 10%;
@@ -39,7 +39,7 @@
 // Status coloring
 .ok, .info {
     .status-indicator {
-        color: $colorStatusInfo;
+        color: $colorInfo;
     }
 }
 
@@ -136,7 +136,7 @@
     }
 }
 
-/* Styles for messages and message banners */
+/******************************************************************* MESSAGE BANNERS */
 .message {
 	&.block {
 		border-radius: $basicCr;
@@ -224,144 +224,162 @@
 	}
 	&.ok,
     &.info {
-		@include statusBannerColors($colorStatusInfo);
+		@include statusBannerColors($colorInfo);
 	}
 	&.caution,
     &.warning,
     &.alert {
-		@include statusBannerColors($colorStatusAlert);
+		@include statusBannerColors($colorWarningLo);
 	}
     &.error {
-        @include statusBannerColors($colorStatusError);
+        @include statusBannerColors($colorWarningHi);
     }
 }
 
-@mixin messageBlock($iconW: 32px) {
-    .type-icon.message-type {
+/******************************************************************* MESSAGES */
+
+/* Contexts:
+    In .t-message-list
+    In .overlay as a singleton
+    Inline in the view area
+ */
+
+// Archetypal message
+.l-message {
+    $iconW: 32px;
+    //@include test();
+    @include display(flex);
+    @include flex-direction(row);
+    @include align-items(stretch);
+    padding: $interiorMarginLg;
+
+    &:before {
+        // Icon
+        @include flex(0 1 auto);
         @include txtShdw($shdwStatusIc);
         @extend .icon-bell;
         color: $colorStatusDefault;
         font-size: $iconW;
-        padding: 1px;
         width: $iconW + 2;
+        margin-right: $interiorMarginLg;
     }
 
-    .message-severity-info .type-icon.message-type {
+    &.message-severity-info:before {
         @extend .icon-info;
-        color: $colorStatusInfo;
+        color: $colorInfo;
     }
-    .message-severity-alert .type-icon.message-type {
-        @extend .icon-bell;
-        color: $colorStatusAlert;
+
+    &.message-severity-alert:before {
+        color: $colorWarningLo;
     }
-    .message-severity-error .type-icon.message-type {
+
+    &.message-severity-error:before {
         @extend .icon-alert-rect;
-        color: $colorStatusError;
+        color: $colorWarningHi;
     }
 }
-/* Paths:
-    t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message >
-        message-type > (icon)
-        message-contents >
-        top-bar >
-            title
-            hint
-        editor >
-            (if displaying list of messages)
-            ul > li > l-message >
-                ... same as above
-        bottom-bar
-*/
 
-.l-message {
+
+.w-message-contents {
+    @include flex(1 1 auto);
     @include display(flex);
-    @include flex-direction(row);
-    @include align-items(stretch);
-    .type-icon.message-type {
-        @include flex(0 1 auto);
-        position: relative;
-    }
-    .message-contents {
-        @include flex(1 1 auto);
-        margin-left: $overlayMargin;
-        position: relative;
+    @include flex-direction(column);
 
-        .top-bar,
+    > div,
+    > span {
+        //@include test(red);
+        margin-bottom: $interiorMargin;
+    }
+
+    .message-body {
+        //@include test(blue);
+        @include flex(1 1 100%);
+    }
+}
+
+// Singleton in an overlay dialog
+.t-message-single .l-message,
+.t-message-single.l-message {
+        $iconW: 80px;
+        @include absPosDefault();
+        padding: 0;
+        &:before {
+            font-size: $iconW;
+            width: $iconW + 2;
+        }
+        .title {
+            font-size: 1.2em;
+        }
+}
+
+// Singleton inline in a view
+.t-message-inline .l-message,
+.t-message-inline.l-message {
+    border-radius: $controlCr;
+    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
+    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
+    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
+
+    .w-message-contents.l-message-body-only {
         .message-body {
-            margin-bottom: $interiorMarginLg * 2;
+            margin-top: $interiorMargin;
         }
     }
 }
 
+// In a list
+.t-message-list {
+    @include absPosDefault();
+    @include display(flex);
+    @include flex-direction(column);
 
-// Message as singleton
-.t-message-single {
-    @include messageBlock(80px);
-}
-
-body.desktop .t-message-single {
-    .l-message,
-    .bottom-bar {
-        @include absPosDefault();
+    > div,
+    > span {
+        //@include test(red);
+        margin-bottom: $interiorMargin;
     }
 
-    .bottom-bar {
-        top: auto;
-        height: $ovrFooterH;
+    .w-messages {
+        @include flex(1 1 100%);
+        overflow-y: auto;
+        padding-right: $interiorMargin;
     }
+    // Each message
+    .l-message {
+        border-radius: $controlCr;
+        background: rgba($colorOvrFg, 0.1);
+        margin-bottom: $interiorMargin;
+        .hint,
+        .bottom-bar {
+            text-align: left;
+        }
+    }
+
 }
 
 @include phonePortrait {
-    .t-message-single {
-        .l-message {
-            @include flex-direction(column);
-            .message-contents { margin-left: 0; }
-        }
-        .type-icon.message-type {
+    .t-message-single .l-message,
+    .t-message-single.l-message {
+        @include flex-direction(column);
+        &:before {
+            margin-right: 0;
             margin-bottom: $interiorMarginLg;
-            width: 100%;
             text-align: center;
+            width: 100%;
         }
 
         .bottom-bar {
-            text-align: center !important;
-        }
-    }
-}
-
-// Messages in list
-.t-message-list {
-    @include messageBlock(32px);
-
-    .message-contents {
-        .l-message {
-            border-radius: $controlCr;
-            background: rgba($colorOvrFg, 0.1);
-            margin-bottom: $interiorMargin;
-            padding: $interiorMarginLg;
-
-            .message-contents,
-            .bottom-bar {
-                position: relative;
-            }
-
-            .message-contents {
-                font-size: 0.9em;
-                margin-left: $interiorMarginLg;
-                .message-action { color: pushBack($colorOvrFg, 20%); }
-                .bottom-bar { text-align: left; }
-            }
-
-            .top-bar,
-            .message-body {
-                margin-bottom: $interiorMarginLg;
+            text-align: center;
+            .s-button {
+                display: block;
+                width: 100%;
             }
         }
     }
 }
 
 body.desktop .t-message-list {
-    .message-contents .l-message { margin-right: $interiorMarginLg; }
+    .w-message-contents { padding-right: $interiorMargin; }
 }
 
 // Alert elements in views

platform/commonUI/general/res/sass/controls/_palette.scss

@@ -19,11 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.l-color-palette {
+.l-palette {
 	$d: 16px;
 	$colorsPerRow: 10;
 	$m: 1;
-	$colorSelectedColor: #fff;
 
 	box-sizing: border-box;
 	padding: $interiorMargin !important;
@@ -33,46 +32,41 @@
 		line-height: $d;
 		width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
 
+        &.l-option-row {
+            margin-bottom: $interiorMargin;
+            .s-palette-item {
+                border-color: $colorPaletteFg;
+            }
+        }
+
 		.l-palette-item {
 			box-sizing: border-box;
-			@include txtShdwSubtle(0.8);
-			@include trans-prop-nice-fade(0.25s);
-			border: 1px solid transparent;
-			color: $colorSelectedColor;
 			display: block;
 			float: left;
 			height: $d; width: $d;
 			line-height: $d * 0.9;
 			margin: 0 ($m * 1px) ($m * 1px) 0;
+            position: relative;
 			text-align: center;
-            &:before {
-                // Check mark for selected items
-                font-size: 0.8em;
-            }
 		}
 
 		.s-palette-item {
+            border: 1px solid transparent;
+            color: $colorPaletteFg;
+            text-shadow: $shdwPaletteFg;
+            @include trans-prop-nice-fade(0.25s);
 			&:hover {
 				@include trans-prop-nice-fade(0);
-				border-color: $colorSelectedColor !important;
+				border-color: $colorPaletteSelected !important;
 			}
+            &.selected {
+                border-color: $colorPaletteSelected;
+                box-shadow: $shdwPaletteSelected; //Needed to see selection rect on light colored swatches
+            }
 		}
 
 		.l-palette-item-label {
 			margin-left: $interiorMargin;
 		}
-
-		&.l-option-row {
-			margin-bottom: $interiorMargin;
-			.s-palette-item {
-				border-color: $colorBodyFg;
-			}
-		}
 	}
-
-
-
-
-
-
-}
+}

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -9,7 +9,6 @@
 	@if $enableImageryThumbs == true {
 		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
 	}
-	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
 		background-color: $colorPlotBg;
@@ -22,7 +21,9 @@
 
 .l-image-thumbs-wrapper {
 	top: auto;
-	height: $imageThumbsWrapperH;
+	min-height: $imageThumbsWrapperH;
+	max-height: 60%;
+	box-sizing: border-box;
 }
 
 .l-date,
@@ -43,14 +44,16 @@
 .l-image-main-controlbar {
 	font-size: 0.8em;
 	line-height: inherit;
-	.left, .right {
+	.l-datetime-w, .l-controls-w {
 		direction: rtl;
 		overflow: hidden;
 	}
-	.left {
+	.l-datetime-w {
+        @include ellipsize();
+        margin-right: $interiorMarginSm;
 		text-align: left;
 	}
-	.right {
+	.l-controls-w {
 		z-index: 2;
 	}
 	.l-date,
@@ -82,9 +85,8 @@
 /*************************************** THUMBS */
 
 .l-image-thumbs-wrapper {
-	//@include test(green);
-	overflow-x: auto;
-	overflow-y: hidden;
+	overflow-x: hidden;
+	overflow-y: auto;
 	padding-bottom: $interiorMargin;
 	white-space: nowrap;
 }
@@ -92,8 +94,17 @@
 .l-image-thumb-item {
 	@include transition(background-color, 0.25s);
 	box-sizing: border-box;
+    cursor: pointer;
+    direction: ltr;
+    display: inline-block;
+    float: left;
+    font-size: 0.8em;
 	padding: 1px;
-	position: relative;
+    margin-left: $interiorMarginSm;
+    position: relative;
+    text-align: left;
+    width: $imageThumbsD + $imageThumbPad*2;
+    white-space: normal;
 	.l-thumb,
 	.l-date,
 	.l-time {
@@ -103,14 +114,7 @@
 	.l-time {
 		padding: 2px 3px;
 	}
-	cursor: pointer;
-	direction: ltr;
-	display: inline-block;
-	font-size: 0.8em;
-	margin-left: $interiorMarginSm;
-	text-align: left;
-	width: $imageThumbsD + $imageThumbPad*2;
-	white-space: normal;
+
 	&:hover {
 		background: $colorThumbHoverBg;
 		.l-date,
@@ -136,6 +140,7 @@
 /*************************************** LOCAL CONTROLS */
 .l-local-controls {
     max-width: 200px;
+    min-width: 100px;
     width: 35%;
     input[type="range"] {
         display: block;
@@ -184,7 +189,8 @@
 /*************************************** WHEN IN FRAME */
 .frame .t-imagery {
 	.l-image-main-wrapper {
-		bottom: 0;
+		bottom: 0 !important;
+        height: 100% !important;
 		.l-image-main-controlbar {
 			font-size: 0.7em;
 		}
@@ -194,7 +200,8 @@
 			}
 		}
 	}
-	.l-image-thumbs-wrapper {
+	.l-image-thumbs-wrapper,
+    mct-splitter {
 		display: none;
 	}
 }

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -20,7 +20,19 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
+    border-radius: $basicCr;
+    background: $colorFormSectionHeader;
+    color: lighten($colorBodyFg, 20%);
+    font-size: inherit;
+    margin: $interiorMargin 0;
+    padding: $formTBPad $formLRPad;
     text-transform: uppercase;
+    .view-control {
+        display: inline-block;
+        margin-right: $interiorMargin;
+        width: 1em;
+        height: 1em;
+    }
 }
 
 .form {
@@ -41,15 +53,6 @@
         }
     }
 
-    .section-header {
-        border-radius: $basicCr;
-        background: $colorFormSectionHeader;
-        $c: lighten($colorBodyFg, 20%);
-        color: $c;
-        font-size: 0.8em;
-        padding: $formTBPad $formLRPad;
-    }
-
 	.form-row {
 		$m: $interiorMargin;
 		box-sizing: border-box;
@@ -57,9 +60,6 @@
         margin-bottom: $interiorMarginLg * 2;
 		padding: $formTBPad 0;
 		position: relative;
-        //&ng-form {
-        //    display: block;
-        //}
 
 		&.first {
 			border-top: none;
@@ -171,3 +171,106 @@
 		padding: $interiorMargin;
 	}
 }
+
+/**************************************************************************** COMPACT FORM */
+// ul > li > label, control
+// Make a new UL for each form section
+// Allow control-first, controls-below
+// TO-DO: migrate work in branch ch-plot-styling that users .inspector-config to use classes below instead
+
+.l-compact-form .tree ul li,
+.l-compact-form ul li {
+    padding: 2px 0;
+}
+
+
+.l-compact-form {
+    $labelW: 40%;
+    $minW: $labelW;
+    ul {
+        margin-bottom: $interiorMarginLg;
+        li {
+            @include display(flex);
+            @include flex-wrap(wrap);
+            @include align-items(center);
+            label,
+            .control {
+                @include display(flex);
+            }
+            label {
+                line-height: inherit;
+                width: $labelW;
+            }
+            .controls {
+                @include flex-grow(1);
+                margin-left: $interiorMargin;
+                input[type="text"],
+                input[type="search"],
+                input[type="number"],
+                .select {
+                    height: $btnStdH;
+                    line-height: $btnStdH;
+                    vertical-align: middle;
+                }
+
+                .e-control {
+                    // Individual form controls
+                    &:not(:first-child) {
+                        margin-left: $interiorMarginSm;
+                    }
+                }
+            }
+
+            &.connects-to-previous {
+                padding-top: 0;
+            }
+
+            &.section-header {
+                margin-top: $interiorMarginLg;
+                border-top: 1px solid $colorFormLines;
+            }
+
+            &.controls-first {
+                .control {
+                    @include flex-grow(0);
+                    margin-right: $interiorMargin;
+                    min-width: 0;
+                    order: 1;
+                    width: auto;
+                }
+                label {
+                    @include flex-grow(1);
+                    order: 2;
+                    width: auto;
+                }
+            }
+            &.controls-under {
+                display: block;
+                .control, label {
+                    display: block;
+                    width: auto;
+                }
+
+                ul li {
+                    border-top: none !important;
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .form-error {
+        // Block element that visually flags an error and contains a message
+        background-color: $colorFormFieldErrorBg;
+        color: $colorFormFieldErrorFg;
+        border-radius: $basicCr;
+        display: block;
+        padding: 1px 6px;
+        &:before {
+            content: $glyph-icon-alert-triangle;
+            display: inline;
+            font-family: symbolsfont;
+            margin-right: $interiorMarginSm;
+        }
+    }
+}

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -79,6 +79,7 @@
 
     // Dialog boxes, size constrained and centered in desktop/tablet
     &.l-dialog {
+        font-size: 0.8rem;
         .s-button {
             &:not(.major) {
                 @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
@@ -125,9 +126,9 @@
             @include containerSubtle($colorOvrBg, $colorOvrFg);
         }
 
-        .title {
+        .dialog-title {
             @include ellipsize();
-            font-size: 1.2em;
+            font-size: 1.5em;
             line-height: 120%;
             margin-bottom: $interiorMargin;
         }

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -52,21 +52,13 @@ ul.tree {
 
     .view-control {
         color: $colorItemTreeVC;
-        font-size: 0.75em;
         margin-right: $interiorMargin;
         height: 100%;
         line-height: inherit;
         width: $treeVCW;
+        &:before { display: none; }
         &.has-children {
-            &:before {
-                position: absolute;
-                @include trans-prop-nice(transform, 100ms);
-                content: "\e904";
-                @include transform-origin(center);
-            }
-            &.expanded:before {
-                @include transform(rotate(90deg));
-            }
+            &:before { display: block; }
         }
     }
 

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -44,10 +44,11 @@
 
     &.t-object-type-timer,
     &.t-object-type-clock,
-    &.t-object-type-hyperlink {
+    &.t-object-type-hyperlink,
+    &.t-object-type-summary-widget {
         // Hide the right side buttons for objects where they don't make sense
         // Note that this will hide the view Switcher button if applied
-        // to an object that it.
+        // to an object that has it.
         .object-browse-bar .right { display: none; }
     }
 
@@ -121,10 +122,21 @@
     }
 
     /********************************************************** OBJECT TYPES */
-    .t-object-type-hyperlink {
-        .s-hyperlink.s-button {
-            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
+    .t-object-type-hyperlink,
+    .t-object-type-summary-widget {
+        .object-holder {
+            overflow: hidden;
+        }
+        .w-summary-widget,
+        .l-summary-widget,
+        .l-hyperlink.s-button {
             @extend .abs;
+        }
+
+        .l-summary-widget,
+        .l-hyperlink.s-button {
+            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
+            //@extend .abs;
             .label {
                 @include ellipsize();
                 @include transform(translateY(-50%));
@@ -142,7 +154,7 @@
 body.desktop .frame {
     // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
     // Frame template is used because we need to target the lowest nested frame
-    .right {
+    .object-browse-bar .btn-bar {
         opacity: 0;
         pointer-events: none;
     }
@@ -150,7 +162,7 @@ body.desktop .frame {
     // Target the first descendant so that we only show the elements in the outermost container.
     // Handles the case where we have layouts in layouts.
     &:hover > .object-browse-bar {
-        .right {
+        .btn-bar {
             opacity: 1;
             pointer-events: inherit;
         }

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -240,7 +240,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
 .top-bar .buttons-main .s-button,
 .top-bar .s-menu-button,
 .tool-bar .s-button,
-.tool-bar .s-menu-button {
+.tool-bar .s-menu-button,
+.tool-bar .select,
+.tool-bar .input-labeled {
     $h: $btnToolbarH;
     height: $h;
     line-height: $h;

platform/commonUI/general/res/sass/user-environ/_tool-bar.scss

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .tool-bar {
+    font-size: 0.7rem;
     &.btn-bar {
         white-space: nowrap;
     }
@@ -30,9 +31,7 @@
     input[type="search"],
     input[type="number"] {
 		box-sizing: border-box;
-		font-size: .8em;
 		height: $btnToolbarH;
-		margin-bottom: 1px;
 		position: relative;
 		&.sm {
 			width: $btnToolbarH;

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

@@ -117,6 +117,8 @@ define(
 
                 // Apply styles to child elements
                 function updateChildren(children) {
+                    position = userWidthPreference || position;
+
                     // Pick out correct elements to update, flowing from
                     // selected anchor edge.
                     var first = children.eq(anchor.reversed ? 2 : 0),
@@ -126,7 +128,7 @@ define(
 
                     splitterSize = getSize(splitter[0]);
                     first.css(anchor.edge, "0px");
-                    first.css(anchor.dimension, (userWidthPreference || position) + 'px');
+                    first.css(anchor.dimension, position + 'px');
 
                     // Get actual size (to obey min-width etc.)
                     firstSize = getSize(first[0]);
@@ -135,8 +137,8 @@ define(
                     splitter.css(anchor.opposite, "auto");
 
                     last.css(anchor.edge, firstSize + splitterSize + 'px');
-                    last.css(anchor.opposite, "0px");
-                    position = firstSize + splitterSize;
+                    last.css(anchor.opposite, '0px');
+                    position = firstSize;
                 }
 
                 // Update positioning of contained elements
@@ -173,17 +175,19 @@ define(
                             positionParsed.assign($scope, position);
                         }
                     }
+
                     return position;
                 }
 
                 function setUserWidthPreference(value) {
-                    userWidthPreference = value - splitterSize;
+                    if (alias) {
+                        userWidthPreference = value;
+                    }
                 }
 
                 function persistToLocalStorage(value) {
                     if (alias) {
-                        userWidthPreference = value - splitterSize;
-                        $window.localStorage.setItem(alias, userWidthPreference);
+                        $window.localStorage.setItem(alias, value);
                     }
                 }
 
@@ -225,13 +229,13 @@ define(
                     anchor: function () {
                         return anchor;
                     },
-                    position: function (value) {
-                        if (arguments.length > 0) {
-                            setUserWidthPreference(value);
-                            return getSetPosition(value);
-                        } else {
+                    position: function (newPosition) {
+                        if (arguments.length === 0) {
                             return getSetPosition();
                         }
+
+                        setUserWidthPreference(newPosition);
+                        return getSetPosition(newPosition);
                     },
                     startResizing: function () {
                         toggleClass('resizing');

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

@@ -57,7 +57,10 @@ define(
 
                         // Update the position of this splitter
                         newPosition =  initialPosition + pixelDelta;
-                        mctSplitPane.position(newPosition);
+
+                        if (initialPosition !== newPosition) {
+                            mctSplitPane.position(newPosition);
+                        }
                     },
                     // Grab the event when the user is done moving
                     // the splitter and pass it on

platform/commonUI/general/test/directives/MCTSplitPaneSpec.js

@@ -140,7 +140,7 @@ define(
 
                 it("exposes its splitter's initial position", function () {
                     expect(controller.position()).toEqual(
-                        mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
+                        mockFirstPane[0].offsetWidth
                     );
                 });
 
@@ -168,7 +168,7 @@ define(
                     controller.position(testValue);
                     expect(mockFirstPane.css).toHaveBeenCalledWith(
                         'width',
-                        (testValue - mockSplitter[0].offsetWidth) + 'px'
+                        (testValue) + 'px'
                     );
                 });
 
@@ -200,11 +200,11 @@ define(
                     mockFirstPane[0].offsetWidth += 100;
                     // Should not reflect the change yet
                     expect(controller.position()).not.toEqual(
-                        mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
+                        mockFirstPane[0].offsetWidth
                     );
                     mockInterval.mostRecentCall.args[0]();
                     expect(controller.position()).toEqual(
-                        mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
+                        mockFirstPane[0].offsetWidth
                     );
                 });
 
@@ -216,7 +216,7 @@ define(
 
                 it("saves user preference to localStorage when user is done resizing", function () {
                     controller.endResizing(100);
-                    expect(Number(mockWindow.localStorage.getItem('mctSplitPane-rightSide'))).toEqual(100 - mockSplitter[0].offsetWidth);
+                    expect(Number(mockWindow.localStorage.getItem('mctSplitPane-rightSide'))).toEqual(100);
                 });
 
             });

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -53,9 +53,15 @@ $timeControllerToiLineColor: #00c2ff;
 $timeControllerToiLineColorHov: #fff;
 $colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
 
-// General Colors
+// Foundation Colors
 $colorAlt1: #ffc700;
 $colorAlert: #ff3c00;
+$colorWarningHi: #cc0000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
 $colorIconLink: #49dedb;
 $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
@@ -84,8 +90,8 @@ $colorCreateMenuText: $colorMenuFg;
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorAlt1;
-$colorFormValid: #33cc33;
-$colorFormError: #990000;
+$colorFormValid: $colorOk;
+$colorFormError: $colorWarningHi;
 $colorFormInvalid: #ff3300;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
@@ -109,8 +115,8 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
 $colorStatusDefault: #ccc;
-$colorStatusInfo: #62ba72;
-$colorStatusAlert: #ffa66d;
+$colorStatusInfo: $colorInfo;
+$colorStatusAlert: $colorAlert;
 $colorStatusError: #d4585c;
 $colorStatusAvailable: $colorKey;
 $colorStatusBtnBg: $colorBtnBg;
@@ -125,14 +131,14 @@ $animPausedPulseDur: 500ms;
 $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;
 
-// Limits and staleness colors
+// Limits, status and staleness colors
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
 $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
-$colorLimitYellowBg: rgba(#ffaa00, 0.3);
-$colorLimitYellowIc: #ffaa00;
-$colorLimitRedBg: rgba(red, 0.3);
-$colorLimitRedIc: red;
+$colorLimitYellowBg: rgba($colorWarningLo, 0.3);
+$colorLimitYellowIc: $colorWarningLo;
+$colorLimitRedBg: rgba($colorWarningHi, 0.3);
+$colorLimitRedIc: $colorWarningHi;
 
 // Bubble colors
 $colorInfoBubbleBg: #ddd;
@@ -235,6 +241,12 @@ $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
 $colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
 
+// Palettes
+$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteSelected: #fff;
+$shdwPaletteFg: black 0 0 2px;
+$shdwPaletteSelected: inset 0 0 0 1px #000;
+
 // About Screen
 $colorAboutLink: #84b3ff;
 

platform/commonUI/themes/espresso/res/sass/_mixins.scss

@@ -13,3 +13,10 @@
     // For dark interfaces, darker things move back - opposite for light interfaces
     @return darken($c, $p);
 }
+
+@function bgFg($c) {
+    // Given a single color, return valid background and foreground versions of that color
+    $bg: darken($c, 20%);
+    $fg: lighten($c, 20%);
+    @return $bg, $fg;
+}

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -53,9 +53,15 @@ $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
 $colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
 
-// General Colors
+// Foundation Colors
 $colorAlt1: #776ba2;
 $colorAlert: #ff3c00;
+$colorWarningHi: #990000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
 $colorIconLink: #49dedb;
 $colorPausedBg: #ff9900;
 $colorPausedFg: #fff;
@@ -84,8 +90,8 @@ $colorCreateMenuText: $colorBodyFg;
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
-$colorFormValid: #33cc33;
-$colorFormError: #990000;
+$colorFormValid: $colorOk;
+$colorFormError: $colorWarningHi;
 $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
@@ -107,7 +113,7 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Status colors, mainly used for messaging and item ancillary symbols
-$colorStatusFg: #fff;
+$colorStatusFg: #999;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
 $colorStatusAlert: #ffb66c;
@@ -235,6 +241,12 @@ $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
 $colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
 
+// Palettes
+$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteSelected: #333;
+$shdwPaletteFg: none;
+$shdwPaletteSelected: inset 0 0 0 1px #fff;
+
 // About Screen
 $colorAboutLink: #84b3ff;
 

platform/commonUI/themes/snow/res/sass/_mixins.scss

@@ -12,3 +12,11 @@
     // For dark interfaces, darker things move back - opposite for light interfaces
     @return lighten($c, $p);
 }
+
+@function bgFg($c) {
+    // Given a single color, return valid background and foreground versions of that color
+    $bg: darken($c, 20%);
+    $fg: lighten($c, 20%);
+    @return $bg, $fg;
+}
+

platform/exporters/ExportService.js

@@ -65,6 +65,20 @@ define(['csv'], function (CSV) {
         this.saveAs(blob, filename);
     };
 
+    /**
+     * Export an object as a JSON file. Triggers a download using the function
+     * provided when the ExportService was instantiated.
+     *
+     * @param {Object} obj an object to be exported as JSON
+     * @param {ExportOptions} [options] additional parameters for the file
+     *        export
+     */
+    ExportService.prototype.exportJSON = function (obj, options) {
+        var filename = (options && options.filename) || "test-export.json";
+        var jsonText = JSON.stringify(obj);
+        var blob = new Blob([jsonText], {type: "application/json"});
+        this.saveAs(blob, filename);
+    };
     /**
      * Additional parameters for file export.
      * @typedef ExportOptions

platform/features/fixed/bundle.js

@@ -122,14 +122,6 @@ define([
                                         "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",
@@ -145,6 +137,27 @@ define([
                                     }
                                 ]
                             },
+                            {
+                                "items": [
+                                    {
+                                        "property": "color",
+                                        "cssClass": "icon-T",
+                                        "title": "Text color",
+                                        "description": "Set text color",
+                                        "mandatory": true,
+                                        "control": "color"
+                                    },
+                                    {
+                                        "property": "size",
+                                        "title": "Text size",
+                                        "description": "Set text size",
+                                        "control": "select",
+                                        "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" };
+                                        })
+                                    }
+                                ]
+                            },
                             {
                                 "items": [
                                     {
@@ -212,11 +225,7 @@ define([
                                         "control": "numberfield",
                                         "description": "Resize object width",
                                         "min": "1"
-                                    }
-                                ]
-                            },
-                            {
-                                "items": [
+                                    },
                                     {
                                         "property": "useGrid",
                                         "name": "Snap to Grid",

platform/features/hyperlink/res/templates/hyperlink.html

@@ -19,10 +19,10 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<a class="s-hyperlink" ng-controller="HyperlinkController as hyperlink" href="{{domainObject.getModel().url}}"
+<a class="l-hyperlink s-hyperlink" ng-controller="HyperlinkController as hyperlink" href="{{domainObject.getModel().url}}"
    ng-attr-target="{{hyperlink.openNewTab() ? '_blank' : undefined}}"
    ng-class="{
        's-button': hyperlink.isButton()
    }">
-    <div class="label">{{domainObject.getModel().displayText}}</div>
+    <span class="label">{{domainObject.getModel().displayText}}</span>
 </a>

platform/features/imagery/bundle.js

@@ -25,14 +25,12 @@ define([
     "./src/controllers/ImageryController",
     "./src/directives/MCTBackgroundImage",
     "text!./res/templates/imagery.html",
-    "text!./res/templates/imageryTimeline.html",
     'legacyRegistry'
 ], function (
     ImageryViewPolicy,
     ImageryController,
     MCTBackgroundImage,
     imageryTemplate,
-    imageryTimelineTemplate,
     legacyRegistry
 ) {
 
@@ -50,17 +48,6 @@ define([
                         "telemetry"
                     ],
                     "editable": false
-                },
-                {
-                    "name": "Historical Imagery",
-                    "key": "historical-imagery",
-                    "cssClass": "icon-image",
-                    "template": imageryTimelineTemplate,
-                    "priority": "preferred",
-                    "needs": [
-                        "telemetry"
-                    ],
-                    "editable": false
                 }
             ],
             "policies": [

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

@@ -1,5 +1,6 @@
 <div class="t-imagery" ng-controller="ImageryController as imagery">
-    <div class="l-image-main-wrapper l-flex-col"
+    <mct-split-pane class='abs' anchor="bottom" alias="imagery">
+    <div class="split-pane-component l-image-main-wrapper l-flex-col"
         ng-mouseenter="showLocalControls = true;"
         ng-mouseleave="showLocalControls = false;">
         <div class="l-local-controls s-local-controls s-wrapper-transluc l-flex-row"
@@ -32,12 +33,12 @@
         </div>
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
-            <div class="left flex-elem grows">
+            <div class="l-datetime-w flex-elem grows">
                 <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
                     ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
                 <span class="l-time">{{imagery.getTime()}}</span>
             </div>
-            <div class="right flex-elem">
+            <div class="l-controls-w flex-elem">
                 <a class="s-button pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
                     ng-class="{ paused: imagery.paused() }"></a>
@@ -55,4 +56,14 @@
             </div>
         </div>
     </div>
+    <mct-splitter></mct-splitter>
+    <div class="split-pane-component l-image-thumbs-wrapper">
+        <div class="l-image-thumb-item" ng-class="{selected: image.selected}" ng-repeat="image in imageHistory track by $index" 
+            ng-click="imagery.setSelectedImage(image)"  ng-init="imagery.scrollToBottom()">
+            <img class="l-thumb" 
+                ng-src={{imagery.getImageUrl(image)}}>
+            <div class="l-time">{{imagery.getTime(image)}}</div>
+        </div>
+    </div>
+    </mct-split-pane>
 </div>

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

@@ -1,8 +0,0 @@
-
-<div class="l-image-thumbs-wrapper" ng-controller="ImageryController as imagery">
-	<div class="l-image-thumb-item" ng-repeat="image in imageHistory track by $index">
-		<img class="l-thumb" ng-init="imagery.scrollToRight()"
-			ng-src={{imagery.getImageUrl(image)}} >
-			<div class="l-time">{{imagery.getTime(image)}}</div>
-	</div>
-</div>

platform/features/imagery/src/controllers/ImageryController.js

@@ -48,9 +48,8 @@ define(
             this.zone = "";
             this.imageUrl = "";
             this.requestCount = 0;
-            this.scrollable = $(element[0]);
+            this.scrollable = $(".l-image-thumbs-wrapper");
             this.autoScroll = openmct.time.clock() ? true : false;
-
             this.$scope.imageHistory = [];
             this.$scope.filters = {
                 brightness: 100,
@@ -63,6 +62,7 @@ define(
             this.updateHistory = this.updateHistory.bind(this);
             this.onBoundsChange = this.onBoundsChange.bind(this);
             this.onScroll = this.onScroll.bind(this);
+            this.setSelectedImage = this.setSelectedImage.bind(this);
 
             this.subscribe(this.$scope.domainObject);
 
@@ -80,10 +80,10 @@ define(
                     var metadata = this.openmct
                         .telemetry
                         .getMetadata(this.domainObject);
-                    var timeKey = this.openmct.time.timeSystem().key;
+                    this.timeKey = this.openmct.time.timeSystem().key;
                     this.timeFormat = this.openmct
                         .telemetry
-                        .getValueFormatter(metadata.value(timeKey));
+                        .getValueFormatter(metadata.value(this.timeKey));
                     this.imageFormat = this.openmct
                         .telemetry
                         .getValueFormatter(metadata.valuesForHints(['image'])[0]);
@@ -161,7 +161,7 @@ define(
 
         /**
          * Updates displayable values to match those of the most
-         * recently recieved datum.
+         * recently received datum.
          * @param {object} [datum] the datum
          * @private
          */
@@ -170,7 +170,6 @@ define(
                 this.nextDatum = datum;
                 return;
             }
-
             this.time = this.timeFormat.format(datum);
             this.imageUrl = this.imageFormat.format(datum);
 
@@ -185,8 +184,7 @@ define(
         ImageryController.prototype.updateHistory = function (datum) {
             if (this.$scope.imageHistory.length === 0 ||
                 !_.isEqual(this.$scope.imageHistory.slice(-1)[0], datum)) {
-
-                var index = _.sortedIndex(this.$scope.imageHistory, datum, 'utc');
+                var index = _.sortedIndex(this.$scope.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
                 this.$scope.imageHistory.splice(index, 0, datum);
                 return true;
             }
@@ -196,8 +194,12 @@ define(
 
         ImageryController.prototype.onScroll = function (event) {
             this.$window.requestAnimationFrame(function () {
+                var thumbnailWrapperHeight = this.scrollable[0].offsetHeight;
+                var thumbnailWrapperWidth = this.scrollable[0].offsetWidth;
                 if (this.scrollable[0].scrollLeft <
-                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - 20) {
+                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - (thumbnailWrapperWidth) ||
+                    this.scrollable[0].scrollTop <
+                    (this.scrollable[0].scrollHeight - this.scrollable[0].clientHeight) - (thumbnailWrapperHeight)) {
                     this.autoScroll = false;
                 } else {
                     this.autoScroll = true;
@@ -205,12 +207,16 @@ define(
             }.bind(this));
         };
 
-        ImageryController.prototype.scrollToRight = function () {
+        /**
+         *  Force history imagery div to scroll to bottom.
+         */
+        ImageryController.prototype.scrollToBottom = function () {
             if (this.autoScroll) {
-                this.scrollable[0].scrollLeft = this.scrollable[0].scrollWidth;
+                this.scrollable[0].scrollTop = this.scrollable[0].scrollHeight;
             }
         };
 
+
         /**
          * Get the time portion (hours, minutes, seconds) of the
          * timestamp associated with the incoming image telemetry
@@ -243,16 +249,38 @@ define(
          * @returns {boolean} the current state
          */
         ImageryController.prototype.paused = function (state) {
-                if (arguments.length > 0 && state !== this.isPaused) {
-                    this.isPaused = state;
-                    if (this.nextDatum) {
-                        this.updateValues(this.nextDatum);
-                        delete this.nextDatum;
-                    }
+            if (arguments.length > 0 && state !== this.isPaused) {
+                this.unselectAllImages();
+                this.isPaused = state;
+                if (this.nextDatum) {
+                    this.updateValues(this.nextDatum);
+                    delete this.nextDatum;
                 }
-                return this.isPaused;
-            };
+                this.autoScroll = true;
+            }
+            return this.isPaused;
+        };
 
+        /**
+         * Set the selected image on the state for the large imagery div to use.
+         * @param {object} [image] the image object to get url from.
+         */
+        ImageryController.prototype.setSelectedImage = function (image) {
+            this.imageUrl = this.getImageUrl(image);
+            this.time = this.getTime(image);
+            this.paused(true);
+            this.unselectAllImages();
+            image.selected = true;
+        };
+
+        /**
+         * Loop through the history imagery data to set all images to unselected.
+         */
+        ImageryController.prototype.unselectAllImages = function () {
+            for (var i = 0; i < this.$scope.imageHistory.length; i++) {
+                this.$scope.imageHistory[i].selected = false;
+            }
+        };
         return ImageryController;
     }
 );

platform/features/imagery/test/controllers/ImageryControllerSpec.js

@@ -226,6 +226,28 @@ define(
                     expect(controller.updateHistory(mockDatum)).toBe(false);
                     expect(controller.updateHistory(mockDatum)).toBe(false);
                 });
+
+                describe("user clicks on imagery thumbnail", function () {
+                    var mockDatum = { utc: 1434600258123, url: 'some/url', selected: false};
+
+                    it("pauses and adds selected class to imagery thumbnail", function () {
+                        controller.setSelectedImage(mockDatum);
+                        expect(controller.paused()).toBeTruthy();
+                        expect(mockDatum.selected).toBeTruthy();
+                    });
+
+                    it("unselects previously selected image", function () {
+                        $scope.imageHistory = [{ utc: 1434600258123, url: 'some/url', selected: true}];
+                        controller.unselectAllImages();
+                        expect($scope.imageHistory[0].selected).toBeFalsy();
+                    });
+
+                    it("updates larger image url and time", function () {
+                        controller.setSelectedImage(mockDatum);
+                        expect(controller.getImageUrl()).toEqual(controller.getImageUrl(mockDatum));
+                        expect(controller.getTime()).toEqual(controller.timeFormat.format(mockDatum.utc));
+                    });
+                });
             });
 
             it("initially shows an empty string for date/time", function () {

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

@@ -21,7 +21,7 @@
 -->
 <div
     class="l-fixed-position-text l-telemetry"
-    ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
+    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"

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

@@ -21,7 +21,7 @@
 -->
 <div
 	class="l-fixed-position-text l-static-text"
-	ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
+	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/frame.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="frame frame-template t-frame-inner abs t-object-type-{{ representation.selected.key }}">
+<div class="frame frame-template t-frame-inner abs 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

platform/features/layout/src/LayoutController.js

@@ -33,8 +33,9 @@ define(
             DEFAULT_GRID_SIZE = [32, 32],
             MINIMUM_FRAME_SIZE = [320, 180];
 
-        // Method names to expose from this controller
-        var HIDE = 'hideFrame', SHOW = 'showFrame';
+        var DEFAULT_HIDDEN_FRAME_TYPES = [
+            'hyperlink'
+        ];
 
         /**
          * The LayoutController is responsible for supporting the
@@ -68,13 +69,10 @@ define(
                     return;
                 }
 
-                // Ensure that configuration field is populated
                 $scope.configuration = $scope.configuration || {};
-                // Make sure there is a "panels" field in the
-                // view configuration.
                 $scope.configuration.panels =
                     $scope.configuration.panels || {};
-                // Store the position of this panel.
+
                 $scope.configuration.panels[id] = {
                     position: [
                         Math.floor(position.x / self.gridSize[0]),
@@ -85,7 +83,7 @@ define(
 
                 // Store the id so that the newly-dropped object
                 // gets selected during refresh composition
-                self.droppedFrameId = id;
+                self.droppedIdToSelectAfterRefresh = id;
 
                 // Mark change as persistable
                 if ($scope.commit) {
@@ -119,12 +117,12 @@ define(
 
                         $scope.composition = composition;
                         self.layoutPanels(ids);
-                        self.setDefaultFrame();
+                        self.setFrames(ids);
 
                         // If there is a newly-dropped object, select it.
-                        if (self.droppedFrameId) {
-                            self.select(null, self.droppedFrameId);
-                            delete self.droppedFrameId;
+                        if (self.droppedIdToSelectAfterRefresh) {
+                            self.select(null, self.droppedIdToSelectAfterRefresh);
+                            delete self.droppedIdToSelectAfterRefresh;
                         }
                     }
                 });
@@ -139,15 +137,12 @@ define(
                 $scope.configuration =
                     $scope.configuration || {};
 
-                // Make sure there is a "panels" field in the
-                // view configuration.
                 $scope.configuration.panels =
                     $scope.configuration.panels || {};
 
                 $scope.configuration.panels[self.activeDragId] =
                     $scope.configuration.panels[self.activeDragId] || {};
 
-                // Store the position and dimensions of this panel.
                 $scope.configuration.panels[self.activeDragId].position =
                     self.rawPositions[self.activeDragId].position;
                 $scope.configuration.panels[self.activeDragId].dimensions =
@@ -178,18 +173,40 @@ define(
             $scope.$on("mctDrop", handleDrop);
         }
 
-        // Set a default value for hasFrame property on a panel.
-        // A 'hyperlink' object should have no frame by default.
-        LayoutController.prototype.setDefaultFrame = function () {
-            var panels = this.$scope.configuration.panels;
+        // Utility function to copy raw positions from configuration,
+        // without writing directly to configuration (to avoid triggering
+        // persistence from watchers during drags).
+        function shallowCopy(obj, keys) {
+            var copy = {};
+            keys.forEach(function (k) {
+                copy[k] = obj[k];
+            });
+            return copy;
+        }
+
+        /**
+         * Set the frames value. If a configuration panel has "hasFrame' property,
+         * use that value, otherwise set a default value. A 'hyperlink' object should
+         * have no frame by default.
+         *
+         * @param {string[]} ids the object ids
+         * @private
+         */
+        LayoutController.prototype.setFrames = function (ids) {
+            var panels = shallowCopy(this.$scope.configuration.panels || {}, ids);
+
+            this.frames = {};
 
             this.$scope.composition.forEach(function (object) {
                 var id = object.getId();
+                panels[id] = panels[id] || {};
 
-                if (panels[id] && panels[id].hasFrame === undefined) {
-                    panels[id].hasFrame = object.getModel().type === 'hyperlink' ? false : true;
+                if (panels[id].hasOwnProperty('hasFrame')) {
+                    this.frames[id] = panels[id].hasFrame;
+                } else {
+                    this.frames[id] = DEFAULT_HIDDEN_FRAME_TYPES.indexOf(object.getModel().type) === -1;
                 }
-            });
+            }, this);
         };
 
         // Convert from { positions: ..., dimensions: ... } to an
@@ -278,6 +295,7 @@ define(
                 this.gridSize
             );
         };
+
         /**
          * Continue an active drag gesture.
          * @param {number[]} delta the offset, in pixels,
@@ -292,17 +310,6 @@ define(
             }
         };
 
-        // Utility function to copy raw positions from configuration,
-        // without writing directly to configuration (to avoid triggering
-        // persistence from watchers during drags).
-        function shallowCopy(obj, keys) {
-            var copy = {};
-            keys.forEach(function (k) {
-                copy[k] = obj[k];
-            });
-            return copy;
-        }
-
         /**
          * Compute panel positions based on the layout's object model.
          * Defined as member function to facilitate testing.
@@ -334,10 +341,10 @@ define(
          * view configuration.
          */
         LayoutController.prototype.endDrag = function () {
-            this.frameMoved = true;
+            this.dragInProgress = true;
 
             setTimeout(function () {
-                this.frameMoved = false;
+                this.dragInProgress = false;
             }.bind(this), 0);
 
             this.endDragInScope();
@@ -350,7 +357,7 @@ define(
          * @returns {boolean} true if selected, otherwise false
          */
         LayoutController.prototype.selected = function (obj) {
-            return this.selectedId && this.selectedId === obj.getId();
+            return !!this.selectedId && this.selectedId === obj.getId();
         };
 
         /**
@@ -367,42 +374,38 @@ define(
                 }
             }
 
-            var self = this;
-            var selectedObj = {};
-            var configuration = this.$scope.configuration;
-
             this.selectedId = id;
 
-            // Toggle the visibility of the object frame
-            function toggle() {
-                // create new selection object so toolbar updates.
-                selectedObj = {};
-
-                configuration.panels[id].hasFrame =
-                    !configuration.panels[id].hasFrame;
-
-                // Change which method is exposed, to influence
-                // which button is shown in the toolbar
-                selectedObj[configuration.panels[id].hasFrame ? HIDE : SHOW] = toggle;
-                self.selection.deselect();
-                self.selection.select(selectedObj);
-            }
-
-            // Expose initial toggle
-            selectedObj[configuration.panels[id].hasFrame ? HIDE : SHOW] = toggle;
+            var selectedObj = {};
+            selectedObj[this.frames[id] ? 'hideFrame' : 'showFrame'] = this.toggleFrame.bind(this, id);
 
             if (this.selection) {
                 this.selection.select(selectedObj);
             }
         };
 
+        /**
+         * Callback to show/hide the object frame.
+         *
+         * @param {string} id the object id
+         * @private
+         */
+        LayoutController.prototype.toggleFrame = function (id) {
+            var configuration = this.$scope.configuration;
+
+            if (!configuration.panels[id]) {
+                configuration.panels[id] = {};
+            }
+
+            this.frames[id] = configuration.panels[id].hasFrame = !this.frames[id];
+            this.select(undefined, id); // reselect so toolbar updates
+        };
+
         /**
          * Clear the current user selection.
          */
-        LayoutController.prototype.clearSelection = function (event) {
-            // Keep the selection if the frame is moved.
-            if (this.frameMoved) {
-                this.frameMoved = false;
+        LayoutController.prototype.clearSelection = function () {
+            if (this.dragInProgress) {
                 return;
             }
 
@@ -414,9 +417,12 @@ define(
 
         /**
          * Check if the object has frame.
+         *
+         * @param {object} obj the object
+         * @return {boolean} true if object has frame, otherwise false
          */
         LayoutController.prototype.hasFrame = function (obj) {
-            return this.$scope.configuration.panels[obj.getId()].hasFrame;
+            return this.frames[obj.getId()];
         };
 
         /**

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

@@ -58,6 +58,19 @@ define(
              */
             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;
         }
 

platform/features/layout/test/LayoutControllerSpec.js

@@ -49,6 +49,15 @@ define(
                     },
                     useCapability: function () {
                         return mockCompositionCapability;
+                    },
+                    getModel: function () {
+                        if (id === 'b') {
+                            return {
+                                type : 'hyperlink'
+                            };
+                        } else {
+                            return {};
+                        }
                     }
                 };
             }
@@ -79,12 +88,12 @@ define(
                 mockComposition = ["a", "b", "c"];
                 mockCompositionObjects = mockComposition.map(mockDomainObject);
 
+
                 testConfiguration = {
                     panels: {
                         a: {
                             position: [20, 10],
-                            dimensions: [5, 5],
-                            hasFrame: true
+                            dimensions: [5, 5]
                         }
                     }
                 };
@@ -105,6 +114,8 @@ define(
                 spyOn(controller, "layoutPanels").andCallThrough();
 
                 findWatch("selection")(mockScope.selection);
+
+                jasmine.Clock.useMock();
             });
 
             // Model changes will indicate that panel positions
@@ -310,6 +321,7 @@ define(
             });
 
             it("allows panels to be selected", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
                 var childObj = mockCompositionObjects[0];
 
                 controller.select(mockEvent, childObj.getId());
@@ -320,6 +332,7 @@ define(
             });
 
             it("allows selection to be cleared", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
                 var childObj = mockCompositionObjects[0];
 
                 controller.select(null, childObj.getId());
@@ -328,9 +341,8 @@ define(
                 expect(controller.selected(childObj)).toBeFalsy();
             });
 
-            it("does not clear selection when moving/resizing", function () {
+            it("prevents clearing selection while drag is in progress", function () {
                 mockScope.$watchCollection.mostRecentCall.args[1]();
-
                 var childObj = mockCompositionObjects[0];
                 var id = childObj.getId();
 
@@ -341,10 +353,77 @@ define(
                 controller.continueDrag([100, 100]);
                 controller.endDrag();
 
+                // Because mouse position could cause clearSelection to be called, this should be ignored.
                 controller.clearSelection();
 
                 expect(controller.selected(childObj)).toBe(true);
+
+                // Shoud be able to clear the selection after dragging is done.
+                jasmine.Clock.tick(0);
+                controller.clearSelection();
+
+                expect(controller.selected(childObj)).toBe(false);
             });
+
+            it("clears selection after moving/resizing", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+                var childObj = mockCompositionObjects[0];
+                var id = childObj.getId();
+
+                controller.select(mockEvent, id);
+
+                // Do a drag
+                controller.startDrag(id, [1, 1], [0, 0]);
+                controller.continueDrag([100, 100]);
+                controller.endDrag();
+
+                jasmine.Clock.tick(0);
+                controller.clearSelection();
+
+                expect(controller.selected(childObj)).toBe(false);
+            });
+
+            it("shows frames by default", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+
+                expect(controller.hasFrame(mockCompositionObjects[0])).toBe(true);
+            });
+
+            it("hyperlinks hide frame by default", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+
+                expect(controller.hasFrame(mockCompositionObjects[1])).toBe(false);
+            });
+
+            it("hides frame when selected object has frame ", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+                var childObj = mockCompositionObjects[0];
+                controller.select(mockEvent, childObj.getId());
+
+                expect(mockScope.selection.select).toHaveBeenCalled();
+
+                var selectedObj = mockScope.selection.select.mostRecentCall.args[0];
+
+                expect(controller.hasFrame(childObj)).toBe(true);
+                expect(selectedObj.hideFrame).toBeDefined();
+                expect(selectedObj.hideFrame).toEqual(jasmine.any(Function));
+            });
+
+            it("shows frame when selected object has no frame", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+
+                var childObj = mockCompositionObjects[1];
+                controller.select(mockEvent, childObj.getId());
+
+                expect(mockScope.selection.select).toHaveBeenCalled();
+
+                var selectedObj = mockScope.selection.select.mostRecentCall.args[0];
+
+                expect(controller.hasFrame(childObj)).toBe(false);
+                expect(selectedObj.showFrame).toBeDefined();
+                expect(selectedObj.showFrame).toEqual(jasmine.any(Function));
+            });
+
         });
     }
 );

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

@@ -35,7 +35,8 @@ define(
                     y: 2,
                     width: 42,
                     height: 24,
-                    fill: "transparent"
+                    fill: "transparent",
+                    size: "20px"
                 };
                 testElements = [{}, {}, testElement, {}];
                 proxy = new TextProxy(
@@ -50,6 +51,20 @@ define(
                 expect(proxy.fill('#FFF')).toEqual('#FFF');
                 expect(proxy.fill()).toEqual('#FFF');
             });
+
+            it("provides getter/setter for text size", function () {
+                expect(proxy.size()).toEqual('20px');
+                expect(proxy.size('12px')).toEqual('12px');
+                expect(proxy.size()).toEqual('12px');
+            });
+
+            it("defaults to 13px for unspecified text size", function () {
+                testElement = {x: 1, y: 2};
+                proxy = new TextProxy(testElement, 0, [testElement]);
+
+                expect(proxy.size()).toEqual('13px');
+            });
+
         });
     }
 );

platform/forms/bundle.js

@@ -24,6 +24,8 @@ define([
     "./src/MCTForm",
     "./src/MCTToolbar",
     "./src/MCTControl",
+    "./src/MCTFileInput",
+    "./src/FileInputService",
     "./src/controllers/AutocompleteController",
     "./src/controllers/DateTimeController",
     "./src/controllers/CompositeController",
@@ -42,11 +44,14 @@ define([
     "text!./res/templates/controls/menu-button.html",
     "text!./res/templates/controls/dialog.html",
     "text!./res/templates/controls/radio.html",
+    "text!./res/templates/controls/file-input.html",
     'legacyRegistry'
 ], function (
     MCTForm,
     MCTToolbar,
     MCTControl,
+    MCTFileInput,
+    FileInputService,
     AutocompleteController,
     DateTimeController,
     CompositeController,
@@ -65,6 +70,7 @@ define([
     menuButtonTemplate,
     dialogTemplate,
     radioTemplate,
+    fileInputTemplate,
     legacyRegistry
 ) {
 
@@ -88,6 +94,13 @@ define([
                         "templateLinker",
                         "controls[]"
                     ]
+                },
+                {
+                    "key": "mctFileInput",
+                    "implementation": MCTFileInput,
+                    "depends": [
+                        "fileInputService"
+                    ]
                 }
             ],
             "controls": [
@@ -142,6 +155,10 @@ define([
                 {
                     "key": "dialog-button",
                     "template": dialogTemplate
+                },
+                {
+                    "key": "file-input",
+                    "template": fileInputTemplate
                 }
             ],
             "controllers": [
@@ -176,6 +193,14 @@ define([
                         "dialogService"
                     ]
                 }
+            ],
+            "components": [
+                {
+                    "provides": "fileInputService",
+                    "type": "provider",
+                    "implementation": FileInputService
+                }
+
             ]
         }
     });

platform/forms/res/templates/controls/color.html

@@ -24,21 +24,22 @@
 
     <span class="l-click-area" ng-click="toggle.toggle()"></span>
     <span class="color-swatch"
+          ng-class="{'no-selection':ngModel[field] === 'transparent'}"
           ng-style="{
-             background: ngModel[field]
+             'background-color': ngModel[field]
          }">
     </span>
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>
 
-    <div class="menu l-color-palette"
+    <div class="menu l-palette l-color-palette"
         ng-controller="ColorController as colors"
         ng-show="toggle.isActive()">
         <div
             class="l-palette-row l-option-row"
             ng-if="!structure.mandatory">
-            <div class="l-palette-item s-palette-item {{ngModel[field] === 'transparent' ? 'icon-check' : '' }}"
+            <div class="l-palette-item s-palette-item no-selection {{ngModel[field] === 'transparent' ? 'selected' : '' }}"
                 ng-click="ngModel[field] = 'transparent'">
             </div>
             <span class="l-palette-item-label">None</span>
@@ -46,7 +47,7 @@
         <div
             class="l-palette-row"
             ng-repeat="group in colors.groups()">
-            <div class="l-palette-item s-palette-item {{ngModel[field] === color ? 'icon-check' : '' }}"
+            <div class="l-palette-item s-palette-item {{ngModel[field] === color ? 'selected' : '' }}"
                 ng-repeat="color in group"
                 ng-style="{ background: color }"
                 ng-click="ngModel[field] = color">

platform/forms/res/templates/controls/file-input.html

@@ -0,0 +1,30 @@
+<!--
+ 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.
+-->
+
+<a class="s-button {{structure.cssClass}}"
+   ng-model="ngModel[field]"
+   ng-class="{ labeled: structure.text }"
+   mct-file-input>
+    <span class="title-label" ng-if="structure.text">
+        {{structure.text}}
+    </span>
+</a>

platform/forms/src/FileInputService.js

@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * 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(["zepto"], function ($) {
+
+    /**
+     * The FileInputService provides an interface for triggering a file input.
+     *
+     * @constructor
+     * @memberof platform/forms
+     */
+    function FileInputService() {
+
+    }
+
+    /**
+     * Creates, triggers, and destroys a file picker element and returns a
+     * promise for an object containing the chosen file's name and contents.
+     *
+     * @returns {Promise} promise for an object containing file meta-data
+     */
+    FileInputService.prototype.getInput = function () {
+        var input = this.newInput();
+        var read = this.readFile;
+        var fileInfo = {};
+        var file;
+
+        return new Promise(function (resolve, reject) {
+            input.trigger("click");
+            input.on('change', function (event) {
+                file = this.files[0];
+                input.remove();
+                if (file) {
+                    read(file)
+                        .then(function (contents) {
+                            fileInfo.name = file.name;
+                            fileInfo.body = contents;
+                            resolve(fileInfo);
+                        }, function () {
+                            reject("File read error");
+                        });
+                }
+            });
+        });
+    };
+
+    FileInputService.prototype.readFile = function (file) {
+        var fileReader = new FileReader();
+
+        return new Promise(function (resolve, reject) {
+            fileReader.onload = function (event) {
+                resolve(event.target.result);
+            };
+
+            fileReader.onerror = function () {
+                return reject(event.target.result);
+            };
+            fileReader.readAsText(file);
+        });
+    };
+
+    FileInputService.prototype.newInput  = function () {
+        var input = $(document.createElement('input'));
+        input.attr("type", "file");
+        input.css("display", "none");
+        $('body').append(input);
+        return input;
+    };
+
+    return FileInputService;
+});

platform/forms/src/MCTFileInput.js

@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * 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(
+    ['zepto'],
+    function ($) {
+
+        /**
+         * The mct-file-input handles behavior of the file input form control.
+         * @constructor
+         * @memberof platform/forms
+         */
+        function MCTFileInput(fileInputService) {
+
+            function link(scope, element, attrs, control) {
+
+                function setText(fileName) {
+                    scope.structure.text = fileName.length > 20 ?
+                    fileName.substr(0, 20) + "..." :
+                    fileName;
+                }
+
+                function handleClick() {
+                    fileInputService.getInput().then(function (result) {
+                        setText(result.name);
+                        scope.ngModel[scope.field] = result;
+                        control.$setValidity("file-input", true);
+                    }, function () {
+                        setText('Select File');
+                        control.$setValidity("file-input", false);
+                    });
+                }
+
+                control.$setValidity("file-input", false);
+                element.on('click', handleClick);
+            }
+
+            return {
+                restrict: "A",
+                require: "^form",
+                link: link
+            };
+        }
+
+        return MCTFileInput;
+    }
+);

platform/forms/test/FileInputServiceSpec.js

@@ -0,0 +1,74 @@
+/*****************************************************************************
+ * 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(
+    ["../src/FileInputService"],
+    function (FileInputService) {
+
+        describe("The FileInputService", function () {
+            var fileInputService,
+                mockInput;
+
+            beforeEach(function () {
+                fileInputService = new FileInputService();
+                mockInput = jasmine.createSpyObj('input',
+                    [
+                        'on',
+                        'trigger',
+                        'remove'
+                    ]
+                );
+                mockInput.on.andCallFake(function (event, changeHandler) {
+                    changeHandler.apply(mockInput);
+                });
+                spyOn(fileInputService, "newInput").andReturn(
+                    mockInput
+                );
+
+            });
+
+            it("can read a file", function () {
+                mockInput.files = [new File(["file content"], "file name")];
+                fileInputService.getInput().then(function (result) {
+                    expect(result.name).toBe("file name");
+                    expect(result.body).toBe("file content");
+                });
+
+                expect(mockInput.trigger).toHaveBeenCalledWith('click');
+                expect(mockInput.remove).toHaveBeenCalled();
+            });
+
+            it("catches file read errors", function () {
+                mockInput.files = ["GARBAGE"];
+                fileInputService.getInput().then(
+                    function (result) {},
+                    function (err) {
+                        expect(err).toBe("File read error");
+                    }
+                );
+
+                expect(mockInput.trigger).toHaveBeenCalledWith('click');
+                expect(mockInput.remove).toHaveBeenCalled();
+            });
+        });
+    }
+);

platform/forms/test/MCTFileInputSpec.js

@@ -0,0 +1,98 @@
+/*****************************************************************************
+ * 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(
+    ["../src/MCTFileInput"],
+    function (MCTFileInput) {
+
+        describe("The mct-file-input directive", function () {
+
+            var mockScope,
+                mockFileInputService,
+                mctFileInput,
+                element,
+                attrs,
+                control;
+
+            beforeEach(function () {
+                attrs = [];
+                control = jasmine.createSpyObj('control', ['$setValidity']);
+                element = jasmine.createSpyObj('element', ['on', 'trigger']);
+                mockFileInputService = jasmine.createSpyObj('fileInputService',
+                    ['getInput']
+                );
+                mockScope = jasmine.createSpyObj(
+                        '$scope',
+                        ['$watch']
+                );
+
+                mockScope.structure = {text: 'Select File'};
+                mockScope.field = "file-input";
+                mockScope.ngModel = {"file-input" : undefined};
+
+                element.on.andCallFake(function (event, clickHandler) {
+                    clickHandler();
+                });
+                mockFileInputService.getInput.andReturn(
+                    Promise.resolve({name: "file-name", body: "file-body"})
+                );
+
+                mctFileInput = new MCTFileInput(mockFileInputService);
+
+                // Need to wait for mock promise
+                var init = false;
+                runs(function () {
+                    mctFileInput.link(mockScope, element, attrs, control);
+                    setTimeout(function () {
+                        init = true;
+                    }, 100);
+                });
+
+                waitsFor(function () {
+                    return init;
+                }, "File selection should have beeen simulated");
+            });
+
+            it("is restricted to attributes", function () {
+                expect(mctFileInput.restrict).toEqual("A");
+            });
+
+            it("changes button text to match file name", function () {
+                expect(element.on).toHaveBeenCalledWith(
+                    'click',
+                    jasmine.any(Function)
+                );
+                expect(mockScope.structure.text).toEqual("file-name");
+            });
+
+            it("validates control on file selection", function () {
+                expect(control.$setValidity.callCount).toBe(2);
+                expect(control.$setValidity.argsForCall[0]).toEqual(
+                    ['file-input', false]
+                );
+                expect(control.$setValidity.argsForCall[1]).toEqual(
+                    ['file-input', true]
+                );
+            });
+        });
+    }
+);

platform/import-export/bundle.js

@@ -0,0 +1,76 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    "./src/actions/ExportAsJSONAction",
+    "./src/actions/ImportAsJSONAction"
+], function (
+    ExportAsJSONAction,
+    ImportAsJSONAction
+) {
+
+    return function ImportExportPlugin() {
+        return function (openmct) {
+            ExportAsJSONAction.appliesTo = function (context) {
+                return openmct.$injector.get('policyService')
+                  .allow("creation", context.domainObject.getCapability("type")
+                );
+            };
+
+            openmct.legacyRegistry.register("platform/import-export", {
+                "name": "Import-export plugin",
+                "description": "Allows importing / exporting of domain objects as JSON.",
+                "extensions": {
+                    "actions": [
+                        {
+                            "key": "export.JSON",
+                            "name": "Export as JSON",
+                            "implementation": ExportAsJSONAction,
+                            "category": "contextual",
+                            "cssClass": "icon-save",
+                            "depends": [
+                                "exportService",
+                                "policyService",
+                                "identifierService"
+                            ]
+                        },
+                        {
+                            "key": "import.JSON",
+                            "name": "Import from JSON",
+                            "implementation": ImportAsJSONAction,
+                            "category": "contextual",
+                            "cssClass": "icon-download",
+                            "depends": [
+                                 "exportService",
+                                 "identifierService",
+                                 "dialogService",
+                                 "openmct"
+                            ]
+                        }
+                    ]
+                }
+            });
+            openmct.legacyRegistry.enable('platform/import-export');
+        };
+    };
+});

platform/import-export/src/actions/ExportAsJSONAction.js

@@ -0,0 +1,162 @@
+/*****************************************************************************
+ * 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 () {
+
+    /**
+     * The ExportAsJSONAction is available from context menus and allows a user
+     * to export any creatable domain object as a JSON file.
+     *
+     * @implements {Action}
+     * @constructor
+     * @memberof platform/import-export
+     */
+    function ExportAsJSONAction(
+        exportService,
+        policyService,
+        identifierService,
+        context
+    ) {
+
+        this.root = {};
+        this.tree = {};
+        this.calls = 0;
+        this.context = context;
+        this.externalIdentifiers = [];
+        this.exportService = exportService;
+        this.policyService = policyService;
+        this.identifierService = identifierService;
+    }
+
+    ExportAsJSONAction.prototype.perform = function () {
+        this.root = this.context.domainObject;
+        this.tree[this.root.getId()] = this.root.getModel();
+        this.saveAs = function (completedTree) {
+            this.exportService.exportJSON(
+                completedTree,
+                {filename: this.root.getModel().name + '.json'}
+            );
+        };
+
+        this.write(this.root);
+    };
+
+    /**
+     * Traverses object hierarchy and populates tree object with models and
+     * identifiers.
+     *
+     * @private
+     * @param {Object} parent
+     */
+    ExportAsJSONAction.prototype.write = function (parent) {
+
+        this.calls++;
+        if (parent.hasCapability('composition')) {
+            parent.useCapability('composition')
+                .then(function (children) {
+                    children.forEach(function (child, index) {
+                        // Only export if object is creatable
+                        if (this.isCreatable(child)) {
+                            // Prevents infinite export of self-contained objs
+                            if (!this.tree.hasOwnProperty(child.getId())) {
+                                // If object is a link to something absent from
+                                // tree, generate new id and treat as new object
+                                if (this.isExternal(child, parent)) {
+                                    this.rewriteLink(child, parent);
+                                } else {
+                                    this.tree[child.getId()] = child.getModel();
+                                }
+                                this.write(child);
+                            }
+                        }
+                    }.bind(this));
+                    this.calls--;
+                    if (this.calls === 0) {
+                        this.saveAs(this.wrapTree());
+                    }
+                }.bind(this));
+        } else {
+            this.calls--;
+            if (this.calls === 0) {
+                this.saveAs(this.wrapTree());
+            }
+        }
+    };
+
+    /**
+     * Exports an externally linked object as an entirely new object in the
+     * case where the original is not present in the exported tree.
+     *
+     * @private
+     */
+    ExportAsJSONAction.prototype.rewriteLink = function (child, parent) {
+        this.externalIdentifiers.push(child.getId());
+        var parentModel = parent.getModel();
+        var childModel = child.getModel();
+        var index = parentModel.composition.indexOf(child.getId());
+        var newModel = this.copyModel(childModel);
+        var newId = this.identifierService.generate();
+
+        newModel.location = parent.getId();
+        this.tree[newId] = newModel;
+        this.tree[parent.getId()] = this.copyModel(parentModel);
+        this.tree[parent.getId()].composition[index] = newId;
+    };
+
+    ExportAsJSONAction.prototype.copyModel = function (model) {
+        var jsonString = JSON.stringify(model);
+        return JSON.parse(jsonString);
+    };
+
+    ExportAsJSONAction.prototype.isExternal = function (child, parent) {
+        if (child.getModel().location !== parent.getId() &&
+            !Object.keys(this.tree).includes(child.getModel().location) &&
+            child.getId() !== this.root.getId() ||
+            this.externalIdentifiers.includes(child.getId())) {
+
+            return true;
+        }
+        return false;
+    };
+
+    /**
+     * Wraps root object for identification on reimport and wraps entire
+     * exported JSON construct for validation.
+     *
+     * @private
+     */
+    ExportAsJSONAction.prototype.wrapTree = function () {
+        return {
+            "openmct": this.tree,
+            "rootId": this.root.getId()
+        };
+    };
+
+    ExportAsJSONAction.prototype.isCreatable = function (domainObject) {
+        return this.policyService.allow(
+            "creation",
+            domainObject.getCapability("type")
+        );
+    };
+
+    return ExportAsJSONAction;
+});

platform/import-export/src/actions/ImportAsJSONAction.js

@@ -0,0 +1,175 @@
+/*****************************************************************************
+ * 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(['zepto'], function ($) {
+
+    /**
+     * The ImportAsJSONAction is available from context menus and allows a user
+     * to import a previously exported domain object into any domain object
+     * that has the composition capability.
+     *
+     * @implements {Action}
+     * @constructor
+     * @memberof platform/import-export
+     */
+    function ImportAsJSONAction(
+        exportService,
+        identifierService,
+        dialogService,
+        openmct,
+        context
+    ) {
+
+        this.openmct = openmct;
+        this.context = context;
+        this.exportService = exportService;
+        this.dialogService = dialogService;
+        this.identifierService = identifierService;
+        this.instantiate = openmct.$injector.get("instantiate");
+    }
+
+    ImportAsJSONAction.prototype.perform = function () {
+        this.dialogService.getUserInput(this.getFormModel(), {})
+            .then(function (form) {
+                var objectTree = form.selectFile.body;
+                if (this.validateJSON(objectTree)) {
+                    this.importObjectTree(JSON.parse(objectTree));
+                } else {
+                    this.displayError();
+                }
+            }.bind(this));
+    };
+
+    ImportAsJSONAction.prototype.importObjectTree = function (objTree) {
+        var parent = this.context.domainObject;
+        var tree = this.generateNewIdentifiers(objTree);
+        var rootId = tree.rootId;
+        var rootObj = this.instantiate(tree.openmct[rootId], rootId);
+
+        // Instantiate all objects in tree with their newly genereated ids,
+        // adding each to its rightful parent's composition
+        rootObj.getCapability("location").setPrimaryLocation(parent.getId());
+        this.deepInstantiate(rootObj, tree.openmct, []);
+        parent.getCapability("composition").add(rootObj);
+    };
+
+    ImportAsJSONAction.prototype.deepInstantiate = function (parent, tree, seen) {
+        // Traverses object tree, instantiates all domain object w/ new IDs and
+        // adds to parent's composition
+        if (parent.hasCapability("composition")) {
+            var parentModel = parent.getModel();
+            var newObj;
+
+            seen.push(parent.getId());
+            parentModel.composition.forEach(function (childId, index) {
+                if (!tree[childId] || seen.includes(childId)) {
+                    return;
+                }
+
+                newObj = this.instantiate(tree[childId], childId);
+                parent.getCapability("composition").add(newObj);
+                newObj.getCapability("location")
+                    .setPrimaryLocation(tree[childId].location);
+                this.deepInstantiate(newObj, tree, seen);
+            }, this);
+        }
+    };
+
+    ImportAsJSONAction.prototype.generateNewIdentifiers = function (tree) {
+        // For each domain object in the file, generate new ID, replace in tree
+        Object.keys(tree.openmct).forEach(function (domainObjectId) {
+            var newId = this.identifierService.generate();
+            tree = this.rewriteId(domainObjectId, newId, tree);
+        }, this);
+        return tree;
+    };
+
+    /**
+     * Rewrites all instances of a given id in the tree with a newly generated
+     * replacement to prevent collision.
+     *
+     * @private
+     */
+    ImportAsJSONAction.prototype.rewriteId = function (oldID, newID, tree) {
+        tree = JSON.stringify(tree).replace(new RegExp(oldID, 'g'), newID);
+        return JSON.parse(tree);
+    };
+
+    ImportAsJSONAction.prototype.getFormModel = function () {
+        return {
+            name: "Import as JSON",
+            sections: [
+                {
+                    name: "Import A File",
+                    rows: [
+                        {
+                            name: 'Select File',
+                            key: 'selectFile',
+                            control: 'file-input',
+                            required: true,
+                            text: 'Select File'
+                        }
+                    ]
+                }
+            ]
+        };
+    };
+
+    ImportAsJSONAction.prototype.validateJSON = function (jsonString) {
+        var json;
+        try {
+            json = JSON.parse(jsonString);
+        } catch (e) {
+            return false;
+        }
+        if (!json.openmct || !json.rootId) {
+            return false;
+        }
+        return true;
+    };
+
+    ImportAsJSONAction.prototype.displayError = function () {
+        var dialog,
+        model = {
+            title: "Invalid File",
+            actionText:  "The selected file was either invalid JSON or was " +
+                "not formatted properly for import into Open MCT.",
+            severity: "error",
+            options: [
+                {
+                    label: "Ok",
+                    callback: function () {
+                        dialog.dismiss();
+                    }
+                }
+            ]
+        };
+        dialog = this.dialogService.showBlockingMessage(model);
+    };
+
+    ImportAsJSONAction.appliesTo = function (context) {
+        return context.domainObject !== undefined &&
+            context.domainObject.hasCapability("composition");
+    };
+
+    return ImportAsJSONAction;
+});

platform/import-export/test/actions/ExportAsJSONActionSpec.js

@@ -0,0 +1,266 @@
+/*****************************************************************************
+ * 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(
+    [
+        "../../src/actions/ExportAsJSONAction",
+        "../../../entanglement/test/DomainObjectFactory"
+    ],
+    function (ExportAsJSONAction, domainObjectFactory) {
+
+        describe("The export JSON action", function () {
+
+            var context,
+                action,
+                exportService,
+                identifierService,
+                policyService,
+                mockType,
+                exportedTree;
+
+            beforeEach(function () {
+                exportService = jasmine.createSpyObj('exportService',
+                ['exportJSON']);
+                identifierService = jasmine.createSpyObj('identifierService',
+                            ['generate']);
+                policyService = jasmine.createSpyObj('policyService',
+                    ['allow']);
+                mockType =
+                    jasmine.createSpyObj('type', ['hasFeature']);
+
+                mockType.hasFeature.andCallFake(function (feature) {
+                    return feature === 'creation';
+                });
+                context = {};
+                context.domainObject = domainObjectFactory(
+                    {
+                        name: 'test',
+                        id: 'someID',
+                        capabilities: {type: mockType}
+                    });
+                identifierService.generate.andReturn('brandNewId');
+                exportService.exportJSON.andCallFake(function (tree, options) {
+                    exportedTree = tree;
+                });
+                policyService.allow.andCallFake(function (capability, type) {
+                    return type.hasFeature(capability);
+                });
+
+                action = new ExportAsJSONAction(exportService, policyService,
+                        identifierService, context);
+            });
+
+            it("initializes happily", function () {
+                expect(action).toBeDefined();
+            });
+
+            it("doesn't export non-creatable objects in tree", function () {
+                var nonCreatableType = {
+                    hasFeature :
+                        function (feature) {
+                            return feature !== 'creation';
+                        }
+                };
+
+                var parentComposition =
+                    jasmine.createSpyObj('parentComposition', ['invoke']);
+
+                var parent = domainObjectFactory({
+                    name: 'parent',
+                    model: { name: 'parent', location: 'ROOT'},
+                    id: 'parentId',
+                    capabilities: {
+                        composition: parentComposition,
+                        type: mockType
+                    }
+                });
+
+                var child = domainObjectFactory({
+                    name: 'child',
+                    model: { name: 'child', location: 'parentId' },
+                    id: 'childId',
+                    capabilities: {
+                        type: nonCreatableType
+                    }
+                });
+
+                parentComposition.invoke.andReturn(
+                    Promise.resolve([child])
+                );
+                context.domainObject = parent;
+
+                var init = false;
+                runs(function () {
+                    action.perform();
+                    setTimeout(function () {
+                        init = true;
+                    }, 100);
+                });
+
+                waitsFor(function () {
+                    return init;
+                }, "Exported tree sohuld have been built");
+
+                runs(function () {
+                    expect(Object.keys(action.tree).length).toBe(1);
+                    expect(action.tree.hasOwnProperty("parentId"))
+                        .toBeTruthy();
+                });
+            });
+
+            it("can export self-containing objects", function () {
+                var infiniteParentComposition =
+                    jasmine.createSpyObj('infiniteParentComposition',
+                        ['invoke']
+                    );
+
+                var infiniteChildComposition =
+                    jasmine.createSpyObj('infiniteChildComposition',
+                        ['invoke']
+                    );
+
+                var parent = domainObjectFactory({
+                    name: 'parent',
+                    model: { name: 'parent', location: 'ROOT'},
+                    id: 'infiniteParentId',
+                    capabilities: {
+                        composition: infiniteParentComposition,
+                        type: mockType
+                    }
+                });
+
+                var child = domainObjectFactory({
+                    name: 'child',
+                    model: { name: 'child', location: 'infiniteParentId' },
+                    id: 'infiniteChildId',
+                    capabilities: {
+                        composition: infiniteChildComposition,
+                        type: mockType
+                    }
+                });
+
+                infiniteParentComposition.invoke.andReturn(
+                    Promise.resolve([child])
+                );
+                infiniteChildComposition.invoke.andReturn(
+                    Promise.resolve([parent])
+                );
+                context.domainObject = parent;
+
+                var init = false;
+                runs(function () {
+                    action.perform();
+                    setTimeout(function () {
+                        init = true;
+                    }, 100);
+                });
+
+                waitsFor(function () {
+                    return init;
+                }, "Exported tree sohuld have been built");
+
+                runs(function () {
+                    expect(Object.keys(action.tree).length).toBe(2);
+                    expect(action.tree.hasOwnProperty("infiniteParentId"))
+                        .toBeTruthy();
+                    expect(action.tree.hasOwnProperty("infiniteChildId"))
+                        .toBeTruthy();
+                });
+            });
+
+            it("exports links to external objects as new objects", function () {
+                var externallyLinkedComposition =
+                    jasmine.createSpyObj('externallyLinkedComposition',
+                        ['invoke']
+                    );
+
+                var parent = domainObjectFactory({
+                    name: 'parent',
+                    model: {
+                        name: 'parent',
+                        composition: ['externalId'],
+                        location: 'ROOT'},
+                    id: 'parentId',
+                    capabilities: {
+                        composition: externallyLinkedComposition,
+                        type: mockType
+                    }
+                });
+
+                var externalObject = domainObjectFactory({
+                    name: 'external',
+                    model: { name: 'external', location: 'outsideOfTree'},
+                    id: 'externalId',
+                    capabilities: {
+                        type: mockType
+                    }
+                });
+
+                externallyLinkedComposition.invoke.andReturn(
+                    Promise.resolve([externalObject])
+                );
+                context.domainObject = parent;
+
+                var init = false;
+                runs(function () {
+                    action.perform();
+                    setTimeout(function () {
+                        init = true;
+                    }, 100);
+                });
+
+                waitsFor(function () {
+                    return init;
+                }, "Exported tree sohuld have been built");
+
+                runs(function () {
+                    expect(Object.keys(action.tree).length).toBe(2);
+                    expect(action.tree.hasOwnProperty('parentId'))
+                        .toBeTruthy();
+                    expect(action.tree.hasOwnProperty('brandNewId'))
+                        .toBeTruthy();
+                    expect(action.tree.brandNewId.location).toBe('parentId');
+                });
+            });
+
+            it("exports object tree in the correct format", function () {
+                var init = false;
+                runs(function () {
+                    action.perform();
+                    setTimeout(function () {
+                        init = true;
+                    }, 100);
+                });
+
+                waitsFor(function () {
+                    return init;
+                }, "Exported tree sohuld have been built");
+
+                runs(function () {
+                    expect(Object.keys(exportedTree).length).toBe(2);
+                    expect(exportedTree.hasOwnProperty('openmct')).toBeTruthy();
+                    expect(exportedTree.hasOwnProperty('rootId')).toBeTruthy();
+                });
+            });
+        });
+    }
+);

platform/import-export/test/actions/ImportAsJSONActionSpec.js

@@ -0,0 +1,240 @@
+/*****************************************************************************
+ * 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(
+    [
+        "../../src/actions/ImportAsJSONAction",
+        "../../../entanglement/test/DomainObjectFactory"
+    ],
+    function (ImportAsJSONAction, domainObjectFactory) {
+
+        describe("The import JSON action", function () {
+
+            var context = {};
+            var action,
+                exportService,
+                identifierService,
+                dialogService,
+                openmct,
+                mockDialog,
+                compositionCapability,
+                mockInstantiate,
+                uniqueId,
+                newObjects;
+
+
+            beforeEach(function () {
+
+                uniqueId = 0;
+                newObjects = [];
+                openmct = {
+                    $injector: jasmine.createSpyObj('$injector', ['get'])
+                };
+                mockInstantiate = jasmine.createSpy('instantiate').andCallFake(
+                    function (model, id) {
+                        var config = {
+                            "model": model,
+                            "id": id,
+                            "capabilities": {}
+                        };
+                        var locationCapability = {
+                            setPrimaryLocation: jasmine.createSpy
+                                ('setPrimaryLocation').andCallFake(
+                                    function (newLocation) {
+                                        config.model.location = newLocation;
+                                    }
+                                )
+                        };
+                        config.capabilities.location = locationCapability;
+                        if (model.composition) {
+                            var compCapability =
+                                jasmine.createSpy('compCapability')
+                                .andReturn(model.composition);
+                            compCapability.add = jasmine.createSpy('add')
+                                .andCallFake(function (newObj) {
+                                    config.model.composition.push(newObj.getId());
+                                });
+                            config.capabilities.composition = compCapability;
+                        }
+                        newObjects.push(domainObjectFactory(config));
+                        return domainObjectFactory(config);
+                    });
+                openmct.$injector.get.andReturn(mockInstantiate);
+                dialogService = jasmine.createSpyObj('dialogService',
+                    [
+                        'getUserInput',
+                        'showBlockingMessage'
+                    ]
+                );
+                identifierService = jasmine.createSpyObj('identifierService',
+                    [
+                        'generate'
+                    ]
+                );
+                identifierService.generate.andCallFake(function () {
+                    uniqueId++;
+                    return uniqueId;
+                });
+                compositionCapability = jasmine.createSpy('compositionCapability');
+                mockDialog = jasmine.createSpyObj("dialog", ["dismiss"]);
+                dialogService.showBlockingMessage.andReturn(mockDialog);
+
+                action = new ImportAsJSONAction(exportService, identifierService,
+                    dialogService, openmct, context);
+            });
+
+            it("initializes happily", function () {
+                expect(action).toBeDefined();
+            });
+
+            it("only applies to objects with composition capability", function () {
+                var compDomainObject = domainObjectFactory({
+                    name: 'compObject',
+                    model: { name: 'compObject'},
+                    capabilities: {"composition": compositionCapability}
+                });
+                var noCompDomainObject = domainObjectFactory();
+
+                context.domainObject = compDomainObject;
+                expect(ImportAsJSONAction.appliesTo(context)).toBe(true);
+                context.domainObject = noCompDomainObject;
+                expect(ImportAsJSONAction.appliesTo(context)).toBe(false);
+            });
+
+            it("displays error dialog on invalid file choice", function () {
+                dialogService.getUserInput.andReturn(Promise.resolve(
+                    {
+                        selectFile: {
+                            body: JSON.stringify({badKey: "INVALID"}),
+                            name: "fileName"
+                        }
+                    })
+                );
+
+                var init = false;
+                runs(function () {
+                    action.perform();
+                    setTimeout(function () {
+                        init = true;
+                    }, 100);
+                });
+
+                waitsFor(function () {
+                    return init;
+                }, "Promise containing file data should have resolved");
+
+                runs(function () {
+                    expect(dialogService.getUserInput).toHaveBeenCalled();
+                    expect(dialogService.showBlockingMessage).toHaveBeenCalled();
+                });
+            });
+
+            it("can import self-containing objects", function () {
+                dialogService.getUserInput.andReturn(Promise.resolve(
+                    {
+                        selectFile: {
+                            body: JSON.stringify({
+                                "openmct": {
+                                    "infiniteParent": {
+                                        "composition": ["infinteChild"],
+                                        "name": "1",
+                                        "type": "folder",
+                                        "modified": 1503598129176,
+                                        "location": "mine",
+                                        "persisted": 1503598129176
+                                    },
+                                    "infinteChild": {
+                                        "composition": ["infiniteParent"],
+                                        "name": "2",
+                                        "type": "folder",
+                                        "modified": 1503598132428,
+                                        "location": "infiniteParent",
+                                        "persisted": 1503598132428
+                                    }
+                                },
+                                "rootId": "infiniteParent"
+                            }),
+                            name: "fileName"
+                        }
+                    })
+                );
+
+                var init = false;
+                runs(function () {
+                    action.perform();
+                    setTimeout(function () {
+                        init = true;
+                    }, 100);
+                });
+
+                waitsFor(function () {
+                    return init;
+                }, "Promise containing file data should have resolved");
+
+                runs(function () {
+                    expect(mockInstantiate.calls.length).toEqual(2);
+                });
+            });
+
+            it("assigns new ids to each imported object", function () {
+                dialogService.getUserInput.andReturn(Promise.resolve(
+                    {
+                        selectFile: {
+                            body: JSON.stringify({
+                                "openmct": {
+                                    "cce9f107-5060-4f55-8151-a00120f4222f": {
+                                        "composition": [],
+                                        "name": "test",
+                                        "type": "folder",
+                                        "modified": 1503596596639,
+                                        "location": "mine",
+                                        "persisted": 1503596596639
+                                    }
+                                },
+                                "rootId": "cce9f107-5060-4f55-8151-a00120f4222f"
+                            }),
+                            name: "fileName"
+                        }
+                    })
+                );
+
+                var init = false;
+                runs(function () {
+                    action.perform();
+                    setTimeout(function () {
+                        init = true;
+                    }, 100);
+                });
+
+                waitsFor(function () {
+                    return init;
+                }, "Promise containing file data should have resolved");
+
+                runs(function () {
+                    expect(mockInstantiate.calls.length).toEqual(1);
+                    expect(newObjects[0].getId()).toBe('1');
+                });
+            });
+
+        });
+    }
+);

platform/telemetry/src/TelemetryCapability.js

@@ -138,6 +138,11 @@ define(
                 typeRequest = (type && type.getDefinition().telemetry) || {},
                 modelTelemetry = domainObject.getModel().telemetry,
                 fullRequest = Object.create(typeRequest),
+                newObject = objectUtils.toNewFormat(
+                    domainObject.getModel(),
+                    domainObject.getId()
+                ),
+                metadata = this.openmct.telemetry.getMetadata(newObject),
                 bounds,
                 timeSystem;
 
@@ -173,6 +178,14 @@ define(
                 }
             }
 
+            if (!fullRequest.ranges) {
+                fullRequest.ranges = metadata.valuesForHints(['range']);
+            }
+
+            if (!fullRequest.domains) {
+                fullRequest.domains = metadata.valuesForHints(['domain']);
+            }
+
             return fullRequest;
         };
 
@@ -211,7 +224,8 @@ define(
 
             var metadata = telemetryAPI.getMetadata(domainObject);
             var defaultDomain = metadata.valuesForHints(['domain'])[0].source;
-            var defaultRange = metadata.valuesForHints(['range'])[0].source;
+            var defaultRange = metadata.valuesForHints(['range'])[0];
+            defaultRange = defaultRange ? defaultRange.source : undefined;
 
             var isLegacyProvider = telemetryAPI.findRequestProvider(domainObject) ===
                 telemetryAPI.legacyProvider;
@@ -273,7 +287,8 @@ define(
 
             var metadata = telemetryAPI.getMetadata(domainObject);
             var defaultDomain = metadata.valuesForHints(['domain'])[0].source;
-            var defaultRange = metadata.valuesForHints(['range'])[0].source;
+            var defaultRange = metadata.valuesForHints(['range'])[0];
+            defaultRange = defaultRange ? defaultRange.source : undefined;
 
             var isLegacyProvider = telemetryAPI.findSubscriptionProvider(domainObject) ===
                 telemetryAPI.legacyProvider;

platform/telemetry/test/TelemetryCapabilitySpec.js

@@ -91,8 +91,10 @@ define(
                     "findSubscriptionProvider"
                 ]);
                 mockTelemetryAPI.getMetadata.andReturn({
-                    valuesForHints: function () {
-                        return [{}];
+                    valuesForHints: function (hint) {
+                        var metadatum = {};
+                        metadatum[hint] = "foo";
+                        return [metadatum];
                     }
                 });
 
@@ -147,7 +149,9 @@ define(
                         source: "testSource", // from model
                         key: "testKey", // from model
                         start: 42, // from argument
-                        domain: 'mockTimeSystem'
+                        domain: 'mockTimeSystem',
+                        domains: [{ domain: "foo" }],
+                        ranges: [{ range: "foo" }]
                     }]);
             });
 
@@ -167,7 +171,9 @@ define(
                     key: "testKey",
                     start: 0,
                     end: 1,
-                    domain: 'mockTimeSystem'
+                    domain: 'mockTimeSystem',
+                    domains: [{ domain: "foo" }],
+                    ranges: [{ range: "foo" }]
                 });
             });
 
@@ -184,7 +190,9 @@ define(
                     key: "testId", // from domain object
                     start: 0,
                     end: 1,
-                    domain: 'mockTimeSystem'
+                    domain: 'mockTimeSystem',
+                    domains: [{ domain: "foo" }],
+                    ranges: [{ range: "foo" }]
                 });
             });
 
@@ -266,7 +274,9 @@ define(
                         key: "testKey",
                         start: 0,
                         end: 1,
-                        domain: 'mockTimeSystem'
+                        domain: 'mockTimeSystem',
+                        domains: [{ domain: "foo" }],
+                        ranges: [{ range: "foo" }]
                     }]
                 );
 

src/MCT.js

@@ -106,9 +106,9 @@ define([
          *
          * @type {module:openmct.ViewRegistry}
          * @memberof module:openmct.MCT#
-         * @name mainViews
+         * @name objectViews
          */
-        this.mainViews = new ViewRegistry();
+        this.objectViews = new ViewRegistry();
 
         /**
          * Registry for views which should appear in the Inspector area.
@@ -255,6 +255,19 @@ define([
             this.legacyExtension('types', legacyDefinition);
         }.bind(this));
 
+        this.objectViews.providers.forEach(function (p) {
+            this.legacyExtension('views', {
+                key: 'vpid' + p.vpid,
+                vpid: p.vpid,
+                provider: p,
+                name: p.name,
+                cssClass: p.cssClass,
+                description: p.description,
+                editable: p.editable,
+                template: '<mct-view mct-vpid="' + p.vpid + '"/>'
+            });
+        }, this);
+
         legacyRegistry.register('adapter', this.legacyBundle);
         legacyRegistry.enable('adapter');
         /**

src/adapter/bundle.js

@@ -24,7 +24,6 @@ define([
     'legacyRegistry',
     './actions/ActionDialogDecorator',
     './capabilities/AdapterCapability',
-    './controllers/AdaptedViewController',
     './directives/MCTView',
     './services/Instantiate',
     './services/MissingModelCompatibilityDecorator',
@@ -32,13 +31,11 @@ define([
     './policies/AdapterCompositionPolicy',
     './policies/AdaptedViewPolicy',
     './runs/AlternateCompositionInitializer',
-    './runs/TimeSettingsURLHandler',
-    'text!./templates/adapted-view-template.html'
+    './runs/TimeSettingsURLHandler'
 ], function (
     legacyRegistry,
     ActionDialogDecorator,
     AdapterCapability,
-    AdaptedViewController,
     MCTView,
     Instantiate,
     MissingModelCompatibilityDecorator,
@@ -46,15 +43,15 @@ define([
     AdapterCompositionPolicy,
     AdaptedViewPolicy,
     AlternateCompositionInitializer,
-    TimeSettingsURLHandler,
-    adaptedViewTemplate
+    TimeSettingsURLHandler
 ) {
     legacyRegistry.register('src/adapter', {
         "extensions": {
             "directives": [
                 {
                     key: "mctView",
-                    implementation: MCTView
+                    implementation: MCTView,
+                    depends: ["openmct"]
                 }
             ],
             capabilities: [
@@ -63,16 +60,6 @@ define([
                     implementation: AdapterCapability
                 }
             ],
-            controllers: [
-                {
-                    key: "AdaptedViewController",
-                    implementation: AdaptedViewController,
-                    depends: [
-                        '$scope',
-                        'openmct'
-                    ]
-                }
-            ],
             services: [
                 {
                     key: "instantiate",
@@ -135,12 +122,6 @@ define([
                     depends: ["openmct", "$location", "$rootScope"]
                 }
             ],
-            views: [
-                {
-                    key: "adapted-view",
-                    template: adaptedViewTemplate
-                }
-            ],
             licenses: [
                 {
                     "name": "almond",

src/adapter/capabilities/APICapabilityDecorator.js

@@ -22,10 +22,12 @@
 
 define([
     './synchronizeMutationCapability',
-    './AlternateCompositionCapability'
+    './AlternateCompositionCapability',
+    './patchViewCapability'
 ], function (
     synchronizeMutationCapability,
-    AlternateCompositionCapability
+    AlternateCompositionCapability,
+    patchViewCapability
 ) {
 
     /**
@@ -46,6 +48,9 @@ define([
             capabilities.mutation =
                 synchronizeMutationCapability(capabilities.mutation);
         }
+        if (capabilities.view) {
+            capabilities.view = patchViewCapability(capabilities.view);
+        }
         if (AlternateCompositionCapability.appliesTo(model, id)) {
             capabilities.composition = function (domainObject) {
                 return new AlternateCompositionCapability(this.$injector, domainObject);

src/adapter/capabilities/patchViewCapability.js

@@ -20,26 +20,42 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    function Region(element) {
-        this.activeView = undefined;
-        this.element = element;
+define([
+    'lodash'
+], function (
+    _
+) {
+
+    function patchViewCapability(viewConstructor) {
+        return function makeCapability(domainObject) {
+            var capability = viewConstructor(domainObject);
+            var oldInvoke = capability.invoke.bind(capability);
+
+            capability.invoke = function () {
+                var availableViews = oldInvoke();
+                var newDomainObject = capability
+                    .domainObject
+                    .useCapability('adapter');
+
+                return _(availableViews).map(function (v, i) {
+                    var vd = {
+                        view: v,
+                        priority: i + 100 // arbitrary to allow new views to
+                        // be defaults by returning priority less than 100.
+                    };
+                    if (v.provider) {
+                        vd.priority = v.provider.canView(newDomainObject);
+                    }
+                    return vd;
+                })
+                .sortBy('priority')
+                .map('view')
+                .value();
+            };
+            return capability;
+        };
+
     }
 
-    Region.prototype.clear = function () {
-        if (this.activeView) {
-            this.activeView.destroy();
-            this.activeView = undefined;
-        }
-    };
-
-    Region.prototype.show = function (view) {
-        this.clear();
-        this.activeView = view;
-        if (this.activeView) {
-            this.activeView.show(this.element);
-        }
-    };
-
-    return Region;
+    return patchViewCapability;
 });

src/adapter/directives/MCTView.js

@@ -21,18 +21,20 @@
  *****************************************************************************/
 
 define([
-    'angular',
-    './Region'
 ], function (
-    angular,
-    Region
 ) {
-    function MCTView() {
+    function MCTView(openmct) {
         return {
-            restrict: 'A',
+            restrict: 'E',
             link: function (scope, element, attrs) {
-                var region = new Region(element[0]);
-                scope.$watch(attrs.mctView, region.show.bind(region));
+                var provider = openmct.objectViews.getByVPID(Number(attrs.mctVpid));
+                var view = new provider.view(scope.domainObject.useCapability('adapter'));
+                view.show(element[0]);
+                if (view.destroy) {
+                    scope.$on('$destroy', function () {
+                        view.destroy(element[0]);
+                    });
+                }
             }
         };
     }

src/adapter/policies/AdaptedViewPolicy.js

@@ -29,9 +29,9 @@ define([], function () {
         view,
         legacyObject
     ) {
-        if (view.key === 'adapted-view') {
+        if (view.hasOwnProperty('vpid')) {
             var domainObject = legacyObject.useCapability('adapter');
-            return this.openmct.mainViews.get(domainObject).length > 0;
+            return view.provider.canView(domainObject);
         }
         return true;
     };

src/api/telemetry/TelemetryAPI.js

@@ -23,10 +23,12 @@
 define([
     './TelemetryMetadataManager',
     './TelemetryValueFormatter',
+    '../objects/object-utils',
     'lodash'
 ], function (
     TelemetryMetadataManager,
     TelemetryValueFormatter,
+    objectUtils,
     _
 ) {
     /**
@@ -225,7 +227,15 @@ define([
      *          telemetry data
      */
     TelemetryAPI.prototype.request = function (domainObject) {
+        if (arguments.length === 1) {
+            arguments.length = 2;
+            arguments[1] = {};
+        }
+        this.standardizeRequestOptions(arguments[1]);
         var provider = this.findRequestProvider.apply(this, arguments);
+        if (!provider) {
+            return Promise.reject('No provider found');
+        }
         return provider.request.apply(provider, arguments);
     };
 
@@ -240,14 +250,45 @@ define([
      *        which has associated telemetry
      * @param {Function} callback the callback to invoke with new data, as
      *        it becomes available
-     * @param {module:openmct.TelemetryAPI~TelemetryRequest} options
-     *        options for this request
      * @returns {Function} a function which may be called to terminate
      *          the subscription
      */
     TelemetryAPI.prototype.subscribe = function (domainObject, callback) {
-        var provider = this.findSubscriptionProvider.apply(this, arguments);
-        return provider.subscribe.apply(provider, arguments);
+        var provider = this.findSubscriptionProvider(domainObject);
+
+        if (!this.subscribeCache) {
+            this.subscribeCache = {};
+        }
+        var keyString = objectUtils.makeKeyString(domainObject.identifier);
+        var subscriber = this.subscribeCache[keyString];
+
+        if (!subscriber) {
+            subscriber = this.subscribeCache[keyString] = {
+                callbacks: [callback]
+            };
+            if (provider) {
+                subscriber.unsubscribe = provider
+                    .subscribe(domainObject, function (value) {
+                        subscriber.callbacks.forEach(function (cb) {
+                            cb(value);
+                        });
+                    });
+            } else {
+                subscriber.unsubscribe = function () {};
+            }
+        } else {
+            subscriber.callbacks.push(callback);
+        }
+
+        return function unsubscribe() {
+            subscriber.callbacks = subscriber.callbacks.filter(function (cb) {
+                return cb !== callback;
+            });
+            if (subscriber.callbacks.length === 0) {
+                subscriber.unsubscribe();
+            }
+            delete this.subscribeCache[keyString];
+        }.bind(this);
     };
 
     /**

src/api/telemetry/TelemetryAPISpec.js

@@ -0,0 +1,278 @@
+define([
+    './TelemetryAPI'
+], function (
+    TelemetryAPI
+) {
+    describe('Telemetry API', function () {
+        var openmct;
+        var telemetryAPI;
+
+        beforeEach(function () {
+            openmct = {
+                time: jasmine.createSpyObj('timeAPI', [
+                    'timeSystem',
+                    'bounds'
+                ])
+            };
+            openmct.time.timeSystem.andReturn({key: 'system'});
+            openmct.time.bounds.andReturn({start: 0, end: 1});
+            telemetryAPI = new TelemetryAPI(openmct);
+
+        });
+
+        describe('telemetry providers', function () {
+            var telemetryProvider,
+                domainObject;
+
+            beforeEach(function () {
+                telemetryProvider = jasmine.createSpyObj('telemetryProvider', [
+                    'supportsSubscribe',
+                    'subscribe',
+                    'supportsRequest',
+                    'request'
+                ]);
+                domainObject = {
+                    identifier: {
+                        key: 'a',
+                        namespace: 'b'
+                    },
+                    type: 'sample-type'
+                };
+            });
+
+            it('provides consistent results without providers', function () {
+                var unsubscribe = telemetryAPI.subscribe(domainObject);
+                expect(unsubscribe).toEqual(jasmine.any(Function));
+
+                var response = telemetryAPI.request(domainObject);
+                expect(response).toEqual(jasmine.any(Promise));
+            });
+
+            it('skips providers that do not match', function () {
+                telemetryProvider.supportsSubscribe.andReturn(false);
+                telemetryProvider.supportsRequest.andReturn(false);
+                telemetryAPI.addProvider(telemetryProvider);
+
+                var callback = jasmine.createSpy('callback');
+                var unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+                expect(telemetryProvider.supportsSubscribe)
+                    .toHaveBeenCalledWith(domainObject);
+                expect(telemetryProvider.subscribe).not.toHaveBeenCalled();
+                expect(unsubscribe).toEqual(jasmine.any(Function));
+
+                var response = telemetryAPI.request(domainObject);
+                expect(telemetryProvider.supportsRequest)
+                    .toHaveBeenCalledWith(domainObject, jasmine.any(Object));
+                expect(telemetryProvider.request).not.toHaveBeenCalled();
+                expect(response).toEqual(jasmine.any(Promise));
+            });
+
+            it('sends subscribe calls to matching providers', function () {
+                var unsubFunc = jasmine.createSpy('unsubscribe');
+                telemetryProvider.subscribe.andReturn(unsubFunc);
+                telemetryProvider.supportsSubscribe.andReturn(true);
+                telemetryAPI.addProvider(telemetryProvider);
+
+                var callback = jasmine.createSpy('callback');
+                var unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+                expect(telemetryProvider.supportsSubscribe.calls.length).toBe(1);
+                expect(telemetryProvider.supportsSubscribe)
+                    .toHaveBeenCalledWith(domainObject);
+                expect(telemetryProvider.subscribe.calls.length).toBe(1);
+                expect(telemetryProvider.subscribe)
+                    .toHaveBeenCalledWith(domainObject, jasmine.any(Function));
+
+                var notify = telemetryProvider.subscribe.mostRecentCall.args[1];
+                notify('someValue');
+                expect(callback).toHaveBeenCalledWith('someValue');
+
+                expect(unsubscribe).toEqual(jasmine.any(Function));
+                expect(unsubFunc).not.toHaveBeenCalled();
+                unsubscribe();
+                expect(unsubFunc).toHaveBeenCalled();
+
+                notify('otherValue');
+                expect(callback).not.toHaveBeenCalledWith('otherValue');
+            });
+
+            it('subscribes once per object', function () {
+                var unsubFunc = jasmine.createSpy('unsubscribe');
+                telemetryProvider.subscribe.andReturn(unsubFunc);
+                telemetryProvider.supportsSubscribe.andReturn(true);
+                telemetryAPI.addProvider(telemetryProvider);
+
+                var callback = jasmine.createSpy('callback');
+                var callbacktwo = jasmine.createSpy('callback two');
+                var unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+                var unsubscribetwo = telemetryAPI.subscribe(domainObject, callbacktwo);
+
+                expect(telemetryProvider.subscribe.calls.length).toBe(1);
+
+                var notify = telemetryProvider.subscribe.mostRecentCall.args[1];
+                notify('someValue');
+                expect(callback).toHaveBeenCalledWith('someValue');
+                expect(callbacktwo).toHaveBeenCalledWith('someValue');
+
+                unsubscribe();
+                expect(unsubFunc).not.toHaveBeenCalled();
+                notify('otherValue');
+                expect(callback).not.toHaveBeenCalledWith('otherValue');
+                expect(callbacktwo).toHaveBeenCalledWith('otherValue');
+
+                unsubscribetwo();
+                expect(unsubFunc).toHaveBeenCalled();
+                notify('anotherValue');
+                expect(callback).not.toHaveBeenCalledWith('anotherValue');
+                expect(callbacktwo).not.toHaveBeenCalledWith('anotherValue');
+            });
+
+            it('does subscribe/unsubscribe', function () {
+                var unsubFunc = jasmine.createSpy('unsubscribe');
+                telemetryProvider.subscribe.andReturn(unsubFunc);
+                telemetryProvider.supportsSubscribe.andReturn(true);
+                telemetryAPI.addProvider(telemetryProvider);
+
+                var callback = jasmine.createSpy('callback');
+                var unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+                expect(telemetryProvider.subscribe.calls.length).toBe(1);
+                unsubscribe();
+
+                unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+                expect(telemetryProvider.subscribe.calls.length).toBe(2);
+                unsubscribe();
+            });
+
+            it('subscribes for different object', function () {
+                var unsubFuncs = [];
+                var notifiers = [];
+                telemetryProvider.supportsSubscribe.andReturn(true);
+                telemetryProvider.subscribe.andCallFake(function (obj, cb) {
+                    var unsubFunc = jasmine.createSpy('unsubscribe ' + unsubFuncs.length);
+                    unsubFuncs.push(unsubFunc);
+                    notifiers.push(cb);
+                    return unsubFunc;
+                });
+                telemetryAPI.addProvider(telemetryProvider);
+
+                var otherDomainObject = JSON.parse(JSON.stringify(domainObject));
+                otherDomainObject.identifier.namespace = 'other';
+
+                var callback = jasmine.createSpy('callback');
+                var callbacktwo = jasmine.createSpy('callback two');
+
+                var unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+                var unsubscribetwo = telemetryAPI.subscribe(otherDomainObject, callbacktwo);
+
+                expect(telemetryProvider.subscribe.calls.length).toBe(2);
+
+                notifiers[0]('someValue');
+                expect(callback).toHaveBeenCalledWith('someValue');
+                expect(callbacktwo).not.toHaveBeenCalledWith('someValue');
+
+                notifiers[1]('anotherValue');
+                expect(callback).not.toHaveBeenCalledWith('anotherValue');
+                expect(callbacktwo).toHaveBeenCalledWith('anotherValue');
+
+                unsubscribe();
+                expect(unsubFuncs[0]).toHaveBeenCalled();
+                expect(unsubFuncs[1]).not.toHaveBeenCalled();
+
+                unsubscribetwo();
+                expect(unsubFuncs[1]).toHaveBeenCalled();
+            });
+
+            it('sends requests to matching providers', function () {
+                var telemPromise = Promise.resolve([]);
+                telemetryProvider.supportsRequest.andReturn(true);
+                telemetryProvider.request.andReturn(telemPromise);
+                telemetryAPI.addProvider(telemetryProvider);
+
+                var result = telemetryAPI.request(domainObject);
+                expect(result).toBe(telemPromise);
+                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+                    domainObject,
+                    jasmine.any(Object)
+                );
+                expect(telemetryProvider.request).toHaveBeenCalledWith(
+                    domainObject,
+                    jasmine.any(Object)
+                );
+            });
+
+            it('generates default request options', function () {
+                telemetryProvider.supportsRequest.andReturn(true);
+                telemetryAPI.addProvider(telemetryProvider);
+
+                telemetryAPI.request(domainObject);
+                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+                    jasmine.any(Object),
+                    {
+                        start: 0,
+                        end: 1,
+                        domain: 'system'
+                    }
+                );
+
+                expect(telemetryProvider.request).toHaveBeenCalledWith(
+                    jasmine.any(Object),
+                    {
+                        start: 0,
+                        end: 1,
+                        domain: 'system'
+                    }
+                );
+
+                telemetryProvider.supportsRequest.reset();
+                telemetryProvider.request.reset();
+
+                telemetryAPI.request(domainObject, {});
+                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+                    jasmine.any(Object),
+                    {
+                        start: 0,
+                        end: 1,
+                        domain: 'system'
+                    }
+                );
+
+                expect(telemetryProvider.request).toHaveBeenCalledWith(
+                    jasmine.any(Object),
+                    {
+                        start: 0,
+                        end: 1,
+                        domain: 'system'
+                    }
+                );
+            });
+
+            it('does not overwrite existing request options', function () {
+                telemetryProvider.supportsRequest.andReturn(true);
+                telemetryAPI.addProvider(telemetryProvider);
+
+                telemetryAPI.request(domainObject, {
+                    start: 20,
+                    end: 30,
+                    domain: 'someDomain'
+                });
+
+                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+                    jasmine.any(Object),
+                    {
+                        start: 20,
+                        end: 30,
+                        domain: 'someDomain'
+                    }
+                );
+
+                expect(telemetryProvider.request).toHaveBeenCalledWith(
+                    jasmine.any(Object),
+                    {
+                        start: 20,
+                        end: 30,
+                        domain: 'someDomain'
+                    }
+                );
+            });
+        });
+    });
+});

src/api/ui/dialog.html

@@ -4,7 +4,7 @@
         <a class="close icon-x-in-circle"></a>
         <div class="abs inner-holder contents">
             <div class="abs top-bar">
-                <div class="title"></div>
+                <div class="dialog-title"></div>
                 <div class="hint"></div>
             </div>
             <div class='abs editor'>

src/plugins/plugins.js

@@ -26,14 +26,18 @@ define([
     '../../example/generator/plugin',
     '../../platform/features/autoflow/plugin',
     './timeConductor/plugin',
-    '../../example/imagery/plugin'
+    '../../example/imagery/plugin',
+    '../../platform/import-export/bundle',
+    './summaryWidget/plugin'
 ], function (
     _,
     UTCTimeSystem,
     GeneratorPlugin,
     AutoflowPlugin,
     TimeConductorPlugin,
-    ExampleImagery
+    ExampleImagery,
+    SummaryWidget,
+    ImportExport
 ) {
     var bundleMap = {
         CouchDB: 'platform/persistence/couch',
@@ -54,6 +58,8 @@ define([
 
     plugins.UTCTimeSystem = UTCTimeSystem;
 
+    plugins.ImportExport = ImportExport;
+
     /**
      * A tabular view showing the latest values of multiple telemetry points at
      * once. Formatted so that labels and values are aligned.
@@ -117,5 +123,7 @@ define([
 
     plugins.ExampleImagery = ExampleImagery;
 
+    plugins.SummaryWidget = SummaryWidget;
+
     return plugins;
 });

src/plugins/summaryWidget/SummaryWidgetsCompositionPolicy.js

@@ -20,21 +20,33 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    function AdaptedViewController($scope, openmct) {
-        function refresh(legacyObject) {
-            if (!legacyObject) {
-                $scope.view = undefined;
-                return;
-            }
+define(
+    [],
+    function () {
 
-            var domainObject = legacyObject.useCapability('adapter');
-            var providers = openmct.mainViews.get(domainObject);
-            $scope.view = providers[0] && providers[0].view(domainObject);
+        /**
+         * Defines composition policy for Display Layout objects.
+         * They cannot contain folders.
+         * @constructor
+         * @memberof platform/features/layout
+         * @implements {Policy.<View, DomainObject>}
+         */
+        function SummaryWidgetsCompositionPolicy(openmct) {
+            this.openmct = openmct;
         }
 
-        $scope.$watch('domainObject', refresh);
-    }
+        SummaryWidgetsCompositionPolicy.prototype.allow = function (parent, child) {
 
-    return AdaptedViewController;
-});
+            var parentType = parent.getCapability('type');
+            var newStyleChild = child.useCapability('adapter');
+
+            if (parentType.instanceOf('summary-widget') && !this.openmct.telemetry.canProvideTelemetry(newStyleChild)) {
+                return false;
+            }
+
+            return true;
+        };
+
+        return SummaryWidgetsCompositionPolicy;
+    }
+);

src/plugins/summaryWidget/plugin.js

@@ -0,0 +1,42 @@
+define(['./src/SummaryWidget', './SummaryWidgetsCompositionPolicy'], function (SummaryWidget, SummaryWidgetsCompositionPolicy) {
+
+    function plugin() {
+
+        var widgetType = {
+            name: 'Summary Widget',
+            description: 'A compact status update for collections of telemetry-producing items',
+            creatable: true,
+            cssClass: 'icon-summary-widget',
+            initialize: function (domainObject) {
+                domainObject.composition = [];
+                domainObject.configuration = {};
+            }
+        };
+
+        function initViewProvider(openmct) {
+            return {
+                name: 'Widget View',
+                view: function (domainObject) {
+                    var summaryWidget = new SummaryWidget(domainObject, openmct);
+                    return {
+                        show: summaryWidget.show,
+                        destroy: summaryWidget.destroy
+                    };
+                },
+                canView: function (domainObject) {
+                    return (domainObject.type === 'summary-widget');
+                },
+                editable: true
+            };
+        }
+
+        return function install(openmct) {
+            openmct.types.addType('summary-widget', widgetType);
+            openmct.objectViews.addProvider(initViewProvider(openmct));
+            openmct.legacyExtension('policies', {category: 'composition',
+                implementation: SummaryWidgetsCompositionPolicy, depends: ['openmct']});
+        };
+    }
+
+    return plugin;
+});

src/plugins/summaryWidget/res/conditionTemplate.html

@@ -0,0 +1,11 @@
+<li class="t-condition">
+    <label>when</label>
+    <span class="controls">
+        <span class="t-configuration"> </span>
+        <span class="t-value-inputs"> </span>
+    </span>
+    <span class="flex-elem l-condition-action-buttons-wrapper">
+        <a class="s-icon-button icon-duplicate t-duplicate"></a>
+        <a class="s-icon-button icon-trash t-delete"></a>
+    </span>
+</li>

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

@@ -0,0 +1,10 @@
+<a class="e-control s-button s-menu-button menu-element">
+   <span class="l-click-area"></span>
+   <span class="t-swatch"></span>
+   <div class="menu l-palette">
+       <div class="l-palette-row l-option-row">
+           <div class="l-palette-item s-palette-item no-selection"></div>
+           <span class="l-palette-item-label">None</span>
+       </div>
+   </div>
+</a>

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

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

src/plugins/summaryWidget/res/ruleImageTemplate.html

@@ -0,0 +1,3 @@
+<div class="holder widget-rules-wrapper">
+    <div class="t-drag-rule-image l-widget-rule s-widget-rule"></div>
+</div>