[Front-end] Normalize overlay bg color

Fixes #1617

.gitignore

@@ -36,5 +36,3 @@ protractor/logs
 
 # npm-debug log
 npm-debug.log
-
-package-lock.json

.jshintrc

@@ -21,6 +21,5 @@
     "shadow": "outer",
     "strict": "implied",
     "undef": true,
-    "unused": "vars",
-    "latedef": "nofunc"
+    "unused": "vars"
 }

API.md

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

README.md

@@ -88,7 +88,7 @@ and [`gulp`](http://gulpjs.com/).
 
 To build Open MCT for deployment:
 
-`npm run prepare`
+`npm run prepublish`
 
 This will compile and minify JavaScript sources, as well as copy over assets.
 The contents of the `dist` folder will contain a runnable Open MCT

bower.json

@@ -17,12 +17,11 @@
     "screenfull": "^3.0.0",
     "node-uuid": "^1.4.7",
     "comma-separated-values": "^3.6.4",
-    "file-saver": "^1.3.3",
+    "FileSaver.js": "^0.0.2",
     "zepto": "^1.1.6",
     "eventemitter3": "^1.2.0",
     "lodash": "3.10.1",
     "almond": "~0.3.2",
-    "html2canvas": "^0.4.1",
-    "moment-timezone": "^0.5.13"
+    "html2canvas": "^0.4.1"
   }
 }

circle.yml

@@ -1,17 +1,15 @@
-machine:
-  node:
-    version: 4.7.0
-
-dependencies:
-  pre:
-    - npm install -g npm@latest
-
 deployment:
   production:
     branch: master
     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:
@@ -24,4 +22,4 @@ test:
 general:
   branches:
     ignore:
-      - gh-pages
+      - gh-pages

docs/src/guide/index.md

@@ -2283,7 +2283,7 @@ To install build dependencies (only needs to be run once):
 
 To build:
 
-`npm run prepare`
+`npm run prepublish`
 
 This will compile and minify JavaScript sources, as well as copy over assets.
 The contents of the `dist` folder will contain a runnable Open MCT

docs/src/guide/security.md

@@ -1,121 +0,0 @@
-# Security Guide
-
-Open MCT is a rich client with plugin support that executes as a single page
-web application in a browser environment. Security concerns and
-vulnerabilities associated with the web as a platform should be considered
-before deploying Open MCT (or any other web application) for mission or
-production usage.
-
-This document describes several important points to consider when developing
-for or deploying Open MCT securely. Other resources such as
-[Open Web Application Security Project (OWASP)](https://www.owasp.org)
-provide a deeper and more general overview of security for web applications.
-
-
-## Security Model
-
-Open MCT has been architected assuming the following deployment pattern:
-
-* A tagged, tested Open MCT version will be used.
-* Externally authored plugins will be installed.
-* A server will provide persistent storage, telemetry, and other shared data.
-* Authorization, authentication, and auditing will be handled by a server.
-
-
-## Security Procedures
-
-The Open MCT team secures our code base using a combination of code review,
-dependency review, and periodic security reviews. Static analysis performed 
-during automated verification additionally safeguards against common 
-coding errors which may result in vulnerabilities.
-
-
-### Code Review
-
-All contributions are reviewed by internal team members. External
-contributors receive increased scrutiny for security and quality,
-and must sign a licensing agreement.
-
-### Dependency Review
-
-Before integrating third-party dependencies, they are reviewed for security
-and quality, with consideration given to authors and users of these
-dependencies, as well as review of open source code.
-
-### Periodic Security Reviews
-
-Open MCT's code, design, and architecture are periodically reviewed
-(approximately annually) for common security issues, such as the
-[OWASP Top Ten](https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project).
-
-
-## Security Concerns
-
-Certain security concerns deserve special attention when deploying Open MCT,
-or when authoring plugins.
-
-### Identity Spoofing
-
-Open MCT issues calls to web services with the privileges of a logged in user.
-Compromised sources (either for Open MCT itself or a plugin) could
-therefore allow malicious code to execute with those privileges.
-
-To avoid this:
-
-* Serve Open MCT and other scripts over SSL (https rather than http)
-  to prevent man-in-the-middle attacks.
-* Exercise precautions such as security reviews for any plugins or
-  applications built for or with Open MCT to reject malicious changes.
-
-### Information Disclosure
-
-If Open MCT is used to handle or display sensitive data, any components
-(such as adapter plugins) must take care to avoid leaking or disclosing
-this information. For example, avoid sending sensitive data to third-party
-servers or insecure APIs.
-
-### Data Tampering
-
-The web application architecture leaves open the possibility that direct
-calls will be made to back-end services, circumventing Open MCT entirely.
-As such, Open MCT assumes that server components will perform any necessary
-data validation during calls issues to the server.
-
-Additionally, plugins which serialize and write data to the server must
-escape that data to avoid database injection attacks, and similar.
-
-### Repudiation
-
-Open MCT assumes that servers log any relevant interactions and associates
-these with a user identity; the specific user actions taken within the
-application are assumed not to be of concern for auditing.
-
-In the absence of server-side logging, users may disclaim (maliciously,
-mistakenly, or otherwise) actions taken within the system without any
-way to prove otherwise.
-
-If keeping client-level interactions is important, this will need to be
-implemented via a plugin.
-
-### Denial-of-service
-
-Open MCT assumes that server-side components will be insulated against
-denial-of-service attacks. Services should only permit resource-intensive
-tasks to be initiated by known or trusted users.
-
-### Elevation of Privilege
-
-Corollary to the assumption that servers guide against identity spoofing,
-Open MCT assumes that services do not allow a user to act with
-inappropriately escalated privileges. Open MCT cannot protect against
-such escalation; in the clearest case, a malicious actor could interact
-with web services directly to exploit such a vulnerability.
-
-## Additional Reading
-
-The following resources have been used as a basis for identifying potential
-security threats to Open MCT deployments in preparation of this document:
-
-* [STRIDE model](https://www.owasp.org/index.php/Threat_Risk_Modeling#STRIDE)
-* [Attack Surface Analysis Cheat Sheet](https://www.owasp.org/index.php/Attack_Surface_Analysis_Cheat_Sheet)
-* [XSS Prevention Cheat Sheet](https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet)

example/generator/GeneratorProvider.js

@@ -30,8 +30,7 @@ define([
         amplitude: 1,
         period: 10,
         offset: 0,
-        dataRateInHz: 1,
-        phase: 0
+        dataRateInHz: 1
     };
 
     function GeneratorProvider() {
@@ -51,19 +50,16 @@ define([
             'amplitude',
             'period',
             'offset',
-            'dataRateInHz',
-            'phase',
+            'dataRateInHz'
         ];
 
-        request = request || {};
-
         var workerRequest = {};
 
         props.forEach(function (prop) {
             if (domainObject.telemetry && domainObject.telemetry.hasOwnProperty(prop)) {
                 workerRequest[prop] = domainObject.telemetry[prop];
             }
-            if (request && request.hasOwnProperty(prop)) {
+            if (request.hasOwnProperty(prop)) {
                 workerRequest[prop] = request[prop];
             }
             if (!workerRequest[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,35 +82,33 @@
     }
 
     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;
 
         var data = [];
 
-        for (; nextStep < end && data.length < 5000; nextStep += step) {
+        for (; nextStep < end; 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.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/plotOptions/bundle.js

@@ -0,0 +1,146 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    'legacyRegistry',
+    '../../platform/commonUI/browse/src/InspectorRegion',
+    '../../platform/commonUI/regions/src/Region'
+], function (
+    legacyRegistry,
+    InspectorRegion,
+    Region
+) {
+    "use strict";
+
+    /**
+     * Add a 'plot options' region part to the inspector region for the
+     * Telemetry Plot type only. {@link InspectorRegion} is a default region
+     * implementation that is added automatically to all types. In order to
+     * customize what appears in the inspector region, you can start from a
+     * blank slate by using Region, or customize the default inspector
+     * region by using {@link InspectorRegion}.
+     */
+    var plotInspector = new InspectorRegion(),
+     /**
+      * Two region parts are defined here. One that appears only in browse
+      * mode, and one that appears only in edit mode. For not they both point
+      * to the same representation, but a different key could be used here to
+      * include a customized representation for edit mode.
+      */
+        plotOptionsBrowseRegion = new Region({
+            name: "plot-options",
+            title: "Plot Options",
+            modes: ['browse'],
+            content: {
+                key: "plot-options-browse"
+            }
+        }),
+        plotOptionsEditRegion = new Region({
+            name: "plot-options",
+            title: "Plot Options",
+            modes: ['edit'],
+            content: {
+                key: "plot-options-browse"
+            }
+        });
+
+    /**
+     * Both parts are added, and policies of type 'region' will determine
+     * which is shown based on domain object state. A default policy is
+     * provided which will check the 'modes' attribute of the region part
+     * definition.
+     */
+    plotInspector.addRegion(plotOptionsBrowseRegion);
+    plotInspector.addRegion(plotOptionsEditRegion);
+
+    legacyRegistry.register("example/plotType", {
+        "name": "Plot Type",
+        "description": "Example illustrating registration of a new object type",
+        "extensions": {
+            "types": [
+                {
+                    "key": "plot",
+                    "name": "Example Telemetry Plot",
+                    "cssClass": "icon-telemetry-panel",
+                    "description": "For development use. A plot for displaying telemetry.",
+                    "priority": 10,
+                    "delegates": [
+                        "telemetry"
+                    ],
+                    "features": "creation",
+                    "contains": [
+                        {
+                            "has": "telemetry"
+                        }
+                    ],
+                    "model": {
+                        "composition": []
+                    },
+                    "inspector": plotInspector,
+                    "telemetry": {
+                        "source": "generator",
+                        "domains": [
+                            {
+                                "key": "time",
+                                "name": "Time"
+                            },
+                            {
+                                "key": "yesterday",
+                                "name": "Yesterday"
+                            },
+                            {
+                                "key": "delta",
+                                "name": "Delta",
+                                "format": "example.delta"
+                            }
+                        ],
+                        "ranges": [
+                            {
+                                "key": "sin",
+                                "name": "Sine"
+                            },
+                            {
+                                "key": "cos",
+                                "name": "Cosine"
+                            }
+                        ]
+                    },
+                    "properties": [
+                        {
+                            "name": "Period",
+                            "control": "textfield",
+                            "cssClass": "l-input-sm l-numeric",
+                            "key": "period",
+                            "required": true,
+                            "property": [
+                                "telemetry",
+                                "period"
+                            ],
+                            "pattern": "^\\d*(\\.\\d*)?$"
+                        }
+                    ]
+                }
+            ]
+        }
+    });
+});

example/styleguide/bundle.js

@@ -16,21 +16,23 @@ define([
                 { "key": "styleguide.intro", "name": "Introduction", "cssClass": "icon-page", "description": "Introduction and overview to the style guide" },
                 { "key": "styleguide.standards", "name": "Standards", "cssClass": "icon-page", "description": "" },
                 { "key": "styleguide.colors", "name": "Colors", "cssClass": "icon-page", "description": "" },
-                { "key": "styleguide.status", "name": "status", "cssClass": "icon-page", "description": "Limits, telemetry paused, etc." },
                 { "key": "styleguide.glyphs", "name": "Glyphs", "cssClass": "icon-page", "description": "Glyphs overview" },
                 { "key": "styleguide.controls", "name": "Controls", "cssClass": "icon-page", "description": "Buttons, selects, HTML controls" },
                 { "key": "styleguide.input", "name": "Text Inputs", "cssClass": "icon-page", "description": "Various text inputs" },
-                { "key": "styleguide.menus", "name": "Menus", "cssClass": "icon-page", "description": "Context menus, dropdowns" }
+                { "key": "styleguide.menus", "name": "Menus", "cssClass": "icon-page", "description": "Context menus, dropdowns" },
+                { "key": "styleguide.tables", "name": "Tables", "cssClass": "icon-page", "description": "" },
+                { "key": "styleguide.forms", "name": "Forms", "cssClass": "icon-page", "description": "" }
             ],
             "views": [
                 { "key": "styleguide.intro", "type": "styleguide.intro", "templateUrl": "templates/intro.html", "editable": false },
                 { "key": "styleguide.standards", "type": "styleguide.standards", "templateUrl": "templates/standards.html", "editable": false },
                 { "key": "styleguide.colors", "type": "styleguide.colors", "templateUrl": "templates/colors.html", "editable": false },
-                { "key": "styleguide.status", "type": "styleguide.status", "templateUrl": "templates/status.html", "editable": false },
                 { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "templateUrl": "templates/glyphs.html", "editable": false },
                 { "key": "styleguide.controls", "type": "styleguide.controls", "templateUrl": "templates/controls.html", "editable": false },
                 { "key": "styleguide.input", "type": "styleguide.input", "templateUrl": "templates/input.html", "editable": false },
-                { "key": "styleguide.menus", "type": "styleguide.menus", "templateUrl": "templates/menus.html", "editable": false }
+                { "key": "styleguide.menus", "type": "styleguide.menus", "templateUrl": "templates/menus.html", "editable": false },
+                { "key": "styleguide.tables", "type": "styleguide.tables", "templateUrl": "templates/tables.html", "editable": false },
+                { "key": "styleguide.forms", "type": "styleguide.forms", "templateUrl": "templates/forms.html", "editable": false }
             ],
             "roots": [
                 {
@@ -49,7 +51,6 @@ define([
                             "intro",
                             "standards",
                             "colors",
-                            "status",
                             "glyphs",
                             "styleguide:ui-elements"
                         ]
@@ -65,7 +66,9 @@ define([
                         "composition": [
                             "controls",
                             "input",
-                            "menus"
+                            "menus",
+                            "tables",
+                            "forms"
                         ]
                     }
                 }

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

@@ -21,15 +21,14 @@
  *****************************************************************************/
 .l-style-guide {
     font-size: 0.9em;
-    text-align: justify;
     margin: auto 10%;
 
     a.link {
         color: $colorKey;
     }
 
-    h1, h2, strong, b {
-        color: pullForward($colorBodyFg, 50%);
+    h1, h2 {
+        color: pullForward($colorBodyFg, 20%);
     }
 
     h2 {
@@ -45,12 +44,9 @@
         text-transform: uppercase;
     }
 
-    strong, b {
-        font-weight: normal;
-    }
-
     .w-markup {
         //Wrap markup example "pre" element
+        @include box-sizing(border-box);
         background-color: $colorCode;
         border-radius: $interiorMargin;
         display: block;
@@ -58,8 +54,6 @@
         position: relative;
     }
 
-    .w-mct-example > div { margin-bottom: $interiorMarginLg; }
-
     code,
     pre {
         font-size: 0.8rem;
@@ -70,6 +64,19 @@
         border-radius: $controlCr;
         display: inline-block;
         padding: 1px $interiorMargin;
+        &.block {
+            @include box-sizing(border-box);
+            display: block;
+            margin-bottom: $interiorMarginLg;
+            padding: $interiorMarginLg;
+            white-space: pre;
+            &.bad { background-color: $colorCodeBad; }
+            &.good { background-color: $colorCodeGood; }
+        }
+    }
+
+    p {
+        text-align: justify;
     }
 
     pre {
@@ -83,7 +90,6 @@
 
     table, ul {
         margin-bottom: $interiorMarginLg;
-        width: auto;
     }
 
     .themed {
@@ -99,67 +105,55 @@
         border-top: 1px solid rgba(#999, 0.3);
         margin-top: 2em;
         padding-top: 1em;
+    }
 
-        .cols {
-            @include display(flex);
-            @include flex-direction(row);
+    .cols {
+        @include display(flex);
+        @include flex-direction(row);
 
+        .col {
+            @include flex(1 1 auto);
+            @include box-sizing(border-box);
+            &:not(:last-child) {
+                border-right: 1px solid $colorInteriorBorder;
+                margin-right: $colGutter;
+                padding-right: $colGutter;
+            }
+            img {
+                width: 100%;
+            }
+        }
+
+        &.cols1-1 {
+            // 2 cols, equal width
             .col {
-                @include flex(1 1 auto);
-                &:not(:last-child) {
-                    $v: $interiorMargin * 4;
-                    border-right: 1px solid $colorInteriorBorder;
-                    margin-right: $v;
-                    padding-right: $v;
-                }
-                min-width: 300px;
-                img {
-                    width: 100%;
-                }
+                width: 50%;
             }
+        }
 
-            &.cols1-1 {
-                // 2 cols, equal width
-                .col {
-                    width: 50%;
-                }
+        &.cols1-2 {
+            // 3 cols, first is 1/3 of the width
+            .col:first-child {
+                width: 33%;
             }
-
-            &.cols1-2 {
-                // 3 cols, first is 1/3 of the width
-                .col:first-child {
-                    width: 33%;
-                }
-                .col:last-child {
-                    width: 66%;
-                }
+            .col:last-child {
+                width: 66%;
             }
+        }
 
-            &.cols2-1 {
-                // 3 cols, first is 2/3 of the width
-                .col:first-child {
-                    width: 66%;
-                }
-                .col:last-child {
-                    width: 33%;
-                }
+        &.cols2-1 {
+            // 3 cols, first is 2/3 of the width
+            .col:first-child {
+                width: 66%;
+            }
+            .col:last-child {
+                width: 33%;
             }
         }
     }
 
     // Example grid of glyphs
     .items-holder.grid {
-        table.details {
-            width: 100%;
-            td {
-                font-size: inherit;
-                &.label {
-                    color: pushBack($colorBodyFg, 10%);
-                    text-transform: uppercase;
-                    white-space: nowrap;
-                }
-            }
-        }
         .item.glyph-item,
         .item.swatch-item {
             margin-bottom: 50px;
@@ -172,6 +166,15 @@
                 margin: $interiorMarginLg 0;
                 text-align: center;
             }
+
+            table.details td {
+                font-size: inherit;
+                &.label {
+                    color: pushBack($colorBodyFg, 10%);
+                    text-transform: uppercase;
+                    white-space: nowrap;
+                }
+            }
         }
 
         .item.glyph-item {
@@ -205,3 +208,19 @@
     }
 }
 
+body.mobile {
+    .l-style-guide {
+        margin: auto $interiorMarginLg;
+        .cols {
+            @include flex-direction(column);
+            .col {
+                border-right: none;
+                margin-bottom: $colGutter;
+                margin-right: 0;
+                padding-right: 0;
+                width: auto !important;
+            }
+        }
+    }
+}
+

example/styleguide/res/sass/style-guide-espresso.scss

@@ -29,7 +29,10 @@
 
 // Thematic constants
 $colorCode: rgba(black, 0.2);
+$colorCodeBad: rgba(red, 0.2);
+$colorCodeGood: rgba(green, 0.2);
 $colorGlyphExample: #fff;
+$colGutter: $interiorMargin * 4;
 
 @import "style-guide-base";
 

example/styleguide/res/sass/style-guide-snow.scss

@@ -29,7 +29,10 @@
 
 // Thematic constants
 $colorCode: rgba(black, 0.1);
+$colorCodeBad: rgba(red, 0.2);
+$colorCodeGood: rgba(green, 0.2);
 $colorGlyphExample: darken($colorBodyBg, 30%);
+$colGutter: $interiorMargin * 4;
 
 @import "style-guide-base";
 

example/styleguide/res/templates/controls.html

@@ -25,7 +25,7 @@
 
     <div class="l-section">
         <h2>Standard Buttons</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
                 <p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
@@ -41,7 +41,7 @@
 
     <div class="l-section">
         <h2>&quot;Major&quot; Buttons</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add <code>.major</code> to any element that uses <code>.s-button</code>.</p>
             </div>
@@ -53,7 +53,7 @@
 
     <div class="l-section">
         <h2>Button Sets</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.</p>
                 <p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
@@ -69,7 +69,7 @@
 
     <div class="l-section">
         <h2>Icon-only Buttons</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>When a button is presented within another control it may be advantageous to avoid visual clutter by using an icon-only button. These type of controls present an icon without the &quot;base&quot; of standard buttons. Icon-only buttons should only be used in a context where they are clearly an interactive element and not an object-type identifier, and should not be used with text.</p>
             </div>
@@ -80,7 +80,7 @@
 
     <div class="l-section">
         <h2>Checkboxes</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
                 <p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
@@ -104,7 +104,7 @@
 
     <div class="l-section">
         <h2>Radio Buttons</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Radio buttons use the same technique as checkboxes above.</p>
             </div>
@@ -128,7 +128,7 @@
 
     <div class="l-section">
         <h2>Selects</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms. The <code>select</code> element is wrapped by another element, such as a <code>div</code>, which acts as the main display element for the styling. The <code>select</code> provides the click and select functionality, while having all of its native look-and-feel suppressed.</p>
             </div>
@@ -147,7 +147,7 @@
 
     <div class="l-section">
         <h2>Local Controls</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Local controls are typically buttons and selects that provide local control to an individual element. Typically, these controls are hidden in order to not block data display until the user hovers their cursor over an element, when the controls are displayed using a transition fade. Mousing out of the element fades the controls from view.</p>
             </div>

example/styleguide/res/templates/formatting.html

@@ -0,0 +1,66 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Formatting</h1>
+
+    <div class="l-section">
+        <h2>ID and Class Naming</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <ul>
+                    <li>ID and class names should be human-readable: use names that are as short as possible while long enough to be meaningful. Ideally, names are semantic to the purpose of the element. Avoid names that don't convey meaning.</li>
+                    <li>Avoid class names that refer overtly to the presentation of an object (e.g. <code>.red</code>) - this strategy is brittle and doesn't allow for themeing.</li>
+                    <li>Generic names may be used for classes that serve as &quot;helpers&quot; such as <code>.alt</code>.</li>
+                </ul>
+            </div>
+            <div class="col">
+                <h3>Bad</h3>
+<code class="block bad">/* Not recommended, meaningless */
+.eg-991 {}
+
+/* Not recommended, presentational */
+.red {}
+.left {}
+</code>
+                <h3>Good</h3>
+<code class="block good">/* Recommended, meaningful */
+.form-row {}
+.form-section {}
+.plot-axis-x {}
+
+/* Recommended, specific */
+.limit-lower {}
+.limit-upper {}
+
+/* Recommended, generic */
+.align-right {}
+.ellipsis {}
+</code>
+
+            </div>
+        </div>
+
+
+    </div>
+
+</div>

example/styleguide/res/templates/forms.html

@@ -0,0 +1,284 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Forms</h1>
+
+    <div class="l-section">
+        <h2>Forms</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Content TK</p>
+            </div>
+<mct-example><div class="hint" style="margin-bottom: 5px;">All fields marked <span class="req icon-asterisk"></span> are required.</div>
+<form class="form validates l-flex-col">
+    <span class="l-form-section l-flex-col flex-elem">
+        <div class="section-header flex-elem">Properties</div>
+        <div class="form-row validates l-flex-row flex-elem first req">
+            <div class="label flex-elem">
+                Title
+            </div>
+            <div class="controls flex-elem">
+                <div class="wrapper">
+                    <span class="form-control">
+                        <span class="field control l-input-lg">
+                            <input type="text">
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-row l-flex-row flex-elem validates req invalid">
+            <div class="label flex-elem">
+                Target
+            </div>
+            <div class="controls flex-elem">
+                <div class="wrapper">
+                    <div class="form-control complex datetime">
+                        <div class="field-hints">
+                            <span class="hint date">Date</span>
+                            <span class="hint time sm">Hour</span>
+                            <span class="hint time sm">Min</span>
+                            <span class="hint time sm">Sec</span>
+                            <span class="hint timezone">Timezone</span>
+                        </div>
+                        <div class="fields">
+                            <span class="field control date">
+                                <input type="text" name="date" placeholder="YYYY-MM-DD" ng-pattern="/\d\d\d\d-\d\d-\d\d/" value="foo">
+                            </span>
+                            <span class="field control time sm">
+                                <input type="number" name="hour" maxlength="2" min="0" max="23" integer="" ng-pattern="/\d+/">
+                            </span>
+                            <span class="field control time sm">
+                                <input type="number" name="min" maxlength="2" min="0" max="59" integer="" ng-pattern="/\d+/">
+                            </span>
+                            <span class="field control time sm">
+                                <input type="number" name="sec" maxlength="2" min="0" max="59" integer="" ng-pattern="/\d+/">
+                            </span>
+                            <span class="field control timezone">
+                                UTC
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-row l-flex-row flex-elem validates valid">
+            <div class="label flex-elem">
+                Layout Grid
+            </div>
+            <div class="controls flex-elem">
+                <div class="wrapper">
+                    <div class="l-composite-control l-textfield l-input-sm l-numeric">
+                        <span class="form-control shell ng-scope">
+                            <span class="field control ">
+                                <input type="number" min="1" value="10">
+                            </span>
+                        </span>
+                        <span class="composite-control-label ng-binding">
+                            Horizontal grid (px)
+                        </span>
+                    </div>
+                    <div class="l-composite-control l-textfield l-input-sm l-numeric">
+                        <span class="form-control shell ng-scope">
+                            <span class="field control ">
+                                <input type="number" min="1" value="10">
+                            </span>
+                        </span>
+                        <span class="composite-control-label ng-binding">
+                            Vertical grid (px)
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-row l-flex-row flex-elem">
+            <div class="label flex-elem">
+                Notes
+            </div>
+            <div class="controls flex-elem">
+                <div class="wrapper">
+                    <span class="form-control shell">
+                        <span class="field control l-textarea-sm">
+                            <textarea></textarea>
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </div>
+
+    </span>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <span ng-repeat="section in structure.sections" class="l-form-section l-flex-col flex-elem grows">
+        <div class="section-header flex-elem">Location
+        </div><!-- end ngIf: section.name -->
+                    <!-- ngRepeat: row in section.rows --><ng-form class="form-row validates l-flex-row flex-elem grows first ng-valid-required ng-valid-pattern ng-invalid ng-invalid-composition" ng-class="{
+                 first:$index < 1,
+                 req: row.required,
+                 valid: mctFormInner.$dirty &amp;&amp; mctFormInner.$valid,
+                 invalid: mctFormInner.$dirty &amp;&amp; !mctFormInner.$valid,
+                 first: $index < 1,
+                'l-controls-first': row.layout === 'control-first',
+                'l-controls-under': row.layout === 'controls-under'
+                 }" name="mctFormInner" ng-repeat="row in section.rows">
+            <div class="label flex-elem" title="">
+                Save In
+            </div>
+            <div class="controls flex-elem">
+                <!-- ngIf: row.control --><div class="wrapper" ng-if="row.control">
+                    <mct-control key="row.control" ng-model="ngModel" ng-required="row.required" ng-pattern="/\S/" options="row.options" structure="row" field="row.key" class="ng-pristine ng-untouched ng-isolate-scope ng-valid-required ng-valid-pattern ng-invalid ng-invalid-composition"><!--
+ Open MCT, Copyright (c) 2014-2017, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div ng-controller="LocatorController" class="selector-list">
+    <div class="wrapper">
+        <mct-representation key="'tree'" mct-object="rootObject" ng-model="treeModel" class="ng-pristine ng-untouched ng-valid ng-isolate-scope"><!--
+ 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.
+-->
+<mct-tree root-object="domainObject" selected-object="ngModel.selectedObject" on-selection="ngModel.onSelection" allow-selection="ngModel.allowSelection" class="ng-scope ng-isolate-scope">
+<ul class="tree"><li><span class="tree-item menus-to-left">
+<span class="ui-symbol view-control flex-elem has-children">
+</span><span class="rep-object-label" draggable="true">
+    <div class="t-object-label l-flex-row flex-elem grows">
+        <div class="t-item-icon flex-elem icon-folder"></div>
+        <div class="t-title-label flex-elem grows">Style Guide Home</div>
+    </div>
+</span></span>
+<span class="tree-item-subtree">
+</span></li><li><span class="tree-item menus-to-left">
+<span class="ui-symbol view-control flex-elem has-children">
+</span><span class="rep-object-label" draggable="true">
+    <div class="t-object-label l-flex-row flex-elem grows">
+        <div class="t-item-icon flex-elem icon-folder"></div>
+        <div class="t-title-label flex-elem grows">My Items</div>
+    </div>
+</span></span>
+<span class="tree-item-subtree">
+</span></li></ul></mct-tree>
+
+</mct-representation>
+    </div>
+</div>
+</mct-control>
+                </div><!-- end ngIf: row.control -->
+            </div>
+        </ng-form><!-- end ngRepeat: row in section.rows -->
+    </span><!-- end ngRepeat: section in structure.sections -->
+                </form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+            </mct-example>
+        </div>
+    </div>
+
+</div>
+
+

example/styleguide/res/templates/glyphs.html

@@ -48,9 +48,7 @@
 { 'meaning': 'General usage plus symbol; used in timer object', 'cssClass': 'icon-plus', 'cssContent': 'e926', 'htmlEntity': '&#xe926' },
 { 'meaning': 'Delete', 'cssClass': 'icon-trash', 'cssContent': 'e927', 'htmlEntity': '&#xe927' },
 { 'meaning': 'Close, remove', 'cssClass': 'icon-x', 'cssContent': 'e928', 'htmlEntity': '&#xe928' },
-{ 'meaning': 'Enclosing, inclusive; used in Time Conductor', 'cssClass': 'icon-brackets', 'cssContent': 'e929', 'htmlEntity': '&#xe929' },
-{ 'meaning': 'Something is targeted', 'cssClass': 'icon-crosshair', 'cssContent': 'e930', 'htmlEntity': '&#xe930' },
-{ 'meaning': 'Draggable', 'cssClass': 'icon-grippy', 'cssContent': 'e931', 'htmlEntity': '&#xe931' }
+{ 'meaning': 'Enclosing, inclusive; used in Time Conductor', 'cssClass': 'icon-brackets', 'cssContent': 'e929', 'htmlEntity': '&#xe929' }
 ]; controls= [{ 'meaning': 'Reset zoom/pam', 'cssClass': 'icon-arrows-out', 'cssContent': 'e1000', 'htmlEntity': '&#xe1000' },
 { 'meaning': 'Expand vertically', 'cssClass': 'icon-arrows-right-left', 'cssContent': 'e1001', 'htmlEntity': '&#xe1001' },
 { 'meaning': 'View scrolling', 'cssClass': 'icon-arrows-up-down', 'cssContent': 'e1002', 'htmlEntity': '&#xe1002' },
@@ -86,17 +84,10 @@
 { 'meaning': 'Image thumbs strip; view items grid', 'cssClass': 'icon-thumbs-strip', 'cssContent': 'e1033', 'htmlEntity': '&#xe1033' },
 { 'meaning': 'Two part item, both parts', 'cssClass': 'icon-two-parts-both', 'cssContent': 'e1034', 'htmlEntity': '&#xe1034' },
 { 'meaning': 'Two part item, one only', 'cssClass': 'icon-two-parts-one-only', 'cssContent': 'e1035', 'htmlEntity': '&#xe1035' },
-{ 'meaning': 'Resync', 'cssClass': 'icon-resync', 'cssContent': 'e1036', 'htmlEntity': '&#xe1036' },
-{ 'meaning': 'Reset', 'cssClass': 'icon-reset', 'cssContent': 'e1037', 'htmlEntity': '&#xe1037' },
 { 'meaning': 'Clear', 'cssClass': 'icon-x-in-circle', 'cssContent': 'e1038', 'htmlEntity': '&#xe1038' },
 { 'meaning': 'Brightness', 'cssClass': 'icon-brightness', 'cssContent': 'e1039', 'htmlEntity': '&#xe1039' },
 { 'meaning': 'Contrast', 'cssClass': 'icon-contrast', 'cssContent': 'e1040', 'htmlEntity': '&#xe1040' },
-{ 'meaning': 'Expand', 'cssClass': 'icon-expand', 'cssContent': 'e1041', 'htmlEntity': '&#xe1041' },
-{ 'meaning': 'View items in a tabular list', 'cssClass': 'icon-list-view', 'cssContent': 'e1042', 'htmlEntity': '&#xe1042' },
-{ 'meaning': 'Snap an object corner to a grid', 'cssClass': 'icon-grid-snap-to', 'cssContent': 'e1043', 'htmlEntity': '&#xe1043' },
-{ 'meaning': 'Do not snap an object corner to a grid', 'cssClass': 'icon-grid-snap-no', 'cssContent': 'e1044', 'htmlEntity': '&#xe1044' },
-{ 'meaning': 'Show an object frame in a Display Layout', 'cssClass': 'icon-frame-show', 'cssContent': 'e1045', 'htmlEntity': '&#xe1045' },
-{ 'meaning': 'Do not show an object frame in a Display Layout', 'cssClass': 'icon-frame-hide', 'cssContent': 'e1046', 'htmlEntity': '&#xe1046' }
+{ 'meaning': 'Expand', 'cssClass': 'icon-expand', 'cssContent': 'e1041', 'htmlEntity': '&#xe1041' }
 ]; objects= [{ 'meaning': 'Activity', 'cssClass': 'icon-activity', 'cssContent': 'e1100', 'htmlEntity': '&#xe1100' },
 { 'meaning': 'Activity Mode', 'cssClass': 'icon-activity-mode', 'cssContent': 'e1101', 'htmlEntity': '&#xe1101' },
 { 'meaning': 'Auto-flow Tabular view', 'cssClass': 'icon-autoflow-tabular', 'cssContent': 'e1102', 'htmlEntity': '&#xe1102' },
@@ -126,9 +117,7 @@
 { 'meaning': 'Timeline object', 'cssClass': 'icon-timeline', 'cssContent': 'e1126', 'htmlEntity': '&#xe1126' },
 { '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': 'Fixed Position object', 'cssClass': 'icon-box-with-dashed-lines', 'cssContent': 'e1129', 'htmlEntity': '&#xe1129' }
 ];
 "></div>
 
@@ -150,10 +139,10 @@
 
     <div class="l-section">
         <h2>How to Use Glyphs</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
-                <p>The easiest way to use a glyph is to include its CSS class in an element. The CSS adds a psuedo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
-                <p>Alternately, you can use the <code>.ui-symbol</code> class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach.</p>
+                <p>The easiest way to use a glyph is to include its CSS class in element. The CSS adds a psuedo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
+                <p>Alternately, you can use the <code>.ui-symbol</code> class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach for some reason.</p>
             </div>
             <mct-example><a class="s-button icon-gear" title="Settings"></a>
 <br /><br />
@@ -171,8 +160,8 @@
             <div class="item glyph-item" ng-repeat="glyph in general">
                 <div class="glyph" ng-class="glyph.cssClass"></div>
                 <table class="details">
-                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
                     <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
+                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
                     <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
                     <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
                 </table>
@@ -187,8 +176,8 @@
             <div class="item glyph-item" ng-repeat="glyph in controls">
                 <div class="glyph" ng-class="glyph.cssClass"></div>
                 <table class="details">
-                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
                     <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
+                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
                     <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
                     <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
                 </table>
@@ -203,8 +192,8 @@
             <div class="item glyph-item" ng-repeat="glyph in objects">
                 <div class="glyph" ng-class="glyph.cssClass"></div>
                 <table class="details">
-                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
                     <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
+                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
                     <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
                     <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
                 </table>

example/styleguide/res/templates/input.html

@@ -28,7 +28,7 @@
 
     <div class="l-section">
         <h2>Text Inputs</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Use a text input where the user should enter relatively short text entries.</p>
                 <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
@@ -48,9 +48,23 @@
         </div>
     </div>
 
+    <div class="l-section">
+        <h2>Number Inputs</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Use a number input to limit the user to numeric input. </p>
+                <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
+            </div>
+            <mct-example><input type="number" min="0" step="1" class="sm" />
+<br /><br />
+<input type="number" min="0" step="10" placeholder="1" />
+            </mct-example>
+        </div>
+    </div>
+
     <div class="l-section">
         <h2>Textareas</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Use a textarea where the user should enter relatively longer or multi-line text entries.</p>
                 <p>By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>

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

@@ -1,8 +1,8 @@
 <div class="col">
+    <h3>Example</h3>
+    <div></div>
     <h3>Markup</h3>
     <span class="w-markup">
         <pre></pre>
     </span>
-    <h3>Example</h3>
-    <div class="w-mct-example"></div>
 </div>

example/styleguide/res/templates/menus.html

@@ -25,7 +25,7 @@
 
     <div class="l-section">
         <h2>Context Menus</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Context menus are used extensively in Open MCT. They are created dynamically upon a contextual click and positioned at the user's cursor position coincident with the element that invoked them. Context menus must use absolute position and utilize a z-index that places them above other in-page elements.</p>
                 <p>See <a class="link" href="http://localhost:8080/#/browse/styleguide:home/controls?view=styleguide.standards">User Interface Standards</a> for more details on z-indexing in Open MCT. Context menus should be destroyed if the user clicks outside the menu element.</p>
@@ -46,10 +46,10 @@
 
     <div class="l-section">
         <h2>Dropdown Menus</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
                 <p>Dropdown menus are a dedicated, more discoverable context menu for a given object. Like context menus, dropdown menus are used extensively in Open MCT, and are most often associated with object header elements. They visually manifest as a downward pointing arrow <span class="context-available"></span> associated with an element, and when clicked displays a context menu at that location. See guidelines above about context menus in regards to z-indexing and element lifecycle.</p>
-                <p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
+                <p>Use a dropdown menu to encapsulate the important actions of an object in its header, or in a place that you'd normally use a context menu, but want to make the availability of the menu more apparent.</p>
             </div>
 <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
 
@@ -71,10 +71,9 @@
 
     <div class="l-section">
         <h2>Checkbox Menus</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
-                <p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this to </p>
-                <p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
+                <p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this interface when you need to provide a quickly accessible multi-selection interface that disappears when not needed. For example, this element is used currently in our Search menu that allows users to filter results by a specific object type.</p>
             </div>
 <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
 <div ng-controller="SearchMenuController as controller" class="ng-scope">
@@ -119,19 +118,19 @@
 
     <div class="l-section">
         <h2>Palettes</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
             <div class="col">
-                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one. Selected palette choices should utilize the <code>selected</code> CSS class to visualize indicate that state.</p>
-                <p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
+                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one.</p>
+                <p>Note that while this example uses static markup for illustrative purposes, we recommend that you use a front-end library with repeaters to build the color choices instead.</p>
             </div>
             <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
 
 <div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
     <span class="l-click-area" ng-click="toggle.toggle()"></span>
     <span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
-    <div class="menu l-palette l-color-palette" ng-show="toggle.isActive()">
+    <div class="menu l-color-palette" ng-show="toggle.isActive()">
         <div class="l-palette-row l-option-row">
-            <div class="l-palette-item s-palette-item no-selection"></div>
+            <div class="l-palette-item s-palette-item " ng-click="ngModel[field] = 'transparent'"></div>
             <span class="l-palette-item-label">None</span>
         </div>
         <div class="l-palette-row">
@@ -147,7 +146,7 @@
             <div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
         </div>
         <div class="l-palette-row">
-            <div class="l-palette-item s-palette-item selected" style="background: rgb(255, 0, 0);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(136, 32, 32);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
             <div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>

example/styleguide/res/templates/status.html

@@ -1,142 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<style>
-    .w-mct-example div[class*="s-limit"],
-    .w-mct-example div[class*="s-status"],
-    .w-mct-example div[class*="s-unsynced"],
-    .w-mct-example span[class*="s-limit"] {
-        border-radius: 4px;
-        padding: 3px 7px;
-    }
-    .w-mct-example table {
-        width: 100%;
-    }
-</style>
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Status Indication</h1>
-
-    <div class="l-section">
-        <h2>Overview</h2>
-        <p>Many elements in Open MCT need to articulate a dynamic status; Open MCT provides the following styles and conventions to handle this:</p>
-        <ul>
-            <li><strong>Limits</strong>: when telemetry values exceed minimum or maximum values, they can be violating limits. Limit styles include both color and iconography; color is used to indicate severity while icons are used to indicate direction, upper or lower.</li>
-            <li><strong>Status</strong>: Open MCT also provides a number or built-in Status styles allowing telemetry or other displayed information to be visually classified by type. Common uses for these classes are to visually denote event records.</li>
-            <li><strong>Synchronization</strong>: When the system is displaying real-time data, it is very important that displays clearly indicate when they are not doing so, such as when a plot if frozen while panning or zooming. Open MCT provides a style for this.</li>
-        </ul>
-    </div>
-
-    <div class="l-section">
-        <h2>Limits</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Limit CSS classes can be applied to any block or inline element. Open MCT limit classes set color and optionally an icon, but don't effect other properties. Yellow and red limit classes can be used as is, or allow the application of any custom icon available in Open MCT's glyphs library. &quot;Level&quot; limit classes - upper and lower - always use an icon in addition to a color; Open MCT doesn't support level limits without color.</p>
-                <ul>
-                    <li>Color only</li>
-                    <ul>
-                        <li><code>s-limit-yellow</code>: A yellow limit.</li>
-                        <li><code>s-limit-red</code>: A red limit.</li>
-                    </ul>
-                    <li>Color and icon</li>
-                    <ul>
-                        <li><code>s-limit-yellow-icon</code>: A yellow limit with icon.</li>
-                        <li><code>s-limit-red-icon</code>: A red limit with icon.</li>
-                    </ul>
-                    <li>Upper and lower limit indicators. Must be used with a color limit class to be visible.</li>
-                    <ul>
-                        <li><code>s-limit-upr</code>: Upper limit.
-                        </li>
-                        <li><code>s-limit-lwr</code>: Lower limit.
-                        </li>
-                    </ul>
-                </ul>
-            </div>
-<mct-example><div class="s-limit-yellow">Yellow limit</div>
-<div class="s-limit-red">Red limit</div>
-<div class="s-limit-yellow-icon">Yellow limit with icon</div>
-<div class="s-limit-red-icon">Red limit with icon</div>
-<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
-<div class="s-limit-red s-limit-upr">Upper red limit</div>
-<div class="s-limit-red icon-bell">Red Limit with a custom icon</div>
-<div>Some text with an <span class="s-limit-yellow-icon">inline element</span> showing a yellow limit.</div>
-
-<!-- Limits applied in a table -->
-<table>
-    <tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
-    <tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
-    <tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
-    <tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-bell">0.451</td><td>1.007</td></tr>
-</table>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Status</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Classes here can be applied to elements as needed.</p>
-                <ul>
-                    <li>Color only</li>
-                    <ul>
-                        <li><code>s-status-warning-hi</code></li>
-                        <li><code>s-status-warning-lo</code></li>
-                        <li><code>s-status-diagnostic</code></li>
-                        <li><code>s-status-info</code></li>
-                        <li><code>s-status-ok</code></li>
-                    </ul>
-                    <li>Color and icon</li>
-                    <ul>
-                        <li><code>s-status-warning-hi-icon</code></li>
-                        <li><code>s-status-warning-lo-icon</code></li>
-                        <li><code>s-status-diagnostic-icon</code></li>
-                        <li><code>s-status-info-icon</code></li>
-                        <li><code>s-status-ok-icon</code></li>
-                    </ul>
-                </ul>
-            </div>
-<mct-example><div class="s-status-warning-hi">WARNING HI</div>
-<div class="s-status-warning-lo">WARNING LOW</div>
-<div class="s-status-diagnostic">DIAGNOSTIC</div>
-<div class="s-status-info">INFO</div>
-<div class="s-status-ok">OK</div>
-<div class="s-status-warning-hi-icon">WARNING HI with icon</div>
-<div class="s-status-warning-lo-icon">WARNING LOW with icon</div>
-<div class="s-status-diagnostic-icon">DIAGNOSTIC with icon</div>
-<div class="s-status-info-icon">INFO with icon</div>
-<div class="s-status-ok-icon">OK with icon</div>
-<div class="s-status-warning-hi icon-gear">WARNING HI with custom icon</div>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Synchronization</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>When the system is operating in real-time streaming mode, it is important for views that display real-time data to clearly articulate when they are not, such as when a user zooms or pans a plot view, freezing that view. In that case, the CSS class <code>s-unsynced</code> should be applied to that view.</p>
-            </div>
-<mct-example><div class="s-unsynced">This element is unsynced</div>
-</mct-example>
-        </div>
-    </div>
-</div>

example/styleguide/res/templates/tables.html

@@ -0,0 +1,98 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Tables</h1>
+
+    <div class="l-section">
+        <h2>Simple Table</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Tables in Open MCT are used to display data in a rows and columns format. There's no need to add any CSS classes to markup to effect the proper look, but be sure to use <code>&lt;th&gt;</code>'s in the <code>&lt;thead&gt;</code> section to get the proper look.</p>
+                <p>We recommend using class <code>numeric</code> in columns that display numbers: this class right-aligns the text and allows numbers to be compared more easily.</p>
+            </div>
+<mct-example><table>
+    <thead>
+        <tr><th>Telemetry ID</th><th>Title</th><th>DN</th><th>EU</th><th>Status</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>ECA-250-28-E</td><td>Data Power Conduit A</td><td class='numeric'>3.440</td><td class='numeric'></td><td>stale</td></tr>
+        <tr><td>ECG-841-04-E</td><td>Containment Power Bus B</td><td class='numeric'>97.710</td><td class='numeric'></td><td>alert</td></tr>
+        <tr><td>ECH-526-13-D</td><td>Containment Pressure Bus B</td><td class='numeric'>9.510</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECL-498-70-C</td><td>Monitors Fuel Side Bus C</td><td class='numeric'>41.300</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECN-545-31-A</td><td>Containment Power Side Bus C</td><td class='numeric'>73.390</td><td class='numeric'>6.116</td><td>alert</td></tr>
+    </tbody>
+</table>
+            </mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Sortable Table</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Table headers typically enable users to sort the table by a given column either ascending or descending. Clicking on the header sorts by that column, first ascending, then toggling to descending. Sometimes, particularly with data, there is a use case to display and maintain the &quot;original&quot; no-sorted order: however the data arrives, display it in that order. In that case, we recommend that clicking a header repeatedly would first sort ascending, then descending, then back to the original order - no sort.</p>
+                <p>Note that this table illustrates sorting by Telemetry ID ascending and isn't functional: clicking the headers won't do anything. </p>
+                <p>Use the following CSS classes: add <code>sortable</code> to each <code>&lt;th&gt;</code> that is capable of sorting. The column that is currently driving the sort order should also be given the <code>sort</code> class. Finally, the sort direction is indicated with the addition of <code>asc</code> or <code>desc</code>. For example, a column that is currently sorting descending would have these classes attached to it: <code>sortable sort desc</code>.</p>
+                <p>Attach click handlers to the entire <code>&lt;th&gt;</code> element (not just to a link within) in order to maximize the usable click area in the header.</p>
+            </div>
+<mct-example><table>
+    <thead>
+        <tr><th class='sortable sort asc'>Telemetry ID</th><th class='sortable'>Title</th><th class='sortable'>DN</th><th class='sortable'>EU</th><th class='sortable'>Status</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>ECA-250-28-E</td><td>Data Power Conduit A</td><td class='numeric'>3.440</td><td class='numeric'></td><td>stale</td></tr>
+        <tr><td>ECG-841-04-E</td><td>Containment Power Bus B</td><td class='numeric'>97.710</td><td class='numeric'></td><td>alert</td></tr>
+        <tr><td>ECH-526-13-D</td><td>Containment Pressure Bus B</td><td class='numeric'>9.510</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECL-498-70-C</td><td>Monitors Fuel Side Bus C</td><td class='numeric'>41.300</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECN-545-31-A</td><td>Containment Power Side Bus C</td><td class='numeric'>73.390</td><td class='numeric'>6.116</td><td>alert</td></tr>
+    </tbody>
+</table>
+            </mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Table with Filters</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Table styles also support the addition of column filters. Simply add <code>filterable</code> to the table's class attribute, and add text or number inputs to a row in the <code>&lt;thead&gt;</code> for each column that is filterable. Filtering should take place for each key press in a given field.</p>
+            </div>
+<mct-example><table class="filterable">
+    <thead>
+        <tr><th class='sortable sort asc'>Telemetry ID</th><th class='sortable'>Title</th><th class='sortable'>DN</th><th class='sortable'>EU</th><th class='sortable'>Status</th></tr>
+        <tr><th><input type='text' /></th><th><input type='text' /></th><th><input type='number' step="0.001" /></th><th><input type='number' step="0.001" /></th><th><input type='text' /></th></tr>
+    </thead>
+    <tbody>
+        <tr><td>ECA-250-28-E</td><td>Data Power Conduit A</td><td class='numeric'>3.440</td><td class='numeric'></td><td>stale</td></tr>
+        <tr><td>ECG-841-04-E</td><td>Containment Power Bus B</td><td class='numeric'>97.710</td><td class='numeric'></td><td>alert</td></tr>
+        <tr><td>ECH-526-13-D</td><td>Containment Pressure Bus B</td><td class='numeric'>9.510</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECL-498-70-C</td><td>Monitors Fuel Side Bus C</td><td class='numeric'>41.300</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECN-545-31-A</td><td>Containment Power Side Bus C</td><td class='numeric'>73.390</td><td class='numeric'>6.116</td><td>alert</td></tr>
+    </tbody>
+</table>
+            </mct-example>
+        </div>
+    </div>
+</div>
+
+

example/styleguide/src/ExampleStyleGuideModelProvider.js

@@ -34,10 +34,11 @@ define(
             pages['standards'] = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" };
             pages['colors'] = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" };
             pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" };
-            pages['status'] = { name: "Status Indication", type: "styleguide.status", location: "styleguide:home" };
             pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" };
             pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" };
             pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };
+            pages['tables'] = { name: "Tables", type: "styleguide.tables", location: "styleguide:ui-elements" };
+            pages['forms'] = { name: "Forms", type: "styleguide.forms" };
 
             return {
                 getModels: function () {

gulpfile.js

@@ -22,8 +22,6 @@
 
 /*global require,__dirname*/
 
-require("v8-compile-cache");
-
 var gulp = require('gulp'),
     sourcemaps = require('gulp-sourcemaps'),
     path = require('path'),
@@ -48,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
         },
@@ -73,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'
+            }
         }
     };
 
@@ -83,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));
 });
 
@@ -179,4 +177,4 @@ gulp.task('install', [ 'assets', 'scripts' ]);
 
 gulp.task('verify', [ 'lint', 'test', 'checkstyle' ]);
 
-gulp.task('build', [ 'verify', 'install' ]);
+gulp.task('build', [ 'verify', 'install' ]);

index.html

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

karma.conf.js

@@ -36,14 +36,14 @@ module.exports = function(config) {
         files: [
             {pattern: 'bower_components/**/*.js', included: false},
             {pattern: 'node_modules/d3-*/**/*.js', included: false},
-            {pattern: 'node_modules/vue/**/*.js', included: false},
-            {pattern: 'src/**/*', included: false},
+            {pattern: 'src/**/*.js', included: false},
             {pattern: 'example/**/*.html', included: false},
             {pattern: 'example/**/*.js', included: false},
             {pattern: 'example/**/*.json', included: false},
             {pattern: 'platform/**/*.js', included: false},
             {pattern: 'warp/**/*.js', included: false},
             {pattern: 'platform/**/*.html', included: false},
+            {pattern: 'src/**/*.html', included: false},
             'test-main.js'
         ],
 
@@ -88,8 +88,7 @@ module.exports = function(config) {
                 "dist/reports/coverage",
             check: {
                 global: {
-                    lines: 80,
-                    excludes: ['src/plugins/plot/**/*.js']
+                    lines: 80
                 }
             }
         },

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": {
@@ -32,15 +32,13 @@ requirejs.config({
         "html2canvas": "bower_components/html2canvas/build/html2canvas.min",
         "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",
-        "vue": "node_modules/vue/dist/vue.min",
         "zepto": "bower_components/zepto/zepto.min",
         "lodash": "bower_components/lodash/lodash",
-        "d3-selection": "node_modules/d3-selection/dist/d3-selection.min",
+        "d3-selection": "node_modules/d3-selection/build/d3-selection.min",
         "d3-scale": "node_modules/d3-scale/build/d3-scale.min",
         "d3-axis": "node_modules/d3-axis/build/d3-axis.min",
         "d3-array": "node_modules/d3-array/build/d3-array.min",
@@ -67,9 +65,6 @@ requirejs.config({
         "moment-duration-format": {
             "deps": ["moment"]
         },
-        "saveAs": {
-            "exports": "saveAs"
-        },
         "screenfull": {
             "exports": "screenfull"
         },
@@ -95,17 +90,11 @@ 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;
-    openmct.install(openmct.plugins.Plot());
-
-    if (typeof BUILD_CONSTANTS !== 'undefined') {
-        openmct.install(buildInfo(BUILD_CONSTANTS));
-    }
 
     openmct.on('start', function () {
         return new Main().run(defaultRegistry);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "0.13.2",
+  "version": "0.12.1-SNAPSHOT",
   "description": "The Open MCT core platform",
   "dependencies": {
     "d3-array": "^1.0.2",
@@ -15,20 +15,21 @@
     "d3-time-format": "^2.0.3",
     "express": "^4.13.1",
     "minimist": "^1.1.1",
-    "request": "^2.69.0",
-    "vue": "^2.5.6"
+    "request": "^2.69.0"
   },
   "devDependencies": {
     "bower": "^1.7.7",
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
-    "gulp": "^3.9.1",
+    "gulp": "^3.9.0",
+    "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": "^3.1.0",
+    "gulp-sass": "^2.2.0",
     "gulp-sourcemaps": "^1.6.0",
     "jasmine-core": "^2.3.0",
     "jscs-html-reporter": "^0.1.0",
@@ -50,8 +51,7 @@
     "moment": "^2.11.1",
     "node-bourbon": "^4.2.3",
     "requirejs": "2.1.x",
-    "split": "^1.0.0",
-    "v8-compile-cache": "^1.1.0"
+    "split": "^1.0.0"
   },
   "scripts": {
     "start": "node app.js",
@@ -61,7 +61,7 @@
     "jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",
     "otherdoc": "node docs/gendocs.js --in docs/src --out dist/docs --suppress-toc 'docs/src/index.md|docs/src/process/index.md'",
     "docs": "npm run jsdoc ; npm run otherdoc",
-    "prepare": "node ./node_modules/bower/bin/bower install && node ./node_modules/gulp/bin/gulp.js install"
+    "prepublish": "node ./node_modules/bower/bin/bower install && node ./node_modules/gulp/bin/gulp.js install"
   },
   "repository": {
     "type": "git",

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,
@@ -111,9 +107,7 @@ define([
                     "depends": [
                         "$scope",
                         "agentService",
-                        "$window",
-                        "$location",
-                        "$attrs"
+                        "$window"
                     ]
                 },
                 {
@@ -140,16 +134,7 @@ define([
                         "$scope",
                         "agentService",
                         "$window",
-                        "navigationService",
-                        "$location",
-                        "$attrs"
-                    ]
-                },
-                {
-                    "key": "ObjectHeaderController",
-                    "implementation": ObjectHeaderController,
-                    "depends": [
-                        "$scope"
+                        "navigationService"
                     ]
                 }
             ],
@@ -184,13 +169,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.html

@@ -24,9 +24,9 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="abs holder holder-main browse-area s-browse-area browse-wrapper"
          ng-controller="PaneController as modelPaneTree"
-         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'" hide-parameter="hideTree">
+         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'">
         <mct-split-pane class='abs contents'
-                        anchor='left' alias="leftSide">
+                        anchor='left'>
             <div class='split-pane-component treeview pane left'>
                 <div class="abs holder l-flex-col holder-treeview-elements">
                     <mct-representation key="'create-button'"
@@ -58,10 +58,9 @@
 
                 <div class='holder holder-object-and-inspector abs' id='content-area'
                      ng-controller="InspectorPaneController as modelPaneInspect"
-                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'" 
-                     hide-parameter="hideInspector">
+                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
 
-                    <mct-split-pane class='l-object-and-inspector contents abs' anchor='right' alias="rightSide">
+                    <mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
                         <div class='split-pane-component t-object pane primary-pane left'>
                             <mct-representation mct-object="navigatedObject"
                                                 key="navigatedObject.getCapability('status').get('editing') ? 'edit-object' : 'browse-object'"
@@ -88,3 +87,4 @@
     </div>
     <mct-include key="'bottombar'"></mct-include>
 </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,16 +20,16 @@
  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'"
         mct-object='domainObject'
         class="flex-elem context-available-w"></mct-representation>
-</span>
+</span>
+<a class="s-button icon-expand t-btn-view-large"
+   title="View large"
+   mct-trigger-modal>
+</a>

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

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

platform/commonUI/browse/src/BrowseController.js

@@ -25,8 +25,8 @@
  * @namespace platform/commonUI/browse
  */
 define(
-    ['lodash'],
-    function (_) {
+    [],
+    function () {
 
         /**
          * The BrowseController is used to populate the initial scope in Browse
@@ -157,28 +157,12 @@ define(
             // (e.g. bookmarks to pages in OpenMCT) and prevent them.  Instead,
             // navigate to the path ourselves, which results in it being
             // properly set.
-            $scope.$on('$routeChangeStart', function (event, route, oldRoute) {
+            $scope.$on('$routeChangeStart', function (event, route) {
                 if (route.$$route === $route.current.$$route) {
                     if (route.pathParams.ids &&
                         route.pathParams.ids !== $route.current.pathParams.ids) {
-
-                        var otherParams = _.omit(route.params, 'ids');
-                        var oldOtherParams = _.omit(oldRoute.params, 'ids');
-                        var deletedParams = _.omit(oldOtherParams, _.keys(otherParams));
-
                         event.preventDefault();
-
-                        navigateToPath(route.pathParams.ids.split('/'))
-                            .then(function () {
-                                if (!_.isEqual(otherParams, oldOtherParams)) {
-                                    _.forEach(otherParams, function (v, k) {
-                                        $location.search(k, v);
-                                    });
-                                    _.forEach(deletedParams, function (k) {
-                                        $location.search(k, null);
-                                    });
-                                }
-                            });
+                        navigateToPath(route.pathParams.ids.split('/'));
                     } else {
                         navigateToPath([]);
                     }

platform/commonUI/browse/src/InspectorPaneController.js

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

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/src/PaneController.js

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

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

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

platform/commonUI/browse/test/InspectorPaneControllerSpec.js

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

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/browse/test/PaneControllerSpec.js

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

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

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

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

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

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

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

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

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

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

@@ -28,6 +28,16 @@ define(
     [],
     function () {
 
+        function isDirty(domainObject) {
+            var navigatedObject = domainObject,
+                editorCapability = navigatedObject &&
+                    navigatedObject.getCapability("editor");
+
+            return editorCapability &&
+                editorCapability.isEditContextRoot() &&
+                editorCapability.dirty();
+        }
+
         function cancelEditing(domainObject) {
             var navigatedObject = domainObject,
                 editorCapability = navigatedObject &&
@@ -49,7 +59,10 @@ define(
 
             var removeCheck = navigationService
                 .checkBeforeNavigation(function () {
-                    return "Continuing will cause the loss of any unsaved changes.";
+                    if (isDirty(domainObject)) {
+                        return "Continuing will cause the loss of any unsaved changes.";
+                    }
+                    return false;
                 });
 
             $scope.$on('$destroy', function () {

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,58 +47,10 @@ define(
                 }
             }
 
-            function setSelection(selection) {
-                if (!selection[0]) {
-                    return;
-                }
-
-                if (self.mutationListener) {
-                    self.mutationListener();
-                    delete self.mutationListener;
-                }
-
-                var domainObject = selection[0].context.oldItem;
-                self.refreshComposition(domainObject);
-
-                if (domainObject) {
-                    self.mutationListener = domainObject.getCapability('mutation')
-                        .listen(self.refreshComposition.bind(self, domainObject));
-                }
-            }
-
             $scope.filterBy = filterBy;
             $scope.searchElements = searchElements;
-
-            openmct.selection.on('change', setSelection);
-            setSelection(openmct.selection.get());
-
-            $scope.$on("$destroy", function () {
-                openmct.selection.off("change", setSelection);
-            });
         }
 
-        /**
-         * Gets the composition for the selected object and populates the scope with it.
-         *
-         * @param domainObject the selected object
-         * @private
-         */
-        ElementsController.prototype.refreshComposition = function (domainObject) {
-            var refreshTracker = {};
-            this.currentRefresh = refreshTracker;
-
-            var selectedObjectComposition = domainObject && domainObject.useCapability('composition');
-            if (selectedObjectComposition) {
-                selectedObjectComposition.then(function (composition) {
-                    if (this.currentRefresh === refreshTracker) {
-                        this.scope.composition = composition;
-                    }
-                }.bind(this));
-            } else {
-                this.scope.composition = [];
-            }
-        };
-
         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,24 +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) {
-                var selected = selection[0];
-
-                if (selected && selected.context.toolbar) {
-                    this.select(selected.context.toolbar);
-                } else {
-                    this.deselect();
-                }
-
-                if (selected && selected.context.viewProxy) {
-                    this.proxy(selected.context.viewProxy);
-                }
-            }.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/EditObjectControllerSpec.js

@@ -104,10 +104,10 @@ define(
                 mockEditorCapability.isEditContextRoot.andReturn(false);
                 mockEditorCapability.dirty.andReturn(false);
 
-                expect(checkFn()).toBe("Continuing will cause the loss of any unsaved changes.");
+                expect(checkFn()).toBe(false);
 
                 mockEditorCapability.isEditContextRoot.andReturn(true);
-                expect(checkFn()).toBe("Continuing will cause the loss of any unsaved changes.");
+                expect(checkFn()).toBe(false);
 
                 mockEditorCapability.dirty.andReturn(true);
                 expect(checkFn())

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

@@ -27,70 +27,11 @@ define(
 
         describe("The Elements Pane controller", function () {
             var mockScope,
-                mockOpenMCT,
-                mockSelection,
-                mockDomainObject,
-                mockMutationCapability,
-                mockCompositionCapability,
-                mockCompositionObjects,
-                mockComposition,
-                mockUnlisten,
-                selectable = [],
                 controller;
 
-            function mockPromise(value) {
-                return {
-                    then: function (thenFunc) {
-                        return mockPromise(thenFunc(value));
-                    }
-                };
-            }
-
-            function createDomainObject() {
-                return {
-                    useCapability: function () {
-                        return mockCompositionCapability;
-                    }
-                };
-            }
-
             beforeEach(function () {
-                mockComposition = ["a", "b"];
-                mockCompositionObjects = mockComposition.map(createDomainObject);
-                mockCompositionCapability = mockPromise(mockCompositionObjects);
-
-                mockUnlisten = jasmine.createSpy('unlisten');
-                mockMutationCapability = jasmine.createSpyObj("mutationCapability", [
-                    "listen"
-                ]);
-                mockMutationCapability.listen.andReturn(mockUnlisten);
-                mockDomainObject = jasmine.createSpyObj("domainObject", [
-                    "getCapability",
-                    "useCapability"
-                ]);
-                mockDomainObject.useCapability.andReturn(mockCompositionCapability);
-                mockDomainObject.getCapability.andReturn(mockMutationCapability);
-
-                mockScope = jasmine.createSpyObj("$scope", ['$on']);
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn([]);
-                mockOpenMCT = {
-                    selection: mockSelection
-                };
-
-                selectable[0] = {
-                    context: {
-                        oldItem: mockDomainObject
-                    }
-                };
-
-                spyOn(ElementsController.prototype, 'refreshComposition').andCallThrough();
-
-                controller = new ElementsController(mockScope, mockOpenMCT);
+                mockScope = jasmine.createSpy("$scope");
+                controller = new ElementsController(mockScope);
             });
 
             function getModel(model) {
@@ -122,63 +63,6 @@ define(
                 expect(objects.filter(mockScope.searchElements).length).toBe(4);
             });
 
-            it("refreshes composition on selection", function () {
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-
-                expect(ElementsController.prototype.refreshComposition).toHaveBeenCalledWith(mockDomainObject);
-            });
-
-            it("listens on mutation and refreshes composition", function () {
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-
-                expect(mockDomainObject.getCapability).toHaveBeenCalledWith('mutation');
-                expect(mockMutationCapability.listen).toHaveBeenCalled();
-                expect(ElementsController.prototype.refreshComposition.calls.length).toBe(1);
-
-                mockMutationCapability.listen.mostRecentCall.args[0](mockDomainObject);
-
-                expect(ElementsController.prototype.refreshComposition.calls.length).toBe(2);
-            });
-
-            it("cleans up mutation listener when selection changes", function () {
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-
-                expect(mockMutationCapability.listen).toHaveBeenCalled();
-
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-
-                expect(mockUnlisten).toHaveBeenCalled();
-            });
-
-            it("does not listen on mutation for element proxy selectable", function () {
-                selectable[0] = {
-                    context: {
-                        elementProxy: {}
-                    }
-                };
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-
-                expect(mockDomainObject.getCapability).not.toHaveBeenCalledWith('mutation');
-            });
-
-            it("checks concurrent changes to composition", function () {
-                var secondMockComposition = ["a", "b", "c"],
-                    secondMockCompositionObjects = secondMockComposition.map(createDomainObject),
-                    firstCompositionCallback,
-                    secondCompositionCallback;
-
-                spyOn(mockCompositionCapability, "then").andCallThrough();
-
-                controller.refreshComposition(mockDomainObject);
-                controller.refreshComposition(mockDomainObject);
-
-                firstCompositionCallback = mockCompositionCapability.then.calls[0].args[0];
-                secondCompositionCallback = mockCompositionCapability.then.calls[1].args[0];
-                secondCompositionCallback(secondMockCompositionObjects);
-                firstCompositionCallback(mockCompositionObjects);
-
-                expect(mockScope.composition).toBe(secondMockCompositionObjects);
-            });
         });
     }
 );

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,
@@ -383,8 +374,7 @@ define([
                     "depends": [
                         "$parse",
                         "$log",
-                        "$interval",
-                        "$window"
+                        "$interval"
                     ]
                 },
                 {

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

@@ -1,144 +1,207 @@
 {
-  "metadata": {
-    "name": "openmct-symbols-12px",
-    "lastOpened": 0,
-    "created": 1502213994889
-  },
-  "iconSets": [
-    {
-      "selection": [
-        {
-          "order": 9,
-          "id": 6,
-          "name": "icon12-crosshair",
-          "prevSize": 12,
-          "code": 59696,
-          "tempChar": ""
-        },
-        {
-          "order": 6,
-          "id": 3,
-          "prevSize": 12,
-          "code": 921865,
-          "name": "icon12-folder",
-          "tempChar": ""
-        }
-      ],
-      "id": 0,
-      "metadata": {
-        "name": "openmct-symbols-12px",
-        "importSize": {
-          "width": 384,
-          "height": 384
-        },
-        "designer": "Charles Hacskaylo"
-      },
-      "height": 1024,
-      "prevSize": 12,
-      "icons": [
-        {
-          "id": 6,
-          "paths": [
-            "M597.333 0h-170.667v256h170.667v-256z",
-            "M1024 426.667h-256v170.667h256v-170.667z",
-            "M597.333 768h-170.667v256h170.667v-256z",
-            "M256 426.667h-256v170.667h256v-170.667z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 0,
-          "tags": [
-            "icon12-crosshair"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
-        },
-        {
-          "id": 3,
-          "paths": [
-            "M938.667 170.667h-341.333l-110.32-110.32c-33.2-33.2-98.667-60.347-145.68-60.347h-256c-47.073 0.136-85.197 38.26-85.333 85.32l-0 341.346c0.136-47.073 38.26-85.197 85.32-85.333l853.346-0c47.073 0.136 85.197 38.26 85.333 85.32l0-170.654c-0.136-47.073-38.26-85.197-85.32-85.333z",
-            "M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
-          ],
-          "attrs": [],
-          "isMulticolor": false,
-          "grid": 0,
-          "tags": [
-            "icon12-folder"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {
-                "f": 0
-              },
-              {
-                "f": 0
-              }
-            ]
-          }
-        }
-      ],
-      "invisible": false,
-      "colorThemes": [
-        [
-          [
-            0,
-            0,
-            0,
-            1
-          ],
-          [
-            0,
-            161,
-            75,
-            1
-          ]
-        ]
-      ],
-      "colorThemeIdx": 0
-    }
-  ],
-  "preferences": {
-    "showGlyphs": true,
-    "showCodes": true,
-    "showQuickUse": true,
-    "showQuickUse2": true,
-    "showSVGs": true,
-    "fontPref": {
-      "prefix": "icon-",
-      "metadata": {
-        "fontFamily": "openmct-symbols-12px",
-        "majorVersion": 1,
-        "minorVersion": 0
-      },
-      "metrics": {
-        "emSize": 1024,
-        "baseline": 6.25,
-        "whitespace": 50
-      },
-      "embed": false
-    },
-    "imagePref": {
-      "prefix": "icon-",
-      "png": true,
-      "useClassSelector": true,
-      "color": 0,
-      "bgColor": 16777215
-    },
-    "historySize": 100,
-    "gridSize": 16
-  },
-  "uid": -1,
-  "time": 1502216581486
-}
+	"metadata": {
+		"name": "openmct-symbols-12px",
+		"lastOpened": 1467322505818,
+		"created": 1467322503679
+	},
+	"iconSets": [
+		{
+			"selection": [
+				{
+					"order": 4,
+					"id": 2,
+					"prevSize": 12,
+					"code": 59671,
+					"name": "icon12-eye-open",
+					"tempChar": ""
+				},
+				{
+					"order": 7,
+					"id": 5,
+					"prevSize": 12,
+					"code": 921607,
+					"name": "icon12-pane-collapse-left",
+					"tempChar": ""
+				},
+				{
+					"order": 8,
+					"id": 4,
+					"prevSize": 12,
+					"code": 921608,
+					"name": "icon12-pane-collapse-right",
+					"tempChar": ""
+				},
+				{
+					"order": 6,
+					"id": 3,
+					"prevSize": 12,
+					"code": 921865,
+					"name": "icon12-folder",
+					"tempChar": ""
+				}
+			],
+			"id": 0,
+			"metadata": {
+				"name": "openmct-symbols-12px",
+				"importSize": {
+					"width": 320,
+					"height": 384
+				},
+				"designer": "Charles Hacskaylo"
+			},
+			"height": 1024,
+			"prevSize": 12,
+			"icons": [
+				{
+					"id": 2,
+					"paths": [
+						"M512 86c-257.92 0-471.28 185.147-506.667 426 35.493 240.853 248.853 426 506.667 426s471.28-185.147 506.667-426c-35.387-240.853-248.747-426-506.667-426zM738.373 685.2c-131.048 109.517-321.699 109.517-452.747 0-53.328-44.749-90.832-105.477-106.96-173.2 16.101-67.707 53.565-128.435 106.853-173.2 131.048-109.517 321.699-109.517 452.747 0 53.368 44.733 90.909 105.464 107.067 173.2-16.128 67.723-53.632 128.451-106.96 173.2z",
+						"M682.667 512c0 94.257-76.41 170.667-170.667 170.667s-170.667-76.41-170.667-170.667c0-94.257 76.41-170.667 170.667-170.667s170.667 76.41 170.667 170.667z"
+					],
+					"attrs": [],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon12-eye-open"
+					],
+					"colorPermutations": {
+						"1161751": [
+							{
+								"f": 0
+							},
+							{
+								"f": 0
+							}
+						]
+					}
+				},
+				{
+					"id": 5,
+					"paths": [
+						"M0 0h170.667v1024h-170.667v-1024z",
+						"M853.333 256h-256v-256l-341.333 426.667 341.333 426.667v-256h256v-341.333z"
+					],
+					"attrs": [
+						{
+							"opacity": 1
+						},
+						{
+							"opacity": 1
+						}
+					],
+					"isMulticolor": false,
+					"width": 853,
+					"grid": 0,
+					"tags": [
+						"icon12-pane-collapse-left"
+					],
+					"colorPermutations": {
+						"1161751": [
+							{},
+							{}
+						]
+					}
+				},
+				{
+					"id": 4,
+					"paths": [
+						"M682.667 0h170.667v1024h-170.667v-1024z",
+						"M0 256h256v-256l341.333 426.667-341.333 426.667v-256h-256v-341.333z"
+					],
+					"attrs": [
+						{
+							"opacity": 1
+						},
+						{
+							"opacity": 1
+						}
+					],
+					"isMulticolor": false,
+					"width": 853,
+					"grid": 0,
+					"tags": [
+						"icon12-pane-collapse-right"
+					],
+					"colorPermutations": {
+						"1161751": [
+							{},
+							{}
+						]
+					}
+				},
+				{
+					"id": 3,
+					"paths": [
+						"M938.667 170.667h-341.333l-110.32-110.32c-33.2-33.2-98.667-60.347-145.68-60.347h-256c-47.073 0.136-85.197 38.26-85.333 85.32l-0 341.346c0.136-47.073 38.26-85.197 85.32-85.333l853.346-0c47.073 0.136 85.197 38.26 85.333 85.32l0-170.654c-0.136-47.073-38.26-85.197-85.32-85.333z",
+						"M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
+					],
+					"attrs": [],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon12-folder"
+					],
+					"colorPermutations": {
+						"1161751": [
+							{
+								"f": 0
+							},
+							{
+								"f": 0
+							}
+						]
+					}
+				}
+			],
+			"invisible": false,
+			"colorThemes": [
+				[
+					[
+						0,
+						0,
+						0,
+						1
+					],
+					[
+						0,
+						161,
+						75,
+						1
+					]
+				]
+			],
+			"colorThemeIdx": 0
+		}
+	],
+	"preferences": {
+		"showGlyphs": true,
+		"showCodes": true,
+		"showQuickUse": true,
+		"showQuickUse2": true,
+		"showSVGs": true,
+		"fontPref": {
+			"prefix": "icon-",
+			"metadata": {
+				"fontFamily": "openmct-symbols-12px",
+				"majorVersion": 1,
+				"minorVersion": 0
+			},
+			"metrics": {
+				"emSize": 1024,
+				"baseline": 6.25,
+				"whitespace": 50
+			},
+			"embed": false
+		},
+		"imagePref": {
+			"prefix": "icon-",
+			"png": true,
+			"useClassSelector": true,
+			"color": 0,
+			"bgColor": 16777215
+		},
+		"historySize": 100,
+		"gridSize": 16
+	},
+	"uid": -1
+}

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": 1497475810461
   },
   "iconSets": [
     {
@@ -252,29 +252,13 @@
           "code": 59689,
           "tempChar": ""
         },
-        {
-          "order": 134,
-          "id": 114,
-          "name": "icon-crosshair",
-          "prevSize": 24,
-          "code": 59696,
-          "tempChar": ""
-        },
-        {
-          "order": 127,
-          "id": 109,
-          "name": "icon-grippy-v2",
-          "prevSize": 24,
-          "code": 59697,
-          "tempChar": ""
-        },
         {
           "order": 48,
           "prevSize": 24,
           "name": "icon-arrows-out",
           "id": 43,
           "code": 921600,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 49,
@@ -282,7 +266,7 @@
           "name": "icon-arrows-right-left",
           "id": 44,
           "code": 921601,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 50,
@@ -290,7 +274,7 @@
           "name": "icon-arrows-up-down",
           "id": 45,
           "code": 921602,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 9,
@@ -298,7 +282,7 @@
           "name": "icon-bullet",
           "id": 4,
           "code": 921604,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 25,
@@ -306,7 +290,7 @@
           "name": "icon-calendar",
           "id": 20,
           "code": 921605,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 30,
@@ -314,7 +298,7 @@
           "name": "icon-chain-links",
           "id": 25,
           "code": 921606,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -322,7 +306,7 @@
           "prevSize": 24,
           "code": 921607,
           "name": "icon-pane-collapse-left",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 110,
@@ -330,7 +314,7 @@
           "prevSize": 24,
           "code": 921608,
           "name": "icon-pane-collapse-right",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 5,
@@ -338,7 +322,7 @@
           "prevSize": 24,
           "code": 921609,
           "name": "icon-download",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -346,7 +330,7 @@
           "name": "icon-duplicate",
           "id": 55,
           "code": 921616,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 61,
@@ -354,7 +338,7 @@
           "name": "icon-folder-new",
           "id": 56,
           "code": 921617,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 64,
@@ -362,7 +346,7 @@
           "name": "icon-fullscreen-expand",
           "id": 59,
           "code": 921618,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 63,
@@ -370,7 +354,7 @@
           "name": "icon-fullscreen-collapse",
           "id": 58,
           "code": 921619,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -378,7 +362,7 @@
           "name": "icon-layers",
           "id": 62,
           "code": 921620,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
@@ -386,7 +370,7 @@
           "name": "icon-line-horz",
           "id": 64,
           "code": 921621,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 73,
@@ -394,7 +378,7 @@
           "name": "icon-magnify",
           "id": 68,
           "code": 921622,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 71,
@@ -402,7 +386,7 @@
           "name": "icon-magnify-in",
           "id": 66,
           "code": 921623,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 72,
@@ -410,7 +394,7 @@
           "name": "icon-magnify-out",
           "id": 67,
           "code": 921624,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 74,
@@ -418,7 +402,7 @@
           "name": "icon-menu",
           "id": 69,
           "code": 921625,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 75,
@@ -426,7 +410,7 @@
           "name": "icon-move",
           "id": 70,
           "code": 921632,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 76,
@@ -434,7 +418,7 @@
           "name": "icon-new-window",
           "id": 71,
           "code": 921633,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 26,
@@ -442,7 +426,7 @@
           "name": "icon-paint-bucket",
           "id": 21,
           "code": 921634,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -450,7 +434,7 @@
           "name": "icon-pause",
           "id": 76,
           "code": 921635,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 82,
@@ -458,7 +442,7 @@
           "name": "icon-pencil",
           "id": 77,
           "code": 921636,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 84,
@@ -466,7 +450,7 @@
           "name": "icon-play",
           "id": 79,
           "code": 921637,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 85,
@@ -474,7 +458,7 @@
           "name": "icon-plot-resource",
           "id": 80,
           "code": 921638,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 27,
@@ -482,7 +466,7 @@
           "name": "icon-pointer-left",
           "id": 22,
           "code": 921639,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 28,
@@ -490,7 +474,7 @@
           "name": "icon-pointer-right",
           "id": 23,
           "code": 921640,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 32,
@@ -498,7 +482,7 @@
           "name": "icon-refresh",
           "id": 27,
           "code": 921641,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 16,
@@ -506,7 +490,7 @@
           "name": "icon-save",
           "id": 11,
           "code": 921648,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 88,
@@ -514,7 +498,7 @@
           "name": "icon-sine",
           "id": 83,
           "code": 921649,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 102,
@@ -522,7 +506,7 @@
           "name": "icon-T",
           "id": 84,
           "code": 921650,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -530,7 +514,7 @@
           "name": "icon-thumbs-strip",
           "id": 87,
           "code": 921651,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 96,
@@ -538,7 +522,7 @@
           "name": "icon-two-parts-both",
           "id": 91,
           "code": 921652,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 97,
@@ -546,7 +530,7 @@
           "name": "icon-two-parts-one-only",
           "id": 92,
           "code": 921653,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 21,
@@ -554,7 +538,7 @@
           "name": "icon-resync",
           "id": 16,
           "code": 921654,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 120,
@@ -562,7 +546,7 @@
           "name": "icon-reset",
           "prevSize": 24,
           "code": 921655,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 121,
@@ -570,7 +554,7 @@
           "name": "icon-x-in-circle",
           "prevSize": 24,
           "code": 921656,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 118,
@@ -578,7 +562,7 @@
           "name": "icon-brightness",
           "prevSize": 24,
           "code": 921657,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 119,
@@ -586,7 +570,7 @@
           "name": "icon-contrast",
           "prevSize": 24,
           "code": 921664,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 124,
@@ -594,63 +578,15 @@
           "name": "icon-expand",
           "prevSize": 24,
           "code": 921665,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
-          "order": 125,
+          "order": 123,
           "id": 107,
           "name": "icon-list-view",
           "prevSize": 24,
           "code": 921666,
-          "tempChar": ""
-        },
-        {
-          "order": 133,
-          "id": 112,
-          "name": "icon-grid-snap-to",
-          "prevSize": 24,
-          "code": 921667,
-          "tempChar": ""
-        },
-        {
-          "order": 128,
-          "id": 113,
-          "name": "icon-grid-snap-no",
-          "prevSize": 24,
-          "code": 921668,
-          "tempChar": ""
-        },
-        {
-          "order": 131,
-          "id": 110,
-          "name": "icon-frame-show",
-          "prevSize": 24,
-          "code": 921669,
-          "tempChar": ""
-        },
-        {
-          "order": 130,
-          "id": 111,
-          "name": "icon-frame-hide",
-          "prevSize": 24,
-          "code": 921670,
-          "tempChar": ""
-        },
-        {
-          "order": 138,
-          "id": 115,
-          "name": "icon-import",
-          "prevSize": 24,
-          "code": 921671,
-          "tempChar": ""
-        },
-        {
-          "order": 136,
-          "id": 116,
-          "name": "icon-export",
-          "prevSize": 24,
-          "code": 921672,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 37,
@@ -658,7 +594,7 @@
           "name": "icon-activity",
           "id": 32,
           "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 36,
@@ -666,7 +602,7 @@
           "name": "icon-activity-mode",
           "id": 31,
           "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -674,7 +610,7 @@
           "name": "icon-autoflow-tabular",
           "id": 47,
           "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -682,7 +618,7 @@
           "name": "icon-clock",
           "id": 50,
           "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -690,7 +626,7 @@
           "name": "icon-database",
           "id": 53,
           "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 57,
@@ -698,7 +634,7 @@
           "name": "icon-database-query",
           "id": 52,
           "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 17,
@@ -706,7 +642,7 @@
           "name": "icon-dataset",
           "id": 12,
           "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 22,
@@ -714,7 +650,7 @@
           "name": "icon-datatable",
           "id": 17,
           "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -722,7 +658,7 @@
           "name": "icon-dictionary",
           "id": 54,
           "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 62,
@@ -730,7 +666,7 @@
           "name": "icon-folder",
           "id": 57,
           "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 66,
@@ -738,7 +674,7 @@
           "name": "icon-image",
           "id": 61,
           "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -746,7 +682,7 @@
           "name": "icon-layout",
           "id": 63,
           "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 77,
@@ -754,7 +690,7 @@
           "name": "icon-object",
           "id": 72,
           "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 78,
@@ -762,7 +698,7 @@
           "name": "icon-object-unknown",
           "id": 73,
           "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -770,7 +706,7 @@
           "name": "icon-packet",
           "id": 74,
           "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -778,15 +714,15 @@
           "name": "icon-page",
           "id": 75,
           "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
-          "order": 135,
+          "order": 114,
           "id": 99,
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -794,7 +730,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -802,7 +738,7 @@
           "name": "icon-session",
           "id": 5,
           "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -810,7 +746,7 @@
           "name": "icon-tabular",
           "id": 19,
           "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -818,7 +754,7 @@
           "name": "icon-tabular-lad",
           "id": 2,
           "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -826,7 +762,7 @@
           "name": "icon-tabular-lad-set",
           "id": 1,
           "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 8,
@@ -834,7 +770,7 @@
           "name": "icon-tabular-realtime",
           "id": 3,
           "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 23,
@@ -842,7 +778,7 @@
           "name": "icon-tabular-scrolling",
           "id": 18,
           "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 112,
@@ -850,7 +786,7 @@
           "name": "icon-telemetry",
           "id": 86,
           "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -858,7 +794,7 @@
           "name": "icon-telemetry-panel",
           "id": 85,
           "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 93,
@@ -866,7 +802,7 @@
           "name": "icon-timeline",
           "id": 88,
           "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 116,
@@ -874,7 +810,7 @@
           "name": "icon-timer-v1.5",
           "prevSize": 24,
           "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -882,7 +818,7 @@
           "name": "icon-topic",
           "id": 6,
           "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -890,23 +826,7 @@
           "name": "icon-box-with-dashed-lines",
           "id": 29,
           "code": 921897,
-          "tempChar": ""
-        },
-        {
-          "order": 126,
-          "id": 108,
-          "name": "icon-summary-widget",
-          "prevSize": 24,
-          "code": 921904,
-          "tempChar": ""
-        },
-        {
-          "order": 139,
-          "id": 117,
-          "name": "icon-notebook",
-          "prevSize": 24,
-          "code": 921905,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "metadata": {
@@ -1553,92 +1473,6 @@
             ]
           }
         },
-        {
-          "id": 114,
-          "paths": [
-            "M574-2h-128v320h128v-320z",
-            "M1022 446h-320v128h320v-128z",
-            "M574 702h-128v320h128v-320z",
-            "M318 446h-320v128h320v-128z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-crosshair"
-          ],
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
-        },
-        {
-          "id": 109,
-          "paths": [
-            "M146.4 182.8c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M146.4 402.2c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M146.4 621.8c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M146.4 841.2c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M365.8 73.2c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M365.8 292.6c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M365.8 512c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M365.8 731.4c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M365.8 950.8c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M585.2 182.8c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M585.2 402.2c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M585.2 621.8c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z",
-            "M585.2 841.2c0 40.427-32.773 73.2-73.2 73.2s-73.2-32.773-73.2-73.2c0-40.427 32.773-73.2 73.2-73.2s73.2 32.773 73.2 73.2z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {}
-          ],
-          "width": 586,
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-grippy-v2"
-          ],
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
-        },
         {
           "paths": [
             "M0 512l256 256v-512z",
@@ -2582,177 +2416,6 @@
             ]
           }
         },
-        {
-          "id": 112,
-          "paths": [
-            "M382 830h448v-448h-448v448zM510 510h192v192h-192v-192z",
-            "M-2 574h320v64h-320v-64z",
-            "M894 574h128v64h-128v-64z",
-            "M574-2h64v320h-64v-320z",
-            "M574 894h64v128h-64v-128z",
-            "M574 574h64v64h-64v-64z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {},
-            {},
-            {}
-          ],
-          "grid": 16,
-          "tags": [
-            "icon-grid-snap-to"
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {},
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
-        },
-        {
-          "id": 113,
-          "paths": [
-            "M768 576h192v64h-192v-64z",
-            "M256 576h192v64h-192v-64z",
-            "M0 576h192v64h-192v-64z",
-            "M640 512h-64v64h-64v64h64v64h64v-64h64v-64h-64z",
-            "M576 256h64v192h-64v-192z",
-            "M576 0h64v192h-64v-192z",
-            "M576 768h64v192h-64v-192z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-grid-snap-no"
-          ],
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
-        },
-        {
-          "id": 110,
-          "paths": [
-            "M0 64v896h1024v-896h-1024zM896 832h-768v-640h768v640z",
-            "M192 256h384v128h-384v-128z"
-          ],
-          "attrs": [
-            {},
-            {}
-          ],
-          "grid": 16,
-          "tags": [
-            "icon-frame-show"
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {}
-            ]
-          }
-        },
-        {
-          "id": 111,
-          "paths": [
-            "M128 190h420l104-128h-652v802.4l128-157.4z",
-            "M896 830h-420l-104 128h652v-802.4l-128 157.4z",
-            "M832-2l-832 1024h192l832-1024z",
-            "M392 382l104-128h-304v128z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {}
-          ],
-          "grid": 16,
-          "tags": [
-            "icon-frame-hide"
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
-        },
-        {
-          "id": 115,
-          "paths": [
-            "M832 192.4v639.4c0 0.2-0.2 0.2-0.4 0.4h-319.6v192h320c105.6 0 192-86.4 192-192v-640.2c0-105.6-86.4-192-192-192h-320v192h319.6c0.2 0 0.4 0.2 0.4 0.4z",
-            "M192 704v192l384-384-384-384v192h-192v384z"
-          ],
-          "attrs": [
-            {},
-            {}
-          ],
-          "grid": 16,
-          "tags": [
-            "icon-import"
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {}
-            ]
-          }
-        },
-        {
-          "id": 116,
-          "paths": [
-            "M192 831.66v-639.32l0.34-0.34h319.66v-192h-320c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h320v-192h-319.66z",
-            "M1024 512l-384-384v192h-192v384h192v192l384-384z"
-          ],
-          "attrs": [
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-export"
-          ],
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {},
-              {}
-            ]
-          }
-        },
         {
           "paths": [
             "M576 64h-256l320 320h-290.256c-44.264-76.516-126.99-128-221.744-128h-128v512h128c94.754 0 177.48-51.484 221.744-128h290.256l-320 320h256l448-448-448-448z"
@@ -3512,49 +3175,6 @@
               {}
             ]
           }
-        },
-        {
-          "id": 108,
-          "paths": [
-            "M896 0h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-768c0-70.4-57.6-128-128-128zM847.8 610.4l-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"
-          ],
-          "attrs": [
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-summary-widget"
-          ],
-          "colorPermutations": {
-            "1161751207457516161751": [
-              {}
-            ]
-          }
-        },
-        {
-          "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-12px.svg

@@ -7,6 +7,8 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe930;" glyph-name="icon12-crosshair" d="M597.333 938.667h-170.667v-256h170.667v256zM1024 512h-256v-170.667h256v170.667zM597.333 170.667h-170.667v-256h170.667v256zM256 512h-256v-170.667h256v170.667z" />
+<glyph unicode="&#xe917;" glyph-name="icon12-eye-open" d="M512 852.667c-257.92 0-471.28-185.147-506.667-426 35.493-240.853 248.853-426 506.667-426s471.28 185.147 506.667 426c-35.387 240.853-248.747 426-506.667 426zM738.373 253.467c-131.048-109.517-321.699-109.517-452.747 0-53.328 44.749-90.832 105.477-106.96 173.2 16.101 67.707 53.565 128.435 106.853 173.2 131.048 109.517 321.699 109.517 452.747 0 53.368-44.733 90.909-105.464 107.067-173.2-16.128-67.723-53.632-128.451-106.96-173.2zM682.667 426.667c0-94.257-76.41-170.667-170.667-170.667s-170.667 76.41-170.667 170.667c0 94.257 76.41 170.667 170.667 170.667s170.667-76.41 170.667-170.667z" />
+<glyph unicode="&#xe1007;" glyph-name="icon12-pane-collapse-left" horiz-adv-x="853" d="M0 938.667h170.667v-1024h-170.667v1024zM853.333 682.667h-256v256l-341.333-426.667 341.333-426.667v256h256v341.333z" />
+<glyph unicode="&#xe1008;" glyph-name="icon12-pane-collapse-right" horiz-adv-x="853" d="M682.667 938.667h170.667v-1024h-170.667v1024zM0 682.667h256v256l341.333-426.667-341.333-426.667v256h-256v341.333z" />
 <glyph unicode="&#xe1109;" glyph-name="icon12-folder" d="M938.667 768h-341.333l-110.32 110.32c-33.2 33.2-98.667 60.347-145.68 60.347h-256c-47.073-0.136-85.197-38.26-85.333-85.32v-341.346c0.136 47.073 38.26 85.197 85.32 85.333h853.346c47.073-0.136 85.197-38.26 85.333-85.32v170.654c-0.136 47.073-38.26 85.197-85.32 85.333zM85.333 512h853.333c47.128 0 85.333-38.205 85.333-85.333v-426.667c0-47.128-38.205-85.333-85.333-85.333h-853.333c-47.128 0-85.333 38.205-85.333 85.333v426.667c0 47.128 38.205 85.333 85.333 85.333z" />
-</font></defs></svg>
+</font></defs></svg>

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

@@ -37,8 +37,6 @@
 <glyph unicode="&#xe927;" glyph-name="icon-trash" d="M832 832h-192.36v64c0 35.2-28.8 64-64 64h-128c-35.2 0-64-28.8-64-64v-64h-191.64c-105.6 0-192-72-192-160s0-160 0-160h64v-384c0-105.6 86.4-192 192-192h512c105.6 0 192 86.4 192 192v384h64c0 0 0 72 0 160s-86.4 160-192 160zM320 128h-128v384h128v-384zM576 128h-128v384h128v-384zM832 128h-128v384h128v-384z" />
 <glyph unicode="&#xe928;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 <glyph unicode="&#xe929;" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
-<glyph unicode="&#xe930;" glyph-name="icon-crosshair" d="M574 962h-128v-320h128v320zM1022 514h-320v-128h320v128zM574 258h-128v-320h128v320zM318 514h-320v-128h320v128z" />
-<glyph unicode="&#xe931;" glyph-name="icon-grippy-v2" horiz-adv-x="586" d="M146.4 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 886.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 667.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 448c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 228.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
 <glyph unicode="&#xe1000;" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
 <glyph unicode="&#xe1001;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe1002;" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
@@ -81,12 +79,6 @@
 <glyph unicode="&#xe1040;" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
 <glyph unicode="&#xe1041;" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
 <glyph unicode="&#xe1042;" glyph-name="icon-list-view" d="M0 896h1024v-128h-1024v128zM0 640h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
-<glyph unicode="&#xe1043;" glyph-name="icon-grid-snap-to" d="M382 130h448v448h-448v-448zM510 450h192v-192h-192v192zM-2 386h320v-64h-320v64zM894 386h128v-64h-128v64zM574 962h64v-320h-64v320zM574 66h64v-128h-64v128zM574 386h64v-64h-64v64z" />
-<glyph unicode="&#xe1044;" glyph-name="icon-grid-snap-no" d="M768 384h192v-64h-192v64zM256 384h192v-64h-192v64zM0 384h192v-64h-192v64zM640 448h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 704h64v-192h-64v192zM576 960h64v-192h-64v192zM576 192h64v-192h-64v192z" />
-<glyph unicode="&#xe1045;" glyph-name="icon-frame-show" d="M0 896v-896h1024v896h-1024zM896 128h-768v640h768v-640zM192 704h384v-128h-384v128z" />
-<glyph unicode="&#xe1046;" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
-<glyph unicode="&#xe1047;" glyph-name="icon-import" d="M832 767.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 256v-192l384 384-384 384v-192h-192v-384z" />
-<glyph unicode="&#xe1048;" glyph-name="icon-export" d="M192 128.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 448l-384 384v-192h-192v-384h192v-192l384 384z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
@@ -117,6 +109,4 @@
 <glyph unicode="&#xe1127;" glyph-name="icon-timer-v1.5" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
 <glyph unicode="&#xe1128;" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
 <glyph unicode="&#xe1129;" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
-<glyph unicode="&#xe1130;" glyph-name="icon-summary-widget" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 349.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />
-<glyph unicode="&#xe1131;" glyph-name="icon-notebook" d="M896 849.2c0 79.8-55.4 127.4-123 105.4l-773-250.6h896v145.2zM896 640h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM832 128h-384v320h384v-320z" />
 </font></defs></svg>

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

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

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 /************************** FEATURES */
-$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported
+$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
 
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
 $bodyMargin: 10px;
@@ -82,7 +82,7 @@ $tabularTdPadTB: 2px;
 /*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
-$imageThumbsWrapperH: 155px;
+$imageThumbsWrapperH: $imageThumbsD * 1.4;
 $imageThumbPad: 1px;
 /*************** Ticks */
 $ticksH: 25px;
@@ -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,9 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
-$inputTextPTopBtm: 3px;
-$inputTextPLeftRight: 5px;
-$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
+$inputTextPVert: 3px;
+$inputTextPHorz: 5px;
+$inputTextP: $inputTextPVert $inputTextPHorz;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;

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

@@ -21,12 +21,32 @@
 *****************************************************************************/
 .t-fixed-position {
 	&.l-fixed-position {
-		@extend .abs;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		width: auto;
+		height: auto;
+
+		.l-grid-holder {
+			position: relative;
+			height: 100%;
+			width: 100%;
+			.l-grid {
+				position: absolute;
+				height: 100%;
+				width: 100%;
+				pointer-events: none;
+				z-index: 0;
+			}
+		}
 	}
 
 	.l-fixed-position-item {
-        border-width: 1px;
 		position: absolute;
+		border: 1px solid transparent;
+
 		&.s-not-selected {
 			opacity: 0.8;
 		}
@@ -53,7 +73,6 @@
 			font-size: 0.8rem;
 			$p: 1px;
 			line-height: 100%;
-            overflow: hidden;
 			&.l-static-text {
 				padding: $p;
 			}
@@ -86,8 +105,37 @@
 			}
 		}
 	}
+
+	.l-fixed-position-item-handle {
+		$brd: 1px solid $colorKey;
+		background: rgba($colorKey, 0.5);
+		cursor: crosshair;
+		border: $brd;
+		position: absolute;
+	}
 }
 
-.s-status-editing {
-    .l-fixed-position-item-handle.edit-corner { display: block; }
+.edit-mode .t-fixed-position {
+	&.l-fixed-position {
+		.l-grid-holder {
+			.l-grid {
+				&.l-grid-x {
+					@include bgTicks($colorGridLines, 'x');
+				}
+
+				&.l-grid-y {
+					@include bgTicks($colorGridLines, 'y');
+				}
+			}
+		}
+	}
+
+	.l-fixed-position-item {
+		&:not(.s-selected) {
+			border: 1px dotted rgba($colorKey, 0.75);
+			&:hover {
+				border: 1px dotted rgba($colorKey, 1.0);
+			}
+		}
+	}
 }

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

@@ -1,24 +1,3 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
 @mixin glyphBefore($unicode, $family: 'symbolsfont') {
     &:before {
         content: $unicode;
@@ -65,8 +44,6 @@ $glyph-icon-plus: '\e926';
 $glyph-icon-trash: '\e927';
 $glyph-icon-x: '\e928';
 $glyph-icon-brackets: '\e929';
-$glyph-icon-crosshair: '\e930';
-$glyph-icon-grippy: '\e931';
 $glyph-icon-arrows-out: '\e1000';
 $glyph-icon-arrows-right-left: '\e1001';
 $glyph-icon-arrows-up-down: '\e1002';
@@ -109,12 +86,6 @@ $glyph-icon-brightness: '\e1039';
 $glyph-icon-contrast: '\e1040';
 $glyph-icon-expand: '\e1041';
 $glyph-icon-list-view: '\e1042';
-$glyph-icon-grid-snap-to: '\e1043';
-$glyph-icon-grid-snap-no: '\e1044';
-$glyph-icon-frame-show: '\e1045';
-$glyph-icon-frame-hide: '\e1046';
-$glyph-icon-import: '\e1047';
-$glyph-icon-export: '\e1048';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -145,8 +116,6 @@ $glyph-icon-timeline: '\e1126';
 $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 */
 
@@ -180,8 +149,6 @@ $glyph-icon-notebook: '\e1131';
 .icon-trash {  @include glyphBefore($glyph-icon-trash); }
 .icon-x {  @include glyphBefore($glyph-icon-x); }
 .icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
-.icon-crosshair {  @include glyphBefore($glyph-icon-crosshair); }
-.icon-grippy {  @include glyphBefore($glyph-icon-grippy); }
 .icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
@@ -224,12 +191,6 @@ $glyph-icon-notebook: '\e1131';
 .icon-contrast {  @include glyphBefore($glyph-icon-contrast); }
 .icon-expand {  @include glyphBefore($glyph-icon-expand); }
 .icon-list-view {  @include glyphBefore($glyph-icon-list-view); }
-.icon-grid-snap-to {  @include glyphBefore($glyph-icon-grid-snap-to); }
-.icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
-.icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
-.icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
-.icon-import {  @include glyphBefore($glyph-icon-import); }
-.icon-export {  @include glyphBefore($glyph-icon-export); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
@@ -260,9 +221,10 @@ $glyph-icon-notebook: '\e1131';
 .icon-timer {  @include glyphBefore($glyph-icon-timer); }
 .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'); }
+
+.icon-eye-open-12px {  @include glyphBefore($glyph-icon-eye-open,'symbolsfont-12px'); }
+.icon-collapse-pane-left-12px {  @include glyphBefore($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
+.icon-collapse-pane-right-12px {  @include glyphBefore($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
 .icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'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/_limits.scss

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

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

@@ -27,7 +27,7 @@
 @import "about";
 @import "text";
 @import "icons";
-@import "status";
+@import "limits";
 @import "data-status";
 @import "helpers/bubbles";
 @import "helpers/splitter";
@@ -37,7 +37,7 @@
 /********************************* CONTROLS */
 @import "controls/breadcrumb";
 @import "controls/buttons";
-@import "controls/palette";
+@import "controls/color-palette";
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
@@ -70,7 +70,6 @@
 @import "fixed-position";
 @import "lists/tabular";
 @import "plots/plots-main";
-@import "plots/legend";
 @import "iframe";
 @import "views";
 @import "items/item";
@@ -81,4 +80,3 @@
 @import "autoflow";
 @import "features/imagery";
 @import "features/time-display";
-@import "widgets";

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

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

platform/commonUI/general/res/sass/_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

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

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

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

platform/commonUI/general/res/sass/controls/_color-palette.scss

@@ -19,26 +19,60 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+.l-color-palette {
+	$d: 16px;
+	$colorsPerRow: 10;
+	$m: 1;
+	$colorSelectedColor: #fff;
 
-define(
-    [],
-    function () {
+	box-sizing: border-box;
+	padding: $interiorMargin !important;
 
-        function SummaryWidgetsCompositionPolicy(openmct) {
-            this.openmct = openmct;
-        }
+	.l-palette-row {
+		@include clearfix;
+		line-height: $d;
+		width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
 
-        SummaryWidgetsCompositionPolicy.prototype.allow = function (parent, child) {
-            var parentType = parent.getCapability('type');
-            var newStyleChild = child.useCapability('adapter');
-
-            if (parentType.instanceOf('summary-widget') && !this.openmct.telemetry.canProvideTelemetry(newStyleChild)) {
-                return false;
+		.l-palette-item {
+			box-sizing: border-box;
+			@include txtShdwSubtle(0.8);
+			@include trans-prop-nice-fade(0.25s);
+			border: 1px solid transparent;
+			color: $colorSelectedColor;
+			display: block;
+			float: left;
+			height: $d; width: $d;
+			line-height: $d * 0.9;
+			margin: 0 ($m * 1px) ($m * 1px) 0;
+			text-align: center;
+            &:before {
+                // Check mark for selected items
+                font-size: 0.8em;
             }
+		}
 
-            return true;
-        };
+		.s-palette-item {
+			&:hover {
+				@include trans-prop-nice-fade(0);
+				border-color: $colorSelectedColor !important;
+			}
+		}
 
-        return SummaryWidgetsCompositionPolicy;
-    }
-);
+		.l-palette-item-label {
+			margin-left: $interiorMargin;
+		}
+
+		&.l-option-row {
+			margin-bottom: $interiorMargin;
+			.s-palette-item {
+				border-color: $colorBodyFg;
+			}
+		}
+	}
+
+
+
+
+
+
+}

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

@@ -72,17 +72,6 @@
     }
 }
 
-// Hyperlink objects
-.s-hyperlink {
-    .label {
-        font-size: 0.8rem !important;
-    }
-    &:not(.s-button) {
-        color: $colorKey;
-        &:hover { color: $colorKeyHov; }
-    }
-}
-
 .s-icon-button {
     // Clickable icon elements that have hover
     @extend .ui-symbol;
@@ -150,26 +139,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,21 +223,24 @@ 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;
     }
 }
 
+body.desktop {
+    input[type="number"] {
+        // Desktop-only, don't pad the side of the input with the spinner
+        padding: $inputTextPVert 0 $inputTextPVert $inputTextPHorz;
+    }
+}
+
 .l-input-sm {
     input[type="text"],
     input[type="search"],
@@ -277,11 +249,40 @@ input[type="number"] {
     }
 }
 
-.l-input-lg input[type="text"],
-input[type="text"].lg {  width: 100% !important; }
-.l-input-med input[type="text"],
-input[type="text"].med { width: 200px !important; }
-input[type="text"].sm, input[type="number"].sm {  width: 50px !important; }
+.l-input-med {
+    input[type="text"],
+    input[type="search"],
+    input[type="number"] {
+        width: 200px !important;
+    }
+}
+
+.l-input-lg {
+    input[type="text"],
+    input[type="search"],
+    input[type="number"] {
+        width: 100% !important;
+    }
+}
+
+input[type="search"].sm,
+input[type="number"].sm,
+input[type="text"].sm {
+    width: 50px !important;
+}
+
+input[type="search"].med,
+input[type="number"].med,
+input[type="text"].med {
+    width: 200px !important;
+}
+
+input[type="search"].lg,
+input[type="number"].lg,
+input[type="text"].lg {
+    width: 100% !important;
+}
+
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }
 
@@ -307,44 +308,21 @@ 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;
+    line-height: $formInputH;
     select {
         @include appearance(none);
         box-sizing: border-box;
-        &:focus { outline: 0; }
         background: none;
         color: $colorSelectFg;
         cursor: pointer;
@@ -356,47 +334,12 @@ input[type="text"].s-input-inline,
         }
     }
     &:before {
-        @include transform(translateY(-50%));
-        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
-        display: block;
+        //@include contextArrow();
         pointer-events: none;
+        color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
+        display: block;
         position: absolute;
-        right: $interiorMargin;
-        top: 50%;
-    }
-}
-
-/******************************************************** AUTOCOMPLETE */
-.autocomplete {
-    input {
-        width: 226px;
-        padding: 5px 0px 5px 7px;
-    }
-    .icon-arrow-down {
-        position: absolute;
-        top: 8px;
-        left: 210px;
-        font-size: 10px;
-        cursor: pointer;
-    }
-    .autocompleteOptions {
-        border: 1px solid $colorFormLines;
-        border-radius: 5px;
-        width: 224px;
-        max-height: 170px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        li {
-            border: 1px solid $colorFormLines;
-            padding: 8px 0px 8px 5px;
-            .optionText {
-                cursor: pointer;
-            }
-        }
-        .optionPreSelected {
-            background-color: $colorInspectorSectionHeaderBg;
-            color: $colorInspectorSectionHeaderFg;
-        }
+        right: $interiorMargin; top: 0;
     }
 }
 
@@ -414,7 +357,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 +524,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 +539,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 {
@@ -756,25 +702,6 @@ textarea {
     @include trans-prop-nice-fade($controlFadeMs);
 }
 
-.view-control {
-    @extend .icon-arrow-right;
-    cursor: pointer;
-    font-size: 0.75em;
-    &:before {
-        position: absolute;
-        @include trans-prop-nice(transform, 100ms);
-        @include transform-origin(center);
-    }
-    &.expanded:before {
-        @include transform(rotate(90deg));
-    }
-}
-
-.grippy {
-    @extend .icon-grippy;
-    cursor: move;
-}
-
 /******************************************************** BROWSER ELEMENTS */
 body.desktop {
     ::-webkit-scrollbar {
@@ -792,15 +719,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,99 +21,92 @@
  *****************************************************************************/
 /******************************************************** 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 {
         // Used in color menu buttons in toolbar
         $d: 10px;
         display: inline-block;
         border: 1px solid rgba($colorBtnFg, 0.2);
         height: $d; width: $d;
-        line-height: $d;
         vertical-align: middle;
         margin-left: $interiorMarginSm;
         margin-top: -2px;
-        &:not(.no-selection) {
-            border-color: transparent;
-        }
     }
 
-    &:after {
-        // 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;
+	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;
@@ -121,8 +114,8 @@
                 display: inline-block;
                 left: $interiorMargin * 2;
             }
-        }
-    }
+		}
+	}
 }
 
 .menu,
@@ -130,97 +123,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%);
@@ -228,104 +218,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

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

@@ -1,89 +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.
- *****************************************************************************/
-.l-palette {
-	box-sizing: border-box;
-	padding: $interiorMargin !important;
-}
-
-.l-palette-row {
-    $d: 16px;
-    $m: 1;
-    $colorsPerRow: 10;
-    display: flex;
-    flex-wrap: wrap;
-    line-height: $d;
-    width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
-
-    &.l-option-row {
-        margin-bottom: $interiorMargin;
-        .s-palette-item {
-            border-color: $colorPaletteFg;
-        }
-    }
-
-    .l-palette-item {
-        box-sizing: border-box;
-        display: block;
-        height: $d; width: $d;
-        min-width: $d;
-        line-height: $d * 0.9;
-        margin: 0 ($m * 1px) ($m * 1px) 0;
-        position: relative;
-        text-align: center;
-    }
-}
-
-.s-palette-item {
-    border: 1px solid transparent;
-    color: $colorPaletteFg;
-    text-shadow: $shdwPaletteFg;
-    @include trans-prop-nice-fade(0.25s);
-    &:hover {
-        @include trans-prop-nice-fade(0);
-        border-color: $colorPaletteSelected !important;
-    }
-    &.selected {
-        border-color: $colorPaletteSelected;
-        box-shadow: $shdwPaletteSelected; //Needed to see selection rect on light colored swatches
-    }
-}
-
-.l-palette-item-label {
-    margin-left: $interiorMargin;
-}
-
-.l-inline-palette {
-    .l-palette-row {
-        width: 100%;
-        .l-palette-item {
-            //@include display(flex);
-            @include flex(1 0 auto);
-            margin: 1px;
-            min-width: auto;
-            width: auto;
-            &:before {
-                content: '';
-                padding-top: 75%;
-            }
-        }
-    }
-}