Merge pull request #1744 from nasa/inspector-issue-1276

Inspector issue 1276

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:
 

example/generator/GeneratorProvider.js

@@ -78,8 +78,8 @@ define([
         return this.workerInterface.request(workerRequest);
     };
 
-    GeneratorProvider.prototype.subscribe = function (domainObject, callback, request) {
-        var workerRequest = this.makeWorkerRequest(domainObject, request);
+    GeneratorProvider.prototype.subscribe = function (domainObject, callback) {
+        var workerRequest = this.makeWorkerRequest(domainObject, {});
         return this.workerInterface.subscribe(workerRequest, callback);
     };
 

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/glyphs.html

@@ -127,7 +127,8 @@
 { 'meaning': 'Timer object', 'cssClass': 'icon-timer', 'cssContent': 'e1127', 'htmlEntity': '&#xe1127' },
 { 'meaning': 'Data Topic', 'cssClass': 'icon-topic', 'cssContent': 'e1128', 'htmlEntity': '&#xe1128' },
 { 'meaning': 'Fixed Position object', 'cssClass': 'icon-box-with-dashed-lines', 'cssContent': 'e1129', 'htmlEntity': '&#xe1129' },
-{ 'meaning': 'Summary Widget', 'cssClass': 'icon-summary-widget', 'cssContent': 'e1130', 'htmlEntity': '&#xe1130' }
+{ 'meaning': 'Summary Widget', 'cssClass': 'icon-summary-widget', 'cssContent': 'e1130', 'htmlEntity': '&#xe1130' },
+{ 'meaning': 'Notebook object', 'cssClass': 'icon-notebook', 'cssContent': 'e1131', 'htmlEntity': '&#xe1131' }
 ];
 "></div>
 

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/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" };

gulpfile.js

@@ -46,9 +46,22 @@ var gulp = require('gulp'),
             name: 'bower_components/almond/almond.js',
             include: paths.main.replace('.js', ''),
             wrap: {
-                startFile: "src/start.frag",
+                start: (function () {
+                    var buildVariables = {
+                        version: project.version,
+                        timestamp: moment.utc(Date.now()).format(),
+                        revision: fs.existsSync('.git') ? git.long() : 'Unknown',
+                        branch: fs.existsSync('.git') ? git.branch() : 'Unknown'
+                    };
+                    return fs.readFileSync("src/start.frag", 'utf-8')
+                        .replace(/@@(\w+)/g, function (match, key) {
+                            return buildVariables[key];
+                        });;
+                }()),
                 endFile: "src/end.frag"
             },
+            optimize: 'uglify2',
+            uglify2: { output: { comments: /@preserve/ } },
             mainConfigFile: paths.main,
             wrapShim: true
         },
@@ -58,14 +71,6 @@ var gulp = require('gulp'),
         },
         sass: {
             sourceComments: true
-        },
-        replace: {
-            variables: {
-                version: project.version,
-                timestamp: moment.utc(Date.now()).format(),
-                revision: fs.existsSync('.git') ? git.long() : 'Unknown',
-                branch: fs.existsSync('.git') ? git.branch() : 'Unknown'
-            }
         }
     };
 
@@ -76,16 +81,11 @@ if (process.env.NODE_ENV === 'development') {
 
 gulp.task('scripts', function () {
     var requirejsOptimize = require('gulp-requirejs-optimize');
-    var replace = require('gulp-replace-task');
-    var header = require('gulp-header');
-    var comment = fs.readFileSync('src/about.frag');
 
     return gulp.src(paths.main)
         .pipe(sourcemaps.init())
         .pipe(requirejsOptimize(options.requirejsOptimize))
         .pipe(sourcemaps.write('.'))
-        .pipe(replace(options.replace))
-        .pipe(header(comment, options.replace.variables))
         .pipe(gulp.dest(paths.dist));
 });
 

index.html

@@ -43,6 +43,7 @@
             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: [
                     {

openmct.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global requirejs*/
+/*global requirejs,BUILD_CONSTANTS*/
 
 requirejs.config({
     "paths": {
@@ -91,12 +91,17 @@ requirejs.config({
 define([
     './platform/framework/src/Main',
     './src/defaultRegistry',
-    './src/MCT'
-], function (Main, defaultRegistry, MCT) {
+    './src/MCT',
+    './src/plugins/buildInfo/plugin'
+], function (Main, defaultRegistry, MCT, buildInfo) {
     var openmct = new MCT();
 
     openmct.legacyRegistry = defaultRegistry;
 
+    if (typeof BUILD_CONSTANTS !== 'undefined') {
+        openmct.install(buildInfo(BUILD_CONSTANTS));
+    }
+
     openmct.on('start', function () {
         return new Main().run(defaultRegistry);
     });

package.json

@@ -21,13 +21,11 @@
     "bower": "^1.7.7",
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
-    "gulp": "^3.9.0",
-    "gulp-header": "^1.8.8",
+    "gulp": "^3.9.1",
     "gulp-jscs": "^3.0.2",
     "gulp-jshint": "^2.0.0",
     "gulp-jshint-html-reporter": "^0.1.3",
     "gulp-rename": "^1.2.2",
-    "gulp-replace-task": "^0.11.0",
     "gulp-requirejs-optimize": "^0.3.1",
     "gulp-sass": "^2.2.0",
     "gulp-sourcemaps": "^1.6.0",

platform/commonUI/browse/bundle.js

@@ -26,6 +26,7 @@ define([
     "./src/InspectorPaneController",
     "./src/BrowseObjectController",
     "./src/MenuArrowController",
+    "./src/ObjectHeaderController",
     "./src/navigation/NavigationService",
     "./src/navigation/NavigateAction",
     "./src/navigation/OrphanNavigationHandler",
@@ -36,6 +37,7 @@ define([
     "text!./res/templates/browse-object.html",
     "text!./res/templates/items/grid-item.html",
     "text!./res/templates/browse/object-header.html",
+    "text!./res/templates/browse/object-header-frame.html",
     "text!./res/templates/menu-arrow.html",
     "text!./res/templates/back-arrow.html",
     "text!./res/templates/items/items.html",
@@ -48,6 +50,7 @@ define([
     InspectorPaneController,
     BrowseObjectController,
     MenuArrowController,
+    ObjectHeaderController,
     NavigationService,
     NavigateAction,
     OrphanNavigationHandler,
@@ -58,6 +61,7 @@ define([
     browseObjectTemplate,
     gridItemTemplate,
     objectHeaderTemplate,
+    objectHeaderFrameTemplate,
     menuArrowTemplate,
     backArrowTemplate,
     itemsTemplate,
@@ -107,7 +111,9 @@ define([
                     "depends": [
                         "$scope",
                         "agentService",
-                        "$window"
+                        "$window",
+                        "$location",
+                        "$attrs"
                     ]
                 },
                 {
@@ -134,7 +140,16 @@ define([
                         "$scope",
                         "agentService",
                         "$window",
-                        "navigationService"
+                        "navigationService",
+                        "$location",
+                        "$attrs"
+                    ]
+                },
+                {
+                    "key": "ObjectHeaderController",
+                    "implementation": ObjectHeaderController,
+                    "depends": [
+                        "$scope"
                     ]
                 }
             ],
@@ -169,6 +184,13 @@ define([
                         "type"
                     ]
                 },
+                {
+                    "key": "object-header-frame",
+                    "template": objectHeaderFrameTemplate,
+                    "uses": [
+                        "type"
+                    ]
+                },
                 {
                     "key": "menu-arrow",
                     "template": menuArrowTemplate,

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/res/templates/browse/object-header-frame.html

@@ -0,0 +1,31 @@
+<!--
+ 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.
+-->
+<span class='type-icon flex-elem {{type.getCssClass()}}'></span>
+<span class="l-elem-wrapper l-flex-row flex-elem grows" ng-controller="ObjectHeaderController as controller">
+    <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
+    <span class='title-label flex-elem holder flex-can-shrink s-input-inline'>{{model.name}}</span>
+    <span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
+    <mct-representation
+        key="'menu-arrow'"
+        mct-object='domainObject'
+        class="flex-elem context-available-w"></mct-representation>
+</span>

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -20,9 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <span class='type-icon flex-elem {{type.getCssClass()}}'></span>
-<span class="l-elem-wrapper l-flex-row flex-elem grows">
+<span class="l-elem-wrapper l-flex-row flex-elem grows" ng-controller="ObjectHeaderController as controller">
     <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
-    <span class='title-label flex-elem holder flex-can-shrink'>{{model.name}}</span>
+    <span ng-attr-contenteditable="{{ controller.editable ? true : undefined }}"
+		class='title-label flex-elem holder flex-can-shrink s-input-inline'
+		ng-click="controller.edit()"
+		ng-blur="controller.updateName($event)"
+		ng-keypress="controller.updateName($event)">{{model.name}}</span>
     <span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
     <mct-representation
         key="'menu-arrow'"

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/ObjectHeaderController.js

@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * 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 () {
+
+        /**
+         * Controller to provide the ability to inline edit an object name.
+         *
+         * @constructor
+         * @memberof platform/commonUI/browse
+         */
+        function ObjectHeaderController($scope) {
+            this.$scope = $scope;
+            this.domainObject = $scope.domainObject;
+            this.editable = this.allowEdit();
+        }
+
+        /**
+         * Updates the object name on blur and enter keypress events.
+         *
+         * @param event the mouse event
+         */
+        ObjectHeaderController.prototype.updateName = function (event) {
+            if (event && (event.type === 'blur' || event.which === 13)) {
+                var name = event.currentTarget.innerHTML;
+
+                if (name.length === 0) {
+                    name = "Unnamed " + this.domainObject.getCapability("type").typeDef.name;
+                    event.currentTarget.innerHTML = name;
+                }
+
+                if (name !== this.$scope.domainObject.model.name) {
+                    this.domainObject.getCapability('mutation').mutate(function (model) {
+                        model.name = name;
+                    });
+                }
+
+                if (event.which === 13) {
+                    event.currentTarget.blur();
+                }
+            }
+        };
+
+        /**
+         * Checks if the domain object is editable.
+         *
+         * @private
+         * @return true if object is editable
+         */
+        ObjectHeaderController.prototype.allowEdit = function () {
+            var type = this.domainObject && this.domainObject.getCapability('type');
+            return !!(type && type.hasFeature('creation'));
+        };
+
+        return ObjectHeaderController;
+    }
+);

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/ObjectHeaderControllerSpec.js

@@ -0,0 +1,132 @@
+/*****************************************************************************
+ * 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/ObjectHeaderController"],
+    function (ObjectHeaderController) {
+
+        describe("The object header controller", function () {
+            var mockScope,
+                mockDomainObject,
+                mockCapabilities,
+                mockMutationCapability,
+                mockTypeCapability,
+                mockEvent,
+                mockCurrentTarget,
+                controller;
+
+            beforeEach(function () {
+                mockMutationCapability = jasmine.createSpyObj("mutation", ["mutate"]);
+                mockTypeCapability = jasmine.createSpyObj("type", ["typeDef", "hasFeature"]);
+                mockTypeCapability.typeDef = { name: ""};
+                mockTypeCapability.hasFeature.andCallFake(function (feature) {
+                    return feature === 'creation';
+                });
+
+                mockCapabilities = {
+                    mutation: mockMutationCapability,
+                    type: mockTypeCapability
+                };
+
+                mockDomainObject = jasmine.createSpyObj("domainObject", ["getCapability", "model"]);
+                mockDomainObject.model = {name: "Test name"};
+                mockDomainObject.getCapability.andCallFake(function (key) {
+                    return mockCapabilities[key];
+                });
+
+                mockScope = {
+                    domainObject: mockDomainObject
+                };
+
+                mockCurrentTarget = jasmine.createSpyObj("currentTarget", ["blur", "innerHTML"]);
+                mockCurrentTarget.blur.andReturn(mockCurrentTarget);
+
+                mockEvent = {
+                    which: {},
+                    type: {},
+                    currentTarget: mockCurrentTarget
+                };
+
+                controller = new ObjectHeaderController(mockScope);
+            });
+
+            it("updates the model with new name on blur", function () {
+                mockEvent.type = "blur";
+                mockCurrentTarget.innerHTML = "New name";
+                controller.updateName(mockEvent);
+
+                expect(mockMutationCapability.mutate).toHaveBeenCalled();
+            });
+
+            it("updates the model with a default for blank names", function () {
+                mockEvent.type = "blur";
+                mockCurrentTarget.innerHTML = "";
+                controller.updateName(mockEvent);
+
+                expect(mockCurrentTarget.innerHTML.length).not.toEqual(0);
+                expect(mockMutationCapability.mutate).toHaveBeenCalled();
+            });
+
+            it("does not update the model if the same name", function () {
+                mockEvent.type = "blur";
+                mockCurrentTarget.innerHTML = mockDomainObject.model.name;
+                controller.updateName(mockEvent);
+
+                expect(mockMutationCapability.mutate).not.toHaveBeenCalled();
+            });
+
+            it("updates the model on enter keypress event only", function () {
+                mockCurrentTarget.innerHTML = "New name";
+                controller.updateName(mockEvent);
+
+                expect(mockMutationCapability.mutate).not.toHaveBeenCalled();
+
+                mockEvent.which = 13;
+                controller.updateName(mockEvent);
+
+                expect(mockMutationCapability.mutate).toHaveBeenCalledWith(jasmine.any(Function));
+
+                mockMutationCapability.mutate.mostRecentCall.args[0](mockDomainObject.model);
+
+                expect(mockDomainObject.model.name).toBe("New name");
+            });
+
+            it("blurs the field on enter key press", function () {
+                mockEvent.which = 13;
+                controller.updateName(mockEvent);
+
+                expect(mockEvent.currentTarget.blur).toHaveBeenCalled();
+            });
+
+            it("allows editting name when object is creatable", function () {
+                expect(controller.allowEdit()).toBe(true);
+            });
+
+            it("disallows editting name when object is non-creatable", function () {
+                mockTypeCapability.hasFeature.andReturn(false);
+
+                expect(controller.allowEdit()).toBe(false);
+
+            });
+        });
+    }
+);

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/edit/res/templates/create/create-button.html

@@ -23,7 +23,7 @@
     <div class="s-menu-button major create-button" ng-click="createController.toggle()">
 		<span class="title-label">Create</span>
     </div>
-    <div class="menu super-menu" ng-show="createController.isActive()">
+    <div class="menu super-menu l-create-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>

platform/commonUI/edit/res/templates/create/create-menu.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items">
+<div class="w-menu" ng-controller="CreateMenuController">
+    <div class="col menu-items">
         <ul>
             <li ng-repeat="createAction in createActions" ng-click="createAction.perform()">
                 <a ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
@@ -31,13 +31,15 @@
             </li>
         </ul>
     </div>
-    <div class="pane right menu-item-description">
+    <div class="col menu-item-description">
         <div class="desc-area icon {{ representation.activeMetadata.cssClass }}"></div>
-        <div class="desc-area title">
-            {{representation.activeMetadata.name}}
-        </div>
-        <div class="desc-area description">
-            {{representation.activeMetadata.description}}
+        <div class="w-title-desc">
+            <div class="desc-area title">
+                {{representation.activeMetadata.name}}
+            </div>
+            <div class="desc-area description">
+                {{representation.activeMetadata.description}}
+            </div>
         </div>
     </div>
 </div>

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": 1506973656040
   },
   "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,15 @@
           "name": "icon-summary-widget",
           "prevSize": 24,
           "code": 921904,
-          "tempChar": ""
+          "tempChar": ""
+        },
+        {
+          "order": 139,
+          "id": 117,
+          "name": "icon-notebook",
+          "prevSize": 24,
+          "code": 921905,
+          "tempChar": ""
         }
       ],
       "metadata": {
@@ -2683,6 +2707,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"
@@ -3462,6 +3532,29 @@
               {}
             ]
           }
+        },
+        {
+          "id": 117,
+          "paths": [
+            "M896 110.8c0-79.8-55.4-127.4-123-105.4l-773 250.6h896v-145.2z",
+            "M896 320h-896v576c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-448c0-70.4-57.6-128-128-128zM832 832h-384v-320h384v320z"
+          ],
+          "attrs": [
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-notebook"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {},
+              {}
+            ]
+          }
         }
       ],
       "colorThemes": [

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" />
@@ -116,4 +118,5 @@
 <glyph unicode="&#xe1128;" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
 <glyph unicode="&#xe1129;" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
 <glyph unicode="&#xe1130;" glyph-name="icon-summary-widget" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 349.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />
+<glyph unicode="&#xe1131;" glyph-name="icon-notebook" d="M896 849.2c0 79.8-55.4 127.4-123 105.4l-773-250.6h896v145.2zM896 640h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM832 128h-384v320h384v-320z" />
 </font></defs></svg>

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;
@@ -111,7 +111,9 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
-$inputTextP: 3px 5px;
+$inputTextPTopBtm: 3px;
+$inputTextPLeftRight: 5px;
+$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;

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/_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';
@@ -123,6 +146,7 @@ $glyph-icon-timer: '\e1127';
 $glyph-icon-topic: '\e1128';
 $glyph-icon-box-with-dashed-lines: '\e1129';
 $glyph-icon-summary-widget: '\e1130';
+$glyph-icon-notebook: '\e1131';
 
 /************************** 16 PX CLASSES */
 
@@ -204,6 +228,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); }
@@ -235,6 +261,7 @@ $glyph-icon-summary-widget: '\e1130';
 .icon-topic {  @include glyphBefore($glyph-icon-topic); }
 .icon-box-with-dashed-lines {  @include glyphBefore($glyph-icon-box-with-dashed-lines); }
 .icon-summary-widget {  @include glyphBefore($glyph-icon-summary-widget); }
+.icon-notebook {  @include glyphBefore($glyph-icon-notebook); }
 
 /************************** 12 PX CLASSES */
 .icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }

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";

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

@@ -316,23 +316,28 @@
     text-shadow: $shdwItemText;
 }
 
-@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+@mixin input-base() {
 	@include appearance(none);
 	border-radius: $controlCr;
 	box-sizing: border-box;
-	box-shadow: inset $shdw;
-	background: $bg;
-	border: none;
-	color: $fg;
-	outline: none;
+    &:focus { outline: 0; }
 	&.error {
 		background-color: $colorFormFieldErrorBg;
         color: $colorFormFieldErrorFg;
 	}
 }
 
-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
-	@include input-base($bg, $fg);
+@mixin s-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+    @include input-base();
+    background: $bg;
+    box-shadow: inset $shdw;
+    color: $fg;
+}
+
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+    @include s-input($bg, $fg, $shdw);
+    border: none;
+    outline: none;
 }
 
 @mixin contextArrow() {
@@ -344,7 +349,7 @@
 }
 
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include input-base($bg, $fg);
+    @include nice-input($bg, $fg);
     padding: $interiorMargin;
 }
 

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/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; }
     }
 }
@@ -232,12 +234,16 @@ textarea {
 }
 
 /******************************************************** INPUTS */
+%input-base {
+    @include input-base();
+}
+
 input[type="text"],
 input[type="search"],
 input[type="number"] {
     @include nice-input();
     vertical-align: baseline;
-    padding: $inputTextP;
+    padding: $inputTextPTopBtm $inputTextPLeftRight;
     &.numeric {
         text-align: right;
     }
@@ -281,6 +287,32 @@ textarea.lg { position: relative; height: 300px; }
     }
 }
 
+*[contenteditable].s-input-inline,
+input[type="text"].s-input-inline,
+.s-input-inline input[type="text"] {
+    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
+    @extend %input-base;
+    @include trans-prop-nice((padding, box-shadow), 250ms);
+    background: none;
+    box-shadow: none;
+    border: 1px solid transparent;
+    min-width: 20px;
+    padding-left: 0;
+    padding-right: 0;
+    &:hover,
+    &:focus {
+        padding-left: $inputTextPLeftRight;
+        padding-right: $inputTextPLeftRight;
+    }
+    &:hover {
+        border-color: rgba($colorBodyFg, 0.2);
+    }
+    &:focus {
+        @include s-input();
+        border-color: transparent;
+    }
+}
+
 /******************************************************** SELECTS */
 .select {
     @include btnSubtle($bg: $colorSelectBg);
@@ -296,6 +328,7 @@ textarea.lg { position: relative; height: 300px; }
     select {
         @include appearance(none);
         box-sizing: border-box;
+        &:focus { outline: 0; }
         background: none;
         color: $colorSelectFg;
         cursor: pointer;
@@ -307,9 +340,8 @@ textarea.lg { position: relative; height: 300px; }
         }
     }
     &:before {
-        //@include contextArrow();
         pointer-events: none;
-        color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
+        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
         display: block;
         position: absolute;
         right: $interiorMargin; top: 0;
@@ -721,11 +753,15 @@ body.desktop {
     }
 
     .overlay ::-webkit-scrollbar-thumb {
-        $lr: 15%;
         background: $scrollbarThumbColorOverlay;
         &:hover { background: $scrollbarThumbColorOverlayHov; }
     }
 
+    .menu ::-webkit-scrollbar-thumb {
+        background: $scrollbarThumbColorMenu;
+        &:hover { background: $scrollbarThumbColorMenuHov; }
+    }
+
     ::-webkit-scrollbar-corner {
         background: $scrollbarTrackColorBg;
     }

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

@@ -21,92 +21,87 @@
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
 .s-menu-button {
-	// Formerly .btn-menu
-	@extend .s-button;
-	span.l-click-area {
-		// In markup, this element should not enclose anything.
-		@extend .abs;
-	}
+    // Formerly .btn-menu
+    @extend .s-button;
+    span.l-click-area {
+        // In markup, this element should not enclose anything.
+        @extend .abs;
+    }
 
-	.icon {
-		font-size: 16px; //120%;
-	}
+    .icon {
+        font-size: 16px; //120%;
+    }
 
-	.title-label {
-		margin-left: $interiorMarginSm;
-	}
+    .title-label {
+        margin-left: $interiorMarginSm;
+    }
 
     .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;
+        height: $d;
+        width: $d;
         vertical-align: middle;
         margin-left: $interiorMarginSm;
         margin-top: -2px;
     }
 
-	&:after {
-		// Adds the downward facing 'context available / invoke menu' arrow element
-		@include contextArrow();
-		color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
-	}
+    &:after {
+        // Adds the downward facing 'context available / invoke menu' arrow element
+        @include contextArrow();
+        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
+    }
 
-	&.create-button {
+    &.create-button {
         @extend .icon-plus;
-		.title-label {
-			font-size: 1rem;
-		}
-	}
+        .title-label {
+            font-size: 1rem;
+        }
+    }
 
-	.menu {
-		left: 0;
-		text-align: left;
-	}
+    .menu {
+        left: 0;
+        text-align: left;
+    }
 }
 
 /******************************************************** MENUS THEMSELVES */
 .menu-element {
-	cursor: pointer;
-	position: relative;
-}
-
-.s-menu {
-	border-radius: $basicCr;
-	@include containerSubtle($colorMenuBg, $colorMenuFg);
-	@include boxShdw($shdwMenu);
-	@include txtShdw($shdwMenuText);
-	padding: $interiorMarginSm 0;
+    cursor: pointer;
+    position: relative;
 }
 
 .menu {
-    // TODO: reduce size of icons
-	@extend .s-menu;
-	display: block;
-	position: absolute;
-	z-index: 10;
-	ul {
-		@include menuUlReset();
-		li {
-			box-sizing: border-box;
-			border-top: 1px solid pullForward($colorMenuBg, 10%);
+    border-radius: $basicCr;
+    @include containerSubtle($colorMenuBg, $colorMenuFg);
+    @include boxShdw($shdwMenu);
+    @include txtShdw($shdwMenuText);
+    padding: $interiorMarginSm 0;
+    display: block;
+    position: absolute;
+    z-index: 10;
+    ul {
+        @include menuUlReset();
+        li {
+            box-sizing: border-box;
+            border-top: 1px solid pullForward($colorMenuBg, 10%);
             color: $colorMenuFg;
-			//color: pullForward($colorMenuBg, 60%);
-			line-height: $menuLineH;
-			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-			position: relative;
-			white-space: nowrap;
-			&:first-child {
-				border: none;
-			}
-			&:hover {
-				background: $colorMenuHovBg;
-				color: $colorMenuHovFg;
+            line-height: $menuLineH;
+            padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+            position: relative;
+            white-space: nowrap;
+            &:first-child {
+                border: none;
+            }
+            &:hover {
+                background: $colorMenuHovBg;
+                color: $colorMenuHovFg;
                 &:before {
                     color: $colorMenuHovIc;
                 }
-			}
+            }
             &:before {
                 @extend .ui-symbol;
                 @extend .type-icon;
@@ -114,8 +109,8 @@
                 display: inline-block;
                 left: $interiorMargin * 2;
             }
-		}
-	}
+        }
+    }
 }
 
 .menu,
@@ -123,94 +118,97 @@
 .context-menu,
 .super-menu,
 .s-menu-button .menu {
-	pointer-events: auto;
-	ul li {
-		a.menu-item-a {
+    pointer-events: auto;
+    ul li {
+        a.menu-item-a {
             color: $colorMenuFg;
             display: block;
-		}
+        }
         &:before,
         a.menu-item-a:before {
             color: $colorMenuIc;
             left: $interiorMargin;
         }
-	}
+    }
 }
 
 .checkbox-menu {
-	// Used in search dropdown in tree
-	@extend .context-menu;
-	ul li {
-		padding-left: 50px;
-		.checkbox {
-			$d: 0.7rem;
-			position: absolute;
-			left: $interiorMargin;
-			top: ($menuLineH - $d) / 1.5;
-			em {
-				height: $d;
-				width: $d;
-				&:before {
-					font-size: 7px !important;
-					height: $d;
-					width: $d;
-					line-height: $d;
-				}
-			}
-		}
-		&:before {
+    // Used in search dropdown in tree
+    @extend .context-menu;
+    ul li {
+        padding-left: 50px;
+        .checkbox {
+            $d: 0.7rem;
+            position: absolute;
+            left: $interiorMargin;
+            top: ($menuLineH - $d) / 1.5;
+            em {
+                height: $d;
+                width: $d;
+                &:before {
+                    font-size: 7px !important;
+                    height: $d;
+                    width: $d;
+                    line-height: $d;
+                }
+            }
+        }
+        &:before {
             // Type icon
-			left: 25px;
-		}
-	}
+            left: 25px;
+        }
+    }
+}
+
+.super-menu,
+.super-menu > mct-representation,
+.super-menu > .contents {
+    box-sizing: border-box;
+    display: block;
+    position: relative;
 }
 
 .super-menu {
-	$w: 500px;
-	$h: $w - 20;
-	$plw: 50%;
-	$prw: 50%;
-	display: block;
-	width: $w;
-	height: $h;
-	.contents {
-		@include absPosDefault($interiorMargin);
-	}
-	.pane {
-		box-sizing: border-box;
-		&.menu-items {
-			border-right: 1px solid pullForward($colorMenuBg, 10%);
-			left: 0;
-			padding-right: $interiorMargin;
-			right: auto;
-			width: $plw;
-			overflow-x: hidden;
-			overflow-y: auto;
-			ul {
-				li {
-					border-radius: $controlCr;
-					padding-left: 30px;
-					border-top: none;
-				}
-			}
-		}
-		&.menu-item-description {
-			left: auto;
-			right: 0;
-			padding: $interiorMargin * 5;
-			width: $prw;
+    $plw: 50%;
+    $prw: 100% - $plw;
+    position: absolute;
+    .w-menu {
+        align-items: stretch;
+        display: flex;
+        flex-direction: row;
+        margin: $interiorMarginLg;
+    }
+    .col {
+        box-sizing: border-box;
+        flex: 1 1 auto;
+        overflow-x: hidden;
+        &.menu-items {
+            border-right: 1px solid pullForward($colorMenuBg, 10%);
+            overflow-y: auto;
+            padding-right: $interiorMargin;
+            width: $plw;
+            ul {
+                li {
+                    border-radius: $controlCr;
+                    padding-left: 30px;
+                    border-top: none;
+                }
+            }
+        }
+        &.menu-item-description {
+            $p: $interiorMargin * 3;
+            overflow-y: hidden;
+            padding: $p $p 0 $p;
+            width: $prw;
+
             .desc-area {
                 &.icon {
                     color: $colorCreateMenuLgIcon;
-                    font-size: 8em;
-                    margin-bottom: $interiorMargin * 3;
                     position: relative;
                     text-align: center;
                 }
                 &.title {
                     color: $colorCreateMenuText;
-                    font-size: 1.2em;
-                    margin-bottom: $interiorMargin * 2;
                 }
                 &.description {
                     color: pushBack($colorCreateMenuText, 20%);
@@ -218,67 +216,104 @@
                     line-height: 1.5em;
                 }
             }
-		}
-	}
+        }
+    }
+
+    .w-title-desc {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden; // Height set in specific menu instances
+    }
+
+    // Specific menu instances
+    &.l-create-menu {
+        width: 500px;
+        .col {
+            max-height: 70vh;
+        }
+        .w-title-desc {
+            height: 190px;
+        }
+        .desc-area {
+            &.icon {
+                font-size: 8em;
+                height: 135px;
+                margin-bottom: $interiorMargin * 3;
+            }
+            &.title {
+                font-size: 1.2em;
+                margin-bottom: $interiorMargin * 2;
+            }
+        }
+    }
 
     &.mini {
         width: 400px;
-        height: 300px;
-        .pane {
+        .col {
+            max-height: 50vh;
             &.menu-items {
                 font-size: 0.8em;
             }
             &.menu-item-description {
-                padding: $interiorMargin * 3;
-                .desc-area {
-                    &.icon {
-                        font-size: 4em;
-                    }
-                    &.title {
-                        font-size: 1em;
-                    }
-                }
+                $p: $interiorMargin * 2;
+                padding: $p $p 0 $p;
+            }
+        }
+        .w-title-desc {
+            height: 180px;
+        }
+        .desc-area {
+            &.icon {
+                font-size: 4em;
+                height: 70px;
+                margin-bottom: $interiorMargin * 3;
+            }
+            &.title {
+                font-size: 1em;
+                margin-bottom: $interiorMargin * 2;
             }
         }
     }
 }
+
 .context-menu {
-	font-size: 0.80rem;
+    font-size: 0.80rem;
 }
 
 .context-menu-holder,
 .menu-holder {
-	position: absolute;
-	z-index: 120;
-	.context-menu-wrapper {
-		position: absolute;
-		height: 100%;
-		width: 100%;
-	}
-	&.go-left .context-menu,
-	&.go-left .menu {
-		right: 0;
-	}
-	&.go-up .context-menu,
-	&.go-up .menu {
-		bottom: 0;
-	}
+    position: absolute;
+    z-index: 120;
+    .context-menu-wrapper {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+    &.go-left .context-menu,
+    &.go-left .menu {
+        right: 0;
+    }
+    &.go-up .context-menu,
+    &.go-up .menu {
+        bottom: 0;
+    }
 }
 
 .context-menu-holder {
-	pointer-events: none;
-	height: 200px;
-	width: 170px;
+    pointer-events: none;
+    height: 200px;
+    width: 170px;
 }
 
 .btn-bar.right .menu,
 .menus-to-left .menu {
     z-index: 79;
-	left: auto;
-	right: 0;
-	width: auto;
+    left: auto;
+    right: 0;
+    width: auto;
 }
 
 .menus-up .menu {
-    bottom: $btnStdH; top: auto;
+    bottom: $btnStdH;
+    top: auto;
 }

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

@@ -39,7 +39,7 @@
 // Status coloring
 .ok, .info {
     .status-indicator {
-        color: $colorStatusInfo;
+        color: $colorInfo;
     }
 }
 
@@ -224,15 +224,15 @@
 	}
 	&.ok,
     &.info {
-		@include statusBannerColors($colorStatusInfo);
+		@include statusBannerColors($colorInfo);
 	}
 	&.caution,
     &.warning,
     &.alert {
-		@include statusBannerColors($colorStatusAlert);
+		@include statusBannerColors($colorWarningLo);
 	}
     &.error {
-        @include statusBannerColors($colorStatusError);
+        @include statusBannerColors($colorWarningHi);
     }
 }
 
@@ -248,15 +248,15 @@
 
     .message-severity-info .type-icon.message-type {
         @extend .icon-info;
-        color: $colorStatusInfo;
+        color: $colorInfo;
     }
     .message-severity-alert .type-icon.message-type {
         @extend .icon-bell;
-        color: $colorStatusAlert;
+        color: $colorWarningLo;
     }
     .message-severity-error .type-icon.message-type {
         @extend .icon-alert-rect;
-        color: $colorStatusError;
+        color: $colorWarningHi;
     }
 }
 /* Paths:

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

@@ -129,9 +129,6 @@
 }
 
 .s-filter {
-    input[type="search"] {
-        @include input-base();
-    }
     .clear-icon,
     .menu-icon,
     &:before {

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

@@ -156,6 +156,8 @@
             left: 0;
             right: 0;
             overflow: auto;
+            padding-right: $interiorMargin;
+            padding-bottom: $interiorMargin;
             .field.l-input-med {
                 input[type='text'] {
                     width: 100%;

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

@@ -47,7 +47,7 @@
     &.t-object-type-hyperlink {
         // 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; }
     }
 
@@ -120,9 +120,17 @@
         }
     }
 
-    /********************************************************** OBJECT TYPES */
+    &.t-frame-outer .s-input-inline {
+        // Prevent inline inputs from being edited when nested in a Layout
+        pointer-events: none !important;
+    }
+
+        /********************************************************** OBJECT TYPES */
     .t-object-type-hyperlink {
-        .s-hyperlink.s-button {
+        .object-holder {
+            overflow: hidden;
+        }
+        .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 {
@@ -142,7 +150,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 +158,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/res/templates/controls/input-filter.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- look at action-button for example -->
-<span class="t-filter l-filter s-filter"
+<span class="t-filter l-filter"
       ng-controller="GetterSetterController">
 	<input type="search"
            class="t-filter-input"

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

@@ -108,8 +108,11 @@ define(
 
                 getMetadata();
             });
-        }
 
+            var mutation = $scope.ngModel.selectedObject.getCapability('mutation');
+            var unlisten = mutation.listen(getMetadata);
+            $scope.$on('$destroy', unlisten);
+        }
         return ObjectInspectorController;
     }
 );

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/controllers/ObjectInspectorControllerSpec.js

@@ -39,10 +39,18 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    ["$watch"]
+                    ["$watch", "$on"]
                 );
                 mockScope.ngModel = {};
-                mockScope.ngModel.selectedObject = 'mock selected object';
+                mockScope.ngModel.selectedObject = {
+                    getCapability: function () {
+                        return {
+                            listen: function () {
+                                return true;
+                            }
+                        };
+                    }
+                };
 
                 mockObjectService = jasmine.createSpyObj(
                     "objectService",

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;
@@ -195,13 +201,15 @@ $shdwItemTreeIcon: 0.6;
 $colorThumbHoverBg: $colorItemTreeHoverBg;
 
 // Scrollbar
-$scrollbarTrackSize: 10px;
-$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
-$scrollbarTrackColorBg: rgba(#000, 0.4);
+$scrollbarTrackSize: 7px;
+$scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px;
+$scrollbarTrackColorBg: transparent; //rgba(#000, 0.4);
 $scrollbarThumbColor: pullForward($colorBodyBg, 10%);
 $scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
 $scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
 $scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
+$scrollbarThumbColorMenu: pullForward($colorMenuBg, 20%);
+$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 // All splitterD* values MUST both be either odd or even numbers

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;
@@ -195,13 +201,15 @@ $shdwItemTreeIcon: none;
 $colorThumbHoverBg: $colorItemTreeHoverBg;
 
 // Scrollbar
-$scrollbarTrackSize: 10px;
+$scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
 $scrollbarTrackColorBg: rgba(#000, 0.2);
 $scrollbarThumbColor: darken($colorBodyBg, 50%);
 $scrollbarThumbColorHov: $colorKey;
 $scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
 $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
+$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
+$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 // All splitterD* values MUST both be either odd or even numbers

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/core/bundle.js

@@ -94,31 +94,6 @@ define([
             }
         },
         "extensions": {
-            "versions": [
-                {
-                    "name": "Version",
-                    "value": "@@version",
-                    "priority": 999
-                },
-                {
-                    "name": "Built",
-                    "value": "@@timestamp",
-                    "description": "The date on which this version of the client was built.",
-                    "priority": 990
-                },
-                {
-                    "name": "Revision",
-                    "value": "@@revision",
-                    "description": "A unique revision identifier for the client sources.",
-                    "priority": 995
-                },
-                {
-                    "name": "Branch",
-                    "value": "@@branch",
-                    "description": "The name of the branch that was used during the build.",
-                    "priority": 994
-                }
-            ],
             "components": [
                 {
                     "provides": "objectService",

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/conductor/core/res/sass/_constants.scss

@@ -1,7 +1,7 @@
 $ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization, Controls elements
 $ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
 $timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
-$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
+$timeCondInputDeltaDefW: 65px; // Default width for delta value inputs, typically 00:00:00
 $timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
 $timeCondTOIValOffset: 0px;
 $ticksBlockerFadeW: 50px;

platform/features/conductor/core/res/sass/_time-conductor-base.scss

@@ -162,9 +162,6 @@
             .l-time-conductor-inputs {
                 pointer-events: auto;
             }
-            input[type="text"] {
-                @include trans-prop-nice(padding, 250ms);
-            }
             .time-range-input input[type="text"] {
                 width: $timeCondInputTimeSysDefW;
             }
@@ -290,18 +287,6 @@
 
         .l-time-conductor-inputs-holder {
             .l-time-range-input-w {
-                input[type="text"]:not(.error) {
-                    background: transparent;
-                    box-shadow: none;
-                    border-radius: 0;
-                    padding-left: 0;
-                    padding-right: 0;
-                    &:hover,
-                    &:focus {
-                        @include nice-input();
-                        padding: $inputTextP;
-                    }
-                }
                 .icon-calendar {
                     display: none;
                 }
@@ -309,8 +294,11 @@
                     display: none;
                 }
                 &.end-date {
+                    // Displays the current time
                     pointer-events: none;
                     input[type="text"] {
+                        background: none;
+                        box-shadow: none;
                         color: pullForward($colorTimeCondKeyBg, 5%);
                         margin-right: $interiorMargin;
                         tab-index: -1;

platform/features/conductor/core/res/templates/mode-selector/mode-menu.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="contents">
-    <div class="pane left menu-items">
+<div class="w-menu">
+    <div class="col menu-items">
         <ul>
             <li ng-repeat="metadata in ngModel.options"
                 ng-click="ngModel.select(metadata)">
@@ -32,13 +32,15 @@
             </li>
         </ul>
     </div>
-    <div class="pane right menu-item-description">
+    <div class="col menu-item-description">
         <div class="desc-area ui-symbol icon type-icon {{ngModel.activeMetadata.cssClass}}"></div>
-        <div class="desc-area title">
-            {{ngModel.activeMetadata.name}}
-        </div>
-        <div class="desc-area description">
-            {{ngModel.activeMetadata.description}}
+        <div class="w-title-desc">
+            <div class="desc-area title">
+                {{ngModel.activeMetadata.name}}
+            </div>
+            <div class="desc-area description">
+                {{ngModel.activeMetadata.description}}
+            </div>
         </div>
     </div>
 </div>

platform/features/conductor/core/res/templates/mode-selector/mode-selector.html

@@ -24,7 +24,7 @@
          ng-click="modeController.toggle()">
 		<span class="title-label">{{ngModel.selected.name}}</span>
     </div>
-    <div class="menu super-menu mini mode-selector-menu"
+    <div class="menu super-menu mini l-mode-selector-menu"
          ng-show="modeController.isActive()">
         <mct-include key="'mode-menu'"
                      ng-model="ngModel">

platform/features/conductor/core/res/templates/time-conductor.html

@@ -38,7 +38,7 @@
                                          ng-model="boundsModel"
                                          ng-blur="tcController.setOffsetsFromView(boundsModel)"
                                          field="'startOffset'"
-                                         class="hrs-min-input">
+                                         class="s-input-inline hrs-min-input">
                             </mct-control>
                         </span>
                     </span>
@@ -71,7 +71,7 @@
                                          ng-model="boundsModel"
                                          ng-blur="tcController.setOffsetsFromView(boundsModel)"
                                          field="'endOffset'"
-                                         class="hrs-min-input">
+                                         class="s-input-inline hrs-min-input">
                             </mct-control>
                         </span>
                     </span>

platform/features/conductor/core/src/ui/TimeConductorController.js

@@ -201,7 +201,7 @@ define(
             var options = [{
                 key: 'fixed',
                 name: 'Fixed Timespan Mode',
-                description: 'Query and explore data that falls between two fixed datetimes',
+                description: 'Query and explore data that falls between two fixed datetimes.',
                 cssClass: 'icon-calendar'
             }];
             var clocks = {};

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

@@ -23,7 +23,7 @@
     <div class="abs object-browse-bar l-flex-row">
         <div class="left flex-elem l-flex-row grows">
             <mct-representation
-                    key="'object-header'"
+                    key="'object-header-frame'"
                     mct-object="domainObject"
                     class="l-flex-row flex-elem object-header 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/features/plot/bundle.js

@@ -118,7 +118,10 @@ define([
             "policies": [
                 {
                     "category": "view",
-                    "implementation": PlotViewPolicy
+                    "implementation": PlotViewPolicy,
+                    "depends": [
+                        "openmct"
+                    ]
                 }
             ],
             "representations": [

platform/features/plot/src/policies/PlotViewPolicy.js

@@ -30,30 +30,32 @@ define(
          * @constructor
          * @memberof platform/features/plot
          */
-        function PlotViewPolicy() {
+        function PlotViewPolicy(openmct) {
+            this.openmct = openmct;
         }
 
-        function hasNumericTelemetry(domainObject) {
-            var telemetry = domainObject &&
-                    domainObject.getCapability('telemetry'),
-                metadata = telemetry ? telemetry.getMetadata() : {},
-                ranges = metadata.ranges || [];
+        PlotViewPolicy.prototype.hasNumericTelemetry = function (domainObject) {
+            var adaptedObject = domainObject.useCapability('adapter');
 
-            // Generally, we want to allow Plot for telemetry-providing
-            // objects (most telemetry is plottable.) We only want to
-            // suppress this for telemetry which only has explicitly
-            // non-numeric values.
-            return ranges.length === 0 || ranges.some(function (range) {
-                    // Assume format is numeric if it is undefined
-                    // (numeric telemetry is the common case)
-                    return range.format === undefined ||
-                        range.format === 'number';
-                });
-        }
+            if (!adaptedObject.telemetry) {
+                return domainObject.hasCapability('delegation') &&
+                    domainObject.getCapability('delegation')
+                            .doesDelegateCapability('telemetry');
+            }
+
+            var metadata = this.openmct.telemetry.getMetadata(adaptedObject);
+            var rangeValues = metadata.valuesForHints(['range']);
+            if (rangeValues.length === 0) {
+                return false;
+            }
+            return !rangeValues.every(function (value) {
+                return value.format === 'string';
+            });
+        };
 
         PlotViewPolicy.prototype.allow = function (view, domainObject) {
             if (view.key === 'plot') {
-                return hasNumericTelemetry(domainObject);
+                return this.hasNumericTelemetry(domainObject);
             }
 
             return true;

platform/features/plot/test/policies/PlotViewPolicySpec.js

@@ -27,51 +27,97 @@ define(
         describe("Plot view policy", function () {
             var testView,
                 mockDomainObject,
-                mockTelemetry,
-                testMetadata,
+                testAdaptedObject,
+                openmct,
+                telemetryMetadata,
                 policy;
 
             beforeEach(function () {
                 testView = { key: "plot" };
-                testMetadata = {};
+                testAdaptedObject = { telemetry: {} };
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
-                    ['getId', 'getModel', 'getCapability']
+                    ['useCapability', 'hasCapability', 'getCapability']
                 );
-                mockTelemetry = jasmine.createSpyObj(
-                    'telemetry',
-                    ['getMetadata']
-                );
-                mockDomainObject.getCapability.andCallFake(function (c) {
-                    return c === 'telemetry' ? mockTelemetry : undefined;
+                mockDomainObject.useCapability.andReturn(testAdaptedObject);
+                openmct = {
+                    telemetry: jasmine.createSpyObj('telemetryAPI', [
+                        'getMetadata'
+                    ])
+                };
+                telemetryMetadata = jasmine.createSpyObj('telemetryMetadata', [
+                    'valuesForHints'
+                ]);
+                telemetryMetadata.valuesForHints.andReturn([]);
+                openmct.telemetry.getMetadata.andReturn(telemetryMetadata);
+                policy = new PlotViewPolicy(openmct);
+            });
+
+            it('fetches metadata from telem api', function () {
+                policy.allow(testView, mockDomainObject);
+                expect(mockDomainObject.useCapability)
+                    .toHaveBeenCalledWith('adapter');
+                expect(openmct.telemetry.getMetadata)
+                    .toHaveBeenCalledWith(testAdaptedObject);
+                expect(telemetryMetadata.valuesForHints)
+                    .toHaveBeenCalledWith(['range']);
+            });
+
+            it('returns false if no ranges exist', function () {
+                telemetryMetadata.valuesForHints.andReturn([]);
+                expect(policy.allow(testView, mockDomainObject)).toBe(false);
+            });
+
+            it('returns true if any ranges exist', function () {
+                telemetryMetadata.valuesForHints.andReturn([{}]);
+                expect(policy.allow(testView, mockDomainObject)).toBe(true);
+            });
+
+            it('returns false if all ranges are strings', function () {
+                telemetryMetadata.valuesForHints.andReturn([{
+                    format: 'string'
+                }, {
+                    format: 'string'
+                }]);
+                expect(policy.allow(testView, mockDomainObject)).toBe(false);
+            });
+
+            it('returns true if only some ranges are strings', function () {
+                telemetryMetadata.valuesForHints.andReturn([{
+                    format: 'string'
+                }, {}]);
+                expect(policy.allow(testView, mockDomainObject)).toBe(true);
+            });
+
+            it('returns true for telemetry delegators', function () {
+                delete testAdaptedObject.telemetry;
+                mockDomainObject.hasCapability.andCallFake(function (c) {
+                    return c === 'delegation';
                 });
-                mockTelemetry.getMetadata.andReturn(testMetadata);
-
-                policy = new PlotViewPolicy();
+                mockDomainObject.getCapability.andReturn(
+                    jasmine.createSpyObj('delegation', [
+                        'doesDelegateCapability'
+                    ])
+                );
+                mockDomainObject.getCapability('delegation')
+                    .doesDelegateCapability.andCallFake(function (c) {
+                        return c === 'telemetry';
+                    });
+                expect(policy.allow(testView, mockDomainObject)).toBe(true);
+                expect(openmct.telemetry.getMetadata).not.toHaveBeenCalled();
             });
 
-            it("allows the imagery view for domain objects with numeric telemetry", function () {
-                testMetadata.ranges = [{ key: "foo", format: "number" }];
-                expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
-            });
-
-            it("allows the imagery view for domain objects with unspecified telemetry", function () {
-                testMetadata.ranges = [{ key: "foo"  }];
-                expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
-            });
-
-            it("disallows the imagery view for domain objects without image telemetry", function () {
-                testMetadata.ranges = [{ key: "foo", format: "somethingElse" }];
-                expect(policy.allow(testView, mockDomainObject)).toBeFalsy();
+            it('returns true for non-telemetry non-delegators', function () {
+                delete testAdaptedObject.telemetry;
+                mockDomainObject.hasCapability.andReturn(false);
+                expect(policy.allow(testView, mockDomainObject)).toBe(false);
             });
 
             it("allows other views", function () {
                 testView.key = "somethingElse";
-                testMetadata.ranges = [{ key: "foo", format: "somethingElse" }];
-                expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
+                expect(policy.allow(testView, mockDomainObject)).toBe(true);
             });
 
         });
     }
 );
-

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/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-export",
+                            "depends": [
+                                "exportService",
+                                "policyService",
+                                "identifierService"
+                            ]
+                        },
+                        {
+                            "key": "import.JSON",
+                            "name": "Import from JSON",
+                            "implementation": ImportAsJSONAction,
+                            "category": "contextual",
+                            "cssClass": "icon-import",
+                            "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

@@ -25,10 +25,12 @@
  */
 define(
     [
-        '../../../src/api/objects/object-utils'
+        '../../../src/api/objects/object-utils',
+        'lodash'
     ],
     function (
-        objectUtils
+        objectUtils,
+        _
     ) {
 
         var ZERO = function () {
@@ -138,6 +140,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,17 +180,28 @@ define(
                 }
             }
 
+            if (!fullRequest.ranges) {
+                fullRequest.ranges = metadata.valuesForHints(['range']);
+            }
+
+            if (!fullRequest.domains) {
+                fullRequest.domains = metadata.valuesForHints(['domain']);
+            }
+
             return fullRequest;
         };
 
+        function asSeries(telemetry, defaultDomain, defaultRange, sourceMap) {
+            function getValue(index, key) {
+                return telemetry[index][sourceMap[key].source];
+            }
 
-        function asSeries(telemetry, defaultDomain, defaultRange) {
             return {
                 getRangeValue: function (index, range) {
-                    return telemetry[index][range || defaultRange];
+                    return getValue(index, range || defaultRange);
                 },
                 getDomainValue: function (index, domain) {
-                    return telemetry[index][domain || defaultDomain];
+                    return getValue(index, domain || defaultDomain);
                 },
                 getPointCount: function () {
                     return telemetry.length;
@@ -210,8 +228,11 @@ define(
             var telemetryAPI = this.openmct.telemetry;
 
             var metadata = telemetryAPI.getMetadata(domainObject);
-            var defaultDomain = metadata.valuesForHints(['domain'])[0].source;
-            var defaultRange = metadata.valuesForHints(['range'])[0].source;
+            var defaultDomain = metadata.valuesForHints(['domain'])[0].key;
+            var defaultRange = metadata.valuesForHints(['range'])[0];
+            defaultRange = defaultRange ? defaultRange.key : undefined;
+
+            var sourceMap = _.indexBy(metadata.values(), 'key');
 
             var isLegacyProvider = telemetryAPI.findRequestProvider(domainObject) ===
                 telemetryAPI.legacyProvider;
@@ -236,7 +257,7 @@ define(
                     requestTelemetryFromService().then(getRelevantResponse);
             } else {
                 return telemetryAPI.request(domainObject, fullRequest).then(function (telemetry) {
-                    return asSeries(telemetry, defaultDomain, defaultRange);
+                    return asSeries(telemetry, defaultDomain, defaultRange, sourceMap);
                 });
             }
         };
@@ -272,14 +293,17 @@ define(
             var telemetryAPI = this.openmct.telemetry;
 
             var metadata = telemetryAPI.getMetadata(domainObject);
-            var defaultDomain = metadata.valuesForHints(['domain'])[0].source;
-            var defaultRange = metadata.valuesForHints(['range'])[0].source;
+            var defaultDomain = metadata.valuesForHints(['domain'])[0].key;
+            var defaultRange = metadata.valuesForHints(['range'])[0];
+            defaultRange = defaultRange ? defaultRange.key : undefined;
+
+            var sourceMap = _.indexBy(metadata.values(), 'key');
 
             var isLegacyProvider = telemetryAPI.findSubscriptionProvider(domainObject) ===
                 telemetryAPI.legacyProvider;
 
             function update(telemetry) {
-                callback(asSeries([telemetry], defaultDomain, defaultRange));
+                callback(asSeries([telemetry], defaultDomain, defaultRange, sourceMap));
             }
 
             // Unpack the relevant telemetry series

platform/telemetry/test/TelemetryCapabilitySpec.js

@@ -34,6 +34,7 @@ define(
                 mockUnsubscribe,
                 telemetry,
                 mockTelemetryAPI,
+                mockMetadata,
                 mockAPI;
 
             function mockPromise(value) {
@@ -90,12 +91,23 @@ define(
                     "findRequestProvider",
                     "findSubscriptionProvider"
                 ]);
-                mockTelemetryAPI.getMetadata.andReturn({
-                    valuesForHints: function () {
-                        return [{}];
-                    }
+
+                mockMetadata = jasmine.createSpyObj('telemetryMetadata', [
+                    'valuesForHints',
+                    'values'
+                ]);
+
+                mockMetadata.valuesForHints.andCallFake(function (hints) {
+                    var hint = hints[0];
+                    var metadatum = {
+                        key: 'default' + hint
+                    };
+                    metadatum[hint] = "foo";
+                    return [metadatum];
                 });
 
+                mockTelemetryAPI.getMetadata.andReturn(mockMetadata);
+
                 mockAPI = {
                     telemetry: mockTelemetryAPI,
                     time: {
@@ -147,7 +159,9 @@ define(
                         source: "testSource", // from model
                         key: "testKey", // from model
                         start: 42, // from argument
-                        domain: 'mockTimeSystem'
+                        domain: 'mockTimeSystem',
+                        domains: [{ domain: "foo", key: 'defaultdomain' }],
+                        ranges: [{ range: "foo", key: 'defaultrange' }]
                     }]);
             });
 
@@ -167,7 +181,9 @@ define(
                     key: "testKey",
                     start: 0,
                     end: 1,
-                    domain: 'mockTimeSystem'
+                    domain: 'mockTimeSystem',
+                    domains: [{ domain: "foo", key: 'defaultdomain' }],
+                    ranges: [{ range: "foo", key: 'defaultrange' }]
                 });
             });
 
@@ -184,7 +200,9 @@ define(
                     key: "testId", // from domain object
                     start: 0,
                     end: 1,
-                    domain: 'mockTimeSystem'
+                    domain: 'mockTimeSystem',
+                    domains: [{ domain: "foo", key: 'defaultdomain' }],
+                    ranges: [{ range: "foo", key: 'defaultrange' }]
                 });
             });
 
@@ -232,6 +250,21 @@ define(
                 var mockProvider = {};
                 var dunzo = false;
 
+                mockMetadata.values.andReturn([
+                    {
+                        key: 'defaultrange',
+                        source: 'prop1'
+                    },
+                    {
+                        key: 'defaultdomain',
+                        source: 'prop2'
+                    },
+                    {
+                        key: 'prop3',
+                        source: 'prop3'
+                    }
+                ]);
+
                 mockTelemetryAPI.findRequestProvider.andReturn(mockProvider);
                 mockTelemetryAPI.request.andReturn(Promise.resolve(mockTelemetry));
 
@@ -249,6 +282,18 @@ define(
                     expect(returnedTelemetry.getDomainValue).toBeDefined();
                     expect(returnedTelemetry.getRangeValue).toBeDefined();
                     expect(returnedTelemetry.getPointCount()).toBe(2);
+                    // Default domain + remap should work.
+                    expect(returnedTelemetry.getDomainValue(0)).toBe('val2');
+                    expect(returnedTelemetry.getDomainValue(1)).toBe('val5');
+                    // explicit domain should work
+                    expect(returnedTelemetry.getDomainValue(0, 'prop3')).toBe('val3');
+                    expect(returnedTelemetry.getDomainValue(1, 'prop3')).toBe('val6');
+                    // default range + remap should work
+                    expect(returnedTelemetry.getRangeValue(0)).toBe('val1');
+                    expect(returnedTelemetry.getRangeValue(1)).toBe('val4');
+                    // explicit range should work
+                    expect(returnedTelemetry.getRangeValue(0, 'prop3')).toBe('val3');
+                    expect(returnedTelemetry.getRangeValue(1, 'prop3')).toBe('val6');
                 });
 
             });
@@ -266,7 +311,9 @@ define(
                         key: "testKey",
                         start: 0,
                         end: 1,
-                        domain: 'mockTimeSystem'
+                        domain: 'mockTimeSystem',
+                        domains: [{ domain: "foo", key: "defaultdomain" }],
+                        ranges: [{ range: "foo", key: "defaultrange" }]
                     }]
                 );
 

src/about.frag

@@ -1,7 +0,0 @@
-/**
- * Open MCT https://nasa.github.io/openmct/
- * Version: ${version}
- * Built: ${timestamp}
- * Revision: ${revision}
- * Branch: ${branch}
- */

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/plugins/buildInfo/plugin.js

@@ -0,0 +1,45 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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 (
+) {
+    return function (buildInfo) {
+        return function (openmct) {
+            var aliases = { timestamp: "Built" };
+            var descriptions = {
+                timestamp: "The date on which this version of Open MCT was built.",
+                revision: "A unique revision identifier for the client sources.",
+                branch: "The name of the branch that was used during the build."
+            };
+
+            Object.keys(buildInfo).forEach(function (key) {
+                openmct.legacyExtension("versions", {
+                    key: key,
+                    name: aliases[key] || (key.charAt(0).toUpperCase() + key.substring(1)),
+                    value: buildInfo[key],
+                    description: descriptions[key]
+                });
+            });
+        };
+    };
+});