[Frontend] Set default widget colors and icon

Fixes #1668

API.md

@@ -879,21 +879,6 @@ openmct.install(openmct.plugins.CouchDB('http://localhost:9200'))
 * `openmct.plugins.Espresso` and `openmct.plugins.Snow` are two different
   themes (dark and light) available for Open MCT. Note that at least one
   of these themes must be installed for Open MCT to appear correctly.
-* `openmct.plugins.URLIndicatorPlugin` adds an indicator which shows the
-availability of a URL with the following options: 
-  - `url` : URL to indicate the status of
-  - `cssClass`: Icon to show in the status bar, defaults to `icon-database`, [list of all icons](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home?view=items)
-  - `interval`: Interval between checking the connection, defaults to `10000`
-  - `label` Name showing up as text in the status bar, defaults to url
-```javascript
-openmct.install(openmct.plugins.URLIndicatorPlugin({
-  url: 'http://google.com',
-  cssClass: 'check',
-  interval: 10000,
-  label: 'Google'
- })
-);
-```
 * `openmct.plugins.LocalStorage` provides persistence of user-created
   objects in browser-local storage. This is particularly useful in
   development environments.

bower.json

@@ -17,8 +17,8 @@
     "screenfull": "^3.0.0",
     "node-uuid": "^1.4.7",
     "comma-separated-values": "^3.6.4",
-    "file-saver": "^1.3.3",
-    "zepto": "^1.1.6",
+    "FileSaver.js": "^0.0.2",
+    "zepto": "1.2.0",
     "eventemitter3": "^1.2.0",
     "lodash": "3.10.1",
     "almond": "~0.3.2",

circle.yml

@@ -4,6 +4,12 @@ deployment:
     commands:
         - npm install canvas nomnoml
         - ./build-docs.sh
+        - git fetch --unshallow
+        - git push git@heroku.com:openmctweb-demo.git $CIRCLE_SHA1:refs/heads/master
+  openmct-demo:
+    branch: live_demo
+    heroku:
+      appname: openmct-demo
   openmctweb-staging-deux:
     branch: mobile
     heroku:

example/generator/GeneratorProvider.js

@@ -30,8 +30,7 @@ define([
         amplitude: 1,
         period: 10,
         offset: 0,
-        dataRateInHz: 1,
-        phase: 0
+        dataRateInHz: 1
     };
 
     function GeneratorProvider() {
@@ -51,12 +50,9 @@ define([
             'amplitude',
             'period',
             'offset',
-            'dataRateInHz',
-            'phase',
+            'dataRateInHz'
         ];
 
-        request = request || {};
-
         var workerRequest = {};
 
         props.forEach(function (prop) {
@@ -71,7 +67,7 @@ define([
             }
             workerRequest[prop] = Number(workerRequest[prop]);
         });
-        workerRequest.name = domainObject.name;
+
         return workerRequest;
     };
 
@@ -82,8 +78,8 @@ define([
         return this.workerInterface.request(workerRequest);
     };
 
-    GeneratorProvider.prototype.subscribe = function (domainObject, callback) {
-        var workerRequest = this.makeWorkerRequest(domainObject, {});
+    GeneratorProvider.prototype.subscribe = function (domainObject, callback, request) {
+        var workerRequest = this.makeWorkerRequest(domainObject, request);
         return this.workerInterface.subscribe(workerRequest, callback);
     };
 

example/generator/StateGeneratorProvider.js

@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-
-], function (
-
-) {
-
-    function StateGeneratorProvider() {
-
-    }
-
-    function pointForTimestamp(timestamp, duration, name) {
-        return {
-            name: name,
-            utc: Math.floor(timestamp / duration) * duration,
-            value: Math.floor(timestamp / duration) % 2
-        };
-    }
-
-    StateGeneratorProvider.prototype.supportsSubscribe = function (domainObject) {
-        return domainObject.type === 'example.state-generator';
-    };
-
-    StateGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
-        var duration = domainObject.telemetry.duration * 1000;
-
-        var interval = setInterval(function () {
-            var now = Date.now();
-            callback(pointForTimestamp(now, duration, domainObject.name));
-        }, duration);
-
-        return function () {
-            clearInterval(interval);
-        };
-    };
-
-
-    StateGeneratorProvider.prototype.supportsRequest = function (domainObject, options) {
-        return domainObject.type === 'example.state-generator';
-    };
-
-    StateGeneratorProvider.prototype.request = function (domainObject, options) {
-        var start = options.start;
-        var end = options.end;
-        var duration = domainObject.telemetry.duration * 1000;
-        if (options.strategy === 'latest' || options.size === 1) {
-            start = end;
-        }
-        var data = [];
-        while (start <= end && data.length < 5000) {
-            data.push(pointForTimestamp(start, duration, domainObject.name));
-            start += 5000;
-        }
-        return Promise.resolve(data);
-    };
-
-    return StateGeneratorProvider;
-
-});

example/generator/WorkerInterface.js

@@ -44,7 +44,9 @@ define([
         message = message.data;
         var callback = this.callbacks[message.id];
         if (callback) {
-            callback(message);
+            if (callback(message)) {
+                delete this.callbacks[message.id];
+            }
         }
     };
 
@@ -70,7 +72,6 @@ define([
             deferred.resolve = resolve;
             deferred.reject = reject;
         });
-        var messageId;
 
         function callback(message) {
             if (message.error) {
@@ -78,27 +79,33 @@ define([
             } else {
                 deferred.resolve(message.data);
             }
-            delete this.callbacks[messageId];
+            return true;
         }
 
-        messageId = this.dispatch('request', request, callback.bind(this));
+        this.dispatch('request', request, callback);
 
         return promise;
     };
 
     WorkerInterface.prototype.subscribe = function (request, cb) {
-        function callback(message) {
+        var isCancelled = false;
+
+        var callback = function (message) {
+            if (isCancelled) {
+                return true;
+            }
             cb(message.data);
         };
 
-        var messageId = this.dispatch('subscribe', request, callback);
+        var messageId = this.dispatch('subscribe', request, callback)
 
         return function () {
+            isCancelled = true;
             this.dispatch('unsubscribe', {
                 id: messageId
             });
-            delete this.callbacks[messageId];
         }.bind(this);
+
     };
 
 

example/generator/generatorWorker.js

@@ -62,11 +62,10 @@
                 self.postMessage({
                     id: message.id,
                     data: {
-                        name: data.name,
                         utc: nextStep,
                         yesterday: nextStep - 60*60*24*1000,
-                        sin: sin(nextStep, data.period, data.amplitude, data.offset, data.phase),
-                        cos: cos(nextStep, data.period, data.amplitude, data.offset, data.phase)
+                        sin: sin(nextStep, data.period, data.amplitude, data.offset),
+                        cos: cos(nextStep, data.period, data.amplitude, data.offset)
                     }
                 });
                 nextStep += step;
@@ -83,22 +82,21 @@
     }
 
     function onRequest(message) {
-        var request = message.data;
-        if (request.end == undefined) {
-            request.end = Date.now();
+        var data = message.data;
+        if (data.end == undefined) {
+            data.end = Date.now();
         }
-        if (request.start == undefined){
-            request.start = request.end - FIFTEEN_MINUTES;
+        if (data.start == undefined){
+            data.start = data.end - FIFTEEN_MINUTES;
         }
 
         var now = Date.now();
-        var start = request.start;
-        var end = request.end > now ? now : request.end;
-        var amplitude = request.amplitude;
-        var period = request.period;
-        var offset = request.offset;
-        var dataRateInHz = request.dataRateInHz;
-        var phase = request.phase;
+        var start = data.start;
+        var end = data.end > now ? now : data.end;
+        var amplitude = data.amplitude;
+        var period = data.period;
+        var offset = data.offset;
+        var dataRateInHz = data.dataRateInHz;
 
         var step = 1000 / dataRateInHz;
         var nextStep = start - (start % step) + step;
@@ -107,11 +105,10 @@
 
         for (; nextStep < end && data.length < 5000; nextStep += step) {
             data.push({
-                name: request.name,
                 utc: nextStep,
                 yesterday: nextStep - 60*60*24*1000,
-                sin: sin(nextStep, period, amplitude, offset, phase),
-                cos: cos(nextStep, period, amplitude, offset, phase)
+                sin: sin(nextStep, period, amplitude, offset),
+                cos: cos(nextStep, period, amplitude, offset)
             });
         }
         self.postMessage({
@@ -120,14 +117,14 @@
         });
     }
 
-    function cos(timestamp, period, amplitude, offset, phase) {
+    function cos(timestamp, period, amplitude, offset) {
         return amplitude *
-            Math.cos(phase + (timestamp / period / 1000 * Math.PI * 2)) + offset;
+            Math.cos(timestamp / period / 1000 * Math.PI * 2) + offset;
     }
 
-    function sin(timestamp, period, amplitude, offset, phase) {
+    function sin(timestamp, period, amplitude, offset) {
         return amplitude *
-            Math.sin(phase + (timestamp / period / 1000 * Math.PI * 2)) + offset;
+            Math.sin(timestamp / period / 1000 * Math.PI * 2) + offset;
     }
 
     function sendError(error, message) {

example/generator/plugin.js

@@ -23,12 +23,10 @@
 
 define([
     "./GeneratorProvider",
-    "./SinewaveLimitCapability",
-    "./StateGeneratorProvider"
+    "./SinewaveLimitCapability"
 ], function (
     GeneratorProvider,
-    SinewaveLimitCapability,
-    StateGeneratorProvider
+    SinewaveLimitCapability
 ) {
 
     var legacyExtensions = {
@@ -48,75 +46,6 @@ define([
                 openmct.legacyExtension(type, extension)
             })
         });
-
-        openmct.types.addType("example.state-generator", {
-            name: "State Generator",
-            description: "For development use.  Generates test enumerated telemetry by cycling through a given set of states",
-            cssClass: "icon-telemetry",
-            creatable: true,
-            form: [
-                {
-                    name: "State Duration (seconds)",
-                    control: "textfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "duration",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "duration"
-                    ],
-                    pattern: "^\\d*(\\.\\d*)?$"
-                }
-            ],
-            initialize: function (object) {
-                object.telemetry = {
-                    duration: 5,
-                    values: [
-                        {
-                            key: "name",
-                            name: "Name"
-                        },
-                        {
-                            key: "utc",
-                            name: "Time",
-                            format: "utc",
-                            hints: {
-                                domain: 1
-                            }
-                        },
-                        {
-                            key: "state",
-                            source: "value",
-                            name: "State",
-                            format: "enum",
-                            enumerations: [
-                                {
-                                    value: 0,
-                                    string: "OFF"
-                                },
-                                {
-                                    value: 1,
-                                    string: "ON"
-                                }
-                            ],
-                            hints: {
-                                range: 1
-                            }
-                        },
-                        {
-                            key: "value",
-                            name: "Value",
-                            hints: {
-                                range: 2
-                            }
-                        }
-                    ]
-                }
-            }
-        });
-
-        openmct.telemetry.addProvider(new StateGeneratorProvider());
-
         openmct.types.addType("generator", {
             name: "Sine Wave Generator",
             description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
@@ -170,18 +99,6 @@ define([
                         "dataRateInHz"
                     ],
                     pattern: "^\\d*(\\.\\d*)?$"
-                },
-                {
-                    name: "Phase (radians)",
-                    control: "textfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "phase",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "phase"
-                    ],
-                    pattern: "^\\d*(\\.\\d*)?$"
                 }
             ],
             initialize: function (object) {
@@ -190,12 +107,7 @@ define([
                     amplitude: 1,
                     offset: 0,
                     dataRateInHz: 1,
-                    phase: 0,
                     values: [
-                        {
-                            key: "name",
-                            name: "Name"
-                        },
                         {
                             key: "utc",
                             name: "Time",
@@ -230,7 +142,6 @@ define([
                 };
             }
         });
-
         openmct.telemetry.addProvider(new GeneratorProvider());
     };
 

example/imagery/plugin.js

@@ -48,9 +48,8 @@ define([
                 "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
             ];
 
-        function pointForTimestamp(timestamp, name) {
+        function pointForTimestamp(timestamp) {
             return {
-                name: name,
                 utc: Math.floor(timestamp / 5000) * 5000,
                 url: IMAGE_SAMPLES[Math.floor(timestamp / 5000) % IMAGE_SAMPLES.length]
             };
@@ -62,7 +61,7 @@ define([
             },
             subscribe: function (domainObject, callback) {
                 var interval = setInterval(function () {
-                    callback(pointForTimestamp(Date.now(), domainObject.name));
+                    callback(pointForTimestamp(Date.now()));
                 }, 5000);
 
                 return function (interval) {
@@ -80,8 +79,8 @@ define([
                 var start = options.start;
                 var end = options.end;
                 var data = [];
-                while (start <= end && data.length < 5000) {
-                    data.push(pointForTimestamp(start, domainObject.name));
+                while (start < end && data.length < 5000) {
+                    data.push(pointForTimestamp(start));
                     start += 5000;
                 }
                 return Promise.resolve(data);
@@ -94,7 +93,7 @@ define([
                     options.strategy === 'latest';
             },
             request: function (domainObject, options) {
-                return Promise.resolve([pointForTimestamp(Date.now(), domainObject.name)]);
+                return Promise.resolve([pointForTimestamp(Date.now())]);
             }
         };
 
@@ -110,10 +109,6 @@ define([
                 initialize: function (object) {
                     object.telemetry = {
                         values: [
-                            {
-                                name: 'Name',
-                                key: 'name'
-                            },
                             {
                                 name: 'Time',
                                 key: 'utc',

example/styleguide/res/templates/glyphs.html

@@ -127,8 +127,7 @@
 { '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': 'Notebook object', 'cssClass': 'icon-notebook', 'cssContent': 'e1131', 'htmlEntity': '&#xe1131' }
+{ 'meaning': 'Summary Widget', 'cssClass': 'icon-summary-widget', 'cssContent': 'e1130', 'htmlEntity': '&#xe1130' }
 ];
 "></div>
 

gulpfile.js

@@ -46,22 +46,9 @@ var gulp = require('gulp'),
             name: 'bower_components/almond/almond.js',
             include: paths.main.replace('.js', ''),
             wrap: {
-                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];
-                        });;
-                }()),
+                startFile: "src/start.frag",
                 endFile: "src/end.frag"
             },
-            optimize: 'uglify2',
-            uglify2: { output: { comments: /@preserve/ } },
             mainConfigFile: paths.main,
             wrapShim: true
         },
@@ -71,6 +58,14 @@ 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'
+            }
         }
     };
 
@@ -81,11 +76,16 @@ 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));
 });
 

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,BUILD_CONSTANTS*/
+/*global requirejs*/
 
 requirejs.config({
     "paths": {
@@ -33,7 +33,7 @@ requirejs.config({
         "moment": "bower_components/moment/moment",
         "moment-duration-format": "bower_components/moment-duration-format/lib/moment-duration-format",
         "moment-timezone": "bower_components/moment-timezone/builds/moment-timezone-with-data",
-        "saveAs": "bower_components/file-saver/FileSaver.min",
+        "saveAs": "bower_components/FileSaver.js/FileSaver.min",
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",
         "uuid": "bower_components/node-uuid/uuid",
@@ -66,9 +66,6 @@ requirejs.config({
         "moment-duration-format": {
             "deps": ["moment"]
         },
-        "saveAs": {
-            "exports": "saveAs"
-        },
         "screenfull": {
             "exports": "screenfull"
         },
@@ -94,17 +91,12 @@ requirejs.config({
 define([
     './platform/framework/src/Main',
     './src/defaultRegistry',
-    './src/MCT',
-    './src/plugins/buildInfo/plugin'
-], function (Main, defaultRegistry, MCT, buildInfo) {
+    './src/MCT'
+], function (Main, defaultRegistry, MCT) {
     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

@@ -22,10 +22,12 @@
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
     "gulp": "^3.9.1",
+    "gulp-header": "^1.8.8",
     "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,7 +26,6 @@ define([
     "./src/InspectorPaneController",
     "./src/BrowseObjectController",
     "./src/MenuArrowController",
-    "./src/ObjectHeaderController",
     "./src/navigation/NavigationService",
     "./src/navigation/NavigateAction",
     "./src/navigation/OrphanNavigationHandler",
@@ -37,7 +36,6 @@ 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",
@@ -50,7 +48,6 @@ define([
     InspectorPaneController,
     BrowseObjectController,
     MenuArrowController,
-    ObjectHeaderController,
     NavigationService,
     NavigateAction,
     OrphanNavigationHandler,
@@ -61,7 +58,6 @@ define([
     browseObjectTemplate,
     gridItemTemplate,
     objectHeaderTemplate,
-    objectHeaderFrameTemplate,
     menuArrowTemplate,
     backArrowTemplate,
     itemsTemplate,
@@ -144,13 +140,6 @@ define([
                         "$location",
                         "$attrs"
                     ]
-                },
-                {
-                    "key": "ObjectHeaderController",
-                    "implementation": ObjectHeaderController,
-                    "depends": [
-                        "$scope"
-                    ]
                 }
             ],
             "representations": [
@@ -184,13 +173,6 @@ define([
                         "type"
                     ]
                 },
-                {
-                    "key": "object-header-frame",
-                    "template": objectHeaderFrameTemplate,
-                    "uses": [
-                        "type"
-                    ]
-                },
                 {
                     "key": "menu-arrow",
                     "template": menuArrowTemplate,

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

@@ -57,12 +57,7 @@
             </div>
             <mct-representation key="representation.selected.key"
                                 mct-object="representation.selected.key && domainObject"
-                                class="abs flex-elem grows object-holder-main scroll"
-                                mct-selectable="{
-                                    item: domainObject.useCapability('adapter'),
-                                    oldItem: domainObject
-                                }"
-                                mct-init-select>
+                                class="abs flex-elem grows object-holder-main scroll">
             </mct-representation>
         </div>
     </div>

platform/commonUI/browse/res/templates/browse/inspector-region.html

@@ -19,21 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-controller="InspectorController as controller">
+<div ng-controller="InspectorController">
+    <div ng-repeat="region in regions">
         <mct-representation
-                key="'object-properties'"
-                mct-object="controller.selectedItem()"
+                key="region.content.key"
+                mct-object="domainObject"
                 ng-model="ngModel">
         </mct-representation>
-
-        <div ng-if="!controller.hasProviderView()">
-            <mct-representation
-                    key="inspectorKey"
-                    mct-object="controller.selectedItem()"
-                    ng-model="ngModel">
-            </mct-representation>
-        </div>
-
-        <div class='inspector-provider-view'>
-        </div>
+    </div>
 </div>

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

@@ -1,31 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2017, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<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,13 +20,9 @@
  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 class="l-elem-wrapper l-flex-row flex-elem grows">
     <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</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='title-label flex-elem holder flex-can-shrink'>{{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/res/templates/browse/object-properties.html

@@ -38,6 +38,8 @@
                   ng-class="{ last:($index + 1) === contextualParents.length }">
                 <mct-representation key="'label'"
                                     mct-object="parent"
+                                    ng-model="ngModel"
+                                    ng-click="ngModel.selectedObject = parent"
                                     class="location-item">
                 </mct-representation>
             </span>
@@ -49,6 +51,8 @@
                   ng-class="{ last:($index + 1) === primaryParents.length }">
                 <mct-representation key="'label'"
                                     mct-object="parent"
+                                    ng-model="ngModel"
+                                    ng-click="ngModel.selectedObject = parent"
                                     class="location-item">
                 </mct-representation>
             </span>

platform/commonUI/browse/src/ObjectHeaderController.js

@@ -1,92 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * 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.currentTarget) {
-                return;
-            }
-
-            if (event.type === 'blur') {
-                this.updateModel(event);
-            } else if (event.which === 13) {
-                this.updateModel(event);
-                event.currentTarget.blur();
-                window.getSelection().removeAllRanges();
-            }
-        };
-
-        /**
-         * Updates the model.
-         *
-         * @param event the mouse event
-         * @param private
-         */
-        ObjectHeaderController.prototype.updateModel = function (event) {
-            var name = event.currentTarget.textContent.replace(/\n/g, ' ');
-
-            if (name.length === 0) {
-                name = "Unnamed " + this.domainObject.getCapability("type").typeDef.name;
-                event.currentTarget.textContent = name;
-            }
-
-            if (name !== this.domainObject.getModel().name) {
-                this.domainObject.getCapability('mutation').mutate(function (model) {
-                    model.name = name;
-                });
-            }
-        };
-
-        /**
-         * 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/test/ObjectHeaderControllerSpec.js

@@ -1,137 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/ObjectHeaderController"],
-    function (ObjectHeaderController) {
-
-        describe("The object header controller", function () {
-            var mockScope,
-                mockDomainObject,
-                mockCapabilities,
-                mockMutationCapability,
-                mockTypeCapability,
-                mockEvent,
-                mockCurrentTarget,
-                model,
-                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
-                };
-
-                model = {
-                    name: "Test name"
-                };
-                mockDomainObject = jasmine.createSpyObj("domainObject", ["getCapability", "getModel"]);
-                mockDomainObject.getModel.andReturn(model);
-                mockDomainObject.getCapability.andCallFake(function (key) {
-                    return mockCapabilities[key];
-                });
-
-                mockScope = {
-                    domainObject: mockDomainObject
-                };
-
-                mockCurrentTarget = jasmine.createSpyObj("currentTarget", ["blur", "textContent"]);
-                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.textContent = "New name";
-                controller.updateName(mockEvent);
-
-                expect(mockMutationCapability.mutate).toHaveBeenCalled();
-            });
-
-            it("updates the model with a default for blank names", function () {
-                mockEvent.type = "blur";
-                mockCurrentTarget.textContent = "";
-                controller.updateName(mockEvent);
-
-                expect(mockCurrentTarget.textContent.length).not.toEqual(0);
-                expect(mockMutationCapability.mutate).toHaveBeenCalled();
-            });
-
-            it("does not update the model if the same name", function () {
-                mockEvent.type = "blur";
-                mockCurrentTarget.textContent = mockDomainObject.getModel().name;
-                controller.updateName(mockEvent);
-
-                expect(mockMutationCapability.mutate).not.toHaveBeenCalled();
-            });
-
-            it("updates the model on enter keypress event only", function () {
-                mockCurrentTarget.textContent = "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](model);
-
-                expect(mockDomainObject.getModel().name).toBe("New name");
-            });
-
-            it("blurs the field on enter key press", function () {
-                mockCurrentTarget.textContent = "New name";
-                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/edit/bundle.js

@@ -121,8 +121,7 @@ define([
                     "key": "ElementsController",
                     "implementation": ElementsController,
                     "depends": [
-                        "$scope",
-                        "openmct"
+                        "$scope"
                     ]
                 },
                 {
@@ -300,6 +299,9 @@ define([
                 {
                     "key": "edit-elements",
                     "template": elementsTemplate,
+                    "uses": [
+                        "composition"
+                    ],
                     "gestures": [
                         "drop"
                     ]
@@ -383,10 +385,7 @@ define([
                     ]
                 },
                 {
-                    "implementation": EditToolbarRepresenter,
-                    "depends": [
-                        "openmct"
-                    ]
+                    "implementation": EditToolbarRepresenter
                 }
             ],
             "constants": [

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 l-create-menu" ng-show="createController.isActive()">
+    <div class="menu super-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="w-menu" ng-controller="CreateMenuController">
-    <div class="col menu-items">
+<div class="contents" ng-controller="CreateMenuController">
+    <div class="pane left menu-items">
         <ul>
             <li ng-repeat="createAction in createActions" ng-click="createAction.perform()">
                 <a ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
@@ -31,15 +31,13 @@
             </li>
         </ul>
     </div>
-    <div class="col menu-item-description">
+    <div class="pane right menu-item-description">
         <div class="desc-area icon {{ representation.activeMetadata.cssClass }}"></div>
-        <div class="w-title-desc">
-            <div class="desc-area title">
-                {{representation.activeMetadata.name}}
-            </div>
-            <div class="desc-area description">
-                {{representation.activeMetadata.description}}
-            </div>
+        <div class="desc-area title">
+            {{representation.activeMetadata.name}}
+        </div>
+        <div class="desc-area description">
+            {{representation.activeMetadata.description}}
         </div>
     </div>
 </div>

platform/commonUI/edit/res/templates/edit-object.html

@@ -61,12 +61,7 @@
             <mct-representation key="representation.selected.key"
                                 mct-object="representation.selected.key && domainObject"
                                 class="abs flex-elem grows object-holder-main scroll"
-                                toolbar="toolbar"
-                                mct-selectable="{
-                                    item: domainObject.useCapability('adapter'),
-                                    oldItem: domainObject
-                                }"
-                                mct-init-select>
+                                toolbar="toolbar">
             </mct-representation>
         </div><!--/ l-object-wrapper-inner -->
     </div>

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

@@ -25,7 +25,7 @@
                  ng-model="filterBy">
     </mct-include>
     <div class="flex-elem grows vscroll">
-        <ul class="tree" ng-if="composition.length > 0">
+        <ul class="tree">
             <li ng-repeat="containedObject in composition | filter:searchElements">
                 <span class="tree-item">
                     <mct-representation
@@ -36,6 +36,5 @@
                 </span>
             </li>
         </ul>
-        <div ng-if="composition.length === 0">No contained elements</div>    
     </div>
 </div>

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

@@ -101,15 +101,10 @@ define(
          */
         EditorCapability.prototype.finish = function () {
             var domainObject = this.domainObject;
-
-            if (this.transactionService.isActive()) {
-                return this.transactionService.cancel().then(function () {
-                    domainObject.getCapability("status").set("editing", false);
-                    return domainObject;
-                });
-            } else {
-                return Promise.resolve(domainObject);
-            }
+            return this.transactionService.cancel().then(function () {
+                domainObject.getCapability("status").set("editing", false);
+                return domainObject;
+            });
         };
 
         /**

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

@@ -29,11 +29,7 @@ define(
          *
          * @constructor
          */
-        function ElementsController($scope, openmct) {
-            this.scope = $scope;
-            this.scope.composition = [];
-            var self = this;
-
+        function ElementsController($scope) {
             function filterBy(text) {
                 if (typeof text === 'undefined') {
                     return $scope.searchText;
@@ -51,44 +47,10 @@ define(
                 }
             }
 
-            function setSelection(selection) {
-                self.scope.selection = selection;
-                self.refreshComposition(selection);
-            }
-
             $scope.filterBy = filterBy;
             $scope.searchElements = searchElements;
-
-            openmct.selection.on('change', setSelection);
-            setSelection(openmct.selection.get());
-
-            $scope.$on("$destroy", function () {
-                openmct.selection.off("change", setSelection);
-            });
         }
 
-        /**
-         * Gets the composition for the selected object and populates the scope with it.
-         *
-         * @param selection the selection object
-         * @private
-         */
-        ElementsController.prototype.refreshComposition = function (selection) {
-            if (!selection[0]) {
-                return;
-            }
-
-            var selectedObjectComposition = selection[0].context.oldItem.useCapability('composition');
-
-            if (selectedObjectComposition) {
-                selectedObjectComposition.then(function (composition) {
-                    this.scope.composition = composition;
-                }.bind(this));
-            } else {
-                this.scope.composition = [];
-            }
-        };
-
         return ElementsController;
     }
 );

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

@@ -38,7 +38,7 @@ define(
          * @constructor
          * @implements {Representer}
          */
-        function EditToolbarRepresenter(openmct, scope, element, attrs) {
+        function EditToolbarRepresenter(scope, element, attrs) {
             var self = this;
 
             // Mark changes as ready to persist
@@ -109,7 +109,6 @@ define(
             this.updateSelection = updateSelection;
             this.toolbar = undefined;
             this.toolbarObject = {};
-            this.openmct = openmct;
 
             // If this representation exposes a toolbar, set up watches
             // to synchronize with it.
@@ -147,7 +146,7 @@ define(
             // Expose the toolbar object to the parent scope
             initialize(definition);
             // Create a selection scope
-            this.setSelection(new EditToolbarSelection(this.openmct));
+            this.setSelection(new EditToolbarSelection());
             // Initialize toolbar to an empty selection
             this.updateSelection([]);
         };

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

@@ -38,18 +38,10 @@ define(
          * @memberof platform/commonUI/edit
          * @constructor
          */
-        function EditToolbarSelection(openmct) {
+        function EditToolbarSelection() {
             this.selection = [{}];
             this.selecting = false;
             this.selectedObj = undefined;
-
-            openmct.selection.on('change', function (selection) {
-                if (selection[0] && selection[0].context.toolbar) {
-                    this.select(selection[0].context.toolbar);
-                } else {
-                    this.deselect();
-                }
-            }.bind(this));
         }
 
         /**

platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js

@@ -62,7 +62,6 @@ define(
                 );
                 mockTransactionService.commit.andReturn(fastPromise());
                 mockTransactionService.cancel.andReturn(fastPromise());
-                mockTransactionService.isActive = jasmine.createSpy('isActive');
 
                 mockStatusCapability = jasmine.createSpyObj(
                     "statusCapability",
@@ -142,7 +141,6 @@ define(
 
             describe("finish", function () {
                 beforeEach(function () {
-                    mockTransactionService.isActive.andReturn(true);
                     capability.edit();
                     capability.finish();
                 });
@@ -154,23 +152,6 @@ define(
                 });
             });
 
-            describe("finish", function () {
-                beforeEach(function () {
-                    mockTransactionService.isActive.andReturn(false);
-                    capability.edit();
-                });
-
-                it("does not cancel transaction when transaction is not active", function () {
-                    capability.finish();
-                    expect(mockTransactionService.cancel).not.toHaveBeenCalled();
-                });
-
-                it("returns a promise", function () {
-                    expect(capability.finish() instanceof Promise).toBe(true);
-                });
-
-            });
-
             describe("dirty", function () {
                 var model = {};
 

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

@@ -27,23 +27,11 @@ define(
 
         describe("The Elements Pane controller", function () {
             var mockScope,
-                mockOpenMCT,
-                mockSelection,
                 controller;
 
             beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ['$on']);
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn([]);
-                mockOpenMCT = {
-                    selection: mockSelection
-                };
-
-                controller = new ElementsController(mockScope, mockOpenMCT);
+                mockScope = jasmine.createSpy("$scope");
+                controller = new ElementsController(mockScope);
             });
 
             function getModel(model) {

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

@@ -29,9 +29,7 @@ define(
                 mockElement,
                 testAttrs,
                 mockUnwatch,
-                representer,
-                mockOpenMCT,
-                mockSelection;
+                representer;
 
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
@@ -48,18 +46,7 @@ define(
 
                 mockScope.$parent.$watchCollection.andReturn(mockUnwatch);
 
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn([]);
-                mockOpenMCT = {
-                    selection: mockSelection
-                };
-
                 representer = new EditToolbarRepresenter(
-                    mockOpenMCT,
                     mockScope,
                     mockElement,
                     testAttrs

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

@@ -28,25 +28,13 @@ define(
             var testProxy,
                 testElement,
                 otherElement,
-                selection,
-                mockSelection,
-                mockOpenMCT;
+                selection;
 
             beforeEach(function () {
                 testProxy = { someKey: "some value" };
                 testElement = { someOtherKey: "some other value" };
                 otherElement = { yetAnotherKey: 42 };
-                mockSelection = jasmine.createSpyObj("selection", [
-                    // 'select',
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn([]);
-                mockOpenMCT = {
-                    selection: mockSelection
-                };
-                selection = new EditToolbarSelection(mockOpenMCT);
+                selection = new EditToolbarSelection();
                 selection.proxy(testProxy);
             });
 

platform/commonUI/formats/src/UTCTimeFormat.js

@@ -121,9 +121,6 @@ define([
     };
 
     UTCTimeFormat.prototype.parse = function (text) {
-        if (typeof text === 'number') {
-            return text;
-        }
         return moment.utc(text, DATE_FORMATS).valueOf();
     };
 

platform/commonUI/general/bundle.js

@@ -41,7 +41,6 @@ define([
     "./src/controllers/BannerController",
     "./src/directives/MCTContainer",
     "./src/directives/MCTDrag",
-    "./src/directives/MCTSelectable",
     "./src/directives/MCTClickElsewhere",
     "./src/directives/MCTResize",
     "./src/directives/MCTPopup",
@@ -91,7 +90,6 @@ define([
     BannerController,
     MCTContainer,
     MCTDrag,
-    MCTSelectable,
     MCTClickElsewhere,
     MCTResize,
     MCTPopup,
@@ -330,13 +328,6 @@ define([
                         "$document"
                     ]
                 },
-                {
-                    "key": "mctSelectable",
-                    "implementation": MCTSelectable,
-                    "depends": [
-                        "openmct"
-                    ]
-                },
                 {
                     "key": "mctClickElsewhere",
                     "implementation": MCTClickElsewhere,

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

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "openmct-symbols-16px",
     "lastOpened": 0,
-    "created": 1506973656040
+    "created": 1505151140023
   },
   "iconSets": [
     {
@@ -899,14 +899,6 @@
           "prevSize": 24,
           "code": 921904,
           "tempChar": ""
-        },
-        {
-          "order": 139,
-          "id": 117,
-          "name": "icon-notebook",
-          "prevSize": 24,
-          "code": 921905,
-          "tempChar": ""
         }
       ],
       "metadata": {
@@ -3532,29 +3524,6 @@
               {}
             ]
           }
-        },
-        {
-          "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

@@ -118,5 +118,4 @@
 <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

@@ -137,11 +137,6 @@
         min-height: 0;
         &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
     }
-    &.l-flex-accordion .flex-accordion-holder {
-        display: flex;
-        flex-direction: column;
-        //overflow: hidden !important;
-    }
     .flex-container { @include flex-direction(column); }
 }
 

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

@@ -99,7 +99,7 @@ $plotXBarH: 32px;
 $plotLegendH: 20px;
 $plotSwatchD: 8px;
 // 1: Top, 2: right, 3: bottom, 4: left
-$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW);
+$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH, $plotYBarW);
 /* min plot height is based on user testing to find minimum useful height */
 $plotMinH: 95px;
 /*************** Bubbles */
@@ -111,9 +111,7 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
-$inputTextPTopBtm: 3px;
-$inputTextPLeftRight: 5px;
-$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
+$inputTextP: 3px 5px;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;

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

@@ -25,7 +25,6 @@
 	}
 
 	.l-fixed-position-item {
-        border-width: 1px;
 		position: absolute;
 		&.s-not-selected {
 			opacity: 0.8;

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

@@ -40,7 +40,7 @@
     * Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json
     * to generate font files
     */
-    font-family: 'symbolsfont-12px';
+    font-family: 'symbolsfont 12px';
     src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.eot');
     src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.eot?#iefix') format('embedded-opentype'),
     url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.woff') format('woff'),
@@ -248,12 +248,6 @@ a.disabled {
     color: rgba(#fff, 0.2);
 }
 
-.comma-list span {
-    &:not(:first-child) {
-        &:before { content: ', '; }
-    }
-}
-
 .test-stripes {
     @include bgDiagonalStripes();
 }

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

@@ -146,7 +146,6 @@ $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 */
 
@@ -261,7 +260,6 @@ $glyph-icon-notebook: '\e1131';
 .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/_icons.scss

@@ -44,12 +44,6 @@
     }
 }
 
-
-.t-alert-unsynced {
-    @extend .icon-alert-triangle;
-    color: $colorPausedBg;
-}
-
 .bar .ui-symbol {
 	display: inline-block;
 }
@@ -87,5 +81,18 @@
             @include transform(scale(0.3));
             z-index: 2;
         }
+
+/*        .t-item-icon-glyph {
+            &:after {
+                color: $colorIconLink;
+                content: '\e921'; //$glyph-icon-link;
+                height: auto; width: auto;
+                position: absolute;
+                left: 0; top: 0; right: 0; bottom: 20%;
+                @include transform-origin(bottom left);
+                @include transform(scale(0.3));
+                z-index: 2;
+            }
+        }*/
     }
 }

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

@@ -26,6 +26,5 @@
         display: block;
         height: 100%;
         width: 100%;
-        border: none;
     }
 }

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

@@ -53,7 +53,6 @@
     .l-inspector-part {
         box-sizing: border-box;
         padding-right: $interiorMargin;
-
         .tree .form {
             margin-left: $treeVCW + $interiorMarginLg;
         }
@@ -79,7 +78,6 @@
                 }
             }
             .form-row {
-                // To be replaced with .inspector-config, see below.
                 @include align-items(center);
                 border: none !important;
                 margin-bottom: 0 !important;
@@ -101,12 +99,15 @@
         position: relative;
     }
 
+    ul li {
+        margin-bottom: $interiorMarginLg;
+    }
+
     em.t-inspector-part-header {
         border-radius: $basicCr;
         background-color: $colorInspectorSectionHeaderBg;
         color: $colorInspectorSectionHeaderFg;
-        margin-top: $interiorMarginLg;
-        //margin-bottom: $interiorMargin;
+        margin-bottom: $interiorMargin;
         padding: floor($formTBPad * .75) $formLRPad;
         text-transform: uppercase;
     }
@@ -200,102 +201,3 @@ mct-representation:not(.s-status-editing) .l-inspect {
         pointer-events: inherit;
     }
 }
-
-// NEW COMPACT FORM, FOR USE IN INSPECTOR
-// ul > li > label, control
-// Make a new UL for each form section
-// Allow control-first, controls-below
-
-.l-inspect .tree ul li,
-.inspector-config ul li {
-    padding: 2px 0;
-}
-
-
-.inspector-config {
-    $labelW: 40%;
-    $minW: $labelW;
-    ul {
-        margin-bottom: $interiorMarginLg;
-        li {
-            @include display(flex);
-            @include flex-wrap(wrap);
-            @include align-items(center);
-            label,
-            .control {
-                @include display(flex);
-                min-width: $minW;
-            }
-            label {
-                line-height: inherit;
-                padding: $interiorMarginSm 0;
-                width: $labelW;
-            }
-            .control {
-                @include flex-grow(1);
-            }
-
-            &:not(.section-header) {
-                &:not(.connects-to-previous) {
-                    //border-top: 1px solid $colorFormLines;
-                }
-            }
-
-            &.connects-to-previous {
-                padding-top: 0 !important;
-            }
-
-            &.section-header {
-                margin-top: $interiorMarginLg;
-                border-top: 1px solid $colorFormLines;
-            }
-
-            &.controls-first {
-                .control {
-                    @include flex-grow(0);
-                    margin-right: $interiorMargin;
-                    min-width: 0;
-                    order: 1;
-                    width: auto;
-                }
-                label {
-                    @include flex-grow(1);
-                    order: 2;
-                    width: auto;
-                }
-            }
-            &.controls-under {
-                display: block;
-                .control, label {
-                    display: block;
-                    width: auto;
-                }
-
-                ul li {
-                    border-top: none !important;
-                    padding: 0;
-                }
-            }
-        }
-    }
-
-    .form-error {
-        // Block element that visually flags an error and contains a message
-        background-color: $colorFormFieldErrorBg;
-        color: $colorFormFieldErrorFg;
-        border-radius: $basicCr;
-        display: block;
-        padding: 1px 6px;
-        &:before {
-            content: $glyph-icon-alert-triangle;
-            display: inline;
-            font-family: symbolsfont;
-            margin-right: $interiorMarginSm;
-        }
-    }
-}
-
-.tree .inspector-config {
-    margin-left: $treeVCW + $interiorMarginLg;
-}
-

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

@@ -70,7 +70,6 @@
 @import "fixed-position";
 @import "lists/tabular";
 @import "plots/plots-main";
-@import "plots/legend";
 @import "iframe";
 @import "views";
 @import "items/item";

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

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

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

@@ -50,6 +50,7 @@
         content:'';
         font-family: symbolsfont;
         font-size: 0.8em;
+        display: inline;
         margin-right: $interiorMarginSm;
     }
 }

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

@@ -5,7 +5,6 @@
 }
 
 .l-view-section {
-    //@include test(orange, 0.1);
 	@include absPosDefault(0);
 	h2 {
 		color: #fff;

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

@@ -40,11 +40,11 @@
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    cursor: default;
-    font-size: 0.8rem;
     padding: $interiorMarginLg $interiorMarginLg * 2;
+    cursor: pointer;
+    pointer-events: none;
     &[href] {
-        cursor: pointer;
+        pointer-events: inherit;
     }
 }
 
@@ -64,7 +64,6 @@
     }
 }
 
-.widget-rules-wrapper,
 .widget-rule-content,
 .w-widget-test-data-content {
     @include trans-prop-nice($props: (height, min-height, opacity), $dur: 250ms);
@@ -73,18 +72,16 @@
     opacity: 0;
     overflow: hidden;
     pointer-events: none;
-}
-
-.widget-rules-wrapper {
-    flex: 1 1 auto !important;
+    &.expanded {
+        min-height: 50px;
+        height: auto;
+        opacity: 1;
+        pointer-events: inherit;
+    }
 }
 
 .widget-rule-content.expanded {
     overflow: visible !important;
-    min-height: 50px;
-    height: auto;
-    opacity: 1;
-    pointer-events: inherit;
 }
 
 .w-widget-test-data-content {
@@ -122,43 +119,11 @@
 
     > .l-summary-widget {
         // Main view of the summary widget
-        // Give some airspace and center the widget in the area
         margin: 30px auto;
     }
 
     .widget-edit-holder {
-        display: flex; // Overrides `display: none` during Browse mode
-        .flex-accordion-holder {
-            // Needed because otherwise accordion elements "creep" when contents expand and contract
-            display: block !important;
-        }
-        &.expanded-widget-test-data {
-            .w-widget-test-data-content {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-            &:not(.expanded-widget-rules) {
-                // Test data is expanded and rules are collapsed
-                // Make text data take up all the vertical space
-                .flex-accordion-holder { display: flex; }
-                .widget-test-data {
-                    flex-grow: 999999;
-                }
-                .w-widget-test-data-items {
-                    max-height: inherit;
-                }
-            }
-        }
-        &.expanded-widget-rules {
-            .widget-rules-wrapper {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-        }
+        display: flex; // Overrides display: none during Browse mode
     }
 
     &.s-status-no-data {
@@ -290,11 +255,6 @@
             opacity: 1;
         }
     }
-    .l-rule-action-buttons-wrapper {
-          .t-delete {
-            margin-left: 10px;
-          }
-    }
     .t-condition {
         &:hover {
             .l-condition-action-buttons-wrapper {

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

@@ -150,26 +150,6 @@
     }
 }
 
-/******************************************************** VIEW CONTROLS */
-// Expand/collapse > and v arrows, used in tree and plot legend
-// Moved this over from a tree-only context 5/18/17
-
-.view-control {
-    @extend .ui-symbol;
-    cursor: pointer;
-    height: 1em; width: 1em;
-    line-height: inherit;
-    &:before {
-        position: absolute;
-        @include trans-prop-nice(transform, 100ms);
-        content: $glyph-icon-arrow-right;
-        @include transform-origin(center);
-    }
-    &.expanded:before {
-        @include transform(rotate(90deg));
-    }
-}
-
 /******************************************************** CUSTOM CHECKBOXES */
 label.checkbox.custom,
 label.radio.custom {
@@ -254,16 +234,12 @@ textarea {
 }
 
 /******************************************************** INPUTS */
-%input-base {
-    @include input-base();
-}
-
 input[type="text"],
 input[type="search"],
 input[type="number"] {
     @include nice-input();
     vertical-align: baseline;
-    padding: $inputTextPTopBtm $inputTextPLeftRight;
+    padding: $inputTextP;
     &.numeric {
         text-align: right;
     }
@@ -307,44 +283,20 @@ 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);
     @extend .icon-arrow-down; // Context arrow
+    //@if $shdwBtns != none { margin: 0 0 2px 0; } // Needed to avoid dropshadow from being clipped by parent containers
     display: inline-block;
     padding: 0 $interiorMargin;
     overflow: hidden;
     position: relative;
+    //height: $btnStdH;
+    //line-height: $btnStdH;
     select {
         @include appearance(none);
         box-sizing: border-box;
-        &:focus { outline: 0; }
         background: none;
         color: $colorSelectFg;
         cursor: pointer;
@@ -414,7 +366,8 @@ input[type="text"].s-input-inline,
     .l-elem-wrapper {
         mct-representation {
             // Holds the context-available item
-            // Must have min-width to make flex work properly in Safari
+            // Must have min-width to make flex work properly
+            // in Safari
             min-width: 0.7em;
         }
     }
@@ -580,6 +533,7 @@ input[type="text"].s-input-inline,
     height: $h;
     margin-top: 1 + floor($h/2) * -1;
     @include btnSubtle(pullForward($colorBtnBg, 10%));
+    //border-radius: 50% !important;
 }
 
 @mixin sliderKnobRound() {
@@ -594,6 +548,7 @@ input[type="text"].s-input-inline,
 
 input[type="range"] {
     // HTML5 range inputs
+
     -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
     background: transparent; /* Otherwise white in Chrome */
     &:focus {
@@ -792,15 +747,11 @@ 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,20 +21,20 @@
  *****************************************************************************/
 /******************************************************** 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;
-    }
+	.icon {
+		font-size: 16px; //120%;
+	}
 
-    .title-label {
-        margin-left: $interiorMarginSm;
-    }
+	.title-label {
+		margin-left: $interiorMarginSm;
+	}
 
     .icon-swatch,
     .color-swatch {
@@ -52,60 +52,66 @@
         }
     }
 
-    &: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;
+	cursor: pointer;
+	position: relative;
+}
+
+.s-menu {
+	border-radius: $basicCr;
+	@include containerSubtle($colorMenuBg, $colorMenuFg);
+	@include boxShdw($shdwMenu);
+	@include txtShdw($shdwMenuText);
+	padding: $interiorMarginSm 0;
 }
 
 .menu {
-    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%);
+    // 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%);
             color: $colorMenuFg;
-            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;
+			//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;
                 &:before {
                     color: $colorMenuHovIc;
                 }
-            }
+			}
             &:before {
                 @extend .ui-symbol;
                 @extend .type-icon;
@@ -113,8 +119,8 @@
                 display: inline-block;
                 left: $interiorMargin * 2;
             }
-        }
-    }
+		}
+	}
 }
 
 .menu,
@@ -122,97 +128,94 @@
 .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;
-        }
-    }
-}
-
-.super-menu,
-.super-menu > mct-representation,
-.super-menu > .contents {
-    box-sizing: border-box;
-    display: block;
-    position: relative;
+			left: 25px;
+		}
+	}
 }
 
 .super-menu {
-    $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;
-
+	$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;
             .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%);
@@ -220,104 +223,67 @@
                     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;
-        .col {
-            max-height: 50vh;
+        height: 300px;
+        .pane {
             &.menu-items {
                 font-size: 0.8em;
             }
             &.menu-item-description {
-                $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;
+                padding: $interiorMargin * 3;
+                .desc-area {
+                    &.icon {
+                        font-size: 4em;
+                    }
+                    &.title {
+                        font-size: 1em;
+                    }
+                }
             }
         }
     }
 }
-
 .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

@@ -120,11 +120,7 @@
 	}
 
 	.status-indicator {
-        background: none !important;
 		margin-right: $interiorMarginSm;
-        &[class*='s-status']:before {
-            font-size: 1em;
-        }
 	}
 
 	.count {
@@ -196,6 +192,7 @@
 		padding: 0 $interiorMargin;
 	}
     .close {
+		//@include test(red, 0.7);
 		cursor: pointer;
         font-size: 7px;
 		width: 8px;
@@ -250,6 +247,7 @@
 // Archetypal message
 .l-message {
     $iconW: 32px;
+    //@include test();
     @include display(flex);
     @include flex-direction(row);
     @include align-items(stretch);
@@ -294,6 +292,7 @@
     }
 
     .message-body {
+        //@include test(blue);
         @include flex(1 1 100%);
     }
 }
@@ -336,6 +335,7 @@
 
     > div,
     > span {
+        //@include test(red);
         margin-bottom: $interiorMargin;
     }
 
@@ -398,6 +398,10 @@ body.desktop .t-message-list {
     .object-header {
         .t-object-alert {
             display: inline;
+            &.t-alert-unsynced {
+                @extend .icon-alert-triangle;
+                color: $colorPausedBg;
+            }
         }
     }
 }

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

@@ -69,5 +69,4 @@
 			margin-left: $interiorMargin;
 		}
 	}
-
-}
+}

platform/commonUI/general/res/sass/edit/_editor.scss

@@ -80,32 +80,23 @@
 
     // Editing Grids
     .l-grid-holder {
+        display: block;
         .l-grid {
             &.l-grid-x { @include bgTicks($colorGridLines, 'x'); }
             &.l-grid-y { @include bgTicks($colorGridLines, 'y'); }
         }
     }
 
-    // Display grid when selected or selection parent.
-    .s-selected .l-grid-holder,
-    .s-selected-parent .l-grid-holder {
-        display: block;
+    // Prevent nested frames from showing their grids
+    .t-frame-outer .l-grid-holder { display: none !important; }
+
+    // Prevent nested elements from showing s-hover-border
+    .t-frame-outer .s-hover-border {
+        border: none !important;
     }
 
-    // Display in nested frames...
-    .t-frame-outer {
-        // ...when drilled in or selection parent...
-        &.s-drilled-in, &.s-selected-parent {
-            .l-grid-holder {
-                display: block;
-            }
-            .t-frame-outer:not(.s-drilled-in) .l-grid-holder {
-                display: none;
-            }
-        }
-        // ...but hide otherwise.
-        .l-grid-holder {
-            display: none;
-        }
+    // Prevent nested frames from being selectable until we have proper sub-object editing
+    .t-frame-outer .t-frame-outer {
+        pointer-events: none;
     }
 }

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

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

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

@@ -34,7 +34,18 @@ body.touch {
 		line-height: $mobileTreeItemH !important;
 		.view-control {
             font-size: 1em;
-            width: ceil($mobileTreeItemH * 0.5);
+            margin-right: $interiorMargin;
+            width: ceil($mobileTreeItemH * 0.75);
+            &.has-children {
+                &:before {
+                    content: $glyph-icon-arrow-down;
+                    left: 50%;
+                    @include transform(translateX(-50%) rotate(-90deg));
+                }
+                &.expanded:before {
+                    @include transform(translateX(-50%) rotate(0deg));
+                }
+            }
 		}
 		.t-object-label {
 			line-height: inherit;

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

@@ -157,8 +157,6 @@
             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/plots/_legend.scss

@@ -1,208 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-.gl-plot {
-    .gl-plot-legend {
-        min-height: $plotLegendH;
-
-        .view-control {
-            font-size: 1em;
-            margin-right: $interiorMarginSm;
-        }
-
-        table {
-            table-layout: fixed;
-            tr {
-                display: table-row;
-            }
-            th,
-            td {
-                @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
-                display: table-cell;
-                padding: 1px 3px; // Tighter than standard tabular padding
-            }
-        }
-
-        &.hover-on-plot {
-            // User is hovering over the plot to get a value at a point
-            .hover-value-enabled {
-                background-color: $legendHoverValueBg;
-                border-radius: $smallCr;
-                padding: 0 $interiorMarginSm;
-                &:before {
-                    opacity: 0.5;
-                }
-                &.cursor-hover,
-                .value-to-display-nearestTimestamp,
-                .value-to-display-nearestValue
-                {
-                    @extend .icon-crosshair-12px;
-                    &:before {
-                        font-size: 9px;
-                    }
-                }
-
-                &.value-to-display-min:before {
-                    content: 'MIN ';
-                }
-                &.value-to-display-max:before {
-                    content: 'MAX ';
-                }
-            }
-        }
-    }
-
-    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
-    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
-
-    /***************** GENERAL STYLES, ALL STATES */
-    .plot-legend-item {
-        // General styles for legend items, both expanded and collapsed legend states
-        .plot-series-color-swatch {
-            border-radius: $smallCr;
-            border: 1px solid $colorBodyBg;
-            display: inline-block;
-            height: $plotSwatchD;
-            width: $plotSwatchD;
-        }
-        .plot-series-name {
-            display: inline;
-        }
-
-        .plot-series-value {
-            @include ellipsize();
-        }
-    }
-
-    /***************** GENERAL STYLES, COLLAPSED */
-    &.plot-legend-collapsed {
-        // .plot-legend-item is a span of spans.
-        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
-        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
-        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
-        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
-
-        .plot-legend-item {
-            display: flex;
-            align-items: center;
-            &:not(:first-child) {
-                margin-left: $interiorMarginLg;
-            }
-            .plot-series-swatch-and-name,
-            .plot-series-value {
-                @include ellipsize();
-                flex: 1 1 auto;
-            }
-
-            .plot-series-swatch-and-name {
-                margin-right: $interiorMarginSm;
-            }
-
-            .plot-series-value {
-                text-align: left;
-                width: 170px;
-            }
-        }
-    }
-
-    /***************** GENERAL STYLES, EXPANDED */
-    &.plot-legend-expanded {
-        .gl-plot-legend {
-            max-height: 70%;
-        }
-
-        .plot-wrapper-expanded-legend {
-            overflow-y: auto;
-        }
-
-        &.plot-legend-top .gl-plot-legend {
-            margin-bottom: $interiorMargin;
-        }
-        &.plot-legend-bottom .gl-plot-legend {
-            margin-top: $interiorMargin;
-        }
-    }
-
-    /***************** TOP OR BOTTOM */
-    &.plot-legend-top,
-    &.plot-legend-bottom {
-        // General styles when legend is on the top or bottom
-        @extend .l-flex-col;
-        &.plot-legend-collapsed {
-            // COLLAPSED ON TOP OR BOTTOM
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex: 1 1 auto;
-                overflow: hidden;
-            }
-        }
-    }
-
-    /***************** EITHER SIDE */
-    &.plot-legend-left,
-    &.plot-legend-right {
-        @extend .l-flex-row;
-        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
-        &.plot-legend-expanded {
-            // EXPANDED, ON EITHER SIDE
-            @extend .l-flex-col;
-        }
-
-        &.plot-legend-collapsed {
-            // COLLAPSED, ON EITHER SIDE
-            .gl-plot-legend {
-                max-height: inherit;
-                width: 25%;
-            }
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex-flow: column nowrap;
-                min-width: 0;
-                flex: 1 1 auto;
-                overflow-y: auto;
-            }
-            .plot-legend-item {
-                margin-bottom: 1px;
-                margin-left: 0;
-                flex-wrap: wrap;
-                .plot-series-swatch-and-name {
-                    flex: 0 1 auto;
-                    min-width: 20%;
-                }
-                .plot-series-value {
-                    flex: 0 1 auto;
-                    width: auto;
-                }
-            }
-        }
-    }
-
-    /***************** ON BOTTOM OR RIGHT */
-    &.plot-legend-right:not(.plot-legend-expanded),
-    &.plot-legend-bottom {
-        .gl-plot-legend {
-            order: 2;
-        }
-        .plot-wrapper-axis-and-display-area {
-            order: 1;
-        }
-    }
-}

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -20,42 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .abs.holder-plot {
-    right: $interiorMargin; // Fend off the scrollbar when less than min-height;
-    .t-object-alert.t-alert-unsynced {
-        display: none;
-    }
+    // Fend off the scrollbar when less than min-height;
+    right: $interiorMargin;
 }
 
-/********************************************* STACKED PLOT LAYOUT */
-.t-plot-stacked {
-    .l-view-section {
-        //  Make this a flex container
-        display: flex;
-        flex-flow: column nowrap;
-        .gl-plot.child-frame {
-            mct-plot { 
-                display: flex; 
-                flex: 1 1 auto;
-                height: 100%;
-                position: relative;
-            }
-            flex: 1 1 auto;
-            &:not(:first-child) {
-                margin-top: $interiorMargin;
-            }
-        }
-    }
-
-    .s-status-timeconductor-unsynced .holder-plot {
-        .t-object-alert.t-alert-unsynced {
-            display: block;
-        }
-    }
-
-}
-
-
-
 .gl-plot {
 	color: $colorPlotFg;
 	font-size: 0.7rem;
@@ -64,19 +32,6 @@
 	height: 100%;
     min-height: $plotMinH;
 
-    /********************************************* AXIS AND DISPLAY AREA */
-    .plot-wrapper-axis-and-display-area {
-        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
-        position: relative;
-        flex: 1 1 auto;
-        .t-object-alert {
-            position: absolute;
-            display: block;
-            font-size: 1.5em;
-            top: $interiorMarginSm; left: $interiorMarginSm;
-        }
-    }
-
     .gl-plot-wrapper-display-area-and-x-axis {
         // Holds the plot area and the X-axis only
         position: absolute;
@@ -94,6 +49,7 @@
         }
 
         .gl-plot-axis-area.gl-plot-x {
+            //@include test(green);
             top: auto;
             right: 0;
             bottom: 0;
@@ -107,7 +63,7 @@
 	.gl-plot-axis-area {
 		position: absolute;
 		&.gl-plot-y {
-			top: nth($plotDisplayArea, 1);
+			top: $plotLegendH + $interiorMargin;
 			right: auto;
 			bottom: nth($plotDisplayArea, 3);
 			left: 0;
@@ -202,6 +158,17 @@
 		}
 	}
 
+	.gl-plot-legend {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: auto;
+		left: 0;
+		height: $plotLegendH;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
 	/****************************** Limits and Out-of-Bounds data */
 
 	.l-limit-bar,
@@ -268,6 +235,39 @@
     border: 1px solid $colorPlotAreaBorder;
 }
 
+.gl-plot-legend,
+.legend {
+	.plot-legend-item,
+	.legend-item {
+		display: inline-block;
+		margin-right: $interiorMarginLg;
+		margin-bottom: $interiorMarginSm;
+		span {
+			vertical-align: middle;
+		}
+		.plot-color-swatch,
+		.color-swatch {
+			border-radius: 2px;
+			display: inline-block;
+			height: $plotSwatchD;
+			width: $plotSwatchD;
+		}
+	}
+}
+
+.gl-plot-legend {
+	.plot-legend-item {
+		border-radius: $smallCr;
+		line-height: 1.5em;
+		padding: 0px $itemPadLR;
+		.plot-color-swatch {
+			border: 1px solid $colorBodyBg;
+			height: $plotSwatchD + 1;
+			width: $plotSwatchD + 1;
+		}
+	}
+}
+
 .tick {
 	position: absolute;
 	border: 0 $colorPlotHash solid;

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

@@ -23,7 +23,7 @@
 ul.tree {
     @include menuUlReset();
     @include user-select(none);
-    > li {
+    li {
         display: block;
         position: relative;
     }
@@ -53,10 +53,12 @@ ul.tree {
     .view-control {
         color: $colorItemTreeVC;
         margin-right: $interiorMargin;
+        height: 100%;
+        line-height: inherit;
         width: $treeVCW;
-        &:before { display: block; }
-        &.no-children {
-            &:before { display: none; }
+        &:before { display: none; }
+        &.has-children {
+            &:before { display: block; }
         }
     }
 

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

@@ -23,14 +23,15 @@
     $ohH: $btnFrameH;
     $bc: $colorInteriorBorder;
     &.child-frame.panel {
-        border: 1px solid transparent;
         z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
         &:not(.no-frame) {
             background: $colorBodyBg;
-            border-color: $bc;
+            border: 1px solid $bc;
+            &:hover {
+                border-color: lighten($bc, 10%);
+            }
         }
     }
-
     .object-browse-bar {
         font-size: 0.75em;
         height: $ohH;
@@ -91,9 +92,9 @@
 
     &.no-frame {
         background: transparent !important;
-        border: none;
+        border: none !important;
         .object-browse-bar .right {
-            $m: 0;
+            $m: 0; // $interiorMarginSm;
             background: rgba(black, 0.3);
             border-radius: $basicCr;
             padding: $interiorMarginSm;
@@ -103,7 +104,7 @@
         }
         &.t-frame-outer > .t-rep-frame {
             &.contents {
-                $m: 0px;
+                $m: 2px;
                 top: $m;
                 right: $m;
                 bottom: $m;
@@ -114,18 +115,12 @@
                     display: none;
                 }
                 > .object-holder.abs {
-                    overflow: hidden;
                     top: 0 !important;
                 }
             }
         }
     }
 
-    &.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,
     .t-object-type-summary-widget {
@@ -135,12 +130,13 @@
         .w-summary-widget,
         .l-summary-widget,
         .l-hyperlink.s-button {
-            // Some object types expand to the full size of the object-holder.
             @extend .abs;
         }
 
         .l-summary-widget,
         .l-hyperlink.s-button {
+            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
+            //@extend .abs;
             .label {
                 @include ellipsize();
                 @include transform(translateY(-50%));

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

@@ -20,51 +20,35 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .s-hover-border {
-    &:hover {
-        border-color: rgba($colorSelectableSelectedPrimary, 0.5) !important;
-    }
+    border: 1px dotted transparent;
 }
 
 .s-status-editing {
-    // Limit to editing mode
-    $o: 0.5;
-    $oHover: 0.8;
-    $bc: $colorSelectableSelectedPrimary;
+    // Limit to editing mode until we have sub-object selection
     .s-hover-border {
         // Show a border by default so user can see object bounds and empty objects
-        border-color: rgba($bc, $o) !important;
-        border-style: dotted !important;
-
+        border: 1px dotted rgba($colorSelectableSelectedPrimary, 0.3) !important;
         &:hover {
-            border-color: rgba($bc, $oHover) !important;
-        }
-
-        &.t-object-type-layout {
-            border-style: dashed !important;
+            border-color: rgba($colorSelectableSelectedPrimary, 0.7) !important;
         }
     }
-    .s-selected {
-        &.s-moveable {
-            &:not(.s-drilled-in) {
-                cursor: move;
+
+    .s-selected > .s-hover-border,
+    .s-selected.s-hover-border {
+        // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
+        border-color: $colorSelectableSelectedPrimary !important;
+        @include boxShdwLarge();
+        // Show edit-corners if you got 'em
+        .edit-corner {
+            display: block;
+            &:hover {
+                background-color: rgba($colorKey, 1);
             }
         }
     }
-}
 
-.s-selected > .s-hover-border,
-.s-selected.s-hover-border {
-    // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
-    border-color: $colorSelectableSelectedPrimary !important;
-    @include boxShdwLarge();
-    // Show edit-corners if you got 'em
-    .edit-corner {
-        display: block;
-        &:hover {
-            background-color: rgba($colorKey, 1);
-        }
+    .s-selected > .s-moveable,
+    .s-selected.s-moveable {
+        cursor: move;
     }
-}
-
-
-
+}

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"
+<span class="t-filter l-filter s-filter"
       ng-controller="GetterSetterController">
 	<input type="search"
            class="t-filter-input"

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

@@ -40,7 +40,7 @@ define(
 
             // Gets an array of the contextual parents/ancestors of the selected object
             function getContextualPath() {
-                var currentObj = $scope.domainObject,
+                var currentObj = $scope.ngModel.selectedObject,
                     currentParent,
                     parents = [];
 
@@ -68,7 +68,7 @@ define(
 
                 // If this the the initial call of this recursive function
                 if (!current) {
-                    current = $scope.domainObject;
+                    current = $scope.ngModel.selectedObject;
                     $scope.primaryParents = [];
                 }
 
@@ -87,16 +87,16 @@ define(
 
             // Gets the metadata for the selected object
             function getMetadata() {
-                $scope.metadata = $scope.domainObject &&
-                    $scope.domainObject.hasCapability('metadata') &&
-                    $scope.domainObject.useCapability('metadata');
+                $scope.metadata = $scope.ngModel.selectedObject &&
+                    $scope.ngModel.selectedObject.hasCapability('metadata') &&
+                    $scope.ngModel.selectedObject.useCapability('metadata');
             }
 
             // Set scope variables when the selected object changes
-            $scope.$watch('domainObject', function () {
-                $scope.isLink = $scope.domainObject &&
-                    $scope.domainObject.hasCapability('location') &&
-                    $scope.domainObject.getCapability('location').isLink();
+            $scope.$watch('ngModel.selectedObject', function () {
+                $scope.isLink = $scope.ngModel.selectedObject &&
+                    $scope.ngModel.selectedObject.hasCapability('location') &&
+                    $scope.ngModel.selectedObject.getCapability('location').isLink();
 
                 if ($scope.isLink) {
                     getPrimaryPath();
@@ -108,11 +108,8 @@ define(
 
                 getMetadata();
             });
-
-            var mutation = $scope.domainObject.getCapability('mutation');
-            var unlisten = mutation.listen(getMetadata);
-            $scope.$on('$destroy', unlisten);
         }
+
         return ObjectInspectorController;
     }
 );

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

@@ -83,9 +83,9 @@ define([
         this.activeObject = domainObject;
 
         if (domainObject && domainObject.hasCapability('composition')) {
-            $(this.toggleView.elements()).removeClass('no-children');
+            $(this.toggleView.elements()).addClass('has-children');
         } else {
-            $(this.toggleView.elements()).addClass('no-children');
+            $(this.toggleView.elements()).removeClass('has-children');
         }
 
         if (domainObject && domainObject.hasCapability('status')) {

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

@@ -39,8 +39,10 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    ["$watch", "$on"]
+                    ["$watch"]
                 );
+                mockScope.ngModel = {};
+                mockScope.ngModel.selectedObject = 'mock selected object';
 
                 mockObjectService = jasmine.createSpyObj(
                     "objectService",
@@ -67,27 +69,22 @@ define(
                     "location capability",
                     ["isLink"]
                 );
-
                 mockDomainObject.getCapability.andCallFake(function (param) {
                     if (param === 'location') {
                         return mockLocationCapability;
                     } else if (param === 'context') {
                         return mockContextCapability;
-                    } else if (param === 'mutation') {
-                        return {
-                            listen: function () {
-                                return true;
-                            }
-                        };
                     }
                 });
 
-                mockScope.domainObject = mockDomainObject;
                 controller = new ObjectInspectorController(mockScope, mockObjectService);
+
+                // Change the selected object to trigger the watch call
+                mockScope.ngModel.selectedObject = mockDomainObject;
             });
 
             it("watches for changes to the selected object", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith('domainObject', jasmine.any(Function));
+                expect(mockScope.$watch).toHaveBeenCalledWith('ngModel.selectedObject', jasmine.any(Function));
             });
 
             it("looks for contextual parent objects", function () {

platform/commonUI/regions/bundle.js

@@ -38,8 +38,7 @@ define([
                     "implementation": InspectorController,
                     "depends": [
                         "$scope",
-                        "openmct",
-                        "$document"
+                        "policyService"
                     ]
                 }
             ],

platform/commonUI/regions/src/InspectorController.js

@@ -21,69 +21,44 @@
  *****************************************************************************/
 
 define(
-    [],
-    function () {
+    ['../../browse/src/InspectorRegion'],
+    function (InspectorRegion) {
 
         /**
-         * The InspectorController listens for the selection changes and adds the selection
-         * object to the scope.
+         * The InspectorController adds region data for a domain object's type
+         * to the scope.
          *
          * @constructor
          */
-        function InspectorController($scope, openmct, $document) {
-            var self = this;
-            self.$scope = $scope;
+        function InspectorController($scope, policyService) {
+            var domainObject = $scope.domainObject,
+                typeCapability = domainObject.getCapability('type'),
+                statusListener;
 
             /**
-             * Callback handler for the selection change event.
-             * Adds the selection object to the scope. If the selected item has an inspector view,
-             * it puts the key in the scope. If provider view exists, it shows the view.
+             * Filters region parts to only those allowed by region policies
+             * @param regions
+             * @returns {{}}
              */
-            function setSelection(selection) {
-                if (selection[0]) {
-                    var view = openmct.inspectorViews.get(selection);
-                    var container = $document[0].querySelectorAll('.inspector-provider-view')[0];
-                    container.innerHTML = "";
-
-                    if (view) {
-                        self.providerView = true;
-                        view.show(container);
-                    } else {
-                        self.providerView = false;
-                        $scope.inspectorKey = selection[0].context.oldItem.getCapability("type").typeDef.inspector;
-                    }
-                }
-
-                self.$scope.selection = selection;
+            function filterRegions(inspector) {
+                //Dupe so we're not modifying the type definition.
+                return inspector.regions && inspector.regions.filter(function (region) {
+                    return policyService.allow('region', region, domainObject);
+                });
             }
 
-            openmct.selection.on("change", setSelection);
-
-            setSelection(openmct.selection.get());
+            function setRegions() {
+                $scope.regions = filterRegions(typeCapability.getDefinition().inspector || new InspectorRegion());
+            }
 
+            statusListener = domainObject.getCapability("status").listen(setRegions);
             $scope.$on("$destroy", function () {
-                openmct.selection.off("change", setSelection);
+                statusListener();
             });
+
+            setRegions();
         }
 
-        /**
-         * Gets the selected item.
-         *
-         * @returns a domain object
-         */
-        InspectorController.prototype.selectedItem = function () {
-            return this.$scope.selection[0].context.oldItem;
-        };
-
-        /**
-         * Checks if a provider view exists.
-         *
-         * @returns 'true' if provider view exists, 'false' otherwise
-         */
-        InspectorController.prototype.hasProviderView = function () {
-            return this.providerView;
-        };
-
         return InspectorController;
     }
 );

platform/commonUI/regions/test/InspectorControllerSpec.js

@@ -27,93 +27,82 @@ define(
         describe("The inspector controller ", function () {
             var mockScope,
                 mockDomainObject,
-                mockOpenMCT,
-                mockSelection,
-                mockInspectorViews,
-                mockTypeDef,
-                controller,
-                container,
-                $document = [],
-                selectable = [];
+                mockTypeCapability,
+                mockTypeDefinition,
+                mockPolicyService,
+                mockStatusCapability,
+                capabilities = {},
+                controller;
 
             beforeEach(function () {
-                mockTypeDef = {
-                    typeDef: {
-                        inspector: "some-key"
-                    }
+                mockTypeDefinition = {
+                    inspector:
+                        {
+                            'regions': [
+                                {'name': 'Part One'},
+                                {'name': 'Part Two'}
+                            ]
+                        }
                 };
 
+                mockTypeCapability = jasmine.createSpyObj('typeCapability', [
+                    'getDefinition'
+                ]);
+                mockTypeCapability.getDefinition.andReturn(mockTypeDefinition);
+                capabilities.type = mockTypeCapability;
+
+                mockStatusCapability = jasmine.createSpyObj('statusCapability', [
+                    'listen'
+                ]);
+                capabilities.status = mockStatusCapability;
+
                 mockDomainObject = jasmine.createSpyObj('domainObject', [
                     'getCapability'
                 ]);
-                mockDomainObject.getCapability.andReturn(mockTypeDef);
+                mockDomainObject.getCapability.andCallFake(function (name) {
+                    return capabilities[name];
+                });
+
+                mockPolicyService = jasmine.createSpyObj('policyService', [
+                   'allow'
+                ]);
 
                 mockScope = jasmine.createSpyObj('$scope',
-                    ['$on', 'selection']
+                    ['$on']
                 );
 
-                selectable[0] = {
-                    context: {
-                        oldItem: mockDomainObject
-                    }
-                };
-
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn(selectable);
-
-                mockInspectorViews = jasmine.createSpyObj('inspectorViews', ['get']);
-                mockOpenMCT = {
-                    selection: mockSelection,
-                    inspectorViews: mockInspectorViews
-                };
-
-                container = jasmine.createSpy('container', ['innerHTML']);
-                $document[0] = jasmine.createSpyObj("$document", ['querySelectorAll']);
-                $document[0].querySelectorAll.andReturn([container]);
-
-                controller = new InspectorController(mockScope, mockOpenMCT, $document);
+                mockScope.domainObject = mockDomainObject;
             });
 
-            it("listens for selection change event", function () {
-                expect(mockOpenMCT.selection.on).toHaveBeenCalledWith(
-                    'change',
-                    jasmine.any(Function)
-                );
-
-                expect(controller.selectedItem()).toEqual(mockDomainObject);
-
-                var mockItem = jasmine.createSpyObj('domainObject', [
-                    'getCapability'
-                ]);
-                mockItem.getCapability.andReturn(mockTypeDef);
-                selectable[0].context.oldItem = mockItem;
-
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-
-                expect(controller.selectedItem()).toEqual(mockItem);
+            it("filters out regions disallowed by region policy", function () {
+                mockPolicyService.allow.andReturn(false);
+                controller = new InspectorController(mockScope, mockPolicyService);
+                expect(mockScope.regions.length).toBe(0);
             });
 
-            it("cleans up on scope destroy", function () {
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    '$destroy',
-                    jasmine.any(Function)
-                );
-
-                mockScope.$on.calls[0].args[1]();
-
-                expect(mockOpenMCT.selection.off).toHaveBeenCalledWith(
-                    'change',
-                    jasmine.any(Function)
-                );
+            it("does not filter out regions allowed by region policy", function () {
+                mockPolicyService.allow.andReturn(true);
+                controller = new InspectorController(mockScope, mockPolicyService);
+                expect(mockScope.regions.length).toBe(2);
             });
 
-            it("adds selection object to scope", function () {
-                expect(mockScope.selection).toEqual(selectable);
-                expect(controller.selectedItem()).toEqual(mockDomainObject);
+            it("Responds to status changes", function () {
+                mockPolicyService.allow.andReturn(true);
+                controller = new InspectorController(mockScope, mockPolicyService);
+                expect(mockScope.regions.length).toBe(2);
+                expect(mockStatusCapability.listen).toHaveBeenCalled();
+                mockPolicyService.allow.andReturn(false);
+                mockStatusCapability.listen.mostRecentCall.args[0]();
+                expect(mockScope.regions.length).toBe(0);
+            });
+
+            it("Unregisters status listener", function () {
+                var mockListener = jasmine.createSpy('listener');
+                mockStatusCapability.listen.andReturn(mockListener);
+                controller = new InspectorController(mockScope, mockPolicyService);
+                expect(mockScope.$on).toHaveBeenCalledWith("$destroy", jasmine.any(Function));
+                mockScope.$on.mostRecentCall.args[1]();
+                expect(mockListener).toHaveBeenCalled();
             });
         });
     }

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

@@ -181,8 +181,6 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
-$legendHoverValueBg: rgba($colorBodyFg, 0.1);
 
 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
@@ -203,15 +201,13 @@ $shdwItemTreeIcon: 0.6;
 $colorThumbHoverBg: $colorItemTreeHoverBg;
 
 // Scrollbar
-$scrollbarTrackSize: 7px;
-$scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px;
-$scrollbarTrackColorBg: transparent; //rgba(#000, 0.4);
+$scrollbarTrackSize: 10px;
+$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
+$scrollbarTrackColorBg: 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/snow/res/sass/_constants.scss

@@ -181,8 +181,6 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
-$legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
@@ -203,15 +201,13 @@ $shdwItemTreeIcon: none;
 $colorThumbHoverBg: $colorItemTreeHoverBg;
 
 // Scrollbar
-$scrollbarTrackSize: 7px;
+$scrollbarTrackSize: 10px;
 $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/core/bundle.js

@@ -94,6 +94,31 @@ 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/features/clock/bundle.js

@@ -23,13 +23,10 @@
 define([
     "moment-timezone",
     "./src/indicators/ClockIndicator",
-    "./src/indicators/FollowIndicator",
     "./src/services/TickerService",
-    "./src/services/TimerService",
     "./src/controllers/ClockController",
     "./src/controllers/TimerController",
     "./src/controllers/RefreshingController",
-    "./src/actions/FollowTimerAction",
     "./src/actions/StartTimerAction",
     "./src/actions/RestartTimerAction",
     "./src/actions/StopTimerAction",
@@ -40,13 +37,10 @@ define([
 ], function (
     MomentTimezone,
     ClockIndicator,
-    FollowIndicator,
     TickerService,
-    TimerService,
     ClockController,
     TimerController,
     RefreshingController,
-    FollowTimerAction,
     StartTimerAction,
     RestartTimerAction,
     StopTimerAction,
@@ -86,11 +80,6 @@ define([
                         "CLOCK_INDICATOR_FORMAT"
                     ],
                     "priority": "preferred"
-                },
-                {
-                    "implementation": FollowIndicator,
-                    "depends": ["timerService"],
-                    "priority": "fallback"
                 }
             ],
             "services": [
@@ -101,11 +90,6 @@ define([
                         "$timeout",
                         "now"
                     ]
-                },
-                {
-                    "key": "timerService",
-                    "implementation": TimerService,
-                    "depends": ["openmct"]
                 }
             ],
             "controllers": [
@@ -150,15 +134,6 @@ define([
                 }
             ],
             "actions": [
-                {
-                    "key": "timer.follow",
-                    "implementation": FollowTimerAction,
-                    "depends": ["timerService"],
-                    "category": "contextual",
-                    "name": "Follow Timer",
-                    "cssClass": "icon-clock",
-                    "priority": "optional"
-                },
                 {
                     "key": "timer.start",
                     "implementation": StartTimerAction,

platform/features/clock/src/actions/FollowTimerAction.js

@@ -1,56 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Designates a specific timer for following. Timelines, for example,
-         * use the actively followed timer to display a time-of-interest line
-         * and interpret time conductor bounds in the Timeline's relative
-         * time frame.
-         *
-         * @implements {Action}
-         * @memberof platform/features/clock
-         * @constructor
-         * @param {ActionContext} context the context for this action
-         */
-        function FollowTimerAction(timerService, context) {
-            var domainObject =
-                context.domainObject &&
-                context.domainObject.useCapability('adapter');
-            this.perform =
-                timerService.setTimer.bind(timerService, domainObject);
-        }
-
-        FollowTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel()) ||
-                {};
-
-            return model.type === 'timer';
-        };
-
-        return FollowTimerAction;
-    }
-);

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

@@ -1,57 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['moment'],
-    function (moment) {
-        var NO_TIMER = "No timer being followed";
-
-        /**
-         * Indicator that displays the active timer, as well as its
-         * current state.
-         * @implements {Indicator}
-         * @memberof platform/features/clock
-         */
-        function FollowIndicator(timerService) {
-            this.timerService = timerService;
-        }
-
-        FollowIndicator.prototype.getGlyphClass = function () {
-            return "";
-        };
-
-        FollowIndicator.prototype.getCssClass = function () {
-            return (this.timerService.getTimer()) ? "icon-timer s-status-ok" : "icon-timer";
-        };
-
-        FollowIndicator.prototype.getText = function () {
-            var timer = this.timerService.getTimer();
-            return (timer) ? 'Following timer ' + timer.getModel().name : NO_TIMER;
-        };
-
-        FollowIndicator.prototype.getDescription = function () {
-            return "";
-        };
-
-        return FollowIndicator;
-    }
-);

platform/features/clock/src/services/TimerService.js

@@ -1,113 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['EventEmitter'], function (EventEmitter) {
-
-    /**
-     * Tracks the currently-followed Timer object. Used by
-     * timelines et al to synchronize to a particular timer.
-     *
-     * The TimerService emits `change` events when the active timer
-     * is changed.
-     */
-    function TimerService(openmct) {
-        EventEmitter.apply(this);
-        this.time = openmct.time;
-        this.objects = openmct.objects;
-    }
-
-    TimerService.prototype = Object.create(EventEmitter.prototype);
-
-    /**
-     * Set (or clear, if `timer` is undefined) the currently active timer.
-     * @param {DomainObject} timer the new active timer
-     * @emits change
-     */
-    TimerService.prototype.setTimer = function (timer) {
-        this.timer = timer;
-        this.emit('change');
-
-        if (this.stopObserving) {
-            this.stopObserving();
-            delete this.stopObserving;
-        }
-
-        if (timer) {
-            this.stopObserving =
-                this.objects.observe(timer, '*', this.setTimer.bind(this));
-        }
-    };
-
-    /**
-     * Get the currently active timer.
-     * @return {DomainObject} the active timer
-     * @emits change
-     */
-    TimerService.prototype.getTimer = function () {
-        return this.timer;
-    };
-
-
-    /**
-     * Check if there is a currently active timer.
-     * @return {boolean} true if there is a timer
-     */
-    TimerService.prototype.hasTimer = function () {
-        return !!this.timer;
-    };
-
-    /**
-     * Convert the provided timestamp to milliseconds relative to
-     * the active timer.
-     * @return {number} milliseconds since timer start
-     */
-    TimerService.prototype.convert = function (timestamp) {
-        var clock = this.time.clock();
-        var canConvert = this.hasTimer() &&
-            !!clock &&
-            this.timer.timerState !== 'stopped';
-
-        if (!canConvert) {
-            return undefined;
-        }
-
-        var now = clock.currentValue();
-        var delta = this.timer.timerState === 'paused' ?
-            now - this.timer.pausedTime : 0;
-        var epoch = this.timer.timestamp;
-
-        return timestamp - epoch - delta;
-    };
-
-    /**
-     * Get the value of the active clock, adjusted to be relative to the active
-     * timer. If there is no clock or no active timer, this will return
-     * `undefined`.
-     * @return {number} milliseconds since the start of the active timer
-     */
-    TimerService.prototype.now = function () {
-        var clock = this.time.clock();
-        return clock && this.convert(clock.currentValue());
-    };
-
-    return TimerService;
-});

platform/features/clock/test/actions/FollowTimerActionSpec.js

@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "../../src/actions/FollowTimerAction"
-], function (FollowTimerAction) {
-    var TIMER_SERVICE_METHODS =
-        ['setTimer', 'getTimer', 'clearTimer', 'on', 'off'];
-
-    describe("The Follow Timer action", function () {
-        var testContext;
-        var testModel;
-        var testAdaptedObject;
-
-        beforeEach(function () {
-            testModel = {};
-            testContext = { domainObject: jasmine.createSpyObj('domainObject', [
-                'getModel',
-                'useCapability'
-            ]) };
-            testAdaptedObject = { foo: 'bar' };
-            testContext.domainObject.getModel.andReturn(testModel);
-            testContext.domainObject.useCapability.andCallFake(function (c) {
-                return c === 'adapter' && testAdaptedObject;
-            });
-        });
-
-        it("is applicable to timers", function () {
-            testModel.type = "timer";
-            expect(FollowTimerAction.appliesTo(testContext)).toBe(true);
-        });
-
-        it("is inapplicable to non-timers", function () {
-            testModel.type = "folder";
-            expect(FollowTimerAction.appliesTo(testContext)).toBe(false);
-        });
-
-        describe("when instantiated", function () {
-            var mockTimerService;
-            var action;
-
-            beforeEach(function () {
-                mockTimerService = jasmine.createSpyObj(
-                    'timerService',
-                    TIMER_SERVICE_METHODS
-                );
-                action = new FollowTimerAction(mockTimerService, testContext);
-            });
-
-            it("does not interact with the timer service", function () {
-                TIMER_SERVICE_METHODS.forEach(function (method) {
-                    expect(mockTimerService[method]).not.toHaveBeenCalled();
-                });
-            });
-
-            describe("and performed", function () {
-                beforeEach(function () {
-                    action.perform();
-                });
-
-                it("sets the active timer", function () {
-                    expect(mockTimerService.setTimer)
-                        .toHaveBeenCalledWith(testAdaptedObject);
-                });
-            });
-        });
-    });
-});

platform/features/clock/test/indicators/FollowIndicatorSpec.js

@@ -1,61 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(["../../src/indicators/FollowIndicator"], function (FollowIndicator) {
-    var TIMER_SERVICE_METHODS =
-        ['setTimer', 'getTimer', 'clearTimer', 'on', 'off'];
-
-    describe("The timer-following indicator", function () {
-        var mockTimerService;
-        var indicator;
-
-        beforeEach(function () {
-            mockTimerService =
-                jasmine.createSpyObj('timerService', TIMER_SERVICE_METHODS);
-            indicator = new FollowIndicator(mockTimerService);
-        });
-
-        it("implements the Indicator interface", function () {
-            expect(indicator.getGlyphClass()).toEqual(jasmine.any(String));
-            expect(indicator.getCssClass()).toEqual(jasmine.any(String));
-            expect(indicator.getText()).toEqual(jasmine.any(String));
-            expect(indicator.getDescription()).toEqual(jasmine.any(String));
-        });
-
-        describe("when a timer is set", function () {
-            var testModel;
-            var mockDomainObject;
-
-            beforeEach(function () {
-                testModel = { name: "some timer!" };
-                mockDomainObject = jasmine.createSpyObj('timer', ['getModel']);
-                mockDomainObject.getModel.andReturn(testModel);
-                mockTimerService.getTimer.andReturn(mockDomainObject);
-            });
-
-            it("displays the timer's name", function () {
-                expect(indicator.getText().indexOf(testModel.name))
-                    .not.toEqual(-1);
-            });
-        });
-    });
-});

platform/features/clock/test/services/TimerServiceSpec.js

@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../../src/services/TimerService'
-], function (TimerService) {
-    describe("TimerService", function () {
-        var callback;
-        var mockmct;
-        var timerService;
-
-        beforeEach(function () {
-            callback = jasmine.createSpy('callback');
-            mockmct = {
-                time: { clock: jasmine.createSpy('clock') },
-                objects: { observe: jasmine.createSpy('observe') }
-            };
-            timerService = new TimerService(mockmct);
-            timerService.on('change', callback);
-        });
-
-        it("initially emits no change events", function () {
-            expect(callback).not.toHaveBeenCalled();
-        });
-
-        it("reports no current timer", function () {
-            expect(timerService.getTimer()).toBeUndefined();
-        });
-
-        describe("setTimer", function () {
-            var testTimer;
-
-            beforeEach(function () {
-                testTimer = { name: "I am some timer; you are nobody." };
-                timerService.setTimer(testTimer);
-            });
-
-            it("emits a change event", function () {
-                expect(callback).toHaveBeenCalled();
-            });
-
-            it("reports the current timer", function () {
-                expect(timerService.getTimer()).toBe(testTimer);
-            });
-
-            it("observes changes to an object", function () {
-                var newTimer = { name: "I am another timer." };
-                expect(mockmct.objects.observe).toHaveBeenCalledWith(
-                    testTimer,
-                    '*',
-                    jasmine.any(Function)
-                );
-                mockmct.objects.observe.mostRecentCall.args[2](newTimer);
-                expect(timerService.getTimer()).toBe(newTimer);
-            });
-        });
-    });
-});

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: 65px; // Default width for delta value inputs, typically 00:00:00
+$timeCondInputDeltaDefW: 60px; // 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,6 +162,9 @@
             .l-time-conductor-inputs {
                 pointer-events: auto;
             }
+            input[type="text"] {
+                @include trans-prop-nice(padding, 250ms);
+            }
             .time-range-input input[type="text"] {
                 width: $timeCondInputTimeSysDefW;
             }
@@ -287,6 +290,18 @@
 
         .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;
                 }
@@ -294,11 +309,8 @@
                     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="w-menu">
-    <div class="col menu-items">
+<div class="contents">
+    <div class="pane left menu-items">
         <ul>
             <li ng-repeat="metadata in ngModel.options"
                 ng-click="ngModel.select(metadata)">
@@ -32,15 +32,13 @@
             </li>
         </ul>
     </div>
-    <div class="col menu-item-description">
+    <div class="pane right menu-item-description">
         <div class="desc-area ui-symbol icon type-icon {{ngModel.activeMetadata.cssClass}}"></div>
-        <div class="w-title-desc">
-            <div class="desc-area title">
-                {{ngModel.activeMetadata.name}}
-            </div>
-            <div class="desc-area description">
-                {{ngModel.activeMetadata.description}}
-            </div>
+        <div class="desc-area title">
+            {{ngModel.activeMetadata.name}}
+        </div>
+        <div class="desc-area description">
+            {{ngModel.activeMetadata.description}}
         </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 l-mode-selector-menu"
+    <div class="menu super-menu mini 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="s-input-inline hrs-min-input">
+                                         class="hrs-min-input">
                             </mct-control>
                         </span>
                     </span>
@@ -71,7 +71,7 @@
                                          ng-model="boundsModel"
                                          ng-blur="tcController.setOffsetsFromView(boundsModel)"
                                          field="'endOffset'"
-                                         class="s-input-inline hrs-min-input">
+                                         class="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/imagery/src/controllers/ImageryController.js

@@ -255,8 +255,6 @@ define(
                 if (this.nextDatum) {
                     this.updateValues(this.nextDatum);
                     delete this.nextDatum;
-                } else {
-                    this.updateValues(this.$scope.imageHistory[this.$scope.imageHistory.length - 1]);
                 }
                 this.autoScroll = true;
             }

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

@@ -183,17 +183,6 @@ define(
                     expect(controller.getImageUrl()).toEqual(newUrl);
                 });
 
-                it("forwards large image view to latest image in history on un-pause", function () {
-                    $scope.imageHistory = [
-                        { utc: 1434600258122, url: 'some/url1', selected: false},
-                        { utc: 1434600258123, url: 'some/url2', selected: false}
-                    ];
-                    controller.paused(true);
-                    controller.paused(false);
-
-                    expect(controller.getImageUrl()).toEqual(controller.getImageUrl($scope.imageHistory[1]));
-                });
-
                 it("subscribes to telemetry", function () {
                     expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
                         newDomainObject,
@@ -238,7 +227,7 @@ define(
                     expect(controller.updateHistory(mockDatum)).toBe(false);
                 });
 
-                describe("when user clicks on imagery thumbnail", function () {
+                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 () {
@@ -259,7 +248,6 @@ define(
                         expect(controller.getTime()).toEqual(controller.timeFormat.format(mockDatum.utc));
                     });
                 });
-
             });
 
             it("initially shows an empty string for date/time", function () {

platform/features/layout/bundle.js

@@ -260,9 +260,7 @@ define([
                     "key": "LayoutController",
                     "implementation": LayoutController,
                     "depends": [
-                        "$scope",
-                        "$element",
-                        "openmct"
+                        "$scope"
                     ]
                 },
                 {
@@ -336,6 +334,46 @@ define([
                             "conversion": "number[]"
                         }
                     ]
+                },
+                {
+                    "key": "telemetry.panel",
+                    "name": "Telemetry Panel",
+                    "cssClass": "icon-telemetry-panel",
+                    "description": "A panel for collecting telemetry elements.",
+                    "priority": 899,
+                    "delegates": [
+                        "telemetry"
+                    ],
+                    "features": "creation",
+                    "contains": [
+                        {
+                            "has": "telemetry"
+                        }
+                    ],
+                    "model": {
+                        "composition": []
+                    },
+                    "properties": [
+                        {
+                            "name": "Layout Grid",
+                            "control": "composite",
+                            "items": [
+                                {
+                                    "name": "Horizontal grid (px)",
+                                    "control": "textfield",
+                                    "cssClass": "l-input-sm l-numeric"
+                                },
+                                {
+                                    "name": "Vertical grid (px)",
+                                    "control": "textfield",
+                                    "cssClass": "l-input-sm l-numeric"
+                                }
+                            ],
+                            "pattern": "^(\\d*[1-9]\\d*)?$",
+                            "property": "layoutGrid",
+                            "conversion": "number[]"
+                        }
+                    ]
                 }
             ]
         }

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

@@ -40,7 +40,7 @@
             's-selected': controller.selected(element)
          }"
          ng-style="element.style"
-         ng-click="controller.select(element, $event)">
+         ng-click="controller.select(element)">
         <mct-include key="element.template"
                      parameters="{ gridSize: controller.getGridSize() }"
                      ng-model="element">
@@ -53,16 +53,14 @@
              mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
              mct-drag="controller.moveHandle().continueDrag(delta)"
              mct-drag-up="controller.moveHandle().endDrag()"
-             ng-style="controller.selected().style"
-             ng-click="$event.stopPropagation()">
+             ng-style="controller.selected().style">
         </div>
         <div ng-repeat="handle in controller.handles()"
              class="l-fixed-position-item-handle edit-corner"
              ng-style="handle.style()"
              mct-drag-down="handle.startDrag()"
              mct-drag="handle.continueDrag(delta)"
-             mct-drag-up="handle.endDrag()"
-             ng-click="$event.stopPropagation()">
+             mct-drag-up="handle.endDrag()">
         </div>
     </span>
 

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-frame'"
+                    key="'object-header'"
                     mct-object="domainObject"
                     class="l-flex-row flex-elem object-header grows">
             </mct-representation>

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

@@ -22,12 +22,10 @@
 
 <div class="abs l-layout"
      ng-controller="LayoutController as controller"
-     ng-click="controller.bypassSelection($event)">
+     ng-click="controller.clearSelection()">
 
     <!-- Background grid -->
-    <div class="l-grid-holder"
-         ng-show="!controller.drilledIn"
-         ng-click="controller.bypassSelection($event)">
+    <div class="l-grid-holder" ng-click="controller.clearSelection()">
         <div class="l-grid l-grid-x"
              ng-if="!controller.getGridSize()[0] < 3"
              ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
@@ -36,12 +34,10 @@
              ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
     </div>
 
-    <div class="abs frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border {{childObject.getId() + '-' + $id}} t-object-type-{{ childObject.getModel().type }}"
-         ng-class="{ 'no-frame': !controller.hasFrame(childObject), 's-drilled-in': controller.isDrilledIn(childObject) }"
+    <div class='abs frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border'
+         ng-class="{ 'no-frame': !controller.hasFrame(childObject), 's-selected':controller.selected(childObject) }"
          ng-repeat="childObject in composition"
-         ng-init="controller.selectIfNew(childObject.getId() + '-' + $id, childObject)"
-         mct-selectable="controller.getContext(childObject, true)"
-         ng-dblclick="controller.drill($event, childObject)"
+         ng-click="controller.select($event, childObject.getId())"
          ng-style="controller.getFrameStyle(childObject.getId())">
 
         <mct-representation key="'frame'"
@@ -49,7 +45,7 @@
                             mct-object="childObject">
         </mct-representation>
         <!-- Drag handles -->
-        <span class="abs t-edit-handle-holder" ng-if="controller.selected(childObject) && !controller.isDrilledIn(childObject)">
+        <span class="abs t-edit-handle-holder s-hover-border" ng-if="controller.selected(childObject)">
             <span class="edit-handle edit-move"
                   mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
                   mct-drag="controller.continueDrag(delta)"
@@ -77,6 +73,7 @@
                   mct-drag-up="controller.endDrag()">
             </span>
         </span>
+
     </div>
 
 </div>

platform/features/layout/src/FixedController.js

@@ -360,47 +360,22 @@ define(
          */
         FixedController.prototype.updateView = function (telemetryObject, datum) {
             var metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            var telemetryKeyToDisplay = this.chooseTelemetryKeyToDisplay(metadata);
-            var formattedTelemetryValue = this.getFormattedTelemetryValueForKey(telemetryKeyToDisplay, datum, metadata);
+            var rangeMetadata = metadata.valuesForHints(['range'])[0];
+            var rangeKey = rangeMetadata.source || rangeMetadata.key;
+            var valueMetadata = metadata.value(rangeKey);
             var limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
-            var alarm = limitEvaluator && limitEvaluator.evaluate(datum, telemetryKeyToDisplay);
+            var formatter = this.openmct.telemetry.getValueFormatter(valueMetadata);
+            var value = datum[valueMetadata.key];
+            var alarm = limitEvaluator && limitEvaluator.evaluate(datum, rangeKey);
 
             this.setDisplayedValue(
                 telemetryObject,
-                formattedTelemetryValue,
+                formatter.format(value),
                 alarm && alarm.cssClass
             );
             this.digest();
         };
 
-        /**
-         * @private
-         */
-        FixedController.prototype.getFormattedTelemetryValueForKey = function (telemetryKeyToDisplay, datum, metadata) {
-            var valueMetadata = metadata.value(telemetryKeyToDisplay);
-            var formatter = this.openmct.telemetry.getValueFormatter(valueMetadata);
-
-            return formatter.format(datum[valueMetadata.key]);
-        };
-
-        /**
-         * @private
-         */
-        FixedController.prototype.chooseTelemetryKeyToDisplay = function (metadata) {
-            // If there is a range value, show that preferentially
-            var telemetryKeyToDisplay = metadata.valuesForHints(['range'])[0];
-
-            // If no range is defined, default to the highest priority non time-domain data.
-            if (telemetryKeyToDisplay === undefined) {
-                var valuesOrderedByPriority = metadata.values();
-                telemetryKeyToDisplay = valuesOrderedByPriority.filter(function (valueMetadata) {
-                    return !(valueMetadata.hints.domain);
-                })[0];
-            }
-
-            return telemetryKeyToDisplay.source;
-        };
-
         /**
          * Request the last historical data point for the given domain objects
          * @param {object[]} objects
@@ -413,9 +388,7 @@ define(
             objects.forEach(function (object) {
                 self.openmct.telemetry.request(object, {start: bounds.start, end: bounds.end, size: 1})
                     .then(function (data) {
-                        if (data.length > 0) {
-                            self.updateView(object, data[data.length - 1]);
-                        }
+                        self.updateView(object, data[data.length - 1]);
                     });
             });
             return objects;
@@ -506,11 +479,7 @@ define(
          * Set the active user selection in this view.
          * @param element the element to select
          */
-        FixedController.prototype.select = function select(element, event) {
-            if (event) {
-                event.stopPropagation();
-            }
-
+        FixedController.prototype.select = function select(element) {
             if (this.selection) {
                 // Update selection...
                 this.selection.select(element);

platform/features/layout/src/LayoutController.js

@@ -26,14 +26,8 @@
  * @namespace platform/features/layout
  */
 define(
-    [
-        'zepto',
-        './LayoutDrag'
-    ],
-    function (
-        $,
-        LayoutDrag
-    ) {
+    ['./LayoutDrag'],
+    function (LayoutDrag) {
 
         var DEFAULT_DIMENSIONS = [12, 8],
             DEFAULT_GRID_SIZE = [32, 32],
@@ -52,12 +46,10 @@ define(
          * @constructor
          * @param {Scope} $scope the controller's Angular scope
          */
-        function LayoutController($scope, $element, openmct) {
+        function LayoutController($scope) {
             var self = this,
                 callbackCount = 0;
 
-            this.$element = $element;
-
             // Update grid size when it changed
             function updateGridSize(layoutGrid) {
                 var oldSize = self.gridSize;
@@ -127,11 +119,10 @@ define(
                         self.layoutPanels(ids);
                         self.setFrames(ids);
 
-                        if (self.selectedId &&
-                            self.selectedId !== $scope.domainObject.getId() &&
-                            composition.indexOf(self.selectedId) === -1) {
-                            // Click triggers selection of layout parent.
-                            self.$element[0].click();
+                        // If there is a newly-dropped object, select it.
+                        if (self.droppedIdToSelectAfterRefresh) {
+                            self.select(null, self.droppedIdToSelectAfterRefresh);
+                            delete self.droppedIdToSelectAfterRefresh;
                         }
                     }
                 });
@@ -163,39 +154,22 @@ define(
                 }
             };
 
-            // Sets the selectable object in response to the selection change event.
-            function setSelection(selectable) {
-                var selection = selectable[0];
-
-                if (!selection) {
-                    delete self.selectedId;
-                    return;
-                }
-
-                self.selectedId = selection.context.oldItem.getId();
-                self.drilledIn = undefined;
-                self.selectable = selectable;
-            }
-
             this.positions = {};
             this.rawPositions = {};
             this.gridSize = DEFAULT_GRID_SIZE;
             this.$scope = $scope;
-            this.drilledIn = undefined;
-            this.openmct = openmct;
 
             // Watch for changes to the grid size in the model
             $scope.$watch("model.layoutGrid", updateGridSize);
 
+            $scope.$watch("selection", function (selection) {
+                this.selection = selection;
+            }.bind(this));
+
             // Update composed objects on screen, and position panes
             $scope.$watchCollection("model.composition", refreshComposition);
 
-            openmct.selection.on('change', setSelection);
-
-            $scope.$on("$destroy", function () {
-                openmct.selection.off("change", setSelection);
-            });
-
+            // Position panes where they are dropped
             $scope.$on("mctDrop", handleDrop);
         }
 
@@ -377,14 +351,37 @@ define(
         };
 
         /**
-         * Checks if the object is currently selected.
+         * Check if the object is currently selected.
          *
          * @param {string} obj the object to check for selection
          * @returns {boolean} true if selected, otherwise false
          */
         LayoutController.prototype.selected = function (obj) {
-            var sobj = this.openmct.selection.get()[0];
-            return (sobj && sobj.context.oldItem.getId() === obj.getId()) ? true : false;
+            return !!this.selectedId && this.selectedId === obj.getId();
+        };
+
+        /**
+         * Set the active user selection in this view.
+         *
+         * @param event the mouse event
+         * @param {string} id the object id
+         */
+        LayoutController.prototype.select = function (event, id) {
+            if (event) {
+                event.stopPropagation();
+                if (this.selection) {
+                    event.preventDefault();
+                }
+            }
+
+            this.selectedId = id;
+
+            var selectedObj = {};
+            selectedObj[this.frames[id] ? 'hideFrame' : 'showFrame'] = this.toggleFrame.bind(this, id);
+
+            if (this.selection) {
+                this.selection.select(selectedObj);
+            }
         };
 
         /**
@@ -393,7 +390,7 @@ define(
          * @param {string} id the object id
          * @private
          */
-        LayoutController.prototype.toggleFrame = function (id, domainObject) {
+        LayoutController.prototype.toggleFrame = function (id) {
             var configuration = this.$scope.configuration;
 
             if (!configuration.panels[id]) {
@@ -401,75 +398,21 @@ define(
             }
 
             this.frames[id] = configuration.panels[id].hasFrame = !this.frames[id];
-
-            var selection = this.openmct.selection.get();
-            selection[0].context.toolbar = this.getToolbar(id, domainObject);
-            this.openmct.selection.select(selection);  // reselect so toolbar updates
+            this.select(undefined, id); // reselect so toolbar updates
         };
 
         /**
-         * Gets the toolbar object for the given domain object.
-         *
-         * @param id the domain object id
-         * @param domainObject the domain object
-         * @returns {object}
-         * @private
+         * Clear the current user selection.
          */
-        LayoutController.prototype.getToolbar = function (id, domainObject) {
-            var toolbarObj = {};
-            toolbarObj[this.frames[id] ? 'hideFrame' : 'showFrame'] = this.toggleFrame.bind(this, id, domainObject);
-            return toolbarObj;
-        };
-
-        /**
-         * Bypasses selection if drag is in progress.
-         *
-         * @param event the angular event object
-         */
-        LayoutController.prototype.bypassSelection = function (event) {
+        LayoutController.prototype.clearSelection = function () {
             if (this.dragInProgress) {
-                if (event) {
-                    event.stopPropagation();
-                }
-                return;
-            }
-        };
-
-        /**
-         * Checks if the domain object is drilled in.
-         *
-         * @param domainObject the domain object
-         * @return true if the object is drilled in, false otherwise
-         */
-        LayoutController.prototype.isDrilledIn = function (domainObject) {
-            return this.drilledIn === domainObject.getId();
-        };
-
-        /**
-         * Puts the given object in the drilled-in mode.
-         *
-         * @param event the angular event object
-         * @param domainObject the domain object
-         */
-        LayoutController.prototype.drill = function (event, domainObject) {
-            if (event) {
-                event.stopPropagation();
-            }
-
-            if (!domainObject.getCapability('editor').inEditContext()) {
                 return;
             }
 
-            if (!domainObject.hasCapability('composition')) {
-                return;
+            if (this.selection) {
+                this.selection.deselect();
+                delete this.selectedId;
             }
-
-            // Disable since fixed position doesn't use the selection API yet
-            if (domainObject.getModel().type === 'telemetry.fixed') {
-                return;
-            }
-
-            this.drilledIn = domainObject.getId();
         };
 
         /**
@@ -491,37 +434,6 @@ define(
             return this.gridSize;
         };
 
-        /**
-         * Gets the selection context.
-         *
-         * @param domainObject the domain object
-         * @returns {object} the context object which includes
-         *                  item, oldItem and toolbar
-         */
-        LayoutController.prototype.getContext = function (domainObject, toolbar) {
-            return {
-                item: domainObject.useCapability('adapter'),
-                oldItem: domainObject,
-                toolbar: toolbar ? this.getToolbar(domainObject.getId(), domainObject) : undefined
-            };
-        };
-
-        /**
-         * Selects a newly-dropped object.
-         *
-         * @param classSelector the css class selector
-         * @param domainObject the domain object
-         */
-        LayoutController.prototype.selectIfNew = function (classSelector, domainObject) {
-            if (domainObject.getId() === this.droppedIdToSelectAfterRefresh) {
-                var selector = $(classSelector).selector;
-                setTimeout(function () {
-                    $('.' + selector)[0].click();
-                    delete this.droppedIdToSelectAfterRefresh;
-                }.bind(this), 0);
-            }
-        };
-
         return LayoutController;
     }
 );

platform/features/layout/test/FixedControllerSpec.js

@@ -178,6 +178,7 @@ define(
                     Promise.resolve(mockChildren)
                 );
 
+
                 mockScope.model = testModel;
                 mockScope.configuration = testConfiguration;
                 mockScope.selection = jasmine.createSpyObj(
@@ -193,8 +194,7 @@ define(
 
                 mockMetadata = jasmine.createSpyObj('mockMetadata', [
                     'valuesForHints',
-                    'value',
-                    'values'
+                    'value'
                 ]);
                 mockMetadata.value.andReturn({
                     key: 'value'
@@ -653,39 +653,6 @@ define(
                     });
                 });
 
-                it("selects an range value to display, if available", function () {
-                    mockMetadata.valuesForHints.andReturn([
-                        {
-                            key: 'range',
-                            source: 'range'
-                        }
-                    ]);
-                    var key = controller.chooseTelemetryKeyToDisplay(mockMetadata);
-                    expect(key).toEqual('range');
-                });
-
-                it("selects the first non-domain value to display, if no range available", function () {
-                    mockMetadata.valuesForHints.andReturn([]);
-                    mockMetadata.values.andReturn([
-                        {
-                            key: 'domain',
-                            source: 'domain',
-                            hints: {
-                                domain: 1
-                            }
-                        },
-                        {
-                            key: 'image',
-                            source: 'image',
-                            hints: {
-                                image: 1
-                            }
-                        }
-                    ]);
-                    var key = controller.chooseTelemetryKeyToDisplay(mockMetadata);
-                    expect(key).toEqual('image');
-                });
-
                 it("reflects limit status", function () {
                     mockLimitEvaluator.evaluate.andReturn({cssClass: "alarm-a"});
                     controller.updateView(mockTelemetryObject, [{

platform/features/layout/test/LayoutControllerSpec.js

@@ -32,11 +32,7 @@ define(
                 controller,
                 mockCompositionCapability,
                 mockComposition,
-                mockCompositionObjects,
-                mockOpenMCT,
-                mockSelection,
-                $element = [],
-                selectable = [];
+                mockCompositionObjects;
 
             function mockPromise(value) {
                 return {
@@ -66,6 +62,17 @@ define(
                 };
             }
 
+            // Utility function to find a watch for a given expression
+            function findWatch(expr) {
+                var watch;
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        watch = call.args[1];
+                    }
+                });
+                return watch;
+            }
+
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
@@ -81,6 +88,7 @@ define(
                 mockComposition = ["a", "b", "c"];
                 mockCompositionObjects = mockComposition.map(mockDomainObject);
 
+
                 testConfiguration = {
                     panels: {
                         a: {
@@ -95,57 +103,21 @@ define(
                 mockScope.domainObject = mockDomainObject("mockDomainObject");
                 mockScope.model = testModel;
                 mockScope.configuration = testConfiguration;
-
-                selectable[0] = {
-                    context: {
-                        oldItem: mockDomainObject
-                    }
-                };
-
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'select',
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn(selectable);
-                mockOpenMCT = {
-                    selection: mockSelection
-                };
-                $element[0] = jasmine.createSpyObj(
-                    "$element",
-                    ['click']
+                mockScope.selection = jasmine.createSpyObj(
+                    'selection',
+                    ['select', 'get', 'selected', 'deselect']
                 );
 
                 spyOn(mockScope.domainObject, "useCapability").andCallThrough();
 
-                controller = new LayoutController(mockScope, $element, mockOpenMCT);
+                controller = new LayoutController(mockScope);
                 spyOn(controller, "layoutPanels").andCallThrough();
 
+                findWatch("selection")(mockScope.selection);
+
                 jasmine.Clock.useMock();
             });
 
-            it("listens for selection change events", function () {
-                expect(mockOpenMCT.selection.on).toHaveBeenCalledWith(
-                    'change',
-                    jasmine.any(Function)
-                );
-            });
-
-            it("cleans up on scope destroy", function () {
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    '$destroy',
-                    jasmine.any(Function)
-                );
-
-                mockScope.$on.calls[0].args[1]();
-
-                expect(mockOpenMCT.selection.off).toHaveBeenCalledWith(
-                    'change',
-                    jasmine.any(Function)
-                );
-            });
-
             // Model changes will indicate that panel positions
             // may have changed, for instance.
             it("watches for changes to composition", function () {
@@ -348,35 +320,67 @@ define(
                     .not.toEqual(oldStyle);
             });
 
-            it("allows objects to be selected", function () {
+            it("allows panels to be selected", function () {
                 mockScope.$watchCollection.mostRecentCall.args[1]();
                 var childObj = mockCompositionObjects[0];
-                selectable[0].context.oldItem = childObj;
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+
+                controller.select(mockEvent, childObj.getId());
+
+                expect(mockEvent.stopPropagation).toHaveBeenCalled();
 
                 expect(controller.selected(childObj)).toBe(true);
             });
 
-            it("prevents event bubbling while drag is in progress", function () {
+            it("allows selection to be cleared", function () {
                 mockScope.$watchCollection.mostRecentCall.args[1]();
                 var childObj = mockCompositionObjects[0];
 
+                controller.select(null, childObj.getId());
+                controller.clearSelection();
+
+                expect(controller.selected(childObj)).toBeFalsy();
+            });
+
+            it("prevents clearing selection while drag is in progress", function () {
+                mockScope.$watchCollection.mostRecentCall.args[1]();
+                var childObj = mockCompositionObjects[0];
+                var id = childObj.getId();
+
+                controller.select(mockEvent, id);
+
                 // Do a drag
-                controller.startDrag(childObj.getId(), [1, 1], [0, 0]);
+                controller.startDrag(id, [1, 1], [0, 0]);
                 controller.continueDrag([100, 100]);
                 controller.endDrag();
 
-                // Because mouse position could cause the parent object to be selected, this should be ignored.
-                controller.bypassSelection(mockEvent);
+                // Because mouse position could cause clearSelection to be called, this should be ignored.
+                controller.clearSelection();
 
-                expect(mockEvent.stopPropagation).toHaveBeenCalled();
+                expect(controller.selected(childObj)).toBe(true);
 
-                // Shoud be able to select another object when dragging is done.
+                // Shoud be able to clear the selection after dragging is done.
                 jasmine.Clock.tick(0);
-                mockEvent.stopPropagation.reset();
-                controller.bypassSelection(mockEvent);
+                controller.clearSelection();
 
-                expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+                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 () {
@@ -394,37 +398,30 @@ define(
             it("hides frame when selected object has frame ", function () {
                 mockScope.$watchCollection.mostRecentCall.args[1]();
                 var childObj = mockCompositionObjects[0];
-                selectable[0].context.oldItem = childObj;
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-                var toolbarObj = controller.getToolbar(childObj.getId(), childObj);
+                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(toolbarObj.hideFrame).toBeDefined();
-                expect(toolbarObj.hideFrame).toEqual(jasmine.any(Function));
+                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];
-                selectable[0].context.oldItem = childObj;
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-                var toolbarObj = controller.getToolbar(childObj.getId(), childObj);
+                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(toolbarObj.showFrame).toBeDefined();
-                expect(toolbarObj.showFrame).toEqual(jasmine.any(Function));
-            });
-
-            it("selects the parent object when selected object is removed", function () {
-                mockScope.$watchCollection.mostRecentCall.args[1]();
-                var childObj = mockCompositionObjects[0];
-                selectable[0].context.oldItem = childObj;
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-
-                var composition = ["b", "c"];
-                mockScope.$watchCollection.mostRecentCall.args[1](composition);
-
-                expect($element[0].click).toHaveBeenCalled();
+                expect(selectedObj.showFrame).toBeDefined();
+                expect(selectedObj.showFrame).toEqual(jasmine.any(Function));
             });
 
         });