Moved all internal state logic out of plotcontroller

Move more state management to model
More refactor
2025-06-25 10:44:21 +00:00 · 2017-11-22 18:11:03 -08:00 · 2017-11-22 17:42:06 -08:00 · 2017-11-21 17:08:16 -08:00 · 2017-11-21 16:58:24 -08:00 · 2017-11-21 12:07:02 -08:00
340 changed files with 15960 additions and 10661 deletions
--- a/.gitignore
+++ b/.gitignore
@ -36,3 +36,5 @@ protractor/logs

 # npm-debug log
 npm-debug.log
+
+package-lock.json
--- a/API.md
+++ b/API.md
@ -372,6 +372,7 @@ Known hints:

 * `domain`: Indicates that the value represents the "input" of a datum. Values with a `domain` hint will be used for the x-axis of a plot, and tables will render columns for these values first.
 * `range`: Indicates that the value is the "output" of a datum.  Values with a `range` hint will be used as the y-axis on a plot, and tables will render columns for these values after the `domain` values.
+* `image`: Indicates that the value may be interpreted as the URL to an image file, in which case appropriate views will be made available.

 ##### The Time Conductor and Telemetry 

@ -504,7 +505,7 @@ MCT, it will be pre-configured to use the UTC time system, which is installed an

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

@ -547,29 +548,24 @@ numbers in UTC terrestrial time.

 #### Getting and Setting the Active Time System

-Once registered, a time system can be activated using a key, or an instance of 
-the time system itself.
+Once registered, a time system can be activated by calling `timeSystem` with
+the timeSystem `key` or an instance of the time system.  If you are not using a
+[clock](#clocks), you must also specify valid [bounds](#time-bounds) for the
+timeSystem.

 ```javascript
-openmct.time.timeSystem('utc');
+openmct.time.timeSystem('utc', bounds);
 ```

-A time system can be immediately activated upon registration: 
+A time system can be immediately activated after registration: 

 ```javascript
-var utcTimeSystem = {
-    key: 'utc',
-    name: 'UTC Time',
-    cssClass = 'icon-clock',
-    timeFormat = 'utc',
-    durationFormat = 'duration',
-    isUTCBased = true
-};
 openmct.time.addTimeSystem(utcTimeSystem);
-openmct.time.timeSystem(utcTimeSystem);
+openmct.time.timeSystem(utcTimeSystem, bounds);
 ```

-Setting the active time system will trigger a [time system event](#time-events). 
+Setting the active time system will trigger a [`'timeSystem'`](#time-events) 
+event.  If you supplied bounds, a [`'bounds'`](#time-events) event will be triggered afterwards with your newly supplied bounds.

 ### Time Bounds

@ -592,8 +588,8 @@ let now = Date.now();
 openmct.time.bounds({start: now - ONE_HOUR, now);
 ```

-To respond to bounds change events, simply register a callback against the `bounds`
-event. For more information on the bounds event, please see the section on [Time Events](#time-events).
+To respond to bounds change events, listen for the [`'bounds'`](#time-events)
+event.

 ## Clocks

@ -673,14 +669,16 @@ An example clock implementation is provided in the form of the [LocalClock](http
 Once registered a clock can be activated by calling the `clock` function on the 
 Time API passing in the key or instance of a registered clock. Only one clock 
 may be active at once, so activating a clock will deactivate any currently 
-active clock. Setting the clock will also trigger a ['clock' event](#time-events).
+active clock. [`clockOffsets`](#clock-offsets) must be specified when changing a clock.
+
+Setting the clock triggers a [`'clock'`](#time-events) event, followed by a [`'clockOffsets'`](#time-events) event, and then a [`'bounds'`](#time-events) event as the offsets are applied to the clock's currentValue().
+

 ```
-openmct.time.clock(someClock);
+openmct.time.clock(someClock, clockOffsets);
 ```

-Upon being activated, a clock's `on` function will be immediately called to subscribe
-to `tick` events.
+Upon being activated, the time API will listen for tick events on the clock by calling `clock.on`.

 The currently active clock (if any) can be retrieved by calling the same 
 function without any arguments.
@ -707,7 +705,7 @@ relative time spans. Offsets are defined as an object with two properties:
 * `start`: A `number` that must be < 0 and which is used to calculate the start 
 bounds on each clock tick. The start offset will be calculated relative to the 
 value provided by a clock's tick callback, or its `currentValue()` function.
-* `end`: A `number` that must be >=0 and which is used to calculate the end 
+* `end`: A `number` that must be >= 0 and which is used to calculate the end 
 bounds on each clock tick.

 The `clockOffsets` function can be used to get or set clock offsets. For example, 
@ -728,16 +726,9 @@ Clock offsets are only relevant when a clock source is active.

 ## Time Events

-The time API supports the registration of listeners that will be invoked when the 
-application's temporal state changes. Events listeners can be registered using 
-the `on` function. They can be deregistered using the `off` function. The arguments
-accepted by the `on` and `off` functions are:
+The Time API is a standard event emitter; you can register callbacks for events using the `on` method and remove callbacks for events with the `off` method.

-* `event`: A `string` naming the event to subscribe to. Event names correspond to
-the property of the Time API you're interested in. A [full list of time events](#list-of-time-events) 
-is provided later.
-
-As an example, the code to listen to bounds change events looks like:
+For example:

 ``` javascript
 openmct.time.on('bounds', function callback (newBounds, tick) {
@ -747,40 +738,38 @@ openmct.time.on('bounds', function callback (newBounds, tick) {

 #### List of Time Events

-The events supported by the Time API are:
+The events emitted by the Time API are:

-* `bounds`: Listen for changes to current bounds. The callback will be invoked 
-with two arguments:
-    * `bounds`: A [bounds](#getting-and-setting-bounds) bounds object representing 
-    a new time period bound by the specified start and send times.
-    * `tick`: A `boolean` indicating whether or not this bounds change is due to a 
-    "tick" from a [clock source](#clocks). This information can be useful when 
-    determining a strategy for fetching telemetry data in response to a bounds 
-    change event. For example, if the bounds change was automatic, and is due 
-    to a tick then it's unlikely that you would need to perform a historical 
-    data query. It should be sufficient to just show any new telemetry received 
-    via subscription since the last tick, and optionally to discard any older 
-    data that now falls outside of the currently set bounds. If `tick` is false,
-    then the bounds change was not due to an automatic tick, and a query for 
-    historical data may be necessary, depending on your data caching strategy, 
-    and how significantly the start bound has changed.
-* `timeSystem`: Listen for changes to the active [time system](#defining-and-registering-time-systems).
-The callback will be invoked with a single argument - the newly active time system.
-    * `timeSystem`: The newly active [time system](#defining-and-registering-time-systems) object.
-* `clock`: Listen for changes to the active clock. When invoked, the callback 
-will be provided with the new clock.
-    * `clock`: The newly active [clock](#clocks), or `undefined` if an active clock
-    has been deactivated.
-* `clockOffsets`: Listen for changes to active clock offsets. When invoked the 
-callback will be provided with the new clock offsets.
-    * `clockOffsets`: A [clock offsets](#clock-offsets) object.
+* `bounds`: emitted whenever the bounds change.  The callback will be invoked 
+  with two arguments:
+  * `bounds`: A [bounds](#getting-and-setting-bounds) bounds object
+    representing a new time period bound by the specified start and send times.
+  * `tick`: A `boolean` indicating whether or not this bounds change is due to
+    a "tick" from a [clock source](#clocks). This information can be useful 
+    when determining a strategy for fetching telemetry data in response to a 
+    bounds change event. For example, if the bounds change was automatic, and 
+    is due to a tick then it's unlikely that you would need to perform a 
+    historical data query. It should be sufficient to just show any new 
+    telemetry received via subscription since the last tick, and optionally to 
+    discard any older data that now falls outside of the currently set bounds. 
+    If `tick` is false,then the bounds change was not due to an automatic tick, 
+    and a query for historical data may be necessary, depending on your data 
+    caching strategy, and how significantly the start bound has changed.
+* `timeSystem`: emitted whenever the active time system changes.  The callback will be invoked with a single argument:
+  * `timeSystem`: The newly active [time system](#defining-and-registering-time-systems).
+* `clock`: emitted whenever the clock changes.  The callback will be invoked 
+  with a single argument:
+  * `clock`: The newly active [clock](#clocks), or `undefined` if an active 
+    clock has been deactivated.
+* `clockOffsets`: emitted whenever the active clock offsets change.  The 
+  callback will be invoked with a single argument:
+  * `clockOffsets`: The new [clock offsets](#clock-offsets).


 ## The Time Conductor

-The Time Conductor provides a user interface for managing time bounds in Open MCT.
-It allows a user to select from configured time systems and clocks, and to set bounds
-and clock offsets.
+The Time Conductor provides a user interface for managing time bounds in Open 
+MCT. It allows a user to select from configured time systems and clocks, and to set bounds and clock offsets.

 If activated, the time conductor must be provided with configuration options, 
 detailed below.
--- a/README.md
+++ b/README.md
@ -137,20 +137,6 @@ naming convention is otherwise the same.)
 When `npm test` is run, test results will be written as HTML to
 `target/tests`. Code coverage information is written to `target/coverage`.

-
-### Functional Testing
-
-The tests described above are all at the unit-level; an additional
-test suite using [Protractor](https://angular.github.io/protractor/)
-is under development, in the `protractor` folder.
-
-To run:
-
-* Install protractor following the instructions above.
-* `cd protractor`
-* `npm install`
-* `npm run all`
-
 # Glossary

 Certain terms are used throughout Open MCT with consistent meanings
--- a/bower.json
+++ b/bower.json
@ -22,6 +22,7 @@
    "eventemitter3": "^1.2.0",
    "lodash": "3.10.1",
    "almond": "~0.3.2",
-    "html2canvas": "^0.4.1"
+    "html2canvas": "^0.4.1",
+    "moment-timezone": "^0.5.13"
  }
 }
--- a/circle.yml
+++ b/circle.yml
@ -4,12 +4,6 @@ deployment:
    commands:
        - npm install canvas nomnoml
        - ./build-docs.sh
-        - git fetch --unshallow
-        - git push git@heroku.com:openmctweb-demo.git $CIRCLE_SHA1:refs/heads/master
-  openmct-demo:
-    branch: live_demo
-    heroku:
-      appname: openmct-demo
  openmctweb-staging-deux:
    branch: mobile
    heroku:
--- a/docs/src/guide/index.md
+++ b/docs/src/guide/index.md
@ -933,9 +933,10 @@ Note that `templateUrl` is not supported for `containers`.

 Controls provide options for the `mct-control` directive. 
 
-Ten standard control types are included in the forms bundle:
+These standard control types are included in the forms bundle:

-* `textfield`: An area to enter plain text.
+* `textfield`: A text input to enter plain text.
+* `numberfield`: A text input to enter numbers.
 * `select`: A drop-down list of options.
 * `checkbox`: A box which may be checked/unchecked.
 * `color`: A color picker.
--- a/example/generator/GeneratorProvider.js
+++ b/example/generator/GeneratorProvider.js
@ -30,7 +30,8 @@ define([
        amplitude: 1,
        period: 10,
        offset: 0,
-        dataRateInHz: 1
+        dataRateInHz: 1,
+        phase: 0
    };

    function GeneratorProvider() {
@ -50,9 +51,12 @@ define([
            'amplitude',
            'period',
            'offset',
-            'dataRateInHz'
+            'dataRateInHz',
+            'phase',
        ];

+        request = request || {};
+
        var workerRequest = {};

        props.forEach(function (prop) {
@ -67,7 +71,7 @@ define([
            }
            workerRequest[prop] = Number(workerRequest[prop]);
        });
-
+        workerRequest.name = domainObject.name;
        return workerRequest;
    };

@ -78,8 +82,8 @@ define([
        return this.workerInterface.request(workerRequest);
    };

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

--- a/example/generator/StateGeneratorProvider.js
+++ b/example/generator/StateGeneratorProvider.js
@ -0,0 +1,80 @@
+/*****************************************************************************
+ * 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;
+
+});
--- a/example/generator/generatorWorker.js
+++ b/example/generator/generatorWorker.js
@ -62,10 +62,11 @@
                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),
-                        cos: cos(nextStep, data.period, data.amplitude, data.offset)
+                        sin: sin(nextStep, data.period, data.amplitude, data.offset, data.phase),
+                        cos: cos(nextStep, data.period, data.amplitude, data.offset, data.phase)
                    }
                });
                nextStep += step;
@ -82,33 +83,35 @@
    }

    function onRequest(message) {
-        var data = message.data;
-        if (data.end == undefined) {
-            data.end = Date.now();
+        var request = message.data;
+        if (request.end == undefined) {
+            request.end = Date.now();
        }
-        if (data.start == undefined){
-            data.start = data.end - FIFTEEN_MINUTES;
+        if (request.start == undefined){
+            request.start = request.end - FIFTEEN_MINUTES;
        }

        var now = Date.now();
-        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 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 step = 1000 / dataRateInHz;
        var nextStep = start - (start % step) + step;

        var data = [];

-        for (; nextStep < end; nextStep += step) {
+        for (; nextStep < end && data.length < 5000; nextStep += step) {
            data.push({
+                name: request.name,
                utc: nextStep,
                yesterday: nextStep - 60*60*24*1000,
-                sin: sin(nextStep, period, amplitude, offset),
-                cos: cos(nextStep, period, amplitude, offset)
+                sin: sin(nextStep, period, amplitude, offset, phase),
+                cos: cos(nextStep, period, amplitude, offset, phase)
            });
        }
        self.postMessage({
@ -117,14 +120,14 @@
        });
    }

-    function cos(timestamp, period, amplitude, offset) {
+    function cos(timestamp, period, amplitude, offset, phase) {
        return amplitude *
-            Math.cos(timestamp / period / 1000 * Math.PI * 2) + offset;
+            Math.cos(phase + (timestamp / period / 1000 * Math.PI * 2)) + offset;
    }

-    function sin(timestamp, period, amplitude, offset) {
+    function sin(timestamp, period, amplitude, offset, phase) {
        return amplitude *
-            Math.sin(timestamp / period / 1000 * Math.PI * 2) + offset;
+            Math.sin(phase + (timestamp / period / 1000 * Math.PI * 2)) + offset;
    }

    function sendError(error, message) {
--- a/example/generator/plugin.js
+++ b/example/generator/plugin.js
@ -23,10 +23,12 @@

 define([
    "./GeneratorProvider",
-    "./SinewaveLimitCapability"
+    "./SinewaveLimitCapability",
+    "./StateGeneratorProvider"
 ], function (
    GeneratorProvider,
-    SinewaveLimitCapability
+    SinewaveLimitCapability,
+    StateGeneratorProvider
 ) {

    var legacyExtensions = {
@ -46,6 +48,75 @@ 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.",
@ -99,6 +170,18 @@ 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) {
@ -107,7 +190,12 @@ define([
                    amplitude: 1,
                    offset: 0,
                    dataRateInHz: 1,
+                    phase: 0,
                    values: [
+                        {
+                            key: "name",
+                            name: "Name"
+                        },
                        {
                            key: "utc",
                            name: "Time",
@ -142,6 +230,7 @@ define([
                };
            }
        });
+
        openmct.telemetry.addProvider(new GeneratorProvider());
    };

--- a/example/imagery/bundle.js
+++ b/example/imagery/bundle.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.
- *****************************************************************************/
-/*global define*/
-
-define([
-    "./src/ImageTelemetryProvider",
-    'legacyRegistry'
-], function (
-    ImageTelemetryProvider,
-    legacyRegistry
-) {
-    "use strict";
-
-    legacyRegistry.register("example/imagery", {
-        "name": "Imagery",
-        "description": "Example of a component that produces image telemetry.",
-        "extensions": {
-            "components": [
-                {
-                    "implementation": ImageTelemetryProvider,
-                    "type": "provider",
-                    "provides": "telemetryService",
-                    "depends": [
-                        "$q",
-                        "$timeout"
-                    ]
-                }
-            ],
-            "types": [
-                {
-                    "key": "imagery",
-                    "name": "Example Imagery",
-                    "cssClass": "icon-image",
-                    "features": "creation",
-                    "description": "For development use. Creates example imagery data that mimics a live imagery stream.",
-                    "priority": 10,
-                    "model": {
-                        "telemetry": {}
-                    },
-                    "telemetry": {
-                        "source": "imagery",
-                        "domains": [
-                            {
-                                "name": "Time",
-                                "key": "time",
-                                "format": "utc"
-                            }
-                        ],
-                        "ranges": [
-                            {
-                                "name": "Image",
-                                "key": "url",
-                                "format": "imageUrl"
-                            }
-                        ]
-                    }
-                }
-            ]
-        }
-    });
-});
--- a/example/imagery/plugin.js
+++ b/example/imagery/plugin.js
@ -0,0 +1,145 @@
+/*****************************************************************************
+ * 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 ImageryPlugin() {
+
+        var IMAGE_SAMPLES = [
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
+            ];
+
+        function pointForTimestamp(timestamp, name) {
+            return {
+                name: name,
+                utc: Math.floor(timestamp / 5000) * 5000,
+                url: IMAGE_SAMPLES[Math.floor(timestamp / 5000) % IMAGE_SAMPLES.length]
+            };
+        }
+
+        var realtimeProvider = {
+            supportsSubscribe: function (domainObject) {
+                return domainObject.type === 'example.imagery';
+            },
+            subscribe: function (domainObject, callback) {
+                var interval = setInterval(function () {
+                    callback(pointForTimestamp(Date.now(), domainObject.name));
+                }, 5000);
+
+                return function (interval) {
+                    clearInterval(interval);
+                };
+            }
+        };
+
+        var historicalProvider = {
+            supportsRequest: function (domainObject, options) {
+                return domainObject.type === 'example.imagery'
+                    && options.strategy !== 'latest';
+            },
+            request: function (domainObject, options) {
+                var start = options.start;
+                var end = options.end;
+                var data = [];
+                while (start <= end && data.length < 5000) {
+                    data.push(pointForTimestamp(start, domainObject.name));
+                    start += 5000;
+                }
+                return Promise.resolve(data);
+            }
+        };
+
+        var ladProvider = {
+            supportsRequest: function (domainObject, options) {
+                return domainObject.type === 'example.imagery' &&
+                    options.strategy === 'latest';
+            },
+            request: function (domainObject, options) {
+                return Promise.resolve([pointForTimestamp(Date.now(), domainObject.name)]);
+            }
+        };
+
+
+        return function install(openmct) {
+            openmct.types.addType('example.imagery', {
+                key: 'example.imagery',
+                name: 'Example Imagery',
+                cssClass: 'icon-image',
+                description: 'For development use. Creates example imagery ' +
+                    'data that mimics a live imagery stream.',
+                creatable: true,
+                initialize: function (object) {
+                    object.telemetry = {
+                        values: [
+                            {
+                                name: 'Name',
+                                key: 'name'
+                            },
+                            {
+                                name: 'Time',
+                                key: 'utc',
+                                format: 'utc',
+                                hints: {
+                                    domain: 1
+                                }
+                            },
+                            {
+                                name: 'Image',
+                                key: 'url',
+                                format: 'image',
+                                hints: {
+                                    image: 1
+                                }
+                            }
+                        ]
+                    }
+                }
+            });
+
+            openmct.telemetry.addProvider(realtimeProvider);
+            openmct.telemetry.addProvider(historicalProvider);
+            openmct.telemetry.addProvider(ladProvider);
+        };
+    }
+
+    return ImageryPlugin;
+});
--- a/example/imagery/src/ImageTelemetry.js
+++ b/example/imagery/src/ImageTelemetry.js
@ -1,81 +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.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining ImageTelemetry. Created by vwoeltje on 06/22/15.
- */
-define(
-    [],
-    function () {
-        "use strict";
-
-        var firstObservedTime = Date.now(),
-            images = [
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
-
-            ].map(function (url, index) {
-                return {
-                    timestamp: firstObservedTime + 1000 * index,
-                    url: url
-                };
-            });
-
-
-        /**
-         *
-         * @constructor
-         */
-        function ImageTelemetry() {
-            return {
-                getPointCount: function () {
-                    return Math.floor((Date.now() - firstObservedTime) / 1000);
-                },
-                getDomainValue: function (i, domain) {
-                    return images[i % images.length].timestamp;
-                },
-                getRangeValue: function (i, range) {
-                    return images[i % images.length].url;
-                }
-            };
-        }
-
-        return ImageTelemetry;
-    }
-);
--- a/example/imagery/src/ImageTelemetryProvider.js
+++ b/example/imagery/src/ImageTelemetryProvider.js
@ -1,115 +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.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining ImageTelemetryProvider. Created by vwoeltje on 06/22/15.
- */
-define(
-    ["./ImageTelemetry"],
-    function (ImageTelemetry) {
-        "use strict";
-
-        /**
-         *
-         * @constructor
-         */
-        function ImageTelemetryProvider($q, $timeout) {
-            var subscriptions = [];
-
-            //
-            function matchesSource(request) {
-                return request.source === "imagery";
-            }
-
-            // Used internally; this will be repacked by doPackage
-            function generateData(request) {
-                return {
-                    key: request.key,
-                    telemetry: new ImageTelemetry()
-                };
-            }
-
-            //
-            function doPackage(results) {
-                var packaged = {};
-                results.forEach(function (result) {
-                    packaged[result.key] = result.telemetry;
-                });
-                // Format as expected (sources -> keys -> telemetry)
-                return { imagery: packaged };
-            }
-
-            function requestTelemetry(requests) {
-                return $timeout(function () {
-                    return doPackage(requests.filter(matchesSource).map(generateData));
-                }, 0);
-            }
-
-            function handleSubscriptions() {
-                subscriptions.forEach(function (subscription) {
-                    var requests = subscription.requests;
-                    subscription.callback(doPackage(
-                        requests.filter(matchesSource).map(generateData)
-                    ));
-                });
-            }
-
-            function startGenerating() {
-                $timeout(function () {
-                    handleSubscriptions();
-                    if (subscriptions.length > 0) {
-                        startGenerating();
-                    }
-                }, 1000);
-            }
-
-            function subscribe(callback, requests) {
-                var subscription = {
-                    callback: callback,
-                    requests: requests
-                };
-
-                function unsubscribe() {
-                    subscriptions = subscriptions.filter(function (s) {
-                        return s !== subscription;
-                    });
-                }
-
-                subscriptions.push(subscription);
-
-                if (subscriptions.length === 1) {
-                    startGenerating();
-                }
-
-                return unsubscribe;
-            }
-
-            return {
-                requestTelemetry: requestTelemetry,
-                subscribe: subscribe
-            };
-        }
-
-        return ImageTelemetryProvider;
-    }
-);
--- a/example/styleguide/bundle.js
+++ b/example/styleguide/bundle.js
@ -16,6 +16,7 @@ define([
                { "key": "styleguide.intro", "name": "Introduction", "cssClass": "icon-page", "description": "Introduction and overview to the style guide" },
                { "key": "styleguide.standards", "name": "Standards", "cssClass": "icon-page", "description": "" },
                { "key": "styleguide.colors", "name": "Colors", "cssClass": "icon-page", "description": "" },
+                { "key": "styleguide.status", "name": "status", "cssClass": "icon-page", "description": "Limits, telemetry paused, etc." },
                { "key": "styleguide.glyphs", "name": "Glyphs", "cssClass": "icon-page", "description": "Glyphs overview" },
                { "key": "styleguide.controls", "name": "Controls", "cssClass": "icon-page", "description": "Buttons, selects, HTML controls" },
                { "key": "styleguide.input", "name": "Text Inputs", "cssClass": "icon-page", "description": "Various text inputs" },
@ -25,6 +26,7 @@ define([
                { "key": "styleguide.intro", "type": "styleguide.intro", "templateUrl": "templates/intro.html", "editable": false },
                { "key": "styleguide.standards", "type": "styleguide.standards", "templateUrl": "templates/standards.html", "editable": false },
                { "key": "styleguide.colors", "type": "styleguide.colors", "templateUrl": "templates/colors.html", "editable": false },
+                { "key": "styleguide.status", "type": "styleguide.status", "templateUrl": "templates/status.html", "editable": false },
                { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "templateUrl": "templates/glyphs.html", "editable": false },
                { "key": "styleguide.controls", "type": "styleguide.controls", "templateUrl": "templates/controls.html", "editable": false },
                { "key": "styleguide.input", "type": "styleguide.input", "templateUrl": "templates/input.html", "editable": false },
@ -47,6 +49,7 @@ define([
                            "intro",
                            "standards",
                            "colors",
+                            "status",
                            "glyphs",
                            "styleguide:ui-elements"
                        ]
--- a/example/styleguide/res/sass/_style-guide-base.scss
+++ b/example/styleguide/res/sass/_style-guide-base.scss
@ -28,8 +28,8 @@
        color: $colorKey;
    }

-    h1, h2 {
-        color: pullForward($colorBodyFg, 20%);
+    h1, h2, strong, b {
+        color: pullForward($colorBodyFg, 50%);
    }

    h2 {
@ -45,6 +45,10 @@
        text-transform: uppercase;
    }

+    strong, b {
+        font-weight: normal;
+    }
+
    .w-markup {
        //Wrap markup example "pre" element
        background-color: $colorCode;
@ -54,6 +58,12 @@
        position: relative;
    }

+    .w-mct-example {
+        div {
+            margin-bottom: $interiorMarginLg;
+        }
+    }
+
    code,
    pre {
        font-size: 0.8rem;
@ -143,6 +153,17 @@

    // 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;
@ -155,15 +176,6 @@
                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 {
--- a/example/styleguide/res/templates/glyphs.html
+++ b/example/styleguide/res/templates/glyphs.html
@ -48,7 +48,9 @@
 { 'meaning': 'General usage plus symbol; used in timer object', 'cssClass': 'icon-plus', 'cssContent': 'e926', 'htmlEntity': '&amp;#xe926' },
 { 'meaning': 'Delete', 'cssClass': 'icon-trash', 'cssContent': 'e927', 'htmlEntity': '&amp;#xe927' },
 { 'meaning': 'Close, remove', 'cssClass': 'icon-x', 'cssContent': 'e928', 'htmlEntity': '&amp;#xe928' },
-{ 'meaning': 'Enclosing, inclusive; used in Time Conductor', 'cssClass': 'icon-brackets', 'cssContent': 'e929', 'htmlEntity': '&amp;#xe929' }
+{ 'meaning': 'Enclosing, inclusive; used in Time Conductor', 'cssClass': 'icon-brackets', 'cssContent': 'e929', 'htmlEntity': '&amp;#xe929' },
+{ 'meaning': 'Something is targeted', 'cssClass': 'icon-crosshair', 'cssContent': 'e930', 'htmlEntity': '&amp;#xe930' },
+{ 'meaning': 'Draggable', 'cssClass': 'icon-grippy', 'cssContent': 'e931', 'htmlEntity': '&amp;#xe931' }
 ]; controls= [{ 'meaning': 'Reset zoom/pam', 'cssClass': 'icon-arrows-out', 'cssContent': 'e1000', 'htmlEntity': '&amp;#xe1000' },
 { 'meaning': 'Expand vertically', 'cssClass': 'icon-arrows-right-left', 'cssContent': 'e1001', 'htmlEntity': '&amp;#xe1001' },
 { 'meaning': 'View scrolling', 'cssClass': 'icon-arrows-up-down', 'cssContent': 'e1002', 'htmlEntity': '&amp;#xe1002' },
@ -84,10 +86,17 @@
 { 'meaning': 'Image thumbs strip; view items grid', 'cssClass': 'icon-thumbs-strip', 'cssContent': 'e1033', 'htmlEntity': '&amp;#xe1033' },
 { 'meaning': 'Two part item, both parts', 'cssClass': 'icon-two-parts-both', 'cssContent': 'e1034', 'htmlEntity': '&amp;#xe1034' },
 { 'meaning': 'Two part item, one only', 'cssClass': 'icon-two-parts-one-only', 'cssContent': 'e1035', 'htmlEntity': '&amp;#xe1035' },
+{ 'meaning': 'Resync', 'cssClass': 'icon-resync', 'cssContent': 'e1036', 'htmlEntity': '&amp;#xe1036' },
+{ 'meaning': 'Reset', 'cssClass': 'icon-reset', 'cssContent': 'e1037', 'htmlEntity': '&amp;#xe1037' },
 { 'meaning': 'Clear', 'cssClass': 'icon-x-in-circle', 'cssContent': 'e1038', 'htmlEntity': '&amp;#xe1038' },
 { 'meaning': 'Brightness', 'cssClass': 'icon-brightness', 'cssContent': 'e1039', 'htmlEntity': '&amp;#xe1039' },
 { 'meaning': 'Contrast', 'cssClass': 'icon-contrast', 'cssContent': 'e1040', 'htmlEntity': '&amp;#xe1040' },
-{ 'meaning': 'Expand', 'cssClass': 'icon-expand', 'cssContent': 'e1041', 'htmlEntity': '&amp;#xe1041' }
+{ 'meaning': 'Expand', 'cssClass': 'icon-expand', 'cssContent': 'e1041', 'htmlEntity': '&amp;#xe1041' },
+{ 'meaning': 'View items in a tabular list', 'cssClass': 'icon-list-view', 'cssContent': 'e1042', 'htmlEntity': '&amp;#xe1042' },
+{ 'meaning': 'Snap an object corner to a grid', 'cssClass': 'icon-grid-snap-to', 'cssContent': 'e1043', 'htmlEntity': '&amp;#xe1043' },
+{ 'meaning': 'Do not snap an object corner to a grid', 'cssClass': 'icon-grid-snap-no', 'cssContent': 'e1044', 'htmlEntity': '&amp;#xe1044' },
+{ 'meaning': 'Show an object frame in a Display Layout', 'cssClass': 'icon-frame-show', 'cssContent': 'e1045', 'htmlEntity': '&amp;#xe1045' },
+{ 'meaning': 'Do not show an object frame in a Display Layout', 'cssClass': 'icon-frame-hide', 'cssContent': 'e1046', 'htmlEntity': '&amp;#xe1046' }
 ]; objects= [{ 'meaning': 'Activity', 'cssClass': 'icon-activity', 'cssContent': 'e1100', 'htmlEntity': '&amp;#xe1100' },
 { 'meaning': 'Activity Mode', 'cssClass': 'icon-activity-mode', 'cssContent': 'e1101', 'htmlEntity': '&amp;#xe1101' },
 { 'meaning': 'Auto-flow Tabular view', 'cssClass': 'icon-autoflow-tabular', 'cssContent': 'e1102', 'htmlEntity': '&amp;#xe1102' },
@ -117,7 +126,9 @@
 { 'meaning': 'Timeline object', 'cssClass': 'icon-timeline', 'cssContent': 'e1126', 'htmlEntity': '&amp;#xe1126' },
 { 'meaning': 'Timer object', 'cssClass': 'icon-timer', 'cssContent': 'e1127', 'htmlEntity': '&amp;#xe1127' },
 { 'meaning': 'Data Topic', 'cssClass': 'icon-topic', 'cssContent': 'e1128', 'htmlEntity': '&amp;#xe1128' },
-{ 'meaning': 'Fixed Position object', 'cssClass': 'icon-box-with-dashed-lines', 'cssContent': 'e1129', 'htmlEntity': '&amp;#xe1129' }
+{ 'meaning': 'Fixed Position object', 'cssClass': 'icon-box-with-dashed-lines', 'cssContent': 'e1129', 'htmlEntity': '&amp;#xe1129' },
+{ 'meaning': 'Summary Widget', 'cssClass': 'icon-summary-widget', 'cssContent': 'e1130', 'htmlEntity': '&amp;#xe1130' },
+{ 'meaning': 'Notebook object', 'cssClass': 'icon-notebook', 'cssContent': 'e1131', 'htmlEntity': '&amp;#xe1131' }
 ];
 "></div>

@ -141,8 +152,8 @@
        <h2>How to Use Glyphs</h2>
        <div class="cols cols1-1">
            <div class="col">
-                <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>
+                <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>
            </div>
            <mct-example><a class="s-button icon-gear" title="Settings"></a>
 <br /><br />
@ -160,8 +171,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">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">Meaning</td><td class="value">{{glyph.meaning}}</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>
@ -176,8 +187,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">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">Meaning</td><td class="value">{{glyph.meaning}}</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>
@ -192,8 +203,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">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">Meaning</td><td class="value">{{glyph.meaning}}</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>
--- a/example/styleguide/res/templates/mct-example.html
+++ b/example/styleguide/res/templates/mct-example.html
@ -4,5 +4,5 @@
        <pre></pre>
    </span>
    <h3>Example</h3>
-    <div></div>
+    <div class="w-mct-example"></div>
 </div>
--- a/example/styleguide/res/templates/status.html
+++ b/example/styleguide/res/templates/status.html
@ -0,0 +1,142 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<style>
+    .w-mct-example div[class*="s-limit"],
+    .w-mct-example div[class*="s-status"],
+    .w-mct-example div[class*="s-unsynced"],
+    .w-mct-example span[class*="s-limit"] {
+        border-radius: 4px;
+        padding: 3px 7px;
+    }
+    .w-mct-example table {
+        width: 100%;
+    }
+</style>
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Status Indication</h1>
+
+    <div class="l-section">
+        <h2>Overview</h2>
+        <p>Many elements in Open MCT need to articulate a dynamic status; Open MCT provides the following styles and conventions to handle this:</p>
+        <ul>
+            <li><strong>Limits</strong>: when telemetry values exceed minimum or maximum values, they can be violating limits. Limit styles include both color and iconography; color is used to indicate severity while icons are used to indicate direction, upper or lower.</li>
+            <li><strong>Status</strong>: Open MCT also provides a number or built-in Status styles allowing telemetry or other displayed information to be visually classified by type. Common uses for these classes are to visually denote event records.</li>
+            <li><strong>Synchronization</strong>: When the system is displaying real-time data, it is very important that displays clearly indicate when they are not doing so, such as when a plot if frozen while panning or zooming. Open MCT provides a style for this.</li>
+        </ul>
+    </div>
+
+    <div class="l-section">
+        <h2>Limits</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Limit CSS classes can be applied to any block or inline element. Open MCT limit classes set color and optionally an icon, but don't effect other properties. Yellow and red limit classes can be used as is, or allow the application of any custom icon available in Open MCT's glyphs library. &quot;Level&quot; limit classes - upper and lower - always use an icon in addition to a color; Open MCT doesn't support level limits without color.</p>
+                <ul>
+                    <li>Color only</li>
+                    <ul>
+                        <li><code>s-limit-yellow</code>: A yellow limit.</li>
+                        <li><code>s-limit-red</code>: A red limit.</li>
+                    </ul>
+                    <li>Color and icon</li>
+                    <ul>
+                        <li><code>s-limit-yellow-icon</code>: A yellow limit with icon.</li>
+                        <li><code>s-limit-red-icon</code>: A red limit with icon.</li>
+                    </ul>
+                    <li>Upper and lower limit indicators. Must be used with a color limit class to be visible.</li>
+                    <ul>
+                        <li><code>s-limit-upr</code>: Upper limit.
+                        </li>
+                        <li><code>s-limit-lwr</code>: Lower limit.
+                        </li>
+                    </ul>
+                </ul>
+            </div>
+<mct-example><div class="s-limit-yellow">Yellow limit</div>
+<div class="s-limit-red">Red limit</div>
+<div class="s-limit-yellow-icon">Yellow limit with icon</div>
+<div class="s-limit-red-icon">Red limit with icon</div>
+<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
+<div class="s-limit-red s-limit-upr">Upper red limit</div>
+<div class="s-limit-red icon-bell">Red Limit with a custom icon</div>
+<div>Some text with an <span class="s-limit-yellow-icon">inline element</span> showing a yellow limit.</div>
+
+<!-- Limits applied in a table -->
+<table>
+    <tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
+    <tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
+    <tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
+    <tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-bell">0.451</td><td>1.007</td></tr>
+</table>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Status</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Classes here can be applied to elements as needed.</p>
+                <ul>
+                    <li>Color only</li>
+                    <ul>
+                        <li><code>s-status-warning-hi</code></li>
+                        <li><code>s-status-warning-lo</code></li>
+                        <li><code>s-status-diagnostic</code></li>
+                        <li><code>s-status-info</code></li>
+                        <li><code>s-status-ok</code></li>
+                    </ul>
+                    <li>Color and icon</li>
+                    <ul>
+                        <li><code>s-status-warning-hi-icon</code></li>
+                        <li><code>s-status-warning-lo-icon</code></li>
+                        <li><code>s-status-diagnostic-icon</code></li>
+                        <li><code>s-status-info-icon</code></li>
+                        <li><code>s-status-ok-icon</code></li>
+                    </ul>
+                </ul>
+            </div>
+<mct-example><div class="s-status-warning-hi">WARNING HI</div>
+<div class="s-status-warning-lo">WARNING LOW</div>
+<div class="s-status-diagnostic">DIAGNOSTIC</div>
+<div class="s-status-info">INFO</div>
+<div class="s-status-ok">OK</div>
+<div class="s-status-warning-hi-icon">WARNING HI with icon</div>
+<div class="s-status-warning-lo-icon">WARNING LOW with icon</div>
+<div class="s-status-diagnostic-icon">DIAGNOSTIC with icon</div>
+<div class="s-status-info-icon">INFO with icon</div>
+<div class="s-status-ok-icon">OK with icon</div>
+<div class="s-status-warning-hi icon-gear">WARNING HI with custom icon</div>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Synchronization</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>When the system is operating in real-time streaming mode, it is important for views that display real-time data to clearly articulate when they are not, such as when a user zooms or pans a plot view, freezing that view. In that case, the CSS class <code>s-unsynced</code> should be applied to that view.</p>
+            </div>
+<mct-example><div class="s-unsynced">This element is unsynced</div>
+</mct-example>
+        </div>
+    </div>
+</div>
--- a/example/styleguide/src/ExampleStyleGuideModelProvider.js
+++ b/example/styleguide/src/ExampleStyleGuideModelProvider.js
@ -34,6 +34,7 @@ define(
            pages['standards'] = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" };
            pages['colors'] = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" };
            pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" };
+            pages['status'] = { name: "Status Indication", type: "styleguide.status", location: "styleguide:home" };
            pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" };
            pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" };
            pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };
--- a/gulpfile.js
+++ b/gulpfile.js
@ -46,9 +46,22 @@ var gulp = require('gulp'),
            name: 'bower_components/almond/almond.js',
            include: paths.main.replace('.js', ''),
            wrap: {
-                startFile: "src/start.frag",
+                start: (function () {
+                    var buildVariables = {
+                        version: project.version,
+                        timestamp: moment.utc(Date.now()).format(),
+                        revision: fs.existsSync('.git') ? git.long() : 'Unknown',
+                        branch: fs.existsSync('.git') ? git.branch() : 'Unknown'
+                    };
+                    return fs.readFileSync("src/start.frag", 'utf-8')
+                        .replace(/@@(\w+)/g, function (match, key) {
+                            return buildVariables[key];
+                        });;
+                }()),
                endFile: "src/end.frag"
            },
+            optimize: 'uglify2',
+            uglify2: { output: { comments: /@preserve/ } },
            mainConfigFile: paths.main,
            wrapShim: true
        },
@ -58,14 +71,6 @@ var gulp = require('gulp'),
        },
        sass: {
            sourceComments: true
-        },
-        replace: {
-            variables: {
-                version: project.version,
-                timestamp: moment.utc(Date.now()).format(),
-                revision: fs.existsSync('.git') ? git.long() : 'Unknown',
-                branch: fs.existsSync('.git') ? git.branch() : 'Unknown'
-            }
        }
    };

@ -76,12 +81,11 @@ if (process.env.NODE_ENV === 'development') {

 gulp.task('scripts', function () {
    var requirejsOptimize = require('gulp-requirejs-optimize');
-    var replace = require('gulp-replace-task');
+
    return gulp.src(paths.main)
        .pipe(sourcemaps.init())
        .pipe(requirejsOptimize(options.requirejsOptimize))
        .pipe(sourcemaps.write('.'))
-        .pipe(replace(options.replace))
        .pipe(gulp.dest(paths.dist));
 });

--- a/index.html
+++ b/index.html
@ -32,7 +32,6 @@

        require(['openmct'], function (openmct) {
            [
-                'example/imagery',
                'example/eventGenerator',
                'example/styleguide'
            ].forEach(
@ -40,10 +39,34 @@
            );
            openmct.install(openmct.plugins.MyItems());
            openmct.install(openmct.plugins.LocalStorage());
-            openmct.install(openmct.plugins.Espresso());
+            openmct.install(openmct.plugins.Snow());
            openmct.install(openmct.plugins.Generator());
+            openmct.install(openmct.plugins.ExampleImagery());
            openmct.install(openmct.plugins.UTCTimeSystem());
-            openmct.time.timeSystem("utc", {start: Date.now() - THIRTY_MINUTES, end: Date.now()});
+            openmct.install(openmct.plugins.ImportExport());
+            openmct.install(openmct.plugins.Conductor({
+                menuOptions: [
+                    {
+                        name: "Fixed",
+                        timeSystem: 'utc',
+                        bounds: {
+                            start: Date.now() - 30 * 60 * 1000,
+                            end: Date.now()
+                        }
+                    },
+                    {
+                        name: "Realtime",
+                        timeSystem: 'utc',
+                        clock: 'local',
+                        clockOffsets: {
+                            start: -25 * 60 * 1000,
+                            end: 5 * 60 * 1000
+                        }
+                    }
+                ]
+            }));
+            openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
+            openmct.time.timeSystem('utc');
            openmct.start();
        });
    </script>
--- a/openmct.js
+++ b/openmct.js
@ -19,7 +19,7 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/*global requirejs*/
+/*global requirejs,BUILD_CONSTANTS*/

 requirejs.config({
    "paths": {
@ -32,6 +32,7 @@ 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/FileSaver.js/FileSaver.min",
        "screenfull": "bower_components/screenfull/dist/screenfull.min",
        "text": "bower_components/text/text",
@ -90,12 +91,17 @@ requirejs.config({
 define([
    './platform/framework/src/Main',
    './src/defaultRegistry',
-    './src/MCT'
-], function (Main, defaultRegistry, MCT) {
+    './src/MCT',
+    './src/plugins/buildInfo/plugin'
+], function (Main, defaultRegistry, MCT, buildInfo) {
    var openmct = new MCT();

    openmct.legacyRegistry = defaultRegistry;

+    if (typeof BUILD_CONSTANTS !== 'undefined') {
+        openmct.install(buildInfo(BUILD_CONSTANTS));
+    }
+
    openmct.on('start', function () {
        return new Main().run(defaultRegistry);
    });
--- a/package.json
+++ b/package.json
@ -21,12 +21,11 @@
    "bower": "^1.7.7",
    "git-rev-sync": "^1.4.0",
    "glob": ">= 3.0.0",
-    "gulp": "^3.9.0",
+    "gulp": "^3.9.1",
    "gulp-jscs": "^3.0.2",
    "gulp-jshint": "^2.0.0",
    "gulp-jshint-html-reporter": "^0.1.3",
    "gulp-rename": "^1.2.2",
-    "gulp-replace-task": "^0.11.0",
    "gulp-requirejs-optimize": "^0.3.1",
    "gulp-sass": "^2.2.0",
    "gulp-sourcemaps": "^1.6.0",
--- a/platform/commonUI/browse/bundle.js
+++ b/platform/commonUI/browse/bundle.js
@ -26,6 +26,7 @@ define([
    "./src/InspectorPaneController",
    "./src/BrowseObjectController",
    "./src/MenuArrowController",
+    "./src/ObjectHeaderController",
    "./src/navigation/NavigationService",
    "./src/navigation/NavigateAction",
    "./src/navigation/OrphanNavigationHandler",
@ -36,6 +37,7 @@ define([
    "text!./res/templates/browse-object.html",
    "text!./res/templates/items/grid-item.html",
    "text!./res/templates/browse/object-header.html",
+    "text!./res/templates/browse/object-header-frame.html",
    "text!./res/templates/menu-arrow.html",
    "text!./res/templates/back-arrow.html",
    "text!./res/templates/items/items.html",
@ -48,6 +50,7 @@ define([
    InspectorPaneController,
    BrowseObjectController,
    MenuArrowController,
+    ObjectHeaderController,
    NavigationService,
    NavigateAction,
    OrphanNavigationHandler,
@ -58,6 +61,7 @@ define([
    browseObjectTemplate,
    gridItemTemplate,
    objectHeaderTemplate,
+    objectHeaderFrameTemplate,
    menuArrowTemplate,
    backArrowTemplate,
    itemsTemplate,
@ -107,7 +111,9 @@ define([
                    "depends": [
                        "$scope",
                        "agentService",
-                        "$window"
+                        "$window",
+                        "$location",
+                        "$attrs"
                    ]
                },
                {
@ -134,7 +140,16 @@ define([
                        "$scope",
                        "agentService",
                        "$window",
-                        "navigationService"
+                        "navigationService",
+                        "$location",
+                        "$attrs"
+                    ]
+                },
+                {
+                    "key": "ObjectHeaderController",
+                    "implementation": ObjectHeaderController,
+                    "depends": [
+                        "$scope"
                    ]
                }
            ],
@ -169,6 +184,13 @@ define([
                        "type"
                    ]
                },
+                {
+                    "key": "object-header-frame",
+                    "template": objectHeaderFrameTemplate,
+                    "uses": [
+                        "type"
+                    ]
+                },
                {
                    "key": "menu-arrow",
                    "template": menuArrowTemplate,
@ -240,7 +262,7 @@ define([
            "views": [
                {
                    "key": "items",
-                    "name": "Items",
+                    "name": "Grid",
                    "cssClass": "icon-thumbs-strip",
                    "description": "Grid of available items",
                    "template": itemsTemplate,
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <div ng-controller="BrowseObjectController" class="abs l-flex-col">
-    <div class="holder flex-elem l-flex-row object-browse-bar ">
+    <div class="holder flex-elem l-flex-row object-browse-bar t-primary">
        <div class="items-select left flex-elem l-flex-row grows">
            <mct-representation key="'back-arrow'"
                                mct-object="domainObject"
@ -31,16 +31,18 @@
            </mct-representation>
        </div>
        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <mct-representation key="'switcher'"
-                                mct-object="domainObject"
-                                ng-model="representation">
-            </mct-representation>
-            <!-- Temporarily, on mobile, the action buttons are hidden-->
-            <mct-representation key="'action-group'"
-                                mct-object="domainObject"
-                                parameters="{ category: 'view-control' }"
-                                class="mobile-hide">
-            </mct-representation>
+            <span class="l-object-action-buttons">
+                <mct-representation key="'switcher'"
+                                    mct-object="domainObject"
+                                    ng-model="representation">
+                </mct-representation>
+                <!-- Temporarily, on mobile, the action buttons are hidden-->
+                <mct-representation key="'action-group'"
+                                    mct-object="domainObject"
+                                    parameters="{ category: 'view-control' }"
+                                    class="mobile-hide l-object-action-buttons">
+                </mct-representation>
+            </span>
        </div>
    </div>
    <div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/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'">
+         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'" hide-parameter="hideTree">
        <mct-split-pane class='abs contents'
-                        anchor='left'>
+                        anchor='left' alias="leftSide">
            <div class='split-pane-component treeview pane left'>
                <div class="abs holder l-flex-col holder-treeview-elements">
                    <mct-representation key="'create-button'"
@ -58,9 +58,10 @@

                <div class='holder holder-object-and-inspector abs' id='content-area'
                     ng-controller="InspectorPaneController as modelPaneInspect"
-                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
+                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'" 
+                     hide-parameter="hideInspector">

-                    <mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
+                    <mct-split-pane class='l-object-and-inspector contents abs' anchor='right' alias="rightSide">
                        <div class='split-pane-component t-object pane primary-pane left'>
                            <mct-representation mct-object="navigatedObject"
                                                key="navigatedObject.getCapability('status').get('editing') ? 'edit-object' : 'browse-object'"
@ -87,4 +88,3 @@
    </div>
    <mct-include key="'bottombar'"></mct-include>
 </div>
-
--- a/platform/commonUI/browse/res/templates/browse/object-header-frame.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header-frame.html
@ -0,0 +1,31 @@
+<!--
+ Open MCT, Copyright (c) 2014-2017, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<span class='type-icon flex-elem {{type.getCssClass()}}'></span>
+<span class="l-elem-wrapper l-flex-row flex-elem grows" ng-controller="ObjectHeaderController as controller">
+    <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
+    <span class='title-label flex-elem holder flex-can-shrink s-input-inline'>{{model.name}}</span>
+    <span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
+    <mct-representation
+        key="'menu-arrow'"
+        mct-object='domainObject'
+        class="flex-elem context-available-w"></mct-representation>
+</span>
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@ -20,12 +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">
+<span class="l-elem-wrapper l-flex-row flex-elem grows" ng-controller="ObjectHeaderController as controller">
    <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
-    <span class='title-label flex-elem holder flex-can-shrink'>{{model.name}}</span>
+    <span ng-attr-contenteditable="{{ controller.editable ? true : undefined }}"
+		class='title-label flex-elem holder flex-can-shrink s-input-inline'
+		ng-click="controller.edit()"
+		ng-blur="controller.updateName($event)"
+		ng-keypress="controller.updateName($event)">{{model.name}}</span>
    <span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
    <mct-representation
        key="'menu-arrow'"
        mct-object='domainObject'
        class="flex-elem context-available-w"></mct-representation>
-</span>
+</span>
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@ -25,8 +25,8 @@
 * @namespace platform/commonUI/browse
 */
 define(
-    [],
-    function () {
+    ['lodash'],
+    function (_) {

        /**
         * The BrowseController is used to populate the initial scope in Browse
@ -157,12 +157,28 @@ 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) {
+            $scope.$on('$routeChangeStart', function (event, route, oldRoute) {
                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('/'));
+
+                        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);
+                                    });
+                                }
+                            });
                    } else {
                        navigateToPath([]);
                    }
--- a/platform/commonUI/browse/src/InspectorPaneController.js
+++ b/platform/commonUI/browse/src/InspectorPaneController.js
@ -35,9 +35,8 @@ define(
         * @param navigationService
         * @constructor
         */
-        function InspectorPaneController($scope, agentService, $window, navigationService) {
-            PaneController.call(this, $scope, agentService, $window);
-
+        function InspectorPaneController($scope, agentService, $window, navigationService, $location, $attrs) {
+            PaneController.call(this, $scope, agentService, $window, $location, $attrs);
            var statusListener,
                self = this;

--- a/platform/commonUI/browse/src/ObjectHeaderController.js
+++ b/platform/commonUI/browse/src/ObjectHeaderController.js
@ -0,0 +1,92 @@
+/*****************************************************************************
+ * 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;
+    }
+);
--- a/platform/commonUI/browse/src/PaneController.js
+++ b/platform/commonUI/browse/src/PaneController.js
@ -31,12 +31,17 @@ define(
         * @constructor
         * @memberof platform/commonUI/browse
         */
-        function PaneController($scope, agentService, $window) {
+        function PaneController($scope, agentService, $window, $location, $attrs) {
            var self = this;
            this.agentService = agentService;
+            var hideParameterPresent = $location.search().hasOwnProperty($attrs.hideParameter);

-            // Fast and cheap: if this has been opened in a new window, hide panes by default
-            this.state = !$window.opener;
+            if ($attrs.hideParameter && hideParameterPresent) {
+                this.state = false;
+                $location.search($attrs.hideParameter, undefined);
+            } else {
+                this.state = true;
+            }

            /**
             * Callback to invoke when any selection occurs in the tree.
@ -70,7 +75,7 @@ define(
         * @returns {boolean} true when visible
         */
        PaneController.prototype.visible = function () {
-            return this.state;
+            return !!this.state;
        };

        return PaneController;
--- a/platform/commonUI/browse/src/windowing/NewTabAction.js
+++ b/platform/commonUI/browse/src/windowing/NewTabAction.js
@ -38,6 +38,7 @@ define(

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

--- a/platform/commonUI/browse/test/InspectorPaneControllerSpec.js
+++ b/platform/commonUI/browse/test/InspectorPaneControllerSpec.js
@ -33,7 +33,9 @@ define(
                mockNavigationService,
                mockNavigationUnlistener,
                mockStatusUnlistener,
-                controller;
+                controller,
+                mockLocation,
+                mockAttrs;

            beforeEach(function () {
                mockScope = jasmine.createSpyObj("$scope", ["$on"]);
@ -71,7 +73,12 @@ define(
                mockDomainObject.hasCapability.andReturn(true);
                mockDomainObject.getCapability.andReturn(mockStatusCapability);

-                controller = new InspectorPaneController(mockScope, mockAgentService, mockWindow, mockNavigationService);
+                mockLocation = jasmine.createSpyObj('location', ['search']);
+                mockLocation.search.andReturn({});
+
+                mockAttrs = {};
+
+                controller = new InspectorPaneController(mockScope, mockAgentService, mockWindow, mockNavigationService, mockLocation, mockAttrs);
            });

            it("listens for changes to navigation and attaches a status" +
--- a/platform/commonUI/browse/test/ObjectHeaderControllerSpec.js
+++ b/platform/commonUI/browse/test/ObjectHeaderControllerSpec.js
@ -0,0 +1,137 @@
+/*****************************************************************************
+ * 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);
+
+            });
+        });
+    }
+);
--- a/platform/commonUI/browse/test/PaneControllerSpec.js
+++ b/platform/commonUI/browse/test/PaneControllerSpec.js
@ -29,7 +29,9 @@ define(
                mockAgentService,
                mockDomainObjects,
                mockWindow,
-                controller;
+                controller,
+                mockLocation,
+                mockAttrs;

            // We want to reinstantiate for each test case
            // because device state can influence constructor-time behavior
@ -37,7 +39,9 @@ define(
                return new PaneController(
                    mockScope,
                    mockAgentService,
-                    mockWindow
+                    mockWindow,
+                    mockLocation,
+                    mockAttrs
                );
            }

@ -59,6 +63,11 @@ define(
                    ["isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape"]
                );
                mockWindow = jasmine.createSpyObj("$window", ["open"]);
+
+                mockLocation = jasmine.createSpyObj('location', ['search']);
+                mockLocation.search.andReturn({});
+
+                mockAttrs = {};
            });

            it("is initially visible", function () {
@ -86,6 +95,24 @@ define(
                // Tree should have collapsed
                expect(controller.visible()).toBeFalsy();
            });
+
+            describe("specifying hideParameter", function () {
+                beforeEach(function () {
+                    mockAttrs = {hideParameter: 'hideTree'};
+                });
+
+                it("sets pane state to false when in location.search", function () {
+                    mockLocation.search.andReturn({'hideTree': true});
+                    expect(instantiateController().visible()).toBe(false);
+                    expect(mockLocation.search).toHaveBeenCalledWith('hideTree', undefined);
+                });
+
+                it("sets state to true when not found in location.search", function () {
+                    mockLocation.search.andReturn({});
+                    expect(instantiateController().visible()).toBe(true);
+                    expect(mockLocation.search).not.toHaveBeenCalledWith('hideTree', undefined);
+                });
+            });
        });
    }
 );
--- a/platform/commonUI/dialog/res/templates/message.html
+++ b/platform/commonUI/dialog/res/templates/message.html
@ -16,7 +16,7 @@
        </div>
        <div class="bottom-bar">
            <a ng-repeat="dialogOption in ngModel.options"
-               class="s-button major"
+               class="s-button"
               ng-click="dialogOption.callback()">
                {{dialogOption.label}}
            </a>
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@ -19,12 +19,12 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class="abs overlay" ng-class="{'delayEntry100ms' : ngModel.delay}">
+<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
    <div class="abs blocker"></div>
-    <div class="abs holder">
+    <div class="abs outer-holder">
        <a ng-click="ngModel.cancel()"
           ng-if="ngModel.cancel"
-           class="close icon-x"></a>
-        <div class="abs contents" ng-transclude></div>
+           class="close icon-x-in-circle"></a>
+        <div class="abs inner-holder contents" ng-transclude></div>
    </div>
 </div>
--- a/platform/commonUI/edit/res/templates/create/create-button.html
+++ b/platform/commonUI/edit/res/templates/create/create-button.html
@ -23,7 +23,7 @@
    <div class="s-menu-button major create-button" ng-click="createController.toggle()">
 		<span class="title-label">Create</span>
    </div>
-    <div class="menu super-menu" ng-show="createController.isActive()">
+    <div class="menu super-menu l-create-menu" ng-show="createController.isActive()">
        <mct-representation mct-object="domainObject" key="'create-menu'">
        </mct-representation>
    </div>
--- a/platform/commonUI/edit/res/templates/create/create-menu.html
+++ b/platform/commonUI/edit/res/templates/create/create-menu.html
@ -19,8 +19,8 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items">
+<div class="w-menu" ng-controller="CreateMenuController">
+    <div class="col menu-items">
        <ul>
            <li ng-repeat="createAction in createActions" ng-click="createAction.perform()">
                <a ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
@ -31,13 +31,15 @@
            </li>
        </ul>
    </div>
-    <div class="pane right menu-item-description">
+    <div class="col menu-item-description">
        <div class="desc-area icon {{ representation.activeMetadata.cssClass }}"></div>
-        <div class="desc-area title">
-            {{representation.activeMetadata.name}}
-        </div>
-        <div class="desc-area description">
-            {{representation.activeMetadata.description}}
+        <div class="w-title-desc">
+            <div class="desc-area title">
+                {{representation.activeMetadata.name}}
+            </div>
+            <div class="desc-area description">
+                {{representation.activeMetadata.description}}
+            </div>
        </div>
    </div>
 </div>
--- a/platform/commonUI/formats/src/UTCTimeFormat.js
+++ b/platform/commonUI/formats/src/UTCTimeFormat.js
@ -121,6 +121,9 @@ define([
    };

    UTCTimeFormat.prototype.parse = function (text) {
+        if (typeof text === 'number') {
+            return text;
+        }
        return moment.utc(text, DATE_FORMATS).valueOf();
    };

--- a/platform/commonUI/general/bundle.js
+++ b/platform/commonUI/general/bundle.js
@ -374,7 +374,8 @@ define([
                    "depends": [
                        "$parse",
                        "$log",
-                        "$interval"
+                        "$interval",
+                        "$window"
                    ]
                },
                {
--- a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-12px.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-12px.json
@ -1,207 +1,144 @@
 {
-	"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
-}
+  "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
+}
--- a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.eot
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.eot
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.svg
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.svg
@ -7,8 +7,6 @@
 <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="&#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="&#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="&#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>
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.ttf
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.woff
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.woff
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
@ -37,6 +37,8 @@
 <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" />
@ -78,6 +80,13 @@
 <glyph unicode="&#xe1039;" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
 <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" />
@ -108,4 +117,6 @@
 <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" />
-</font></defs></svg>
+<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>
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/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,
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@ -21,7 +21,7 @@
 *****************************************************************************/

 /************************** FEATURES */
-$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
+$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported

 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
 $bodyMargin: 10px;
@ -82,7 +82,7 @@ $tabularTdPadTB: 2px;
 /*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
-$imageThumbsWrapperH: $imageThumbsD * 1.4;
+$imageThumbsWrapperH: 155px;
 $imageThumbPad: 1px;
 /*************** Ticks */
 $ticksH: 25px;
@ -99,7 +99,7 @@ $plotXBarH: 32px;
 $plotLegendH: 20px;
 $plotSwatchD: 8px;
 // 1: Top, 2: right, 3: bottom, 4: left
-$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH, $plotYBarW);
+$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW);
 /* min plot height is based on user testing to find minimum useful height */
 $plotMinH: 95px;
 /*************** Bubbles */
@ -111,7 +111,9 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
-$inputTextP: 3px 5px;
+$inputTextPTopBtm: 3px;
+$inputTextPLeftRight: 5px;
+$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
--- a/platform/commonUI/general/res/sass/_fixed-position.scss
+++ b/platform/commonUI/general/res/sass/_fixed-position.scss
@ -21,32 +21,11 @@
 *****************************************************************************/
 .t-fixed-position {
 	&.l-fixed-position {
-		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;
-			}
-		}
+		@extend .abs;
 	}

 	.l-fixed-position-item {
 		position: absolute;
-		border: 1px solid transparent;
-
 		&.s-not-selected {
 			opacity: 0.8;
 		}
@ -73,6 +52,7 @@
 			font-size: 0.8rem;
 			$p: 1px;
 			line-height: 100%;
+            overflow: hidden;
 			&.l-static-text {
 				padding: $p;
 			}
@ -105,37 +85,8 @@
 			}
 		}
 	}
-
-	.l-fixed-position-item-handle {
-		$brd: 1px solid $colorKey;
-		background: rgba($colorKey, 0.5);
-		cursor: crosshair;
-		border: $brd;
-		position: absolute;
-	}
 }

-.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);
-			}
-		}
-	}
+.s-status-editing {
+    .l-fixed-position-item-handle.edit-corner { display: block; }
 }
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/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'),
@ -81,12 +81,6 @@ input, textarea {
    letter-spacing: inherit;
 }

-input[type="text"],
-input[type="search"] {
-    vertical-align: baseline;
-    padding: $inputTextP;
-}
-
 h1, h2, h3 {
    letter-spacing: 0.04em;
    margin: 0;
@ -240,6 +234,12 @@ a.disabled {
    color: rgba(#fff, 0.2);
 }

+.comma-list span {
+    &:not(:first-child) {
+        &:before { content: ', '; }
+    }
+}
+
 .test-stripes {
    @include bgDiagonalStripes();
 }
--- a/platform/commonUI/general/res/sass/_glyphs.scss
+++ b/platform/commonUI/general/res/sass/_glyphs.scss
@ -1,10 +1,38 @@
-@mixin glyph($unicode, $family: 'symbolsfont') {
+/*****************************************************************************
+ * 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;
        font-family: $family;
    }
 }

+@mixin glyphAfter($unicode, $family: 'symbolsfont') {
+    &:after {
+        content: $unicode;
+        font-family: $family;
+    }
+}
+
 /************************** CHAR UNICODES */

 $glyph-icon-alert-rect: '\e900';
@ -37,6 +65,8 @@ $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';
@ -78,6 +108,13 @@ $glyph-icon-x-in-circle: '\e1038';
 $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';
@ -108,114 +145,124 @@ $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 */

-.icon-alert-rect {  @include glyph($glyph-icon-alert-rect); }
-.icon-alert-triangle {  @include glyph($glyph-icon-alert-triangle); }
-.icon-arrow-down {  @include glyph($glyph-icon-arrow-down); }
-.icon-arrow-left {  @include glyph($glyph-icon-arrow-left); }
-.icon-arrow-right {  @include glyph($glyph-icon-arrow-right); }
-.icon-arrow-double-up {  @include glyph($glyph-icon-arrow-double-up); }
-.icon-arrow-tall-up {  @include glyph($glyph-icon-arrow-tall-up); }
-.icon-arrow-tall-down {  @include glyph($glyph-icon-arrow-tall-down); }
-.icon-arrow-double-down {  @include glyph($glyph-icon-arrow-double-down); }
-.icon-arrow-up {  @include glyph($glyph-icon-arrow-up); }
-.icon-asterisk {  @include glyph($glyph-icon-asterisk); }
-.icon-bell {  @include glyph($glyph-icon-bell); }
-.icon-box {  @include glyph($glyph-icon-box); }
-.icon-box-with-arrow {  @include glyph($glyph-icon-box-with-arrow); }
-.icon-check {  @include glyph($glyph-icon-check); }
-.icon-connectivity {  @include glyph($glyph-icon-connectivity); }
-.icon-database-in-brackets {  @include glyph($glyph-icon-database-in-brackets); }
-.icon-eye-open {  @include glyph($glyph-icon-eye-open); }
-.icon-gear {  @include glyph($glyph-icon-gear); }
-.icon-hourglass {  @include glyph($glyph-icon-hourglass); }
-.icon-info {  @include glyph($glyph-icon-info); }
-.icon-link {  @include glyph($glyph-icon-link); }
-.icon-lock {  @include glyph($glyph-icon-lock); }
-.icon-minus {  @include glyph($glyph-icon-minus); }
-.icon-people {  @include glyph($glyph-icon-people); }
-.icon-person {  @include glyph($glyph-icon-person); }
-.icon-plus {  @include glyph($glyph-icon-plus); }
-.icon-trash {  @include glyph($glyph-icon-trash); }
-.icon-x {  @include glyph($glyph-icon-x); }
-.icon-brackets {  @include glyph($glyph-icon-brackets); }
-.icon-arrows-out {  @include glyph($glyph-icon-arrows-out); }
-.icon-arrows-right-left {  @include glyph($glyph-icon-arrows-right-left); }
-.icon-arrows-up-down {  @include glyph($glyph-icon-arrows-up-down); }
-.icon-bullet {  @include glyph($glyph-icon-bullet); }
-.icon-calendar {  @include glyph($glyph-icon-calendar); }
-.icon-chain-links {  @include glyph($glyph-icon-chain-links); }
-.icon-collapse-pane-left {  @include glyph($glyph-icon-collapse-pane-left); }
-.icon-collapse-pane-right {  @include glyph($glyph-icon-collapse-pane-right); }
-.icon-download {  @include glyph($glyph-icon-download); }
-.icon-duplicate {  @include glyph($glyph-icon-duplicate); }
-.icon-folder-new {  @include glyph($glyph-icon-folder-new); }
-.icon-fullscreen-collapse {  @include glyph($glyph-icon-fullscreen-collapse); }
-.icon-fullscreen-expand {  @include glyph($glyph-icon-fullscreen-expand); }
-.icon-layers {  @include glyph($glyph-icon-layers); }
-.icon-line-horz {  @include glyph($glyph-icon-line-horz); }
-.icon-magnify {  @include glyph($glyph-icon-magnify); }
-.icon-magnify-in {  @include glyph($glyph-icon-magnify-in); }
-.icon-magnify-out {  @include glyph($glyph-icon-magnify-out); }
-.icon-menu-hamburger {  @include glyph($glyph-icon-menu-hamburger); }
-.icon-move {  @include glyph($glyph-icon-move); }
-.icon-new-window {  @include glyph($glyph-icon-new-window); }
-.icon-paint-bucket {  @include glyph($glyph-icon-paint-bucket); }
-.icon-pause {  @include glyph($glyph-icon-pause); }
-.icon-pencil {  @include glyph($glyph-icon-pencil); }
-.icon-play {  @include glyph($glyph-icon-play); }
-.icon-plot-resource {  @include glyph($glyph-icon-plot-resource); }
-.icon-pointer-left {  @include glyph($glyph-icon-pointer-left); }
-.icon-pointer-right {  @include glyph($glyph-icon-pointer-right); }
-.icon-refresh {  @include glyph($glyph-icon-refresh); }
-.icon-save {  @include glyph($glyph-icon-save); }
-.icon-sine {  @include glyph($glyph-icon-sine); }
-.icon-T {  @include glyph($glyph-icon-T); }
-.icon-thumbs-strip {  @include glyph($glyph-icon-thumbs-strip); }
-.icon-two-parts-both {  @include glyph($glyph-icon-two-parts-both); }
-.icon-two-parts-one-only {  @include glyph($glyph-icon-two-parts-one-only); }
-.icon-resync {  @include glyph($glyph-icon-resync); }
-.icon-reset {  @include glyph($glyph-icon-reset); }
-.icon-x-in-circle {  @include glyph($glyph-icon-x-in-circle); }
-.icon-brightness {  @include glyph($glyph-icon-brightness); }
-.icon-contrast {  @include glyph($glyph-icon-contrast); }
-.icon-expand {  @include glyph($glyph-icon-expand); }
-.icon-activity {  @include glyph($glyph-icon-activity); }
-.icon-activity-mode {  @include glyph($glyph-icon-activity-mode); }
-.icon-autoflow-tabular {  @include glyph($glyph-icon-autoflow-tabular); }
-.icon-clock {  @include glyph($glyph-icon-clock); }
-.icon-database {  @include glyph($glyph-icon-database); }
-.icon-database-query {  @include glyph($glyph-icon-database-query); }
-.icon-dataset {  @include glyph($glyph-icon-dataset); }
-.icon-datatable {  @include glyph($glyph-icon-datatable); }
-.icon-dictionary {  @include glyph($glyph-icon-dictionary); }
-.icon-folder {  @include glyph($glyph-icon-folder); }
-.icon-image {  @include glyph($glyph-icon-image); }
-.icon-layout {  @include glyph($glyph-icon-layout); }
-.icon-object {  @include glyph($glyph-icon-object); }
-.icon-object-unknown {  @include glyph($glyph-icon-object-unknown); }
-.icon-packet {  @include glyph($glyph-icon-packet); }
-.icon-page {  @include glyph($glyph-icon-page); }
-.icon-plot-overlay {  @include glyph($glyph-icon-plot-overlay); }
-.icon-plot-stacked {  @include glyph($glyph-icon-plot-stacked); }
-.icon-session {  @include glyph($glyph-icon-session); }
-.icon-tabular {  @include glyph($glyph-icon-tabular); }
-.icon-tabular-lad {  @include glyph($glyph-icon-tabular-lad); }
-.icon-tabular-lad-set {  @include glyph($glyph-icon-tabular-lad-set); }
-.icon-tabular-realtime {  @include glyph($glyph-icon-tabular-realtime); }
-.icon-tabular-scrolling {  @include glyph($glyph-icon-tabular-scrolling); }
-.icon-telemetry {  @include glyph($glyph-icon-telemetry); }
-.icon-telemetry-panel {  @include glyph($glyph-icon-telemetry-panel); }
-.icon-timeline {  @include glyph($glyph-icon-timeline); }
-.icon-timer {  @include glyph($glyph-icon-timer); }
-.icon-topic {  @include glyph($glyph-icon-topic); }
-.icon-box-with-dashed-lines {  @include glyph($glyph-icon-box-with-dashed-lines); }
+.icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
+.icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
+.icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
+.icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
+.icon-arrow-right {  @include glyphBefore($glyph-icon-arrow-right); }
+.icon-arrow-double-up {  @include glyphBefore($glyph-icon-arrow-double-up); }
+.icon-arrow-tall-up {  @include glyphBefore($glyph-icon-arrow-tall-up); }
+.icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
+.icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
+.icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
+.icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
+.icon-bell {  @include glyphBefore($glyph-icon-bell); }
+.icon-box {  @include glyphBefore($glyph-icon-box); }
+.icon-box-with-arrow {  @include glyphBefore($glyph-icon-box-with-arrow); }
+.icon-check {  @include glyphBefore($glyph-icon-check); }
+.icon-connectivity {  @include glyphBefore($glyph-icon-connectivity); }
+.icon-database-in-brackets {  @include glyphBefore($glyph-icon-database-in-brackets); }
+.icon-eye-open {  @include glyphBefore($glyph-icon-eye-open); }
+.icon-gear {  @include glyphBefore($glyph-icon-gear); }
+.icon-hourglass {  @include glyphBefore($glyph-icon-hourglass); }
+.icon-info {  @include glyphBefore($glyph-icon-info); }
+.icon-link {  @include glyphBefore($glyph-icon-link); }
+.icon-lock {  @include glyphBefore($glyph-icon-lock); }
+.icon-minus {  @include glyphBefore($glyph-icon-minus); }
+.icon-people {  @include glyphBefore($glyph-icon-people); }
+.icon-person {  @include glyphBefore($glyph-icon-person); }
+.icon-plus {  @include glyphBefore($glyph-icon-plus); }
+.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); }
+.icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
+.icon-calendar {  @include glyphBefore($glyph-icon-calendar); }
+.icon-chain-links {  @include glyphBefore($glyph-icon-chain-links); }
+.icon-collapse-pane-left {  @include glyphBefore($glyph-icon-collapse-pane-left); }
+.icon-collapse-pane-right {  @include glyphBefore($glyph-icon-collapse-pane-right); }
+.icon-download {  @include glyphBefore($glyph-icon-download); }
+.icon-duplicate {  @include glyphBefore($glyph-icon-duplicate); }
+.icon-folder-new {  @include glyphBefore($glyph-icon-folder-new); }
+.icon-fullscreen-collapse {  @include glyphBefore($glyph-icon-fullscreen-collapse); }
+.icon-fullscreen-expand {  @include glyphBefore($glyph-icon-fullscreen-expand); }
+.icon-layers {  @include glyphBefore($glyph-icon-layers); }
+.icon-line-horz {  @include glyphBefore($glyph-icon-line-horz); }
+.icon-magnify {  @include glyphBefore($glyph-icon-magnify); }
+.icon-magnify-in {  @include glyphBefore($glyph-icon-magnify-in); }
+.icon-magnify-out {  @include glyphBefore($glyph-icon-magnify-out); }
+.icon-menu-hamburger {  @include glyphBefore($glyph-icon-menu-hamburger); }
+.icon-move {  @include glyphBefore($glyph-icon-move); }
+.icon-new-window {  @include glyphBefore($glyph-icon-new-window); }
+.icon-paint-bucket {  @include glyphBefore($glyph-icon-paint-bucket); }
+.icon-pause {  @include glyphBefore($glyph-icon-pause); }
+.icon-pencil {  @include glyphBefore($glyph-icon-pencil); }
+.icon-play {  @include glyphBefore($glyph-icon-play); }
+.icon-plot-resource {  @include glyphBefore($glyph-icon-plot-resource); }
+.icon-pointer-left {  @include glyphBefore($glyph-icon-pointer-left); }
+.icon-pointer-right {  @include glyphBefore($glyph-icon-pointer-right); }
+.icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
+.icon-save {  @include glyphBefore($glyph-icon-save); }
+.icon-sine {  @include glyphBefore($glyph-icon-sine); }
+.icon-T {  @include glyphBefore($glyph-icon-T); }
+.icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
+.icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
+.icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
+.icon-resync {  @include glyphBefore($glyph-icon-resync); }
+.icon-reset {  @include glyphBefore($glyph-icon-reset); }
+.icon-x-in-circle {  @include glyphBefore($glyph-icon-x-in-circle); }
+.icon-brightness {  @include glyphBefore($glyph-icon-brightness); }
+.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); }
+.icon-clock {  @include glyphBefore($glyph-icon-clock); }
+.icon-database {  @include glyphBefore($glyph-icon-database); }
+.icon-database-query {  @include glyphBefore($glyph-icon-database-query); }
+.icon-dataset {  @include glyphBefore($glyph-icon-dataset); }
+.icon-datatable {  @include glyphBefore($glyph-icon-datatable); }
+.icon-dictionary {  @include glyphBefore($glyph-icon-dictionary); }
+.icon-folder {  @include glyphBefore($glyph-icon-folder); }
+.icon-image {  @include glyphBefore($glyph-icon-image); }
+.icon-layout {  @include glyphBefore($glyph-icon-layout); }
+.icon-object {  @include glyphBefore($glyph-icon-object); }
+.icon-object-unknown {  @include glyphBefore($glyph-icon-object-unknown); }
+.icon-packet {  @include glyphBefore($glyph-icon-packet); }
+.icon-page {  @include glyphBefore($glyph-icon-page); }
+.icon-plot-overlay {  @include glyphBefore($glyph-icon-plot-overlay); }
+.icon-plot-stacked {  @include glyphBefore($glyph-icon-plot-stacked); }
+.icon-session {  @include glyphBefore($glyph-icon-session); }
+.icon-tabular {  @include glyphBefore($glyph-icon-tabular); }
+.icon-tabular-lad {  @include glyphBefore($glyph-icon-tabular-lad); }
+.icon-tabular-lad-set {  @include glyphBefore($glyph-icon-tabular-lad-set); }
+.icon-tabular-realtime {  @include glyphBefore($glyph-icon-tabular-realtime); }
+.icon-tabular-scrolling {  @include glyphBefore($glyph-icon-tabular-scrolling); }
+.icon-telemetry {  @include glyphBefore($glyph-icon-telemetry); }
+.icon-telemetry-panel {  @include glyphBefore($glyph-icon-telemetry-panel); }
+.icon-timeline {  @include glyphBefore($glyph-icon-timeline); }
+.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-eye-open-12px {  @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
-.icon-collapse-pane-left-12px {  @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
-.icon-collapse-pane-right-12px {  @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
-.icon-folder-12px {  @include glyph($glyph-icon-folder,'symbolsfont-12px'); }
+.icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
+.icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@ -44,6 +44,12 @@
    }
 }

+
+.t-alert-unsynced {
+    @extend .icon-alert-triangle;
+    color: $colorPausedBg;
+}
+
 .bar .ui-symbol {
 	display: inline-block;
 }
@ -81,18 +87,5 @@
            @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;
-            }
-        }*/
    }
 }
--- a/platform/commonUI/general/res/sass/_iframe.scss
+++ b/platform/commonUI/general/res/sass/_iframe.scss
@ -26,5 +26,6 @@
        display: block;
        height: 100%;
        width: 100%;
+        border: none;
    }
 }
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@ -53,6 +53,7 @@
    .l-inspector-part {
        box-sizing: border-box;
        padding-right: $interiorMargin;
+
        .tree .form {
            margin-left: $treeVCW + $interiorMarginLg;
        }
@ -78,6 +79,7 @@
                }
            }
            .form-row {
+                // To be replaced with .inspector-config, see below.
                @include align-items(center);
                border: none !important;
                margin-bottom: 0 !important;
@ -99,15 +101,12 @@
        position: relative;
    }

-    ul li {
-        margin-bottom: $interiorMarginLg;
-    }
-
    em.t-inspector-part-header {
        border-radius: $basicCr;
        background-color: $colorInspectorSectionHeaderBg;
        color: $colorInspectorSectionHeaderFg;
-        margin-bottom: $interiorMargin;
+        margin-top: $interiorMarginLg;
+        //margin-bottom: $interiorMargin;
        padding: floor($formTBPad * .75) $formLRPad;
        text-transform: uppercase;
    }
@ -201,3 +200,102 @@ 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;
+}
+
--- a/platform/commonUI/general/res/sass/_limits.scss
+++ b/platform/commonUI/general/res/sass/_limits.scss
@ -1,39 +0,0 @@
-@mixin limitGlyph($iconColor, $glyph: $glyph-icon-alert-triangle) {
-    &:before {
-        color: $iconColor;
-        content: $glyph;
-        font-family: symbolsfont;
-        font-size: 0.8em;
-        display: inline;
-        margin-right: $interiorMarginSm;
-    }
-
-}
-
-.s-limit-red { background: $colorLimitRedBg !important; }
-.s-limit-yellow { background: $colorLimitYellowBg !important; }
-
-// Handle limit when applied to a tr
-tr[class*="s-limit"] {
-    &.s-limit-red td:first-child {
-        @include limitGlyph($colorLimitRedIc);
-    }
-    &.s-limit-yellow td:first-child {
-        @include limitGlyph($colorLimitYellowIc);
-    }
-    &.s-limit-upr td:first-child:before { content: $glyph-icon-arrow-double-up; }
-    &.s-limit-lwr td:first-child:before { content: $glyph-icon-arrow-double-down; }
-}
-
-// Handle limit when applied directly to a non-tr element
-// Assume this is applied to the element that displays the limit value
-:not(tr)[class*="s-limit"] {
-    &.s-limit-red {
-        @include limitGlyph($colorLimitRedIc);
-    }
-    &.s-limit-yellow {
-        @include limitGlyph($colorLimitYellowIc);
-    }
-    &.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
-    &.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
-}
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@ -27,7 +27,7 @@
@import "about";
@import "text";
@import "icons";
-@import "limits";
+@import "status";
@import "data-status";
@import "helpers/bubbles";
@import "helpers/splitter";
@ -58,7 +58,6 @@
@import "search/search";
@import "mobile/search/search";
@import "overlay/overlay";
-@import "mobile/overlay/overlay";
@import "tree/tree";
@import "object-label";
@import "mobile/tree";
@ -71,6 +70,7 @@
@import "fixed-position";
@import "lists/tabular";
@import "plots/plots-main";
+@import "plots/legend";
@import "iframe";
@import "views";
@import "items/item";
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@ -285,13 +285,14 @@

@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
 	background-color: $bg;
-	border-radius: $controlCr;
+	//border-radius: $controlCr;
 	box-sizing: border-box;
 	color: $fg;
 }

@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
 	@include user-select(none);
+    border-radius: $controlCr;
    color: $fg;
 	.icon,
    &:before {
@ -315,23 +316,28 @@
    text-shadow: $shdwItemText;
 }

-@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+@mixin input-base() {
 	@include appearance(none);
 	border-radius: $controlCr;
 	box-sizing: border-box;
-	box-shadow: inset $shdw;
-	background: $bg;
-	border: none;
-	color: $fg;
-	outline: none;
+    &:focus { outline: 0; }
 	&.error {
 		background-color: $colorFormFieldErrorBg;
        color: $colorFormFieldErrorFg;
 	}
 }

-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
-	@include input-base($bg, $fg);
+@mixin s-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+    @include input-base();
+    background: $bg;
+    box-shadow: inset $shdw;
+    color: $fg;
+}
+
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+    @include s-input($bg, $fg, $shdw);
+    border: none;
+    outline: none;
 }

@mixin contextArrow() {
@ -343,7 +349,7 @@
 }

@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include input-base($bg, $fg);
+    @include nice-input($bg, $fg);
    padding: $interiorMargin;
 }

--- a/platform/commonUI/general/res/sass/_status.scss
+++ b/platform/commonUI/general/res/sass/_status.scss
@ -0,0 +1,85 @@
+/*****************************************************************************
+ * 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; }
+
+
--- a/platform/commonUI/general/res/sass/_views.scss
+++ b/platform/commonUI/general/res/sass/_views.scss
@ -5,6 +5,7 @@
 }

 .l-view-section {
+    //@include test(orange, 0.1);
 	@include absPosDefault(0);
 	h2 {
 		color: #fff;
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@ -33,7 +33,6 @@ $pad: $interiorMargin * $baseRatio;
    height: $btnStdH;
    line-height: $btnStdH;
    padding: 0 $pad;
-    vertical-align: top;

    &.labeled:before {
        // Icon when it's included
--- a/platform/commonUI/general/res/sass/controls/_color-palette.scss
+++ b/platform/commonUI/general/res/sass/controls/_color-palette.scss
@ -19,11 +19,22 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
+
+.s-palette-item {
+    $colorSelectedColor: #fff;
+    @include txtShdwSubtle(0.8);
+    @include trans-prop-nice-fade(0.25s);
+    border: 1px solid transparent;
+    &:hover {
+        @include trans-prop-nice-fade(0);
+        border-color: $colorSelectedColor !important;
+    }
+}
+
 .l-color-palette {
 	$d: 16px;
 	$colorsPerRow: 10;
 	$m: 1;
-	$colorSelectedColor: #fff;

 	box-sizing: border-box;
 	padding: $interiorMargin !important;
@ -35,10 +46,6 @@

 		.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;
@ -51,13 +58,6 @@
            }
 		}

-		.s-palette-item {
-			&:hover {
-				@include trans-prop-nice-fade(0);
-				border-color: $colorSelectedColor !important;
-			}
-		}
-
 		.l-palette-item-label {
 			margin-left: $interiorMargin;
 		}
@ -69,10 +69,21 @@
 			}
 		}
 	}
-
-
-
-
-
-
+}
+
+.l-inline-color-palette {
+    // Is an <li>
+    .l-palette-row {
+        @include display(flex);
+        width: 100%;
+        .l-palette-item {
+            @include display(flex);
+            @include flex(1 0 auto);
+            margin: 1px;
+            &:before {
+                content: '';
+                padding-top: 75%;
+            }
+        }
+    }
 }
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@ -72,6 +72,17 @@
    }
 }

+// 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;
@ -139,6 +150,26 @@
    }
 }

+/******************************************************** 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 {
@ -223,19 +254,33 @@ textarea {
 }

 /******************************************************** INPUTS */
+%input-base {
+    @include input-base();
+}
+
 input[type="text"],
-input[type="search"] {
+input[type="search"],
+input[type="number"] {
    @include nice-input();
+    vertical-align: baseline;
+    padding: $inputTextPTopBtm $inputTextPLeftRight;
    &.numeric {
        text-align: right;
    }
 }

+.l-input-sm {
+    input[type="text"],
+    input[type="search"],
+    input[type="number"] {
+        width: 50px !important;
+    }
+}
+
 .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; }
-.l-input-sm input[type="text"],
 input[type="text"].sm {  width: 50px !important; }
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }
@ -262,6 +307,32 @@ textarea.lg { position: relative; height: 300px; }
    }
 }

+*[contenteditable].s-input-inline,
+input[type="text"].s-input-inline,
+.s-input-inline input[type="text"] {
+    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
+    @extend %input-base;
+    @include trans-prop-nice((padding, box-shadow), 250ms);
+    background: none;
+    box-shadow: none;
+    border: 1px solid transparent;
+    min-width: 20px;
+    padding-left: 0;
+    padding-right: 0;
+    &:hover,
+    &:focus {
+        padding-left: $inputTextPLeftRight;
+        padding-right: $inputTextPLeftRight;
+    }
+    &:hover {
+        border-color: rgba($colorBodyFg, 0.2);
+    }
+    &:focus {
+        @include s-input();
+        border-color: transparent;
+    }
+}
+
 /******************************************************** SELECTS */
 .select {
    @include btnSubtle($bg: $colorSelectBg);
@ -277,6 +348,7 @@ textarea.lg { position: relative; height: 300px; }
    select {
        @include appearance(none);
        box-sizing: border-box;
+        &:focus { outline: 0; }
        background: none;
        color: $colorSelectFg;
        cursor: pointer;
@ -288,15 +360,48 @@ textarea.lg { position: relative; height: 300px; }
        }
    }
    &:before {
-        //@include contextArrow();
        pointer-events: none;
-        color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
+        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
        display: block;
        position: absolute;
        right: $interiorMargin; top: 0;
    }
 }

+/******************************************************** 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;
+        }
+    }
+}
+
 /******************************************************** OBJECT-HEADER */
 .object-header {
    font-size: 1em;
@ -651,10 +756,6 @@ textarea {
    }
 }

-.view-switcher {
-    @include trans-prop-nice-fade($controlFadeMs);
-}
-
 /******************************************************** BROWSER ELEMENTS */
 body.desktop {
    ::-webkit-scrollbar {
@ -672,11 +773,15 @@ body.desktop {
    }

    .overlay ::-webkit-scrollbar-thumb {
-        $lr: 15%;
        background: $scrollbarThumbColorOverlay;
        &:hover { background: $scrollbarThumbColorOverlayHov; }
    }

+    .menu ::-webkit-scrollbar-thumb {
+        background: $scrollbarThumbColorMenu;
+        &:hover { background: $scrollbarThumbColorMenuHov; }
+    }
+
    ::-webkit-scrollbar-corner {
        background: $scrollbarTrackColorBg;
    }
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@ -21,92 +21,87 @@
 *****************************************************************************/
 /******************************************************** MENU BUTTONS */
 .s-menu-button {
-	// Formerly .btn-menu
-	@extend .s-button;
-	span.l-click-area {
-		// In markup, this element should not enclose anything.
-		@extend .abs;
-	}
+    // Formerly .btn-menu
+    @extend .s-button;
+    span.l-click-area {
+        // In markup, this element should not enclose anything.
+        @extend .abs;
+    }

-	.icon {
-		font-size: 16px; //120%;
-	}
+    .icon {
+        font-size: 16px; //120%;
+    }

-	.title-label {
-		margin-left: $interiorMarginSm;
-	}
+    .title-label {
+        margin-left: $interiorMarginSm;
+    }

    .color-swatch {
        // Used in color menu buttons in toolbar
        $d: 10px;
        display: inline-block;
        border: 1px solid rgba($colorBtnFg, 0.2);
-        height: $d; width: $d;
+        height: $d;
+        width: $d;
        vertical-align: middle;
        margin-left: $interiorMarginSm;
        margin-top: -2px;
    }

-	&:after {
-		// Adds the downward facing 'context available / invoke menu' arrow element
-		@include contextArrow();
-		color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
-	}
+    &:after {
+        // Adds the downward facing 'context available / invoke menu' arrow element
+        @include contextArrow();
+        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
+    }

-	&.create-button {
+    &.create-button {
        @extend .icon-plus;
-		.title-label {
-			font-size: 1rem;
-		}
-	}
+        .title-label {
+            font-size: 1rem;
+        }
+    }

-	.menu {
-		left: 0;
-		text-align: left;
-	}
+    .menu {
+        left: 0;
+        text-align: left;
+    }
 }

 /******************************************************** MENUS THEMSELVES */
 .menu-element {
-	cursor: pointer;
-	position: relative;
-}
-
-.s-menu {
-	border-radius: $basicCr;
-	@include containerSubtle($colorMenuBg, $colorMenuFg);
-	@include boxShdw($shdwMenu);
-	@include txtShdw($shdwMenuText);
-	padding: $interiorMarginSm 0;
+    cursor: pointer;
+    position: relative;
 }

 .menu {
-    // TODO: reduce size of icons
-	@extend .s-menu;
-	display: block;
-	position: absolute;
-	z-index: 10;
-	ul {
-		@include menuUlReset();
-		li {
-			box-sizing: border-box;
-			border-top: 1px solid pullForward($colorMenuBg, 10%);
+    border-radius: $basicCr;
+    @include containerSubtle($colorMenuBg, $colorMenuFg);
+    @include boxShdw($shdwMenu);
+    @include txtShdw($shdwMenuText);
+    padding: $interiorMarginSm 0;
+    display: block;
+    position: absolute;
+    z-index: 10;
+    ul {
+        @include menuUlReset();
+        li {
+            box-sizing: border-box;
+            border-top: 1px solid pullForward($colorMenuBg, 10%);
            color: $colorMenuFg;
-			//color: pullForward($colorMenuBg, 60%);
-			line-height: $menuLineH;
-			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-			position: relative;
-			white-space: nowrap;
-			&:first-child {
-				border: none;
-			}
-			&:hover {
-				background: $colorMenuHovBg;
-				color: $colorMenuHovFg;
+            line-height: $menuLineH;
+            padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+            position: relative;
+            white-space: nowrap;
+            &:first-child {
+                border: none;
+            }
+            &:hover {
+                background: $colorMenuHovBg;
+                color: $colorMenuHovFg;
                &:before {
                    color: $colorMenuHovIc;
                }
-			}
+            }
            &:before {
                @extend .ui-symbol;
                @extend .type-icon;
@ -114,8 +109,8 @@
                display: inline-block;
                left: $interiorMargin * 2;
            }
-		}
-	}
+        }
+    }
 }

 .menu,
@ -123,94 +118,97 @@
 .context-menu,
 .super-menu,
 .s-menu-button .menu {
-	pointer-events: auto;
-	ul li {
-		a.menu-item-a {
+    pointer-events: auto;
+    ul li {
+        a.menu-item-a {
            color: $colorMenuFg;
            display: block;
-		}
+        }
        &:before,
        a.menu-item-a:before {
            color: $colorMenuIc;
            left: $interiorMargin;
        }
-	}
+    }
 }

 .checkbox-menu {
-	// Used in search dropdown in tree
-	@extend .context-menu;
-	ul li {
-		padding-left: 50px;
-		.checkbox {
-			$d: 0.7rem;
-			position: absolute;
-			left: $interiorMargin;
-			top: ($menuLineH - $d) / 1.5;
-			em {
-				height: $d;
-				width: $d;
-				&:before {
-					font-size: 7px !important;
-					height: $d;
-					width: $d;
-					line-height: $d;
-				}
-			}
-		}
-		&:before {
+    // Used in search dropdown in tree
+    @extend .context-menu;
+    ul li {
+        padding-left: 50px;
+        .checkbox {
+            $d: 0.7rem;
+            position: absolute;
+            left: $interiorMargin;
+            top: ($menuLineH - $d) / 1.5;
+            em {
+                height: $d;
+                width: $d;
+                &:before {
+                    font-size: 7px !important;
+                    height: $d;
+                    width: $d;
+                    line-height: $d;
+                }
+            }
+        }
+        &:before {
            // Type icon
-			left: 25px;
-		}
-	}
+            left: 25px;
+        }
+    }
+}
+
+.super-menu,
+.super-menu > mct-representation,
+.super-menu > .contents {
+    box-sizing: border-box;
+    display: block;
+    position: relative;
 }

 .super-menu {
-	$w: 500px;
-	$h: $w - 20;
-	$plw: 50%;
-	$prw: 50%;
-	display: block;
-	width: $w;
-	height: $h;
-	.contents {
-		@include absPosDefault($interiorMargin);
-	}
-	.pane {
-		box-sizing: border-box;
-		&.menu-items {
-			border-right: 1px solid pullForward($colorMenuBg, 10%);
-			left: 0;
-			padding-right: $interiorMargin;
-			right: auto;
-			width: $plw;
-			overflow-x: hidden;
-			overflow-y: auto;
-			ul {
-				li {
-					border-radius: $controlCr;
-					padding-left: 30px;
-					border-top: none;
-				}
-			}
-		}
-		&.menu-item-description {
-			left: auto;
-			right: 0;
-			padding: $interiorMargin * 5;
-			width: $prw;
+    $plw: 50%;
+    $prw: 100% - $plw;
+    position: absolute;
+    .w-menu {
+        align-items: stretch;
+        display: flex;
+        flex-direction: row;
+        margin: $interiorMarginLg;
+    }
+    .col {
+        box-sizing: border-box;
+        flex: 1 1 auto;
+        overflow-x: hidden;
+        &.menu-items {
+            border-right: 1px solid pullForward($colorMenuBg, 10%);
+            overflow-y: auto;
+            padding-right: $interiorMargin;
+            width: $plw;
+            ul {
+                li {
+                    border-radius: $controlCr;
+                    padding-left: 30px;
+                    border-top: none;
+                }
+            }
+        }
+        &.menu-item-description {
+            $p: $interiorMargin * 3;
+            overflow-y: hidden;
+            padding: $p $p 0 $p;
+            width: $prw;
+
            .desc-area {
                &.icon {
                    color: $colorCreateMenuLgIcon;
-                    font-size: 8em;
-                    margin-bottom: $interiorMargin * 3;
                    position: relative;
                    text-align: center;
                }
                &.title {
                    color: $colorCreateMenuText;
-                    font-size: 1.2em;
-                    margin-bottom: $interiorMargin * 2;
                }
                &.description {
                    color: pushBack($colorCreateMenuText, 20%);
@ -218,67 +216,104 @@
                    line-height: 1.5em;
                }
            }
-		}
-	}
+        }
+    }
+
+    .w-title-desc {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden; // Height set in specific menu instances
+    }
+
+    // Specific menu instances
+    &.l-create-menu {
+        width: 500px;
+        .col {
+            max-height: 70vh;
+        }
+        .w-title-desc {
+            height: 190px;
+        }
+        .desc-area {
+            &.icon {
+                font-size: 8em;
+                height: 135px;
+                margin-bottom: $interiorMargin * 3;
+            }
+            &.title {
+                font-size: 1.2em;
+                margin-bottom: $interiorMargin * 2;
+            }
+        }
+    }

    &.mini {
        width: 400px;
-        height: 300px;
-        .pane {
+        .col {
+            max-height: 50vh;
            &.menu-items {
                font-size: 0.8em;
            }
            &.menu-item-description {
-                padding: $interiorMargin * 3;
-                .desc-area {
-                    &.icon {
-                        font-size: 4em;
-                    }
-                    &.title {
-                        font-size: 1em;
-                    }
-                }
+                $p: $interiorMargin * 2;
+                padding: $p $p 0 $p;
+            }
+        }
+        .w-title-desc {
+            height: 180px;
+        }
+        .desc-area {
+            &.icon {
+                font-size: 4em;
+                height: 70px;
+                margin-bottom: $interiorMargin * 3;
+            }
+            &.title {
+                font-size: 1em;
+                margin-bottom: $interiorMargin * 2;
            }
        }
    }
 }
+
 .context-menu {
-	font-size: 0.80rem;
+    font-size: 0.80rem;
 }

 .context-menu-holder,
 .menu-holder {
-	position: absolute;
-	z-index: 70;
-	.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;
+    z-index: 79;
+    left: auto;
+    right: 0;
+    width: auto;
 }

 .menus-up .menu {
-    bottom: $btnStdH; top: auto;
+    bottom: $btnStdH;
+    top: auto;
 }
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@ -39,7 +39,7 @@
 // Status coloring
 .ok, .info {
    .status-indicator {
-        color: $colorStatusInfo;
+        color: $colorInfo;
    }
 }

@ -120,7 +120,11 @@
 	}

 	.status-indicator {
+        background: none !important;
 		margin-right: $interiorMarginSm;
+        &[class*='s-status']:before {
+            font-size: 1em;
+        }
 	}

 	.count {
@ -224,15 +228,15 @@
 	}
 	&.ok,
    &.info {
-		@include statusBannerColors($colorStatusInfo);
+		@include statusBannerColors($colorInfo);
 	}
 	&.caution,
    &.warning,
    &.alert {
-		@include statusBannerColors($colorStatusAlert);
+		@include statusBannerColors($colorWarningLo);
 	}
    &.error {
-        @include statusBannerColors($colorStatusError);
+        @include statusBannerColors($colorWarningHi);
    }
 }

@ -248,15 +252,15 @@

    .message-severity-info .type-icon.message-type {
        @extend .icon-info;
-        color: $colorStatusInfo;
+        color: $colorInfo;
    }
    .message-severity-alert .type-icon.message-type {
        @extend .icon-bell;
-        color: $colorStatusAlert;
+        color: $colorWarningLo;
    }
    .message-severity-error .type-icon.message-type {
        @extend .icon-alert-rect;
-        color: $colorStatusError;
+        color: $colorWarningHi;
    }
 }
 /* Paths:
@ -311,6 +315,24 @@ body.desktop .t-message-single {
    }
 }

+@include phonePortrait {
+    .t-message-single {
+        .l-message {
+            @include flex-direction(column);
+            .message-contents { margin-left: 0; }
+        }
+        .type-icon.message-type {
+            margin-bottom: $interiorMarginLg;
+            width: 100%;
+            text-align: center;
+        }
+
+        .bottom-bar {
+            text-align: center !important;
+        }
+    }
+}
+
 // Messages in list
 .t-message-list {
    @include messageBlock(32px);
@ -350,7 +372,6 @@ body.desktop .t-message-list {
 .s-unsynced {
    $c: $colorPausedBg;
    border: 1px solid $c;
-    @include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
 }

 .s-status-timeconductor-unsynced {
@ -363,10 +384,6 @@ body.desktop .t-message-list {
    .object-header {
        .t-object-alert {
            display: inline;
-            &.t-alert-unsynced {
-                @extend .icon-alert-triangle;
-                color: $colorPausedBg;
-            }
        }
    }
 }
--- a/platform/commonUI/general/res/sass/edit/_editor.scss
+++ b/platform/commonUI/general/res/sass/edit/_editor.scss
@ -19,12 +19,24 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-.s-status-editing .l-object-wrapper,
-.edit-main {
-    // .s-status-editing .l-object-wrapper is relevant to New Edit Mode;
-    // .edit-main is legacy for old edit mode.
-    $handleD: 15px;
-    $cr: 5px;
+.t-edit-handle-holder { display: none; }
+
+.l-grid-holder {
+    display: none;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    .l-grid {
+        @extend .abs;
+        pointer-events: none;
+        z-index: 0;
+        &.l-grid-y { background-position: 0 1px; }
+    }
+}
+
+.s-status-editing {
+    $handleD: 5px;
+    .t-edit-handle-holder { display: block; }
    .edit-corner,
    .edit-handle {
        position: absolute;
@ -32,81 +44,59 @@
    }

    .edit-corner {
+        background: rgba($colorSelectableSelectedPrimary, 0.5);
+        cursor: crosshair;
+        display: none; // Hide by default
+        border: 1px solid $colorSelectableSelectedPrimary;
        width: $handleD;
        height: $handleD;
+        $o: (-1 * $handleD) + 1px;
        &:hover {
            z-index: 11;
        }
-        &.edit-resize-nw {
-            border-bottom-right-radius: $cr;
-            cursor: nw-resize;
-            top: 0; left: 0;
-        }
-        &.edit-resize-ne {
-            border-bottom-left-radius: $cr;
-            cursor: ne-resize;
-            top: 0; right: 0;
-        }
-        &.edit-resize-se {
-            border-top-left-radius: $cr;
-            cursor: se-resize;
-            bottom: 0; right: 0;
-        }
-        &.edit-resize-sw {
-            border-top-right-radius: $cr;
-            cursor: sw-resize;
-            bottom: 0; left: 0;
-        }
-
+        &.edit-resize-nw { top: $o; left: $o; }
+        &.edit-resize-ne { top: $o; right: $o; }
+        &.edit-resize-se { bottom: $o; right: $o; }
+        &.edit-resize-sw { bottom: $o; left: $o; }
    }

-    .edit-handle {
-        top: $handleD; right: $handleD; bottom: $handleD; left: $handleD;
-        &.edit-move {
-            $m: 0; //$handleD;
-            cursor: move;
-            left: $m;
-            right: $m;
-            top: $m;
-            bottom: $m;
-            z-index: 1;
-
-        }
-        &.edit-resize-n {
-            top: 0px; bottom: auto;
-            height: $handleD;
-            cursor: n-resize;
-        }
-        &.edit-resize-e {
-            right: 0px; left: auto;
-            width: $handleD;
-            cursor: e-resize;
-        }
-        &.edit-resize-s {
-            bottom: 0px; top: auto;
-            height: $handleD;
-            cursor: s-resize;
-        }
-        &.edit-resize-w {
-            left: 0px; right: auto;
-            width: $handleD;
-            cursor: w-resize;
-        }
+    .edit-handle.edit-move {
+        // main move box for the whole frame element
+        $m: 0;
+        left: $m;
+        right: $m;
+        top: $m;
+        bottom: $m;
+        z-index: 1;
    }

    .frame.child-frame.panel {
        &:hover {
-            @include boxShdwLarge();
-            border-color: $colorSelectableSelectedPrimary;
            .view-switcher {
                opacity: 1;
            }
-            .edit-corner {
-                background-color: rgba($colorKey, 0.8);
-                &:hover {
-                    background-color: rgba($colorKey, 1);
-                }
-            }
        }
    }
+
+    // Editing Grids
+    .l-grid-holder {
+        display: block;
+        .l-grid {
+            &.l-grid-x { @include bgTicks($colorGridLines, 'x'); }
+            &.l-grid-y { @include bgTicks($colorGridLines, 'y'); }
+        }
+    }
+
+    // Prevent nested frames from showing their grids
+    .t-frame-outer .l-grid-holder { display: none !important; }
+
+    // Prevent nested elements from showing s-hover-border
+    .t-frame-outer .s-hover-border {
+        border: none !important;
+    }
+
+    // Prevent nested frames from being selectable until we have proper sub-object editing
+    .t-frame-outer .t-frame-outer {
+        pointer-events: none;
+    }
 }
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@ -9,7 +9,6 @@
 	@if $enableImageryThumbs == true {
 		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
 	}
-	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
 		background-color: $colorPlotBg;
@ -22,7 +21,9 @@

 .l-image-thumbs-wrapper {
 	top: auto;
-	height: $imageThumbsWrapperH;
+	min-height: $imageThumbsWrapperH;
+	max-height: 60%;
+	box-sizing: border-box;
 }

 .l-date,
@ -43,14 +44,16 @@
 .l-image-main-controlbar {
 	font-size: 0.8em;
 	line-height: inherit;
-	.left, .right {
+	.l-datetime-w, .l-controls-w {
 		direction: rtl;
 		overflow: hidden;
 	}
-	.left {
+	.l-datetime-w {
+        @include ellipsize();
+        margin-right: $interiorMarginSm;
 		text-align: left;
 	}
-	.right {
+	.l-controls-w {
 		z-index: 2;
 	}
 	.l-date,
@ -82,20 +85,26 @@
 /*************************************** THUMBS */

 .l-image-thumbs-wrapper {
-	//@include test(green);
-	direction: rtl;
-	overflow-x: auto;
-	overflow-y: hidden;
+	overflow-x: hidden;
+	overflow-y: auto;
 	padding-bottom: $interiorMargin;
 	white-space: nowrap;
-	z-index: 70;
 }

 .l-image-thumb-item {
 	@include transition(background-color, 0.25s);
 	box-sizing: border-box;
+    cursor: pointer;
+    direction: ltr;
+    display: inline-block;
+    float: left;
+    font-size: 0.8em;
 	padding: 1px;
-	position: relative;
+    margin-left: $interiorMarginSm;
+    position: relative;
+    text-align: left;
+    width: $imageThumbsD + $imageThumbPad*2;
+    white-space: normal;
 	.l-thumb,
 	.l-date,
 	.l-time {
@ -105,16 +114,9 @@
 	.l-time {
 		padding: 2px 3px;
 	}
-	cursor: pointer;
-	direction: ltr;
-	display: inline-block;
-	font-size: 0.8em;
-	margin-left: $interiorMarginSm;
-	text-align: left;
-	width: $imageThumbsD + $imageThumbPad*2;
-	white-space: normal;
+
 	&:hover {
-		background: rgba(#fff, 0.2);
+		background: $colorThumbHoverBg;
 		.l-date,
 		.l-time {
 			color: #fff;
@ -138,6 +140,7 @@
 /*************************************** LOCAL CONTROLS */
 .l-local-controls {
    max-width: 200px;
+    min-width: 100px;
    width: 35%;
    input[type="range"] {
        display: block;
@ -186,7 +189,8 @@
 /*************************************** WHEN IN FRAME */
 .frame .t-imagery {
 	.l-image-main-wrapper {
-		bottom: 0;
+		bottom: 0 !important;
+        height: 100% !important;
 		.l-image-main-controlbar {
 			font-size: 0.7em;
 		}
@ -196,7 +200,8 @@
 			}
 		}
 	}
-	.l-image-thumbs-wrapper {
+	.l-image-thumbs-wrapper,
+    mct-splitter {
 		display: none;
 	}
 }
--- a/platform/commonUI/general/res/sass/features/_time-display.scss
+++ b/platform/commonUI/general/res/sass/features/_time-display.scss
@ -1,33 +1,36 @@
 .l-time-display {
 	$transTime: 200ms;
+    $controlSize: 14px;
+    $control1ControlW: $controlSize + $interiorMargin;
+    $control2ControlW: $control1ControlW * 2;
    line-height: 140%;
 	&:hover {
-		.l-btn.control {
+		.l-btn.controls {
 			opacity: 1;
 		}
 	}

 	&.l-timer {
-        .l-value:before,
-        .control {
-            font-size: 0.8em;
-        }
-
        .l-value:before {
            // Direction +/- element
+            font-size: $controlSize;
            margin-right: $interiorMarginSm;
+
        }
-        .control {
+        .controls {
            @include trans-prop-nice((width, opacity), $transTime);
+            font-size: $controlSize;
            line-height: inherit;
            margin-right: 0;
            opacity: 0;
            width: 0;
+            .flex-elem {
+                margin-right: $interiorMargin;
+            }
        }
-		&:hover .control {
-            margin-right: $interiorMargin;
+		&:hover .controls {
            opacity: 1;
-			width: 1em;
+			width: $control2ControlW;
 		}
 	}

@ -35,4 +38,34 @@
        color: pullForward($colorBodyFg, 50%);
        font-weight: 400;
    }
+
+    // States
+    &.s-state-stopped,
+    &.s-state-paused {
+        .l-value {
+            opacity: 0.4;
+        }
+    }
+
+    &.s-state-started {
+        .l-value {
+            opacity: 1;
+        }
+    }
+
+    &.s-state-stopped {
+        // Hide Stop button, 1controlW
+        .t-btn-stop {
+            display: none;
+        }
+        &:hover .controls {  width: $control1ControlW;  }
+
+    }
+
+    &.s-state-paused {
+        // Paused, do something visual
+        .l-value {
+            &:before { @extend .pulse; }
+        }
+    }
 }
--- a/platform/commonUI/general/res/sass/forms/_filter.scss
+++ b/platform/commonUI/general/res/sass/forms/_filter.scss
@ -129,9 +129,6 @@
 }

 .s-filter {
-    input[type="search"] {
-        @include input-base();
-    }
    .clear-icon,
    .menu-icon,
    &:before {
--- a/platform/commonUI/general/res/sass/forms/_validation.scss
+++ b/platform/commonUI/general/res/sass/forms/_validation.scss
@ -19,44 +19,40 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
+@mixin labelValidate($sym, $c) {
+    > .label {
+        @include glyphAfter($sym);
+        &:after {
+            color: $c;
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+
 mct-form.validates {
    .form-row.validates {
        > .label {
            padding-right: $reqSymbolM; // Keep room for validation element
-            &:before {
-                position: absolute;
-                right: $interiorMargin;
+            &:after {
                font-size: $reqSymbolFontSize;
-                height: 100%;
-                line-height: 200%;
-
            }
        }
        &.invalid,
-        &.invalid.req {
-            > .label {
-                @extend .icon-x;
-                &:before {
-                    color: $colorFormInvalid;
-                }
-            }
-        }
+        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
+
        &.valid,
-        &.valid.req {
-            > .label {
-                @extend .icon-check;
-                &:before {
-                    color: $colorFormValid;
-                }
-            }
-        }
-        &.req {
-            > .label {
-                @extend .icon-asterisk;
-                &:before {
-                    color: $colorFormRequired;
-                }
-            }
-        }
+        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
+
+        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
+    }
+}
+
+body.desktop .form-row.validates > .label {
+    &:after {
+        position: absolute;
+        right: $interiorMargin;
+        height: 100%;
+        line-height: 200%;
    }
 }
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@ -132,5 +132,33 @@
 	        }
        }
    }
-
+}
+
+table.list-view {
+    $s: 1.2em;
+    width: 100%;
+    th, td {
+        cursor: pointer;
+    }
+    tr:hover td {
+        background-color: $colorItemBg;
+        color: $colorItemFg;
+    }
+    td {
+        $p: $interiorMargin;
+        @include ellipsize;
+        color: $colorItemFg;
+        font-size: 1em;
+        line-height: $s;
+        max-width: 0;
+        padding-top: $p;
+        padding-bottom: $p;
+    }
+    .t-item-icon {
+        font-size: $s;
+        margin-right: $interiorMargin;
+    }
+    .t-title-label {
+        @include ellipsize; // Yep, need it here too as well as the <td>
+    }
 }
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@ -92,7 +92,7 @@ body.mobile {
    }

    .object-browse-bar {
-        margin-left: 45px;
+        &.t-primary { margin-left: 45px; }
        .context-available {
            opacity: 1 !important;
        }
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@ -34,18 +34,7 @@ body.touch {
 		line-height: $mobileTreeItemH !important;
 		.view-control {
            font-size: 1em;
-            margin-right: $interiorMargin;
-            width: ceil($mobileTreeItemH * 0.75);
-            &.has-children {
-                &:before {
-                    content: $glyph-icon-arrow-down;
-                    left: 50%;
-                    @include transform(translateX(-50%) rotate(-90deg));
-                }
-                &.expanded:before {
-                    @include transform(translateX(-50%) rotate(0deg));
-                }
-            }
+            width: ceil($mobileTreeItemH * 0.5);
 		}
 		.t-object-label {
 			line-height: inherit;
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@ -1,74 +0,0 @@
-@include phoneandtablet {
-    .overlay {
-        .clk-icon.close {
-            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
-        }
-
-        > .holder {
-            height: 90%; width: 90%;
-
-            > .contents {
-                top: $mobileOverlayMargin;
-                right: $mobileOverlayMargin;
-                bottom: $mobileOverlayMargin;
-                left: $mobileOverlayMargin;
-
-                .top-bar {
-                    > .title {
-                        margin-right: 1.2em;
-                    }
-                }
-            }
-        }
-    }
-}
-
-@include phone {
-    .overlay > .holder {
-        $m: 0;
-        border-radius: $m;
-        top: $m;
-        right: $m;
-        bottom: $m;
-        left: $m;
-        height: auto; width: auto;
-        min-width: 200px; min-height: 200px;
-        max-height: 100%; max-width: 100%;
-        overflow: auto;
-        @include transform(none);
-
-        .editor .form .form-row.l-flex-row  {
-            // Display elements in a columnar view
-            @include flex-direction(column);
-            > .flex-elem {
-                &:not(:first-child) {
-                    margin-top: $interiorMargin;
-                }
-                &.label {
-                    width: 100%;
-                }
-                &.controls {
-                    overflow: auto;
-                }
-            }
-
-            &.validates > .label:before {
-                position: relative;
-                right: auto;
-                line-height: inherit;
-                margin-right: $interiorMargin;
-            }
-        }
-    }
-    .t-dialog-sm .overlay > .holder {
-        height: auto; max-height: 100%;
-    }
-}
-
-@include phonePortrait {
-    .overlay > .holder {
-        .contents .bottom-bar {
-            text-align: center;
-        }
-    }
-}
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@ -21,11 +21,16 @@
 *****************************************************************************/

 .overlay {
-    font-size: 90%;
    &.delayEntry100ms {
        @include keyframes(fadeInFromNone) {
-            0% { display: none; opacity: 0; }
-            100% { display: block; opacity: 1; }
+            0% {
+                display: none;
+                opacity: 0;
+            }
+            100% {
+                display: block;
+                opacity: 1;
+            }
        }
        @include animation-delay($delayEntryMs);
        @include animation(fadeInFromNone $durEntryMs ease-in);
@ -35,29 +40,21 @@
        z-index: 100;
    }
    .close {
-        font-size: 0.8rem;
+        $d: $interiorMargin;
+        opacity: 0.3;
        position: absolute;
-        top: $interiorMarginLg;
-        right: $interiorMarginLg;
+        top: $d;
+        right: $d;
        bottom: auto;
        left: auto;
-        z-index: 100;
+        &:hover {
+            opacity: 0.6;
+        }
    }
-    > .holder {
-        @include containerSubtle($colorOvrBg, $colorOvrFg);
-        border-radius: $basicCr * 3;
-        color: $colorOvrFg;
-        top: 50%;
-        right: auto;
-        bottom: auto;
-        left: 50%;
-        @include transform(translateX(-50%) translateY(-50%));
-        height: 70%;
-        width: 50%;
-        min-height: 300px;
-        min-width: 600px;
-        z-index: 101;
-        > .contents {
+
+    > .abs.outer-holder {
+        z-index: 102;
+        > .abs.inner-holder {
            $m: $overlayMargin;
            top: $m;
            right: $m;
@ -65,78 +62,188 @@
            left: $m;
        }
    }
-    .title {
-        @include ellipsize();
-        font-size: 1.2em;
-        line-height: 120%;
-        margin-bottom: $interiorMargin;
-    }
-
-    .hint, .field-hints { color: $colorFieldHintOverlay !important;  }
-
-    .abs.top-bar {
-        height: $ovrTopBarH;
-    }
-
-    .abs.editor,
-    .abs.message-body {
-        top: $ovrTopBarH + $interiorMarginLg;
-        bottom: $ovrFooterH + $interiorMarginLg;
-        left: 0;
-        right: 0;
-        overflow: auto;
-        .field.l-input-med {
-            input[type='text'] {
-                width: 100%;
-            }
-        }
-    }

    .bottom-bar {
        text-align: right;
        .s-button {
-            $bg: $colorOvrBtnBg;
-            &:not(.major) {
-                @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
-            }
            font-size: 95%;
            height: $ovrFooterH;
            line-height: $ovrFooterH;
-            margin-left: $interiorMargin;
+            margin-bottom: $interiorMarginSm;
            padding: 0 $interiorMargin * 3;
-            &:first-child {
-                margin-left: 0;
+            &:not(:last-child) {
+                margin-right: $interiorMargin;
+            }
+        }
+    }
+
+    // Dialog boxes, size constrained and centered in desktop/tablet
+    &.l-dialog {
+        .s-button {
+            &:not(.major) {
+                @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
            }
        }

+        > .abs.outer-holder {
+            @include desktopandtablet {
+                $max: 1280px;
+                @include transform(translateX(-50%) translateY(-50%));
+                border-radius: $overlayCr;
+                top: 50%; right: auto; bottom: auto; left: 50%;
+                width: 70%; height: 70%;
+                min-width: 520px;
+                max-width: $max; max-height: $max;
+            }
+            @include phone {
+                overflow: auto;
+
+                .editor .form .form-row.l-flex-row  {
+                    // Display elements in a columnar view
+                    @include flex-direction(column);
+                    > .flex-elem {
+                        &:not(:first-child) {
+                            margin-top: $interiorMargin;
+                        }
+                        &.label {
+                            width: 100%;
+                        }
+                        &.controls {
+                            overflow: auto;
+                        }
+                    }
+
+                    &.validates > .label:before {
+                        position: relative;
+                        right: auto;
+                        line-height: inherit;
+                        margin-right: $interiorMargin;
+                    }
+                }
+            }
+
+            @include containerSubtle($colorOvrBg, $colorOvrFg);
+        }
+
+        .title {
+            @include ellipsize();
+            font-size: 1.2em;
+            line-height: 120%;
+            margin-bottom: $interiorMargin;
+        }
+
+        .hint, .field-hints {
+            color: $colorFieldHintOverlay !important;
+        }
+
+        .abs.top-bar {
+            height: $ovrTopBarH;
+        }
+
+        .abs.bottom-bar {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            overflow: visible;
+            height: $ovrFooterH;
+        }
+
+        .abs.editor,
+        .abs.message-body {
+            top: $ovrTopBarH + $interiorMarginLg;
+            bottom: $ovrFooterH + $interiorMarginLg;
+            left: 0;
+            right: 0;
+            overflow: auto;
+            padding-right: $interiorMargin;
+            padding-bottom: $interiorMargin;
+            .field.l-input-med {
+                input[type='text'] {
+                    width: 100%;
+                }
+            }
+        }
+
+        .l-progress-bar {
+            $h: $progressBarHOverlay;
+            display: block;
+            height: $h;
+            line-height: $h;
+            margin: .5em 0;
+            width: 100%;
+        }
+
+        .select {
+            box-shadow: $shdwBtnsOverlay;
+        }
    }

-    .abs.bottom-bar {
-        top: auto;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        overflow: visible;
-        height: $ovrFooterH;
+    // Large view overlays for mobile and desktop
+    &.l-large-view {
+        > .abs.outer-holder {
+            @include keyframes(overlayIn) {
+                from {
+                    opacity: 0;
+                    transform: scale(0, 0);
+                }
+                to {
+                    opacity: 1;
+                    transform: scale(1.0, 1.0);
+                }
+            }
+
+            @include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
+            background: $colorBodyBg;
+            z-index: 101;
+
+            .abs.inner-holder {
+                opacity: 0;
+                @include keyframes(contentsIn) {
+                    from { opacity: 0; }
+                    to { opacity: 1; }
+                }
+                @include animToParams(contentsIn, $dur: 50ms, $delay: $durLargeViewExpand * 1.25);
+            }
+
+            // Hide View Large button
+            .t-btn-view-large {
+                display: none;
+            }
+
+            // But show View Large button when it's nested inside a Layout
+            .t-frame-inner .t-frame-inner .t-btn-view-large { display: block; }
+        }
+    }
+    // When multiple Large Views are visible, hide the blocker for all but the first
+    & + .l-large-view {
+        .blocker {
+            display: none;
+        }
+    }
+}
+
+body.desktop {
+    .overlay {
+        > .abs.outer-holder {
+            border-radius: $overlayCr;
+        }
+
+        &.l-large-view {
+            > .abs.outer-holder {
+                width: 90%;
+                height: 90%;
+                top: 5%;
+                left: 5%;
+                @include boxShdwLarge();
+            }
+        }
    }

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

+/********************************************* STACKED PLOT LAYOUT */
+.t-plot-stacked {
+    .l-view-section {
+        //  Make this a flex container
+        display: flex;
+        flex-flow: column nowrap;
+        .gl-plot.child-frame {
+            mct-plot { 
+                display: flex; 
+                flex: 1 1 auto;
+                height: 100%;
+                position: relative;
+            }
+            flex: 1 1 auto;
+            &:not(:first-child) {
+                margin-top: $interiorMargin;
+            }
+        }
+    }
+
+    .s-status-timeconductor-unsynced .holder-plot {
+        .t-object-alert.t-alert-unsynced {
+            display: block;
+        }
+    }
+
+}
+
+
+
 .gl-plot {
 	color: $colorPlotFg;
 	font-size: 0.7rem;
@ -32,6 +64,19 @@
 	height: 100%;
    min-height: $plotMinH;

+    /********************************************* AXIS AND DISPLAY AREA */
+    .plot-wrapper-axis-and-display-area {
+        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
+        position: relative;
+        flex: 1 1 auto;
+        .t-object-alert {
+            position: absolute;
+            display: block;
+            font-size: 1.5em;
+            top: $interiorMarginSm; left: $interiorMarginSm;
+        }
+    }
+
    .gl-plot-wrapper-display-area-and-x-axis {
        // Holds the plot area and the X-axis only
        position: absolute;
@ -49,7 +94,6 @@
        }

        .gl-plot-axis-area.gl-plot-x {
-            //@include test(green);
            top: auto;
            right: 0;
            bottom: 0;
@ -63,7 +107,7 @@
 	.gl-plot-axis-area {
 		position: absolute;
 		&.gl-plot-y {
-			top: $plotLegendH + $interiorMargin;
+			top: nth($plotDisplayArea, 1);
 			right: auto;
 			bottom: nth($plotDisplayArea, 3);
 			left: 0;
@ -158,17 +202,6 @@
 		}
 	}

-	.gl-plot-legend {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: auto;
-		left: 0;
-		height: $plotLegendH;
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
-
 	/****************************** Limits and Out-of-Bounds data */

 	.l-limit-bar,
@ -235,39 +268,6 @@
    border: 1px solid $colorPlotAreaBorder;
 }

-.gl-plot-legend,
-.legend {
-	.plot-legend-item,
-	.legend-item {
-		display: inline-block;
-		margin-right: $interiorMarginLg;
-		margin-bottom: $interiorMarginSm;
-		span {
-			vertical-align: middle;
-		}
-		.plot-color-swatch,
-		.color-swatch {
-			border-radius: 2px;
-			display: inline-block;
-			height: $plotSwatchD;
-			width: $plotSwatchD;
-		}
-	}
-}
-
-.gl-plot-legend {
-	.plot-legend-item {
-		border-radius: $smallCr;
-		line-height: 1.5em;
-		padding: 0px $itemPadLR;
-		.plot-color-swatch {
-			border: 1px solid $colorBodyBg;
-			height: $plotSwatchD + 1;
-			width: $plotSwatchD + 1;
-		}
-	}
-}
-
 .tick {
 	position: absolute;
 	border: 0 $colorPlotHash solid;
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@ -23,7 +23,7 @@
 ul.tree {
    @include menuUlReset();
    @include user-select(none);
-    li {
+    > li {
        display: block;
        position: relative;
    }
@ -54,18 +54,10 @@ ul.tree {
        color: $colorItemTreeVC;
        font-size: 0.75em;
        margin-right: $interiorMargin;
-        height: 100%;
-        line-height: inherit;
        width: $treeVCW;
-        &.has-children {
+        &.no-children {
            &:before {
-                position: absolute;
-                @include trans-prop-nice(transform, 100ms);
-                content: "\e904";
-                @include transform-origin(center);
-            }
-            &.expanded:before {
-                @include transform(rotate(90deg));
+                content:"";
            }
        }
    }
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@ -20,69 +20,147 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .frame {
-	$ohH: $btnFrameH;
-	$bc: $colorInteriorBorder;
-	&.child-frame.panel {
-		background: $colorBodyBg;
-		border: 1px solid $bc;
+    $ohH: $btnFrameH;
+    $bc: $colorInteriorBorder;
+    &.child-frame.panel {
        z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
-		&:hover {
-			border-color: lighten($bc, 10%);
-		}
-	}
-	.object-top-bar {
-		font-size: 0.75em;
-		height: $ohH;
-		line-height: $ohH;
-        .left {
-            padding-right: $interiorMarginLg;
+        &:not(.no-frame) {
+            background: $colorBodyBg;
+            border: 1px solid $bc;
+            &:hover {
+                border-color: lighten($bc, 10%);
+            }
        }
-	}
-	>.object-holder.abs {
-		top: $ohH + $interiorMargin;
-	}
-	.contents {
-		$myM: $interiorMargin;
-		top: $myM;
-		right: $myM;
-		bottom: $myM;
-		left: $myM;
-	}
-	&.frame-template {
-		.s-button,
-		.s-menu-button {
-			height: $ohH;
-			line-height: $ohH;
-			padding: 0 $interiorMargin;
-			> span,
+    }
+    .object-browse-bar {
+        font-size: 0.75em;
+        height: $ohH;
+        line-height: $ohH;
+        .right {
+            @include trans-prop-nice-fade($controlFadeMs);
+            padding-left: $interiorMargin;
+        }
+    }
+
+    &.t-object-type-timer,
+    &.t-object-type-clock,
+    &.t-object-type-hyperlink {
+        // Hide the right side buttons for objects where they don't make sense
+        // Note that this will hide the view Switcher button if applied
+        // to an object that has it.
+        .object-browse-bar .right { display: none; }
+    }
+
+    > .object-holder.abs {
+        top: $ohH + $interiorMargin;
+    }
+    .contents {
+        $m: $interiorMargin;
+        top: $m;
+        right: $m;
+        bottom: $m;
+        left: $m;
+    }
+    &.frame-template {
+        .s-button,
+        .s-menu-button {
+            height: $ohH;
+            line-height: $ohH;
+            padding: 0 $interiorMargin;
+            > span,
            &:before {
-				font-size: 0.65rem;
-			}
-		}
+                font-size: 0.65rem;
+            }
+        }

-		.s-menu-button:after {
-			font-size: 8px;
-		}
+        .s-menu-button:after {
+            font-size: 8px;
+        }

-		.view-switcher {
-			z-index: 10;
-		}
-	}
-	.view-switcher {
-		// Hide the name when the view switcher is in a frame context
-		.title-label {
-			display: none;
-		}
-	}
+        .view-switcher {
+            z-index: 10;
+        }
+    }
+    .view-switcher {
+        margin-right: $interiorMargin; // Kick other top bar elements away when I'm present.
+        // Hide the name when the view switcher is in a frame context
+        .title-label {
+            display: none;
+        }
+    }
+
+    &.no-frame {
+        background: transparent !important;
+        border: none !important;
+        .object-browse-bar .right {
+            $m: 0; // $interiorMarginSm;
+            background: rgba(black, 0.3);
+            border-radius: $basicCr;
+            padding: $interiorMarginSm;
+            position: absolute;
+            top: $m; right: $m;
+            z-index: 2;
+        }
+        &.t-frame-outer > .t-rep-frame {
+            &.contents {
+                $m: 2px;
+                top: $m;
+                right: $m;
+                bottom: $m;
+                left: $m;
+            }
+            > .t-frame-inner {
+                > .object-browse-bar .left {
+                    display: none;
+                }
+                > .object-holder.abs {
+                    top: 0 !important;
+                }
+            }
+        }
+    }
+
+    &.t-frame-outer .s-input-inline {
+        // Prevent inline inputs from being edited when nested in a Layout
+        pointer-events: none !important;
+    }
+
+        /********************************************************** OBJECT TYPES */
+    .t-object-type-hyperlink {
+        .object-holder {
+            overflow: hidden;
+        }
+        .l-hyperlink.s-button {
+            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
+            @extend .abs;
+            .label {
+                @include ellipsize();
+                @include transform(translateY(-50%));
+                padding: 0 $interiorMargin;
+                position: absolute;
+                min-width: 0;
+                left: 0; right: 0;
+                text-align: center;
+                top: 50%;
+            }
+        }
+    }
+}
+
+body.desktop .frame {
+    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
+    // Frame template is used because we need to target the lowest nested frame
+    .object-browse-bar .btn-bar {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    // Target the first descendant so that we only show the elements in the outermost container.
+    // Handles the case where we have layouts in layouts.
+    &:hover > .object-browse-bar {
+        .btn-bar {
+            opacity: 1;
+            pointer-events: inherit;
+        }
+    }
 }
- body.desktop .frame.frame-template {
-     // Hide the view switcher by default when it's in an element that's in a frame context
-     // Frame template is used because we need to target the lowest nested frame
-     .view-switcher {
-         opacity: 0;
-     }
-     &:hover .view-switcher {
-         // Show the view switcher on frame hover
-         opacity: 1;
-     }
- }
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@ -136,14 +136,6 @@
    .mini-tab-icon.toggle-pane {
        z-index: 5;
    }
-    &.items {
-        .object-browse-bar {
-            .left.abs,
-            .right.abs {
-                top: auto;
-            }
-        }
-    }
 }

 body.desktop .pane .mini-tab-icon.toggle-pane {
@ -235,25 +227,31 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
    top: $ueTopBarH + $interiorMarginLg;
 }

-.l-object-wrapper-inner {
-    @include trans-prop-nice-resize(0.25s);
+.l-object-wrapper {
+    padding: 0;
+    @include trans-prop-nice((padding), 0.25s);
+    .l-edit-controls {
+        @include trans-prop-nice((height), 0.5s);
+        height: 0;
+    }
 }

 .object-browse-bar .s-button,
 .top-bar .buttons-main .s-button,
 .top-bar .s-menu-button,
 .tool-bar .s-button,
-.tool-bar .s-menu-button {
+.tool-bar .s-menu-button,
+.tool-bar .select,
+.tool-bar .input-labeled {
    $h: $btnToolbarH;
    height: $h;
    line-height: $h;
    vertical-align: top;
 }

-.object-browse-bar,
-.top-bar {
-    .view-switcher {
-        margin-right: $interiorMarginLg * 2;
+.object-browse-bar {
+    .l-object-action-buttons {
+        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
    }
 }

@ -265,7 +263,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
    white-space: nowrap;

    .left {
-        padding-right: $interiorMarginLg;
        .l-back {
            margin-right: $interiorMarginLg;
            &.s-status-editing { display: none; }
@ -348,53 +345,21 @@ body.desktop {
    .pane:not(.resizing) {
        @include trans-prop-nice-resize-w(250ms);
    }
-    .pane.primary-pane .object-browse-bar {
+    .pane.primary-pane > .object-browse-bar {
        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
    }
 }

 .s-status-editing {
    .l-object-wrapper {
-        $t2Dur: $browseToEditAnimMs;
-        $t1Dur: $t2Dur / 2;
-        $pulseDur: $editBorderPulseMs;
-        $bC0: rgba($colorEditAreaFg, 0.5);
-        $bC100: rgba($colorEditAreaFg, 1);
-
        background-color: $colorEditAreaBg;
        border-radius: $controlCr;
-        border: 1px dotted $bC0;
-
-        // Transition 1
-        @include keyframes(wrapperIn) {
-            from { border: 0px dotted transparent; padding: 0; }
-            to { border: 1px dotted $bC0; padding: 5px; }
-        }
-
-        // Do last
-        @include keyframes(pulseNew) {
-            from  { border-color: $bC0; }
-            to { border-color: $bC100; }
-        }
-
-        @include animation-name(wrapperIn, pulseNew);
-        @include animation-duration($t1Dur, $pulseDur);
-        @include animation-delay(0s, $t1Dur + $t2Dur);
-        @include animation-direction(normal, alternate);
-        @include animation-fill-mode(both, none);
-        @include animation-iteration-count(1, infinite);
-        @include animation-timing-function(ease-in-out, linear);
-
+        border: 1px dotted $colorEditAreaFg;
+        padding: $interiorMargin;

        .l-edit-controls {
-            height: 0;
+            height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin;
            border-bottom: 1px solid $colorInteriorBorder;
-            // Transition 2: reveal edit controls
-            @include keyframes(editIn) {
-                from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; }
-                to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; }
-            }
-            @include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur);
            .tool-bar {
                right: $interiorMargin;
            }
--- a/platform/commonUI/general/res/sass/user-environ/_selecting.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_selecting.scss
@ -19,21 +19,36 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-.s-selectable {
-    border: 1px solid transparent;
+.s-hover-border {
+    border: 1px dotted transparent;
+}

-    &.s-hover {
-        // Styles when hovering over a selectable object
-        border-color: $colorSelectableHov !important;
+.s-status-editing {
+    // Limit to editing mode until we have sub-object selection
+    .s-hover-border {
+        // Show a border by default so user can see object bounds and empty objects
+        border: 1px dotted rgba($colorSelectableSelectedPrimary, 0.3) !important;
+        &:hover {
+            border-color: rgba($colorSelectableSelectedPrimary, 0.7) !important;
+        }
    }

-    &.s-selected {
+    .s-selected > .s-hover-border,
+    .s-selected.s-hover-border {
        // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
        border-color: $colorSelectableSelectedPrimary !important;
+        @include boxShdwLarge();
+        // Show edit-corners if you got 'em
+        .edit-corner {
+            display: block;
+            &:hover {
+                background-color: rgba($colorKey, 1);
+            }
+        }
    }

-    &.s-moveable {
-        @include boxShdwLarge();
+    .s-selected > .s-moveable,
+    .s-selected.s-moveable {
        cursor: move;
    }
-}
+}
--- a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss
@ -20,17 +20,18 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .tool-bar {
+    font-size: 0.7rem;
    &.btn-bar {
        white-space: nowrap;
    }
 	.l-control-group {
 		height: $btnToolbarH;
 	}
-	input[type="text"] {
+	input[type="text"],
+    input[type="search"],
+    input[type="number"] {
 		box-sizing: border-box;
-		font-size: .9em;
 		height: $btnToolbarH;
-		margin-bottom: 1px;
 		position: relative;
 		&.sm {
 			width: $btnToolbarH;
--- a/platform/commonUI/general/res/templates/controls/input-filter.html
+++ b/platform/commonUI/general/res/templates/controls/input-filter.html
@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <!-- look at action-button for example -->
-<span class="t-filter l-filter s-filter"
+<span class="t-filter l-filter"
      ng-controller="GetterSetterController">
 	<input type="search"
           class="t-filter-input"
--- a/platform/commonUI/general/src/controllers/ObjectInspectorController.js
+++ b/platform/commonUI/general/src/controllers/ObjectInspectorController.js
@ -108,8 +108,11 @@ define(

                getMetadata();
            });
-        }

+            var mutation = $scope.ngModel.selectedObject.getCapability('mutation');
+            var unlisten = mutation.listen(getMetadata);
+            $scope.$on('$destroy', unlisten);
+        }
        return ObjectInspectorController;
    }
 );
--- a/platform/commonUI/general/src/directives/MCTResize.js
+++ b/platform/commonUI/general/src/directives/MCTResize.js
@ -83,13 +83,14 @@ define(
                // Callback to fire after each timeout;
                // update bounds and schedule another timeout
                function onInterval() {
+                    if (!active) {
+                        return;
+                    }
                    fireEval({
                        width: element[0].offsetWidth,
                        height: element[0].offsetHeight
                    });
-                    if (active) {
-                        $timeout(onInterval, currentInterval(), false);
-                    }
+                    $timeout(onInterval, currentInterval(), false);
                }

                // Stop running in the background
--- a/platform/commonUI/general/src/directives/MCTSplitPane.js
+++ b/platform/commonUI/general/src/directives/MCTSplitPane.js
@ -93,13 +93,21 @@ define(
         * @memberof platform/commonUI/general
         * @constructor
         */
-        function MCTSplitPane($parse, $log, $interval) {
+        function MCTSplitPane($parse, $log, $interval, $window) {
            function controller($scope, $element, $attrs) {
                var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
+                    positionParsed = $parse($attrs.position),
                    anchor,
                    activeInterval,
-                    positionParsed = $parse($attrs.position),
-                    position; // Start undefined, until explicitly set
+                    position,
+                    splitterSize,
+
+                    alias = $attrs.alias !== undefined ?
+                      "mctSplitPane-" + $attrs.alias : undefined,
+
+                    //convert string to number from localStorage
+                    userWidthPreference = $window.localStorage.getItem(alias) === null ?
+                      undefined : Number($window.localStorage.getItem(alias));

                // Get relevant size (height or width) of DOM element
                function getSize(domElement) {
@ -109,16 +117,18 @@ define(

                // Apply styles to child elements
                function updateChildren(children) {
+                    position = userWidthPreference || position;
+
                    // Pick out correct elements to update, flowing from
                    // selected anchor edge.
                    var first = children.eq(anchor.reversed ? 2 : 0),
                        splitter = children.eq(1),
                        last = children.eq(anchor.reversed ? 0 : 2),
-                        splitterSize = getSize(splitter[0]),
                        firstSize;

+                    splitterSize = getSize(splitter[0]);
                    first.css(anchor.edge, "0px");
-                    first.css(anchor.dimension, (position - splitterSize) + 'px');
+                    first.css(anchor.dimension, position + 'px');

                    // Get actual size (to obey min-width etc.)
                    firstSize = getSize(first[0]);
@ -126,10 +136,9 @@ define(
                    splitter.css(anchor.edge, firstSize + 'px');
                    splitter.css(anchor.opposite, "auto");

-                    last.css(anchor.edge, (firstSize + splitterSize) + 'px');
-                    last.css(anchor.opposite, "0px");
-
-                    position = firstSize + splitterSize;
+                    last.css(anchor.edge, firstSize + splitterSize + 'px');
+                    last.css(anchor.opposite, '0px');
+                    position = firstSize;
                }

                // Update positioning of contained elements
@ -166,9 +175,22 @@ define(
                            positionParsed.assign($scope, position);
                        }
                    }
+
                    return position;
                }

+                function setUserWidthPreference(value) {
+                    if (alias) {
+                        userWidthPreference = value;
+                    }
+                }
+
+                function persistToLocalStorage(value) {
+                    if (alias) {
+                        $window.localStorage.setItem(alias, value);
+                    }
+                }
+
                // Dynamically apply a CSS class to elements when the user
                // is actively resizing
                function toggleClass(classToToggle) {
@ -196,18 +218,31 @@ define(
                activeInterval = $interval(function () {
                    getSetPosition(getSetPosition());
                }, POLLING_INTERVAL, 0, false);
-
                // ...and stop polling when we're destroyed.
                $scope.$on('$destroy', function () {
                    $interval.cancel(activeInterval);
                });

+
                // Interface exposed by controller, for mct-splitter to user
                return {
-                    position: getSetPosition,
-                    toggleClass: toggleClass,
                    anchor: function () {
                        return anchor;
+                    },
+                    position: function (newPosition) {
+                        if (arguments.length === 0) {
+                            return getSetPosition();
+                        }
+
+                        setUserWidthPreference(newPosition);
+                        return getSetPosition(newPosition);
+                    },
+                    startResizing: function () {
+                        toggleClass('resizing');
+                    },
+                    endResizing: function (finalPosition) {
+                        persistToLocalStorage(finalPosition);
+                        toggleClass('resizing');
                    }
                };
            }
@ -219,9 +254,7 @@ define(
                controller: ['$scope', '$element', '$attrs', controller]
            };
        }
-
        return MCTSplitPane;

    }
 );
-
--- a/platform/commonUI/general/src/directives/MCTSplitter.js
+++ b/platform/commonUI/general/src/directives/MCTSplitter.js
@ -37,15 +37,16 @@ define(
         */
        function MCTSplitter() {
            function link(scope, element, attrs, mctSplitPane) {
-                var initialPosition;
+                var initialPosition,
+                    newPosition;

                element.addClass("splitter");

                scope.splitter = {
                    // Begin moving this splitter
                    startMove: function () {
+                        mctSplitPane.startResizing();
                        initialPosition = mctSplitPane.position();
-                        mctSplitPane.toggleClass('resizing');
                    },
                    // Handle user changes to splitter position
                    move: function (delta) {
@ -55,12 +56,16 @@ define(
                                (anchor.reversed ? -1 : 1);

                        // Update the position of this splitter
-                        mctSplitPane.position(initialPosition + pixelDelta);
+                        newPosition =  initialPosition + pixelDelta;
+
+                        if (initialPosition !== newPosition) {
+                            mctSplitPane.position(newPosition);
+                        }
                    },
                    // Grab the event when the user is done moving
                    // the splitter and pass it on
                    endMove: function () {
-                        mctSplitPane.toggleClass('resizing');
+                        mctSplitPane.endResizing(newPosition);
                    }
                };
            }
@ -83,4 +88,3 @@ define(

    }
 );
-
--- a/platform/commonUI/general/src/ui/TreeNodeView.js
+++ b/platform/commonUI/general/src/ui/TreeNodeView.js
@ -83,9 +83,9 @@ define([
        this.activeObject = domainObject;

        if (domainObject && domainObject.hasCapability('composition')) {
-            $(this.toggleView.elements()).addClass('has-children');
+            $(this.toggleView.elements()).removeClass('no-children');
        } else {
-            $(this.toggleView.elements()).removeClass('has-children');
+            $(this.toggleView.elements()).addClass('no-children');
        }

        if (domainObject && domainObject.hasCapability('status')) {
--- a/platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js
@ -39,10 +39,18 @@ define(
            beforeEach(function () {
                mockScope = jasmine.createSpyObj(
                    "$scope",
-                    ["$watch"]
+                    ["$watch", "$on"]
                );
                mockScope.ngModel = {};
-                mockScope.ngModel.selectedObject = 'mock selected object';
+                mockScope.ngModel.selectedObject = {
+                    getCapability: function () {
+                        return {
+                            listen: function () {
+                                return true;
+                            }
+                        };
+                    }
+                };

                mockObjectService = jasmine.createSpyObj(
                    "objectService",
--- a/platform/commonUI/general/test/directives/MCTResizeSpec.js
+++ b/platform/commonUI/general/test/directives/MCTResizeSpec.js
@ -102,11 +102,16 @@ define(
                // Broadcast a destroy event
                mockScope.$on.mostRecentCall.args[1]();

+                testElement.offsetWidth = 300;
+                testElement.offsetHeight = 350;
+                mockScope.$eval.reset();
+
                // Fire the timeout
                mockTimeout.mostRecentCall.args[0]();

                // Should NOT have scheduled another timeout
                expect(mockTimeout.calls.length).toEqual(2);
+                expect(mockScope.$eval).not.toHaveBeenCalled();
            });

            it("triggers a digest cycle when size changes", function () {
--- a/platform/commonUI/general/test/directives/MCTSplitPaneSpec.js
+++ b/platform/commonUI/general/test/directives/MCTSplitPaneSpec.js
@ -38,7 +38,8 @@ define(
                mockLog,
                mockInterval,
                mockParsed,
-                mctSplitPane;
+                mctSplitPane,
+                mockWindow = {};

            beforeEach(function () {
                mockParse = jasmine.createSpy('$parse');
@ -48,13 +49,23 @@ define(
                mockInterval.cancel = jasmine.createSpy('mockCancel');
                mockParsed = jasmine.createSpy('parsed');
                mockParsed.assign = jasmine.createSpy('assign');
-
                mockParse.andReturn(mockParsed);

+                mockWindow.localStorage =  {
+                    store: {},
+                    setItem: function (key, value) {
+                        this.store[key] = value;
+                    },
+                    getItem: function (key) {
+                        return this.store[key];
+                    }
+                };
+
                mctSplitPane = new MCTSplitPane(
                    mockParse,
                    mockLog,
-                    mockInterval
+                    mockInterval,
+                    mockWindow
                );
            });

@ -85,7 +96,7 @@ define(
                        jasmine.createSpyObj('$scope', ['$apply', '$watch', '$on']);
                    mockElement =
                        jasmine.createSpyObj('element', JQLITE_METHODS);
-                    testAttrs = {};
+                    testAttrs = {alias: 'rightSide'};
                    mockChildren =
                        jasmine.createSpyObj('children', JQLITE_METHODS);
                    mockFirstPane =
@ -129,7 +140,7 @@ define(

                it("exposes its splitter's initial position", function () {
                    expect(controller.position()).toEqual(
-                        mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
+                        mockFirstPane[0].offsetWidth
                    );
                });

@ -142,10 +153,14 @@ define(
                    });
                });

-                it("allows classes to be toggled on contained elements", function () {
-                    controller.toggleClass('resizing');
-                    expect(mockChildren.toggleClass)
-                        .toHaveBeenCalledWith('resizing');
+                it("applies resizing class to children when resizing", function () {
+                    controller.startResizing();
+                    expect(mockChildren.toggleClass).toHaveBeenCalledWith('resizing');
+                });
+
+                it("removes resizing class from children when resizing action ends", function () {
+                    controller.endResizing(0);
+                    expect(mockChildren.toggleClass).toHaveBeenCalledWith('resizing');
                });

                it("allows positions to be set", function () {
@ -153,7 +168,7 @@ define(
                    controller.position(testValue);
                    expect(mockFirstPane.css).toHaveBeenCalledWith(
                        'width',
-                        (testValue - mockSplitter[0].offsetWidth) + 'px'
+                        (testValue) + 'px'
                    );
                });

@ -185,11 +200,11 @@ define(
                    mockFirstPane[0].offsetWidth += 100;
                    // Should not reflect the change yet
                    expect(controller.position()).not.toEqual(
-                        mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
+                        mockFirstPane[0].offsetWidth
                    );
                    mockInterval.mostRecentCall.args[0]();
                    expect(controller.position()).toEqual(
-                        mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
+                        mockFirstPane[0].offsetWidth
                    );
                });

@ -198,6 +213,12 @@ define(
                    fireOn('$destroy');
                    expect(mockInterval.cancel).toHaveBeenCalled();
                });
+
+                it("saves user preference to localStorage when user is done resizing", function () {
+                    controller.endResizing(100);
+                    expect(Number(mockWindow.localStorage.getItem('mctSplitPane-rightSide'))).toEqual(100);
+                });
+
            });

        });
--- a/platform/commonUI/general/test/directives/MCTSplitterSpec.js
+++ b/platform/commonUI/general/test/directives/MCTSplitterSpec.js
@ -57,7 +57,7 @@ define(
                    testAttrs = {};
                    mockSplitPane = jasmine.createSpyObj(
                        'mctSplitPane',
-                        ['position', 'toggleClass', 'anchor']
+                        ['position', 'startResizing', 'endResizing', 'anchor']
                    );

                    mctSplitter.link(
@ -86,9 +86,9 @@ define(
                        mockScope.splitter.startMove();
                    });

-                    it("adds a 'resizing' class", function () {
-                        expect(mockSplitPane.toggleClass)
-                            .toHaveBeenCalledWith('resizing');
+                    it("tell's the splitter when it is resizing", function () {
+                        expect(mockSplitPane.startResizing)
+                            .toHaveBeenCalled();
                    });

                    it("repositions during drag", function () {
@ -97,11 +97,10 @@ define(
                            .toHaveBeenCalledWith(testPosition + 10);
                    });

-                    it("removes the 'resizing' class when finished", function () {
-                        mockSplitPane.toggleClass.reset();
+                    it("tell's the splitter when it is done resizing", function () {
+                        mockScope.splitter.move([10,0]);
                        mockScope.splitter.endMove();
-                        expect(mockSplitPane.toggleClass)
-                            .toHaveBeenCalledWith('resizing');
+                        expect(mockSplitPane.endResizing).toHaveBeenCalledWith(testPosition + 10);
                    });

                });
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@ -17,6 +17,7 @@ $hoverRatioPercent: 10%;
 $basicCr: 3px;
 $controlCr: 2px;
 $smallCr: 2px;
+$overlayCr: 11px;

 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
@ -52,9 +53,15 @@ $timeControllerToiLineColor: #00c2ff;
 $timeControllerToiLineColorHov: #fff;
 $colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery

-// General Colors
+// Foundation Colors
 $colorAlt1: #ffc700;
 $colorAlert: #ff3c00;
+$colorWarningHi: #cc0000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
 $colorIconLink: #49dedb;
 $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
@ -83,8 +90,8 @@ $colorCreateMenuText: $colorMenuFg;
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorAlt1;
-$colorFormValid: #33cc33;
-$colorFormError: #990000;
+$colorFormValid: $colorOk;
+$colorFormError: $colorWarningHi;
 $colorFormInvalid: #ff3300;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
@ -108,8 +115,8 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
 $colorStatusDefault: #ccc;
-$colorStatusInfo: #62ba72;
-$colorStatusAlert: #ffa66d;
+$colorStatusInfo: $colorInfo;
+$colorStatusAlert: $colorAlert;
 $colorStatusError: #d4585c;
 $colorStatusAvailable: $colorKey;
 $colorStatusBtnBg: $colorBtnBg;
@ -124,14 +131,14 @@ $animPausedPulseDur: 500ms;
 $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;

-// Limits and staleness colors
+// Limits, status and staleness colors
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
 $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
-$colorLimitYellowBg: rgba(#ffaa00, 0.3);
-$colorLimitYellowIc: #ffaa00;
-$colorLimitRedBg: rgba(red, 0.3);
-$colorLimitRedIc: red;
+$colorLimitYellowBg: rgba($colorWarningLo, 0.3);
+$colorLimitYellowIc: $colorWarningLo;
+$colorLimitRedBg: rgba($colorWarningHi, 0.3);
+$colorLimitRedIc: $colorWarningHi;

 // Bubble colors
 $colorInfoBubbleBg: #ddd;
@ -146,6 +153,7 @@ $colorOvrFg: pullForward($colorBodyFg, 30%);
 $colorOvrBtnBg: pullForward($colorOvrBg, 20%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
+$durLargeViewExpand: 250ms;

 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
@ -173,6 +181,8 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$legendCollapsedNameMaxW: 50%;
+$legendHoverValueBg: rgba($colorBodyFg, 0.1);

 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
@ -189,14 +199,19 @@ $colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
 $colorItemTreeSelectedVC: $colorItemTreeVC;
 $shdwItemTreeIcon: 0.6;

+// Images
+$colorThumbHoverBg: $colorItemTreeHoverBg;
+
 // Scrollbar
-$scrollbarTrackSize: 10px;
-$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
-$scrollbarTrackColorBg: rgba(#000, 0.4);
+$scrollbarTrackSize: 7px;
+$scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px;
+$scrollbarTrackColorBg: transparent; //rgba(#000, 0.4);
 $scrollbarThumbColor: pullForward($colorBodyBg, 10%);
 $scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
 $scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
 $scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
+$scrollbarThumbColorMenu: pullForward($colorMenuBg, 20%);
+$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);

 // Splitter
 // All splitterD* values MUST both be either odd or even numbers
--- a/platform/commonUI/themes/espresso/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@ -13,3 +13,10 @@
    // For dark interfaces, darker things move back - opposite for light interfaces
    @return darken($c, $p);
 }
+
+@function bgFg($c) {
+    // Given a single color, return valid background and foreground versions of that color
+    $bg: darken($c, 20%);
+    $fg: lighten($c, 20%);
+    @return $bg, $fg;
+}
--- a/Show More
+++ b/Show More