Moved all internal state logic out of plotcontroller

Move more state management to model
More refactor
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 · 2017-11-21 11:28:15 -08:00
300 changed files with 8073 additions and 19222 deletions
--- a/.jshintrc
+++ b/.jshintrc
@@ -21,6 +21,5 @@
    "shadow": "outer",
    "strict": "implied",
    "undef": true,
-    "unused": "vars",
-    "latedef": "nofunc"
+    "unused": "vars"
 }
--- a/API.md
+++ b/API.md
@@ -567,7 +567,7 @@ openmct.time.timeSystem(utcTimeSystem, bounds);
 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
+### Time Bounds

 The TimeAPI provides a getter/setter for querying and setting time bounds. Time 
 bounds are simply an object with a `start` and an end `end` attribute.
@@ -591,7 +591,7 @@ openmct.time.bounds({start: now - ONE_HOUR, now);
 To respond to bounds change events, listen for the [`'bounds'`](#time-events)
 event.

-### Clocks
+## Clocks

 The Time API can be set to follow a clock source which will cause the bounds
 to be updated automatically whenever the clock source "ticks". A clock is simply
@@ -610,7 +610,7 @@ be defined to tick on some remote timing source.
 The values provided by clocks are simple `number`s, which are interpreted in the
 context of the active [Time System](#defining-and-registering-time-systems).

-#### Defining and registering clocks
+### Defining and registering clocks

 A clock is an object that defines certain required metadata and functions:

@@ -724,7 +724,7 @@ __Note:__ Setting the clock offsets will trigger an immediate bounds change, as
 new bounds will be calculated based on the `currentValue()` of the active clock. 
 Clock offsets are only relevant when a clock source is active.

-### Time Events
+## Time Events

 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.

@@ -766,7 +766,7 @@ The events emitted by the Time API are:
  * `clockOffsets`: The new [clock offsets](#clock-offsets).


-### The Time Conductor
+## 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.
@@ -856,90 +856,6 @@ openmct.install(openmct.plugins.Conductor({
 }));
 ```

-## Indicators
-
-Indicators are small widgets that reside at the bottom of the screen and are visible from 
-every screen in Open MCT. They can be used to convey system state using an icon and text.
-Indicators tend to be collapsed to an icon by default (though this behavior can be customized 
-by defining a [custom indicator](#custom-indicators)), and hovering over them will reveal 
-text providing more information.
-
-### The URL Status Indicator
-
-A common use case for indicators is to convey the state of some external system such as a 
-persistence backend or HTTP server. So long as this system is accessible via http request, 
-Open MCT provides a general purpose indicator to show whether the server is available and 
-returing a 2xx status code. The URL Status Indicator is made available as a default plugin. See
-[Included Plugins](#included-plugins) below for details on how to install and configure the 
-URL Status Indicator.
-
-### Creating a New Indicator
-
-A new indicator can be created with a simple API call, eg.
-
-``` javascript
-var myIndicator = openmct.indicators.create();
-myIndicator.text("Hello World!");
-```
-
-This will create a new indicator and add it to the bottom of the screen in Open MCT.
-By default, the indicator will appear as an information icon. Hovering over the icon will
-reveal the text set via the call to `.text()`. The Indicator object returned by the API 
-call exposes a number of functions for customizing the content and appearance of the indicator:
-
-* `.text([text])`: Gets or sets the text shown when the user hovers over the indicator.
-Accepts an __optional__ `string` argument that, if provided, will be used to set the text. 
-Hovering over the indicator will expand it to its full size, revealing this text alongside 
-the icon. Returns the currently set text as a `string`.
-* `.description([description])`: Gets or sets the indicator's description. Accepts an 
-__optional__ `string` argument that, if provided, will be used to set the text. The description 
-allows for more detail to be provided in a tooltip when the user hovers over the indicator. 
-Returns the currently set text as a `string`.
-* `.iconClass([className])`: Gets or sets the CSS class used to define the icon. Accepts an __optional__ 
-`string` parameter to be used to set the class applied to the indicator. Any of 
-[the built-in glyphs](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home/glyphs?view=styleguide.glyphs) 
-may be used here, or a custom CSS class can be provided. Returns the currently defined CSS 
-class as a `string`.
-* `.statusClass([className])`: Gets or sets the CSS class used to determine status. Accepts an __optional __
-`string` parameter to be used to set a status class applied to the indicator. May be used to apply 
-different colors to indicate status.
-
-### Custom Indicators
-
-A completely custom indicator can be added by registering a factory function that produces 
-a DOM element for your custom indicator. eg.
-
-``` javascript
-openmct.indicators.create(function () {
-    var domNode = document.createElement('div');
-    domNode.innerText = new Date().toString();
-    setInterval(function () {
-        domNode.innerText = new Date().toString();
-    }, 1000);
-    return domNode;
-});
-```
-
-### Priority
-
-When creating a new indicator or defining a custom indicator, a `number` can optionally be 
-provided that will determine the order that the indicator appears on the screen. An indicator 
-with a higher `priority` number will be shown to the left of indicators with lower 
-priority numbers. The lowest possible `priority` (and the default value if no `priority` is specified) 
-is `Number.NEGATIVE_INFINTY`, and the highest possible priority is `Number.POSITIVE_INFINITY`.
-
-eg.
-``` javascript
-var myIndicator = openmct.indicators.create(1);
-myIndicator.text("I'm on the left!");
-
-openmct.indicators.create(0, function () {
-    var domNode = document.createElement('div');
-    domNode.innerText = "I'm on the right!";
-    return domNode;
-});
-```
-
 ## Included Plugins

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

 To build Open MCT for deployment:

-`npm run prepare`
+`npm run prepublish`

 This will compile and minify JavaScript sources, as well as copy over assets.
 The contents of the `dist` folder will contain a runnable Open MCT
--- a/bower.json
+++ b/bower.json
@@ -17,7 +17,7 @@
    "screenfull": "^3.0.0",
    "node-uuid": "^1.4.7",
    "comma-separated-values": "^3.6.4",
-    "file-saver": "^1.3.3",
+    "FileSaver.js": "^0.0.2",
    "zepto": "^1.1.6",
    "eventemitter3": "^1.2.0",
    "lodash": "3.10.1",
--- a/circle.yml
+++ b/circle.yml
@@ -1,11 +1,3 @@
-machine:
-  node:
-    version: 4.7.0
-
-dependencies:
-  pre:
-    - npm install -g npm@latest
-
 deployment:
  production:
    branch: master
@@ -24,4 +16,4 @@ test:
 general:
  branches:
    ignore:
-      - gh-pages
+      - gh-pages
--- a/docs/src/guide/index.md
+++ b/docs/src/guide/index.md
@@ -2283,7 +2283,7 @@ To install build dependencies (only needs to be run once):

 To build:

-`npm run prepare`
+`npm run prepublish`

 This will compile and minify JavaScript sources, as well as copy over assets.
 The contents of the `dist` folder will contain a runnable Open MCT
--- 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,16 +51,19 @@ define([
            'amplitude',
            'period',
            'offset',
-            'dataRateInHz'
+            'dataRateInHz',
+            'phase',
        ];

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

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

--- 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/WorkerInterface.js
+++ b/example/generator/WorkerInterface.js
@@ -44,7 +44,9 @@ define([
        message = message.data;
        var callback = this.callbacks[message.id];
        if (callback) {
-            callback(message);
+            if (callback(message)) {
+                delete this.callbacks[message.id];
+            }
        }
    };

@@ -70,7 +72,6 @@ define([
            deferred.resolve = resolve;
            deferred.reject = reject;
        });
-        var messageId;

        function callback(message) {
            if (message.error) {
@@ -78,27 +79,33 @@ define([
            } else {
                deferred.resolve(message.data);
            }
-            delete this.callbacks[messageId];
+            return true;
        }

-        messageId = this.dispatch('request', request, callback.bind(this));
+        this.dispatch('request', request, callback);

        return promise;
    };

    WorkerInterface.prototype.subscribe = function (request, cb) {
-        function callback(message) {
+        var isCancelled = false;
+
+        var callback = function (message) {
+            if (isCancelled) {
+                return true;
+            }
            cb(message.data);
        };

-        var messageId = this.dispatch('subscribe', request, callback);
+        var messageId = this.dispatch('subscribe', request, callback)

        return function () {
+            isCancelled = true;
            this.dispatch('unsubscribe', {
                id: messageId
            });
-            delete this.callbacks[messageId];
        }.bind(this);
+
    };


--- 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,21 +83,22 @@
    }

    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;
@@ -105,10 +107,11 @@

        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/identity/bundle.js
+++ b/example/identity/bundle.js
@@ -38,8 +38,7 @@ define([
                    "provides": "identityService",
                    "type": "provider",
                    "depends": [
-                        "dialogService",
-                        "$q"
+                        "dialogService"
                    ]
                }
            ]
--- a/example/identity/src/ExampleIdentityService.js
+++ b/example/identity/src/ExampleIdentityService.js
@@ -55,37 +55,21 @@ define(
         * @implements {IdentityService}
         * @memberof platform/identity
         */
-        function ExampleIdentityProvider(dialogService, $q) {
-            this.dialogService = dialogService;
-            this.$q = $q;
+        function ExampleIdentityProvider(dialogService) {
+            // Handle rejected dialog messages by treating the
+            // current user as undefined.
+            function echo(v) { return v; }
+            function giveUndefined() { return undefined; }

-            this.returnUser = this.returnUser.bind(this);
-            this.returnUndefined = this.returnUndefined.bind(this);
+            this.userPromise =
+                dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
+                    .then(echo, giveUndefined);
        }

        ExampleIdentityProvider.prototype.getUser = function () {
-            if (this.user) {
-                return this.$q.when(this.user);
-            } else {
-                return this.dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
-                    .then(this.returnUser, this.returnUndefined);
-            }
+            return this.userPromise;
        };

-        /**
-         * @private
-         */
-        ExampleIdentityProvider.prototype.returnUser = function (user) {
-            return this.user = user;
-        }
-
-        /**
-         * @private
-         */
-        ExampleIdentityProvider.prototype.returnUndefined = function () {
-            return undefined;
-        }
-
        return ExampleIdentityProvider;
    }
 );
--- a/example/imagery/plugin.js
+++ b/example/imagery/plugin.js
@@ -48,8 +48,9 @@ define([
                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
            ];

-        function pointForTimestamp(timestamp) {
+        function pointForTimestamp(timestamp, name) {
            return {
+                name: name,
                utc: Math.floor(timestamp / 5000) * 5000,
                url: IMAGE_SAMPLES[Math.floor(timestamp / 5000) % IMAGE_SAMPLES.length]
            };
@@ -61,7 +62,7 @@ define([
            },
            subscribe: function (domainObject, callback) {
                var interval = setInterval(function () {
-                    callback(pointForTimestamp(Date.now()));
+                    callback(pointForTimestamp(Date.now(), domainObject.name));
                }, 5000);

                return function (interval) {
@@ -79,8 +80,8 @@ define([
                var start = options.start;
                var end = options.end;
                var data = [];
-                while (start < end && data.length < 5000) {
-                    data.push(pointForTimestamp(start));
+                while (start <= end && data.length < 5000) {
+                    data.push(pointForTimestamp(start, domainObject.name));
                    start += 5000;
                }
                return Promise.resolve(data);
@@ -93,7 +94,7 @@ define([
                    options.strategy === 'latest';
            },
            request: function (domainObject, options) {
-                return Promise.resolve([pointForTimestamp(Date.now())]);
+                return Promise.resolve([pointForTimestamp(Date.now(), domainObject.name)]);
            }
        };

@@ -109,6 +110,10 @@ define([
                initialize: function (object) {
                    object.telemetry = {
                        values: [
+                            {
+                                name: 'Name',
+                                key: 'name'
+                            },
                            {
                                name: 'Time',
                                key: 'utc',
--- a/example/notifications/res/dialog-launch.html
+++ b/example/notifications/res/dialog-launch.html
@@ -1,9 +1,9 @@
-<span class="l-indicator s-indicator icon-box-with-arrow" ng-controller="DialogLaunchController">
+<span class="status block" ng-controller="DialogLaunchController">
    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="label">
+    <span class="status-indicator icon-box-with-arrow"></span><span class="label">
        <a ng-click="launchProgress(true)">Known</a> |
        <a ng-click="launchProgress(false)">Unknown</a> |
        <a ng-click="launchError()">Error</a> |
        <a ng-click="launchInfo()">Info</a>
-    </span>
+    </span><span class="count"></span>
 </span>
--- a/example/notifications/res/notification-launch.html
+++ b/example/notifications/res/notification-launch.html
@@ -1,9 +1,9 @@
-<span class="l-indicator s-indicator icon-bell" ng-controller="NotificationLaunchController">
+<span class="status block" ng-controller="NotificationLaunchController">
    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="label">
+    <span class="status-indicator icon-bell"></span><span class="label">
        <a ng-click="newInfo()">Success</a> |
        <a ng-click="newError()">Error</a> |
        <a ng-click="newAlert()">Alert</a> |
        <a ng-click="newProgress()">Progress</a>
-    </span>
+    </span><span class="count"></span>
 </span>
--- a/example/styleguide/res/templates/menus.html
+++ b/example/styleguide/res/templates/menus.html
@@ -121,7 +121,7 @@
        <h2>Palettes</h2>
        <div class="cols cols1-1">
            <div class="col">
-                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one. Selected palette choices should utilize the <code>selected</code> CSS class to visualize indicate that state.</p>
+                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one.</p>
                <p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
            </div>
            <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
@@ -129,9 +129,9 @@
 <div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
    <span class="l-click-area" ng-click="toggle.toggle()"></span>
    <span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
-    <div class="menu l-palette l-color-palette" ng-show="toggle.isActive()">
+    <div class="menu l-color-palette" ng-show="toggle.isActive()">
        <div class="l-palette-row l-option-row">
-            <div class="l-palette-item s-palette-item no-selection"></div>
+            <div class="l-palette-item s-palette-item " ng-click="ngModel[field] = 'transparent'"></div>
            <span class="l-palette-item-label">None</span>
        </div>
        <div class="l-palette-row">
@@ -147,7 +147,7 @@
            <div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
        </div>
        <div class="l-palette-row">
-            <div class="l-palette-item s-palette-item selected" style="background: rgb(255, 0, 0);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(136, 32, 32);"></div>
            <div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
            <div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
            <div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>
--- a/example/styleguide/res/templates/status.html
+++ b/example/styleguide/res/templates/status.html
@@ -129,44 +129,6 @@
        </div>
    </div>

-    <div class="l-section">
-        <h2>Status Bar Indicators</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Indicators content goes here.</p>
-            </div>
-<mct-example><div class="status-holder s-status-bar">
-<span class="status-block-holder">
-    <span class="l-indicator s-indicator">
-        <span class="status-indicator icon-bell"></span>
-        <span class="label">Collapsible Indicator</span>
-    </span>
-</span>
-<span class="status-block-holder no-collapse caution">
-    <span class="l-indicator s-indicator">
-        <span class="status-indicator icon-bell"></span>
-        <span class="label">No collapse</span>
-    </span>
-</span>
-</div>
-<div class="status-holder s-status-bar">
-<span class="status-block-holder">
-    <span class="l-indicator s-indicator">
-        <span class="status-indicator icon-bell"></span>
-        <span class="label">Collapsible Indicator</span>
-    </span>
-</span>
-    <span class="status-block-holder">
-    <span class="status block s-status-info icon-info">
-        <span class="label">No collapse</span>
-    </span>
-</span>
-</div>
-</mct-example>
-        </div>
-    </div>
-
-
    <div class="l-section">
        <h2>Synchronization</h2>
        <div class="cols cols1-1">
--- a/example/worker/src/FibonacciIndicator.js
+++ b/example/worker/src/FibonacciIndicator.js
@@ -54,7 +54,7 @@ define(
                    return "icon-object-unknown";
                },
                getText: function () {
-                    return "" + latest;
+                    return latest;
                },
                getDescription: function () {
                    return "";
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -22,8 +22,6 @@

 /*global require,__dirname*/

-require("v8-compile-cache");
-
 var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    path = require('path'),
@@ -179,4 +177,4 @@ gulp.task('install', [ 'assets', 'scripts' ]);

 gulp.task('verify', [ 'lint', 'test', 'checkstyle' ]);

-gulp.task('build', [ 'verify', 'install' ]);
+gulp.task('build', [ 'verify', 'install' ]);
--- a/index.html
+++ b/index.html
@@ -25,7 +25,8 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
-    <script src="bower_components/requirejs/require.js"> </script>
+    <script src="bower_components/requirejs/require.js">
+    </script>
    <script>
        var THIRTY_MINUTES = 30 * 60 * 1000;

@@ -38,21 +39,18 @@
            );
            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.install(openmct.plugins.ImportExport());
-            openmct.install(openmct.plugins.AutoflowView({
-                type: "telemetry.panel"
-            }));
            openmct.install(openmct.plugins.Conductor({
                menuOptions: [
                    {
                        name: "Fixed",
                        timeSystem: 'utc',
                        bounds: {
-                            start: Date.now() - THIRTY_MINUTES,
+                            start: Date.now() - 30 * 60 * 1000,
                            end: Date.now()
                        }
                    },
@@ -67,7 +65,6 @@
                    }
                ]
            }));
-            openmct.install(openmct.plugins.SummaryWidget());
            openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
            openmct.time.timeSystem('utc');
            openmct.start();
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -36,7 +36,6 @@ module.exports = function(config) {
        files: [
            {pattern: 'bower_components/**/*.js', included: false},
            {pattern: 'node_modules/d3-*/**/*.js', included: false},
-            {pattern: 'node_modules/vue/**/*.js', included: false},
            {pattern: 'src/**/*.js', included: false},
            {pattern: 'example/**/*.html', included: false},
            {pattern: 'example/**/*.js', included: false},
--- a/openmct.js
+++ b/openmct.js
@@ -33,11 +33,10 @@ requirejs.config({
        "moment": "bower_components/moment/moment",
        "moment-duration-format": "bower_components/moment-duration-format/lib/moment-duration-format",
        "moment-timezone": "bower_components/moment-timezone/builds/moment-timezone-with-data",
-        "saveAs": "bower_components/file-saver/FileSaver.min",
+        "saveAs": "bower_components/FileSaver.js/FileSaver.min",
        "screenfull": "bower_components/screenfull/dist/screenfull.min",
        "text": "bower_components/text/text",
        "uuid": "bower_components/node-uuid/uuid",
-        "vue": "node_modules/vue/dist/vue.min",
        "zepto": "bower_components/zepto/zepto.min",
        "lodash": "bower_components/lodash/lodash",
        "d3-selection": "node_modules/d3-selection/build/d3-selection.min",
@@ -67,9 +66,6 @@ requirejs.config({
        "moment-duration-format": {
            "deps": ["moment"]
        },
-        "saveAs": {
-            "exports": "saveAs"
-        },
        "screenfull": {
            "exports": "screenfull"
        },
--- a/package.json
+++ b/package.json
@@ -15,8 +15,7 @@
    "d3-time-format": "^2.0.3",
    "express": "^4.13.1",
    "minimist": "^1.1.1",
-    "request": "^2.69.0",
-    "vue": "^2.5.6"
+    "request": "^2.69.0"
  },
  "devDependencies": {
    "bower": "^1.7.7",
@@ -50,8 +49,7 @@
    "moment": "^2.11.1",
    "node-bourbon": "^4.2.3",
    "requirejs": "2.1.x",
-    "split": "^1.0.0",
-    "v8-compile-cache": "^1.1.0"
+    "split": "^1.0.0"
  },
  "scripts": {
    "start": "node app.js",
@@ -61,7 +59,7 @@
    "jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",
    "otherdoc": "node docs/gendocs.js --in docs/src --out dist/docs --suppress-toc 'docs/src/index.md|docs/src/process/index.md'",
    "docs": "npm run jsdoc ; npm run otherdoc",
-    "prepare": "node ./node_modules/bower/bin/bower install && node ./node_modules/gulp/bin/gulp.js install"
+    "prepublish": "node ./node_modules/bower/bin/bower install && node ./node_modules/gulp/bin/gulp.js install"
  },
  "repository": {
    "type": "git",
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -57,12 +57,7 @@
            </div>
            <mct-representation key="representation.selected.key"
                                mct-object="representation.selected.key && domainObject"
-                                class="abs flex-elem grows object-holder-main scroll"
-                                mct-selectable="{
-                                    item: domainObject.useCapability('adapter'),
-                                    oldItem: domainObject
-                                }"
-                                mct-init-select>
+                                class="abs flex-elem grows object-holder-main scroll">
            </mct-representation>
        </div>
    </div>
--- a/platform/commonUI/browse/res/templates/browse/inspector-region.html
+++ b/platform/commonUI/browse/res/templates/browse/inspector-region.html
@@ -19,21 +19,12 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div ng-controller="InspectorController as controller">
+<div ng-controller="InspectorController">
+    <div ng-repeat="region in regions">
        <mct-representation
-                key="'object-properties'"
-                mct-object="controller.selectedItem()"
+                key="region.content.key"
+                mct-object="domainObject"
                ng-model="ngModel">
        </mct-representation>
-
-        <div ng-if="!controller.hasProviderView()">
-            <mct-representation
-                    key="inspectorKey"
-                    mct-object="controller.selectedItem()"
-                    ng-model="ngModel">
-            </mct-representation>
-        </div>
-
-        <div class='inspector-provider-view'>
-        </div>
+    </div>
 </div>
--- a/platform/commonUI/browse/res/templates/browse/object-properties.html
+++ b/platform/commonUI/browse/res/templates/browse/object-properties.html
@@ -38,6 +38,8 @@
                  ng-class="{ last:($index + 1) === contextualParents.length }">
                <mct-representation key="'label'"
                                    mct-object="parent"
+                                    ng-model="ngModel"
+                                    ng-click="ngModel.selectedObject = parent"
                                    class="location-item">
                </mct-representation>
            </span>
@@ -49,6 +51,8 @@
                  ng-class="{ last:($index + 1) === primaryParents.length }">
                <mct-representation key="'label'"
                                    mct-object="parent"
+                                    ng-model="ngModel"
+                                    ng-click="ngModel.selectedObject = parent"
                                    class="location-item">
                </mct-representation>
            </span>
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <div class="abs top-bar">
-    <div class="dialog-title">{{ngModel.title}}</div>
+    <div class="title">{{ngModel.title}}</div>
    <div class="hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
 </div>
 <div class='abs editor'>
--- a/platform/commonUI/dialog/res/templates/message.html
+++ b/platform/commonUI/dialog/res/templates/message.html
@@ -1,10 +1,11 @@
 <div class="l-message"
     ng-class="'message-severity-' + ngModel.severity">
-    <div class="w-message-contents">
+    <div class="ui-symbol type-icon message-type"></div>
+    <div class="message-contents">
        <div class="top-bar">
            <div class="title">{{ngModel.title}}</div>
+            <div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
        </div>
-        <div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
        <div class="message-body">
            <div class="message-action">
                {{ngModel.actionText}}
@@ -24,6 +25,8 @@
               ng-click="ngModel.primaryOption.callback()">
                {{ngModel.primaryOption.label}}
            </a>
+
        </div>
+
    </div>
 </div>
--- a/platform/commonUI/dialog/res/templates/overlay-message-list.html
+++ b/platform/commonUI/dialog/res/templates/overlay-message-list.html
@@ -1,17 +1,17 @@
-<mct-container key="overlay">
-    <div class="t-message-list">
-        <div class="top-bar">
-            <div class="dialog-title">{{ngModel.dialog.title}}</div>
+<mct-container key="overlay" class="t-message-list">
+    <div class="message-contents">
+        <div class="abs top-bar">
+            <div class="title">{{ngModel.dialog.title}}</div>
            <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
                                                                                                  ngModel.dialog.messages.length == 0">s</span>
            </div>
        </div>
-        <div class="w-messages">
+        <div class="abs message-body">
            <mct-include
-                ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
-                key="'message'" ng-model="msg.model"></mct-include>
+                    ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
+                    key="'message'" ng-model="msg.model"></mct-include>
        </div>
-        <div class="bottom-bar">
+        <div class="abs bottom-bar">
            <a ng-repeat="dialogAction in ngModel.dialog.actions"
               class="s-button major"
               ng-click="dialogAction.action()">
--- a/platform/commonUI/dialog/res/templates/overlay-options.html
+++ b/platform/commonUI/dialog/res/templates/overlay-options.html
@@ -21,7 +21,7 @@
 -->
 <mct-container key="overlay">
    <div class="abs top-bar">
-        <div class="dialog-title">{{ngModel.dialog.title}}</div>
+        <div class="title">{{ngModel.dialog.title}}</div>
        <div class="hint">{{ngModel.dialog.hint}}</div>
    </div>
    <div class='abs editor'>
--- a/platform/commonUI/edit/bundle.js
+++ b/platform/commonUI/edit/bundle.js
@@ -121,8 +121,7 @@ define([
                    "key": "ElementsController",
                    "implementation": ElementsController,
                    "depends": [
-                        "$scope",
-                        "openmct"
+                        "$scope"
                    ]
                },
                {
@@ -300,6 +299,9 @@ define([
                {
                    "key": "edit-elements",
                    "template": elementsTemplate,
+                    "uses": [
+                        "composition"
+                    ],
                    "gestures": [
                        "drop"
                    ]
@@ -383,10 +385,7 @@ define([
                    ]
                },
                {
-                    "implementation": EditToolbarRepresenter,
-                    "depends": [
-                        "openmct"
-                    ]
+                    "implementation": EditToolbarRepresenter
                }
            ],
            "constants": [
--- a/platform/commonUI/edit/res/templates/edit-object.html
+++ b/platform/commonUI/edit/res/templates/edit-object.html
@@ -61,12 +61,7 @@
            <mct-representation key="representation.selected.key"
                                mct-object="representation.selected.key && domainObject"
                                class="abs flex-elem grows object-holder-main scroll"
-                                toolbar="toolbar"
-                                mct-selectable="{
-                                    item: domainObject.useCapability('adapter'),
-                                    oldItem: domainObject
-                                }"
-                                mct-init-select>
+                                toolbar="toolbar">
            </mct-representation>
        </div><!--/ l-object-wrapper-inner -->
    </div>
--- a/platform/commonUI/edit/res/templates/elements.html
+++ b/platform/commonUI/edit/res/templates/elements.html
@@ -25,7 +25,7 @@
                 ng-model="filterBy">
    </mct-include>
    <div class="flex-elem grows vscroll">
-        <ul class="tree" ng-if="composition.length > 0">
+        <ul class="tree">
            <li ng-repeat="containedObject in composition | filter:searchElements">
                <span class="tree-item">
                    <mct-representation
@@ -36,6 +36,5 @@
                </span>
            </li>
        </ul>
-        <div ng-if="composition.length === 0">No contained elements</div>    
    </div>
 </div>
--- a/platform/commonUI/edit/src/capabilities/EditorCapability.js
+++ b/platform/commonUI/edit/src/capabilities/EditorCapability.js
@@ -101,15 +101,10 @@ define(
         */
        EditorCapability.prototype.finish = function () {
            var domainObject = this.domainObject;
-
-            if (this.transactionService.isActive()) {
-                return this.transactionService.cancel().then(function () {
-                    domainObject.getCapability("status").set("editing", false);
-                    return domainObject;
-                });
-            } else {
-                return Promise.resolve(domainObject);
-            }
+            return this.transactionService.cancel().then(function () {
+                domainObject.getCapability("status").set("editing", false);
+                return domainObject;
+            });
        };

        /**
--- a/platform/commonUI/edit/src/controllers/EditObjectController.js
+++ b/platform/commonUI/edit/src/controllers/EditObjectController.js
@@ -28,6 +28,16 @@ define(
    [],
    function () {

+        function isDirty(domainObject) {
+            var navigatedObject = domainObject,
+                editorCapability = navigatedObject &&
+                    navigatedObject.getCapability("editor");
+
+            return editorCapability &&
+                editorCapability.isEditContextRoot() &&
+                editorCapability.dirty();
+        }
+
        function cancelEditing(domainObject) {
            var navigatedObject = domainObject,
                editorCapability = navigatedObject &&
@@ -49,7 +59,10 @@ define(

            var removeCheck = navigationService
                .checkBeforeNavigation(function () {
-                    return "Continuing will cause the loss of any unsaved changes.";
+                    if (isDirty(domainObject)) {
+                        return "Continuing will cause the loss of any unsaved changes.";
+                    }
+                    return false;
                });

            $scope.$on('$destroy', function () {
--- a/platform/commonUI/edit/src/controllers/ElementsController.js
+++ b/platform/commonUI/edit/src/controllers/ElementsController.js
@@ -29,11 +29,7 @@ define(
         *
         * @constructor
         */
-        function ElementsController($scope, openmct) {
-            this.scope = $scope;
-            this.scope.composition = [];
-            var self = this;
-
+        function ElementsController($scope) {
            function filterBy(text) {
                if (typeof text === 'undefined') {
                    return $scope.searchText;
@@ -51,45 +47,10 @@ define(
                }
            }

-            function setSelection(selection) {
-                self.scope.selection = selection;
-                self.refreshComposition(selection);
-            }
-
            $scope.filterBy = filterBy;
            $scope.searchElements = searchElements;
-
-            openmct.selection.on('change', setSelection);
-            setSelection(openmct.selection.get());
-
-            $scope.$on("$destroy", function () {
-                openmct.selection.off("change", setSelection);
-            });
        }

-        /**
-         * Gets the composition for the selected object and populates the scope with it.
-         *
-         * @param selection the selection object
-         * @private
-         */
-        ElementsController.prototype.refreshComposition = function (selection) {
-            if (!selection[0]) {
-                return;
-            }
-
-            var selected = selection[0].context.oldItem;
-            var selectedObjectComposition = selected && selected.useCapability('composition');
-
-            if (selectedObjectComposition) {
-                selectedObjectComposition.then(function (composition) {
-                    this.scope.composition = composition;
-                }.bind(this));
-            } else {
-                this.scope.composition = [];
-            }
-        };
-
        return ElementsController;
    }
 );
--- a/platform/commonUI/edit/src/representers/EditToolbarRepresenter.js
+++ b/platform/commonUI/edit/src/representers/EditToolbarRepresenter.js
@@ -38,7 +38,7 @@ define(
         * @constructor
         * @implements {Representer}
         */
-        function EditToolbarRepresenter(openmct, scope, element, attrs) {
+        function EditToolbarRepresenter(scope, element, attrs) {
            var self = this;

            // Mark changes as ready to persist
@@ -109,7 +109,6 @@ define(
            this.updateSelection = updateSelection;
            this.toolbar = undefined;
            this.toolbarObject = {};
-            this.openmct = openmct;

            // If this representation exposes a toolbar, set up watches
            // to synchronize with it.
@@ -147,7 +146,7 @@ define(
            // Expose the toolbar object to the parent scope
            initialize(definition);
            // Create a selection scope
-            this.setSelection(new EditToolbarSelection(this.openmct));
+            this.setSelection(new EditToolbarSelection());
            // Initialize toolbar to an empty selection
            this.updateSelection([]);
        };
--- a/platform/commonUI/edit/src/representers/EditToolbarSelection.js
+++ b/platform/commonUI/edit/src/representers/EditToolbarSelection.js
@@ -38,24 +38,10 @@ define(
         * @memberof platform/commonUI/edit
         * @constructor
         */
-        function EditToolbarSelection(openmct) {
+        function EditToolbarSelection() {
            this.selection = [{}];
            this.selecting = false;
            this.selectedObj = undefined;
-
-            openmct.selection.on('change', function (selection) {
-                var selected = selection[0];
-
-                if (selected && selected.context.toolbar) {
-                    this.select(selected.context.toolbar);
-                } else {
-                    this.deselect();
-                }
-
-                if (selected && selected.context.viewProxy) {
-                    this.proxy(selected.context.viewProxy);
-                }
-            }.bind(this));
        }

        /**
--- a/platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js
+++ b/platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js
@@ -62,7 +62,6 @@ define(
                );
                mockTransactionService.commit.andReturn(fastPromise());
                mockTransactionService.cancel.andReturn(fastPromise());
-                mockTransactionService.isActive = jasmine.createSpy('isActive');

                mockStatusCapability = jasmine.createSpyObj(
                    "statusCapability",
@@ -142,7 +141,6 @@ define(

            describe("finish", function () {
                beforeEach(function () {
-                    mockTransactionService.isActive.andReturn(true);
                    capability.edit();
                    capability.finish();
                });
@@ -154,23 +152,6 @@ define(
                });
            });

-            describe("finish", function () {
-                beforeEach(function () {
-                    mockTransactionService.isActive.andReturn(false);
-                    capability.edit();
-                });
-
-                it("does not cancel transaction when transaction is not active", function () {
-                    capability.finish();
-                    expect(mockTransactionService.cancel).not.toHaveBeenCalled();
-                });
-
-                it("returns a promise", function () {
-                    expect(capability.finish() instanceof Promise).toBe(true);
-                });
-
-            });
-
            describe("dirty", function () {
                var model = {};

--- a/platform/commonUI/edit/test/controllers/EditObjectControllerSpec.js
+++ b/platform/commonUI/edit/test/controllers/EditObjectControllerSpec.js
@@ -104,10 +104,10 @@ define(
                mockEditorCapability.isEditContextRoot.andReturn(false);
                mockEditorCapability.dirty.andReturn(false);

-                expect(checkFn()).toBe("Continuing will cause the loss of any unsaved changes.");
+                expect(checkFn()).toBe(false);

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

                mockEditorCapability.dirty.andReturn(true);
                expect(checkFn())
--- a/platform/commonUI/edit/test/controllers/ElementsControllerSpec.js
+++ b/platform/commonUI/edit/test/controllers/ElementsControllerSpec.js
@@ -27,23 +27,11 @@ define(

        describe("The Elements Pane controller", function () {
            var mockScope,
-                mockOpenMCT,
-                mockSelection,
                controller;

            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ['$on']);
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn([]);
-                mockOpenMCT = {
-                    selection: mockSelection
-                };
-
-                controller = new ElementsController(mockScope, mockOpenMCT);
+                mockScope = jasmine.createSpy("$scope");
+                controller = new ElementsController(mockScope);
            });

            function getModel(model) {
--- a/platform/commonUI/edit/test/representers/EditToolbarRepresenterSpec.js
+++ b/platform/commonUI/edit/test/representers/EditToolbarRepresenterSpec.js
@@ -29,9 +29,7 @@ define(
                mockElement,
                testAttrs,
                mockUnwatch,
-                representer,
-                mockOpenMCT,
-                mockSelection;
+                representer;

            beforeEach(function () {
                mockScope = jasmine.createSpyObj(
@@ -48,18 +46,7 @@ define(

                mockScope.$parent.$watchCollection.andReturn(mockUnwatch);

-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn([]);
-                mockOpenMCT = {
-                    selection: mockSelection
-                };
-
                representer = new EditToolbarRepresenter(
-                    mockOpenMCT,
                    mockScope,
                    mockElement,
                    testAttrs
--- a/platform/commonUI/edit/test/representers/EditToolbarSelectionSpec.js
+++ b/platform/commonUI/edit/test/representers/EditToolbarSelectionSpec.js
@@ -28,25 +28,13 @@ define(
            var testProxy,
                testElement,
                otherElement,
-                selection,
-                mockSelection,
-                mockOpenMCT;
+                selection;

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

--- a/platform/commonUI/general/bundle.js
+++ b/platform/commonUI/general/bundle.js
@@ -34,13 +34,13 @@ define([
    "./src/controllers/ContextMenuController",
    "./src/controllers/ClickAwayController",
    "./src/controllers/ViewSwitcherController",
+    "./src/controllers/BottomBarController",
    "./src/controllers/GetterSetterController",
    "./src/controllers/SelectorController",
    "./src/controllers/ObjectInspectorController",
    "./src/controllers/BannerController",
    "./src/directives/MCTContainer",
    "./src/directives/MCTDrag",
-    "./src/directives/MCTSelectable",
    "./src/directives/MCTClickElsewhere",
    "./src/directives/MCTResize",
    "./src/directives/MCTPopup",
@@ -48,12 +48,11 @@ define([
    "./src/directives/MCTSplitPane",
    "./src/directives/MCTSplitter",
    "./src/directives/MCTTree",
-    "./src/directives/MCTIndicators",
    "./src/filters/ReverseFilter",
    "text!./res/templates/bottombar.html",
    "text!./res/templates/controls/action-button.html",
    "text!./res/templates/controls/input-filter.html",
-    "text!./res/templates/angular-indicator.html",
+    "text!./res/templates/indicator.html",
    "text!./res/templates/message-banner.html",
    "text!./res/templates/progress-bar.html",
    "text!./res/templates/controls/time-controller.html",
@@ -84,13 +83,13 @@ define([
    ContextMenuController,
    ClickAwayController,
    ViewSwitcherController,
+    BottomBarController,
    GetterSetterController,
    SelectorController,
    ObjectInspectorController,
    BannerController,
    MCTContainer,
    MCTDrag,
-    MCTSelectable,
    MCTClickElsewhere,
    MCTResize,
    MCTPopup,
@@ -98,7 +97,6 @@ define([
    MCTSplitPane,
    MCTSplitter,
    MCTTree,
-    MCTIndicators,
    ReverseFilter,
    bottombarTemplate,
    actionButtonTemplate,
@@ -275,6 +273,13 @@ define([
                        "$timeout"
                    ]
                },
+                {
+                    "key": "BottomBarController",
+                    "implementation": BottomBarController,
+                    "depends": [
+                        "indicators[]"
+                    ]
+                },
                {
                    "key": "GetterSetterController",
                    "implementation": GetterSetterController,
@@ -323,13 +328,6 @@ define([
                        "$document"
                    ]
                },
-                {
-                    "key": "mctSelectable",
-                    "implementation": MCTSelectable,
-                    "depends": [
-                        "openmct"
-                    ]
-                },
                {
                    "key": "mctClickElsewhere",
                    "implementation": MCTClickElsewhere,
@@ -388,11 +386,6 @@ define([
                    "key": "mctTree",
                    "implementation": MCTTree,
                    "depends": ['gestureService']
-                },
-                {
-                    "key": "mctIndicators",
-                    "implementation": MCTIndicators,
-                    "depends": ['openmct']
                }
            ],
            "constants": [
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@@ -137,11 +137,6 @@
        min-height: 0;
        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
    }
-    &.l-flex-accordion .flex-accordion-holder {
-        display: flex;
-        flex-direction: column;
-        //overflow: hidden !important;
-    }
    .flex-container { @include flex-direction(column); }
 }

--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -99,7 +99,7 @@ $plotXBarH: 32px;
 $plotLegendH: 20px;
 $plotSwatchD: 8px;
 // 1: Top, 2: right, 3: bottom, 4: left
-$plotDisplayArea: ($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 */
--- a/platform/commonUI/general/res/sass/_fixed-position.scss
+++ b/platform/commonUI/general/res/sass/_fixed-position.scss
@@ -25,7 +25,6 @@
 	}

 	.l-fixed-position-item {
-        border-width: 1px;
 		position: absolute;
 		&.s-not-selected {
 			opacity: 0.8;
--- 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'),
@@ -180,20 +180,6 @@ a.disabled {
    @include ellipsize();
 }

-.no-selection {
-    // aka selection = "None". Used in palettes and their menu buttons.
-    $c: red; $s: 48%; $e: 52%;
-    @include background-image(linear-gradient(-45deg,
-        transparent $s - 5%,
-        $c $s,
-        $c $e,
-        transparent $e + 5%
-    ));
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
-
 .scrolling,
 .scroll {
    overflow: auto;
@@ -248,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/_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/_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/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -37,12 +37,11 @@
 /********************************* CONTROLS */
@import "controls/breadcrumb";
@import "controls/buttons";
-@import "controls/palette";
+@import "controls/color-palette";
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
@import "controls/messages";
-@import "controls/indicators";
@import "mobile/controls/menus";

 /********************************* FORMS */
@@ -71,6 +70,7 @@
@import "fixed-position";
@import "lists/tabular";
@import "plots/plots-main";
+@import "plots/legend";
@import "iframe";
@import "views";
@import "items/item";
@@ -81,4 +81,3 @@
@import "autoflow";
@import "features/imagery";
@import "features/time-display";
-@import "widgets";
--- a/platform/commonUI/general/res/sass/_status.scss
+++ b/platform/commonUI/general/res/sass/_status.scss
@@ -20,15 +20,13 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*************************************************** MIXINS */
-@mixin elementStatusColors($c) {
+@mixin formulateStatusColors($c) {
    // Sets bg and icon colors for elements
    background: rgba($c, 0.4) !important;
    &:before { color: $c !important; }
 }

-@mixin indicatorStatusColors($c) {
-    &:before, .count { color: $c; }
-}
+

 /*************************************************** GENERAL */
 .s-limit-yellow,
@@ -56,13 +54,14 @@
    }
 }

+
 /*************************************************** LIMITS */
 .s-limit-yellow, .s-limit-yellow-icon {
-    @include elementStatusColors($colorWarningLo);
+    @include formulateStatusColors($colorWarningLo);
 }

 .s-limit-red, .s-limit-red-icon {
-    @include elementStatusColors($colorWarningHi);
+    @include formulateStatusColors($colorWarningHi);
 }

 .s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
@@ -71,11 +70,11 @@
 .s-limit-red-icon:before { content: $glyph-icon-alert-triangle; }

 /*************************************************** STATUS */
-.s-status-warning-hi, .s-status-warning-hi-icon {  @include elementStatusColors($colorWarningHi); }
-.s-status-warning-lo, .s-status-warning-lo-icon {  @include elementStatusColors($colorWarningLo); }
-.s-status-diagnostic, .s-status-diagnostic-icon {  @include elementStatusColors($colorDiagnostic); }
-.s-status-info, .s-status-info-icon {  @include elementStatusColors($colorInfo); }
-.s-status-ok, .s-status-ok-icon {  @include elementStatusColors($colorOk); }
+.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; }
@@ -83,25 +82,4 @@
 .s-status-info-icon:before { content: $glyph-icon-info; }
 .s-status-ok-icon:before { content: $glyph-icon-check; }

-/*************************************************** INDICATORS */
-.s-indicator-status-info {
-    @include indicatorStatusColors($colorInfo);
-}
-.s-indicator-status-ok {
-    @include indicatorStatusColors($colorOk);
-}
-.s-indicator-status-caution, .s-indicator-status-warning, .s-indicator-status-alert {
-    @include indicatorStatusColors($colorStatusAlert);
-}
-.s-indicator-status-error, .s-indicator-status-err {
-    @include indicatorStatusColors($colorStatusError);
-}
-.s-indicator-status-available {
-    @include indicatorStatusColors($colorStatusAvailable);
-}
-.s-indicator-status-subdued {
-    opacity: 0.7;
-}
-
-

--- 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/_widgets.scss
+++ b/platform/commonUI/general/res/sass/_widgets.scss
@@ -1,306 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/************************************************************* WIDGET OBJECT */
-.l-summary-widget {
-    // Widget layout classes here
-    @include ellipsize();
-    display: inline-block;
-    text-align: center;
-    .widget-label:before {
-        // Widget icon
-        font-size: 0.9em;
-        margin-right: $interiorMarginSm;
-    }
-}
-
-.s-summary-widget {
-    // Widget style classes here
-    @include boxShdw($shdwBtns);
-    border-radius: $basicCr;
-    border-style: solid;
-    border-width: 1px;
-    box-sizing: border-box;
-    cursor: default;
-    font-size: 0.8rem;
-    padding: $interiorMarginLg $interiorMarginLg * 2;
-    &[href] {
-        cursor: pointer;
-    }
-}
-
-.widget-edit-holder {
-    // Hide edit area when in browse mode
-    display: none;
-}
-
-.widget-rule-header {
-    @extend .l-flex-row;
-    @include align-items(center);
-    margin-bottom: $interiorMargin;
-    > .flex-elem {
-        &:not(:first-child) {
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-.widget-rules-wrapper,
-.widget-rule-content,
-.w-widget-test-data-content {
-    @include trans-prop-nice($props: (height, min-height, opacity), $dur: 250ms);
-    min-height: 0;
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.widget-rules-wrapper {
-    flex: 1 1 auto !important;
-}
-
-.widget-rule-content.expanded {
-    overflow: visible !important;
-    min-height: 50px;
-    height: auto;
-    opacity: 1;
-    pointer-events: inherit;
-}
-
-.w-widget-test-data-content {
-    .l-enable {
-        padding: $interiorMargin 0;
-    }
-
-    .w-widget-test-data-items {
-        max-height: 20vh;
-        overflow-y: scroll !important;
-        padding-right: $interiorMargin;
-    }
-}
-
-.l-widget-thumb-wrapper,
-.l-compact-form label {
-    $ruleLabelW: 40%;
-    $ruleLabelMaxW: 150px;
-    @include display(flex);
-    max-width: $ruleLabelMaxW;
-    width: $ruleLabelW;
-}
-
-.t-message-widget-no-data {
-    display: none;
-}
-
-/********************************************************** EDITING A WIDGET */
-.s-status-editing > mct-view > .w-summary-widget {
-    // Classes for editor layout while editing a widget
-    // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
-    // being edited.
-    @include absPosDefault();
-    @extend .l-flex-col;
-
-    > .l-summary-widget {
-        // Main view of the summary widget
-        // Give some airspace and center the widget in the area
-        margin: 30px auto;
-    }
-
-    .widget-edit-holder {
-        display: flex; // Overrides `display: none` during Browse mode
-        .flex-accordion-holder {
-            // Needed because otherwise accordion elements "creep" when contents expand and contract
-            display: block !important;
-        }
-        &.expanded-widget-test-data {
-            .w-widget-test-data-content {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-            &:not(.expanded-widget-rules) {
-                // Test data is expanded and rules are collapsed
-                // Make text data take up all the vertical space
-                .flex-accordion-holder { display: flex; }
-                .widget-test-data {
-                    flex-grow: 999999;
-                }
-                .w-widget-test-data-items {
-                    max-height: inherit;
-                }
-            }
-        }
-        &.expanded-widget-rules {
-            .widget-rules-wrapper {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-        }
-    }
-
-    &.s-status-no-data {
-        .widget-edit-holder {
-            opacity: 0.3;
-            pointer-events: none;
-        }
-        .t-message-widget-no-data {
-            display: flex;
-        }
-    }
-
-
-    .l-compact-form {
-        // Overrides on .l-compact-form
-        ul {
-            &:last-child { margin: 0; }
-            li {
-                @include align-items(flex-start);
-                @include flex-wrap(nowrap);
-                line-height: 230%; // Provide enough space when controls wrap
-                padding: 2px 0;
-                &:not(.widget-rule-header) {
-                    &:not(.connects-to-previous) {
-                        border-top: 1px solid $colorFormLines;
-                    }
-                }
-                &.connects-to-previous {
-                    padding: $interiorMargin 0;
-                }
-
-                > label {
-                    display: block; // Needed to align text to right
-                    text-align: right;
-                }
-            }
-        }
-
-        &.s-widget-test-data-item {
-            // Single line of ul li label span, etc.
-            ul {
-                li {
-                    border: none !important;
-                    > label {
-                        display: inline-block;
-                        width: auto;
-                        text-align: left;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.widget-edit-holder {
-    font-size: 0.8rem;
-}
-
-.widget-rules-wrapper {
-    // Wrapper area that holds n rules
-    box-sizing: border-box;
-    overflow-y: scroll;
-    padding-right: $interiorMargin;
-}
-
-.l-widget-rule,
-.l-widget-test-data-item {
-    box-sizing: border-box;
-    margin-bottom: $interiorMarginSm;
-    padding: $interiorMargin $interiorMarginLg;
-}
-
-.l-widget-thumb-wrapper {
-    @extend .l-flex-row;
-    @include align-items(center);
-    > span { display: block; }
-    .grippy-holder,
-    .view-control {
-        margin-right: $interiorMargin;
-        width: 1em;
-        height: 1em;
-    }
-
-    .widget-thumb {
-        @include flex(1 1 auto);
-        width: 100%;
-    }
-}
-
-.rule-title {
-    @include flex(0 1 auto);
-    color: pullForward($colorBodyFg, 50%);
-}
-
-.rule-description {
-    @include flex(1 1 auto);
-    @include ellipsize();
-    color: pushBack($colorBodyFg, 20%);
-}
-
-.s-widget-rule,
-.s-widget-test-data-item {
-    background-color: rgba($colorBodyFg, 0.1);
-    border-radius: $basicCr;
-}
-
-.widget-thumb {
-    @include ellipsize();
-    @extend .s-summary-widget;
-    @extend .l-summary-widget;
-    padding: $interiorMarginSm $interiorMargin;
-}
-
-// Hide and show elements in the rule-header on hover
-.l-widget-rule,
-.l-widget-test-data-item {
-    .grippy,
-    .l-rule-action-buttons-wrapper,
-    .l-condition-action-buttons-wrapper,
-    .l-widget-test-data-item-action-buttons-wrapper {
-        @include trans-prop-nice($props: opacity, $dur: 500ms);
-        opacity: 0;
-    }
-    &:hover {
-        .grippy,
-        .l-rule-action-buttons-wrapper,
-        .l-widget-test-data-item-action-buttons-wrapper {
-            @include trans-prop-nice($props: opacity, $dur: 0);
-            opacity: 1;
-        }
-    }
-    .l-rule-action-buttons-wrapper {
-          .t-delete {
-            margin-left: 10px;
-          }
-    }
-    .t-condition {
-        &:hover {
-            .l-condition-action-buttons-wrapper {
-                @include trans-prop-nice($props: opacity, $dur: 0);
-                opacity: 1;
-            }
-        }
-    }
-}
--- a/platform/commonUI/general/res/sass/controls/_color-palette.scss
+++ b/platform/commonUI/general/res/sass/controls/_color-palette.scss
@@ -19,7 +19,19 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-.l-palette {
+
+.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;
@@ -32,13 +44,6 @@
 		line-height: $d;
 		width: ($d * $colorsPerRow) + ($m * $colorsPerRow);

-        &.l-option-row {
-            margin-bottom: $interiorMargin;
-            .s-palette-item {
-                border-color: $colorPaletteFg;
-            }
-        }
-
 		.l-palette-item {
 			box-sizing: border-box;
 			display: block;
@@ -46,27 +51,39 @@
 			height: $d; width: $d;
 			line-height: $d * 0.9;
 			margin: 0 ($m * 1px) ($m * 1px) 0;
-            position: relative;
 			text-align: center;
-		}
-
-		.s-palette-item {
-            border: 1px solid transparent;
-            color: $colorPaletteFg;
-            text-shadow: $shdwPaletteFg;
-            @include trans-prop-nice-fade(0.25s);
-			&:hover {
-				@include trans-prop-nice-fade(0);
-				border-color: $colorPaletteSelected !important;
-			}
-            &.selected {
-                border-color: $colorPaletteSelected;
-                box-shadow: $shdwPaletteSelected; //Needed to see selection rect on light colored swatches
+            &:before {
+                // Check mark for selected items
+                font-size: 0.8em;
            }
 		}

 		.l-palette-item-label {
 			margin-left: $interiorMargin;
 		}
+
+		&.l-option-row {
+			margin-bottom: $interiorMargin;
+			.s-palette-item {
+				border-color: $colorBodyFg;
+			}
+		}
 	}
-}
+}
+
+.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
@@ -150,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 {
@@ -261,7 +281,7 @@ input[type="number"] {
 input[type="text"].lg {  width: 100% !important; }
 .l-input-med input[type="text"],
 input[type="text"].med { width: 200px !important; }
-input[type="text"].sm, input[type="number"].sm {  width: 50px !important; }
+input[type="text"].sm {  width: 50px !important; }
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }

@@ -317,10 +337,14 @@ input[type="text"].s-input-inline,
 .select {
    @include btnSubtle($bg: $colorSelectBg);
    @extend .icon-arrow-down; // Context arrow
+    @if $shdwBtns != none {
+        margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
+    }
    display: inline-block;
    padding: 0 $interiorMargin;
    overflow: hidden;
    position: relative;
+    line-height: $formInputH;
    select {
        @include appearance(none);
        box-sizing: border-box;
@@ -336,13 +360,11 @@ input[type="text"].s-input-inline,
        }
    }
    &:before {
-        @include transform(translateY(-50%));
+        pointer-events: none;
        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
        display: block;
-        pointer-events: none;
        position: absolute;
-        right: $interiorMargin;
-        top: 50%;
+        right: $interiorMargin; top: 0;
    }
 }

@@ -394,7 +416,8 @@ input[type="text"].s-input-inline,
    .l-elem-wrapper {
        mct-representation {
            // Holds the context-available item
-            // Must have min-width to make flex work properly in Safari
+            // Must have min-width to make flex work properly
+            // in Safari
            min-width: 0.7em;
        }
    }
@@ -560,6 +583,7 @@ input[type="text"].s-input-inline,
    height: $h;
    margin-top: 1 + floor($h/2) * -1;
    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    //border-radius: 50% !important;
 }

@mixin sliderKnobRound() {
@@ -574,6 +598,7 @@ input[type="text"].s-input-inline,

 input[type="range"] {
    // HTML5 range inputs
+
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    background: transparent; /* Otherwise white in Chrome */
    &:focus {
@@ -731,30 +756,6 @@ textarea {
    }
 }

-.view-switcher,
-.t-btn-view-large {
-    @include trans-prop-nice-fade($controlFadeMs);
-}
-
-.view-control {
-    @extend .icon-arrow-right;
-    cursor: pointer;
-    font-size: 0.75em;
-    &:before {
-        position: absolute;
-        @include trans-prop-nice(transform, 100ms);
-        @include transform-origin(center);
-    }
-    &.expanded:before {
-        @include transform(rotate(90deg));
-    }
-}
-
-.grippy {
-    @extend .icon-grippy;
-    cursor: move;
-}
-
 /******************************************************** BROWSER ELEMENTS */
 body.desktop {
    ::-webkit-scrollbar {
--- a/platform/commonUI/general/res/sass/controls/_indicators.scss
+++ b/platform/commonUI/general/res/sass/controls/_indicators.scss
@@ -1,99 +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.
- *****************************************************************************/
-
-/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */
-
-.l-indicator {
-    $transDelayHover: 1.5s;
-    $transDelayWhileExpanded: 2.5s;
-    $transSpeed: .25s;
-    display: inline-block;
-    margin-right: $interiorMarginSm;
-
-    &:before {
-        // Icon
-        display: inline-block;
-        opacity: 0.85;
-    }
-
-    .label,
-    .count {
-        display: inline-block;
-        vertical-align: top;
-    }
-
-    &.float-right {
-        float: right;
-    }
-
-    &.no-icon {
-        &:before {
-            display: none;
-        }
-    }
-
-    &:not(.no-collapse) {
-        .label {
-            // Max-width silliness is necessary for width transition
-            @include trans-prop-nice((max-width, margin-right), $transSpeed, $transDelayWhileExpanded);
-            overflow: hidden;
-            margin-right: 0;
-            max-width: 0px;
-            white-space: nowrap;
-        }
-        &:hover {
-            &:before {
-                opacity: 1;
-            }
-
-            .label {
-                @include trans-prop-nice((max-width, margin-right), 0s);
-                margin-right: $interiorMargin;
-                max-width: 600px;
-                width: auto;
-            }
-
-            .count {
-                @include trans-prop-nice(max-width, 0s);
-                opacity: 0;
-            }
-        }
-    }
-
-    .count {
-        @include trans-prop-nice(opacity, $transSpeed, $transDelayWhileExpanded);
-        font-weight: bold;
-        opacity: 1;
-    }
-
-    .s-button {
-        background: $colorStatusBtnBg;
-        padding: 0 $interiorMargin;
-        height: auto;
-        line-height: inherit;
-    }
-}
-
-.s-indicator {
-    color: $colorStatusDefault;
-
-}
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -29,27 +29,23 @@
    }

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

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

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

    &:after {
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -36,7 +36,111 @@
 	}
 }

-/******************************************************************* MESSAGE BANNERS */
+// Status coloring
+.ok, .info {
+    .status-indicator {
+        color: $colorInfo;
+    }
+}
+
+.alert, .caution, .warning {
+    .status-indicator, .count {
+        color: $colorStatusAlert;
+    }
+
+}
+
+.error, .err {
+    .status-indicator, .count {
+        color: $colorStatusError;
+    }
+}
+
+.available {
+    .status-indicator, .count {
+        color: $colorStatusAvailable;
+    }
+}
+
+.subdued {
+    .status-indicator {
+        color: pullForward($colorStatusBarBg, 40%);
+    }
+}
+
+.status-block-holder {
+    // Applied to mct-include element
+    // Contains status.block elements
+    $transDelay: 1.5s;
+    $transSpeed: .25s;
+    display: inline-block;
+    &.clickable { cursor: pointer; }
+    &:not(.clickable) { cursor: default; }
+    &.no-icon .status.block {
+        .status-indicator {
+            display: none;
+        }
+    }
+    &.float-right {
+        float: right;
+    }
+    &:not(.no-collapse) .status.block {
+        .label {
+            // Max-width silliness is necessary for width transition
+            @include trans-prop-nice(max-width, $transSpeed, $transDelay);
+            overflow: hidden;
+            max-width: 0px;
+        }
+        &:hover {
+            .label {
+                @include trans-prop-nice(max-width, $transSpeed, 0s);
+                max-width: 600px;
+                width: auto;
+            }
+            .count {
+                @include trans-prop-nice(max-width, $transSpeed, 0s);
+                opacity: 0;
+            }
+        }
+    }
+
+}
+
+.status.block {
+    $transDelay: 1.5s;
+    $transSpeed: .25s;
+	color: $colorStatusDefault;
+	display: inline-block;
+	margin-right: $interiorMargin;
+	.status-indicator,
+	.label,
+	.count {
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	.status-indicator {
+        background: none !important;
+		margin-right: $interiorMarginSm;
+        &[class*='s-status']:before {
+            font-size: 1em;
+        }
+	}
+
+	.count {
+		@include trans-prop-nice(opacity, $transSpeed, $transDelay);
+		font-weight: bold;
+		opacity: 1;
+	}
+    .s-button {
+        background: $colorStatusBtnBg;
+        padding: 0 $interiorMargin;
+        height: auto;
+        line-height: inherit;
+    }
+}
+
+/* Styles for messages and message banners */
 .message {
 	&.block {
 		border-radius: $basicCr;
@@ -92,6 +196,7 @@
 		padding: 0 $interiorMargin;
 	}
    .close {
+		//@include test(red, 0.7);
 		cursor: pointer;
        font-size: 7px;
 		width: 8px;
@@ -135,147 +240,132 @@
    }
 }

-/******************************************************************* MESSAGES */
-
-/* Contexts:
-    In .t-message-list
-    In .overlay as a singleton
-    Inline in the view area
- */
-
-// Archetypal message
-.l-message {
-    $iconW: 32px;
-    @include display(flex);
-    @include flex-direction(row);
-    @include align-items(stretch);
-    padding: $interiorMarginLg;
-
-    &:before {
-        // Icon
-        @include flex(0 1 auto);
+@mixin messageBlock($iconW: 32px) {
+    .type-icon.message-type {
        @include txtShdw($shdwStatusIc);
        @extend .icon-bell;
        color: $colorStatusDefault;
        font-size: $iconW;
+        padding: 1px;
        width: $iconW + 2;
-        margin-right: $interiorMarginLg;
    }

-    &.message-severity-info:before {
+    .message-severity-info .type-icon.message-type {
        @extend .icon-info;
        color: $colorInfo;
    }
-
-    &.message-severity-alert:before {
+    .message-severity-alert .type-icon.message-type {
+        @extend .icon-bell;
        color: $colorWarningLo;
    }
-
-    &.message-severity-error:before {
+    .message-severity-error .type-icon.message-type {
        @extend .icon-alert-rect;
        color: $colorWarningHi;
    }
 }
+/* Paths:
+    t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message >
+        message-type > (icon)
+        message-contents >
+        top-bar >
+            title
+            hint
+        editor >
+            (if displaying list of messages)
+            ul > li > l-message >
+                ... same as above
+        bottom-bar
+*/

-
-.w-message-contents {
-    @include flex(1 1 auto);
+.l-message {
    @include display(flex);
-    @include flex-direction(column);
-
-    > div,
-    > span {
-        //@include test(red);
-        margin-bottom: $interiorMargin;
+    @include flex-direction(row);
+    @include align-items(stretch);
+    .type-icon.message-type {
+        @include flex(0 1 auto);
+        position: relative;
    }
+    .message-contents {
+        @include flex(1 1 auto);
+        margin-left: $overlayMargin;
+        position: relative;

-    .message-body {
-        @include flex(1 1 100%);
-    }
-}
-
-// Singleton in an overlay dialog
-.t-message-single .l-message,
-.t-message-single.l-message {
-        $iconW: 80px;
-        @include absPosDefault();
-        padding: 0;
-        &:before {
-            font-size: $iconW;
-            width: $iconW + 2;
-        }
-        .title {
-            font-size: 1.2em;
-        }
-}
-
-// Singleton inline in a view
-.t-message-inline .l-message,
-.t-message-inline.l-message {
-    border-radius: $controlCr;
-    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
-    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
-    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
-
-    .w-message-contents.l-message-body-only {
+        .top-bar,
        .message-body {
-            margin-top: $interiorMargin;
+            margin-bottom: $interiorMarginLg * 2;
        }
    }
 }

-// In a list
-.t-message-list {
-    @include absPosDefault();
-    @include display(flex);
-    @include flex-direction(column);

-    > div,
-    > span {
-        margin-bottom: $interiorMargin;
+// Message as singleton
+.t-message-single {
+    @include messageBlock(80px);
+}
+
+body.desktop .t-message-single {
+    .l-message,
+    .bottom-bar {
+        @include absPosDefault();
    }

-    .w-messages {
-        @include flex(1 1 100%);
-        overflow-y: auto;
-        padding-right: $interiorMargin;
+    .bottom-bar {
+        top: auto;
+        height: $ovrFooterH;
    }
-    // Each message
-    .l-message {
-        border-radius: $controlCr;
-        background: rgba($colorOvrFg, 0.1);
-        margin-bottom: $interiorMargin;
-        .hint,
-        .bottom-bar {
-            text-align: left;
-        }
-    }
-
 }

@include phonePortrait {
-    .t-message-single .l-message,
-    .t-message-single.l-message {
-        @include flex-direction(column);
-        &:before {
-            margin-right: 0;
+    .t-message-single {
+        .l-message {
+            @include flex-direction(column);
+            .message-contents { margin-left: 0; }
+        }
+        .type-icon.message-type {
            margin-bottom: $interiorMarginLg;
-            text-align: center;
            width: 100%;
+            text-align: center;
        }

        .bottom-bar {
-            text-align: center;
-            .s-button {
-                display: block;
-                width: 100%;
+            text-align: center !important;
+        }
+    }
+}
+
+// Messages in list
+.t-message-list {
+    @include messageBlock(32px);
+
+    .message-contents {
+        .l-message {
+            border-radius: $controlCr;
+            background: rgba($colorOvrFg, 0.1);
+            margin-bottom: $interiorMargin;
+            padding: $interiorMarginLg;
+
+            .message-contents,
+            .bottom-bar {
+                position: relative;
+            }
+
+            .message-contents {
+                font-size: 0.9em;
+                margin-left: $interiorMarginLg;
+                .message-action { color: pushBack($colorOvrFg, 20%); }
+                .bottom-bar { text-align: left; }
+            }
+
+            .top-bar,
+            .message-body {
+                margin-bottom: $interiorMarginLg;
            }
        }
    }
 }

 body.desktop .t-message-list {
-    .w-message-contents { padding-right: $interiorMargin; }
+    .message-contents .l-message { margin-right: $interiorMarginLg; }
 }

 // Alert elements in views
@@ -294,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
@@ -80,32 +80,23 @@

    // Editing Grids
    .l-grid-holder {
+        display: block;
        .l-grid {
            &.l-grid-x { @include bgTicks($colorGridLines, 'x'); }
            &.l-grid-y { @include bgTicks($colorGridLines, 'y'); }
        }
    }

-    // Display grid when selected or selection parent.
-    .s-selected .l-grid-holder,
-    .s-selected-parent .l-grid-holder {
-        display: block;
+    // Prevent nested frames from showing their grids
+    .t-frame-outer .l-grid-holder { display: none !important; }
+
+    // Prevent nested elements from showing s-hover-border
+    .t-frame-outer .s-hover-border {
+        border: none !important;
    }

-    // Display in nested frames...
-    .t-frame-outer {
-        // ...when drilled in or selection parent...
-        &.s-drilled-in, &.s-selected-parent {
-            .l-grid-holder {
-                display: block;
-            }
-            .t-frame-outer:not(.s-drilled-in) .l-grid-holder {
-                display: none;
-            }
-        }
-        // ...but hide otherwise.
-        .l-grid-holder {
-            display: none;
-        }
+    // Prevent nested frames from being selectable until we have proper sub-object editing
+    .t-frame-outer .t-frame-outer {
+        pointer-events: none;
    }
 }
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -20,19 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .section-header {
-    border-radius: $basicCr;
-    background: $colorFormSectionHeader;
-    color: lighten($colorBodyFg, 20%);
-    font-size: inherit;
-    margin: $interiorMargin 0;
-    padding: $formTBPad $formLRPad;
    text-transform: uppercase;
-    .view-control {
-        display: inline-block;
-        margin-right: $interiorMargin;
-        width: 1em;
-        height: 1em;
-    }
 }

 .form {
@@ -53,6 +41,15 @@
        }
    }

+    .section-header {
+        border-radius: $basicCr;
+        background: $colorFormSectionHeader;
+        $c: lighten($colorBodyFg, 20%);
+        color: $c;
+        font-size: 0.8em;
+        padding: $formTBPad $formLRPad;
+    }
+
 	.form-row {
 		$m: $interiorMargin;
 		box-sizing: border-box;
@@ -60,6 +57,9 @@
        margin-bottom: $interiorMarginLg * 2;
 		padding: $formTBPad 0;
 		position: relative;
+        //&ng-form {
+        //    display: block;
+        //}

 		&.first {
 			border-top: none;
@@ -171,106 +171,3 @@
 		padding: $interiorMargin;
 	}
 }
-
-/**************************************************************************** COMPACT FORM */
-// ul > li > label, control
-// Make a new UL for each form section
-// Allow control-first, controls-below
-// TO-DO: migrate work in branch ch-plot-styling that users .inspector-config to use classes below instead
-
-.l-compact-form .tree ul li,
-.l-compact-form ul li {
-    padding: 2px 0;
-}
-
-
-.l-compact-form {
-    $labelW: 40%;
-    $minW: $labelW;
-    ul {
-        margin-bottom: $interiorMarginLg;
-        li {
-            @include display(flex);
-            @include flex-wrap(wrap);
-            @include align-items(center);
-            label,
-            .control {
-                @include display(flex);
-            }
-            label {
-                line-height: inherit;
-                width: $labelW;
-            }
-            .controls {
-                @include flex-grow(1);
-                margin-left: $interiorMargin;
-                input[type="text"],
-                input[type="search"],
-                input[type="number"],
-                .select {
-                    height: $btnStdH;
-                    line-height: $btnStdH;
-                    vertical-align: middle;
-                }
-
-                .e-control {
-                    // Individual form controls
-                    &:not(:first-child) {
-                        margin-left: $interiorMarginSm;
-                    }
-                }
-            }
-
-            &.connects-to-previous {
-                padding-top: 0;
-            }
-
-            &.section-header {
-                margin-top: $interiorMarginLg;
-                border-top: 1px solid $colorFormLines;
-            }
-
-            &.controls-first {
-                .control {
-                    @include flex-grow(0);
-                    margin-right: $interiorMargin;
-                    min-width: 0;
-                    order: 1;
-                    width: auto;
-                }
-                label {
-                    @include flex-grow(1);
-                    order: 2;
-                    width: auto;
-                }
-            }
-            &.controls-under {
-                display: block;
-                .control, label {
-                    display: block;
-                    width: auto;
-                }
-
-                ul li {
-                    border-top: none !important;
-                    padding: 0;
-                }
-            }
-        }
-    }
-
-    .form-error {
-        // Block element that visually flags an error and contains a message
-        background-color: $colorFormFieldErrorBg;
-        color: $colorFormFieldErrorFg;
-        border-radius: $basicCr;
-        display: block;
-        padding: 1px 6px;
-        &:before {
-            content: $glyph-icon-alert-triangle;
-            display: inline;
-            font-family: symbolsfont;
-            margin-right: $interiorMarginSm;
-        }
-    }
-}
--- 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/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -79,7 +79,6 @@

    // Dialog boxes, size constrained and centered in desktop/tablet
    &.l-dialog {
-        font-size: 0.8rem;
        .s-button {
            &:not(.major) {
                @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
@@ -126,9 +125,9 @@
            @include containerSubtle($colorOvrBg, $colorOvrFg);
        }

-        .dialog-title {
+        .title {
            @include ellipsize();
-            font-size: 1.5em;
+            font-size: 1.2em;
            line-height: 120%;
            margin-bottom: $interiorMargin;
        }
--- 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;
    }
@@ -52,13 +52,13 @@ ul.tree {

    .view-control {
        color: $colorItemTreeVC;
+        font-size: 0.75em;
        margin-right: $interiorMargin;
-        height: 100%;
-        line-height: inherit;
        width: $treeVCW;
-        &:before { display: none; }
-        &.has-children {
-            &:before { display: block; }
+        &.no-children {
+            &:before {
+                content:"";
+            }
        }
    }

--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -26,10 +26,12 @@
        z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
        &:not(.no-frame) {
            background: $colorBodyBg;
-            border-color: $bc;
+            border: 1px solid $bc;
+            &:hover {
+                border-color: lighten($bc, 10%);
+            }
        }
    }
-
    .object-browse-bar {
        font-size: 0.75em;
        height: $ohH;
@@ -42,8 +44,7 @@

    &.t-object-type-timer,
    &.t-object-type-clock,
-    &.t-object-type-hyperlink,
-    &.t-object-type-summary-widget {
+    &.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.
@@ -90,9 +91,9 @@

    &.no-frame {
        background: transparent !important;
-        border-color: transparent;
+        border: none !important;
        .object-browse-bar .right {
-            $m: 0;
+            $m: 0; // $interiorMarginSm;
            background: rgba(black, 0.3);
            border-radius: $basicCr;
            padding: $interiorMarginSm;
@@ -102,7 +103,7 @@
        }
        &.t-frame-outer > .t-rep-frame {
            &.contents {
-                $m: 0px;
+                $m: 2px;
                top: $m;
                right: $m;
                bottom: $m;
@@ -113,7 +114,6 @@
                    display: none;
                }
                > .object-holder.abs {
-                    overflow: hidden;
                    top: 0 !important;
                }
            }
@@ -125,21 +125,14 @@
        pointer-events: none !important;
    }

-    /********************************************************** OBJECT TYPES */
-    .t-object-type-hyperlink,
-    .t-object-type-summary-widget {
+        /********************************************************** OBJECT TYPES */
+    .t-object-type-hyperlink {
        .object-holder {
            overflow: hidden;
        }
-        .w-summary-widget,
-        .l-summary-widget,
        .l-hyperlink.s-button {
-            // Some object types expand to the full size of the object-holder.
+            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
            @extend .abs;
-        }
-
-        .l-summary-widget,
-        .l-hyperlink.s-button {
            .label {
                @include ellipsize();
                @include transform(translateY(-50%));
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -81,14 +81,16 @@
        @include absPosDefault(0);// New status bar design
        top: auto;
        height: $ueFooterH;
-
-        mct-indicators { display: block; }
-        
-        .indicator-holder {
+        line-height: $ueFooterH - ($interiorMargin * 2);
+        background: $colorStatusBarBg;
+        color: lighten($colorBodyBg, 30%);
+        font-size: .7rem;
+        .status-holder {
            box-sizing: border-box;
            @include absPosDefault($interiorMargin);
            @include ellipsize();
            right: 120px;
+            text-transform: uppercase;
            z-index: 1;
        }
        .app-logo {
@@ -103,14 +105,6 @@
    }
 }

-.s-status-bar {
-    background: $colorStatusBarBg;
-    color: lighten($colorBodyBg, 30%);
-    font-size: .7rem;
-    line-height: $ueFooterH - ($interiorMargin * 2);
-    text-transform: uppercase;
-}
-
 .edit-mode {
    // Old edit mode
    .split-layout {
--- a/platform/commonUI/general/res/sass/user-environ/_selecting.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_selecting.scss
@@ -20,52 +20,35 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .s-hover-border {
-    border: 1px solid transparent;
-    &:hover {
-        border-color: rgba($colorSelectableSelectedPrimary, 0.5) !important;
-    }
+    border: 1px dotted transparent;
 }

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

-.s-selected > .s-hover-border,
-.s-selected.s-hover-border {
-    // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
-    border-color: $colorSelectableSelectedPrimary !important;
-    @include boxShdwLarge();
-    // Show edit-corners if you got 'em
-    .edit-corner {
-        display: block;
-        &:hover {
-            background-color: rgba($colorKey, 1);
-        }
+    .s-selected > .s-moveable,
+    .s-selected.s-moveable {
+        cursor: move;
    }
-}
-
-
-
+}
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -19,9 +19,14 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar s-status-bar mobile-disable-select'>
-    <div id='status' class='indicator-holder'>
-        <mct-indicators></mct-indicators>
+<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
+    <div id='status' class='status-holder'>
+        <mct-include ng-repeat="indicator in bar.getIndicators()"
+                     ng-model="indicator.ngModel"
+                     key="indicator.template"
+                     class="status-block-holder"
+                     ng-class='indicator.ngModel.getGlyphClass()'>
+        </mct-include>
    </div>
    <mct-include key="'message-banner'"></mct-include>
    <mct-include key="'about-logo'"></mct-include>
--- a/platform/commonUI/general/res/templates/controls/datetime-field.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-field.html
@@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <span ng-controller="DateTimeFieldController">
-    <input type="text" autocorrect="off" spellcheck="false"
+    <input type="text"
           ng-model="textValue"
           ng-blur="restoreTextValue(); ngBlur()"
           ng-mouseup="ngMouseup()"
--- a/platform/commonUI/general/res/templates/angular-indicator.html
+++ b/platform/commonUI/general/res/templates/angular-indicator.html
@@ -20,12 +20,14 @@
 at runtime from the About dialog for additional information.
 -->
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div class='l-indicator s-indicator s-indicator-status-{{ngModel.getGlyphClass()}}'
+<div class='status block'
 	 title="{{ngModel.getDescription()}}"
 	 ng-click='ngModel.configure()'
-	 ng-show="ngModel.getText().length > 0"
-     ng-class="ngModel.getCssClass()">
-	<span class="label" ng-class='ngModel.getTextClass()'>
+	 ng-show="ngModel.getText().length > 0">
+	<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label"
+		  ng-class='ngModel.getTextClass()'>
 		{{ngModel.getText()}}
+        <a class="s-button icon-gear" ng-if="ngModel.configure"></a>
+	</span><span class="count">
 	</span>
 </div>
--- a/platform/commonUI/general/src/controllers/BottomBarController.js
+++ b/platform/commonUI/general/src/controllers/BottomBarController.js
@@ -25,36 +25,35 @@ define(
    function () {

        /**
-         * The mct-selectable directive allows selection functionality
-         * (click) to be attached to specific elements.
-         *
+         * Controller for the bottombar template. Exposes
+         * available indicators (of extension category "indicators")
         * @memberof platform/commonUI/general
         * @constructor
         */
-        function MCTSelectable(openmct) {
-
-            // Link; install event handlers.
-            function link(scope, element, attrs) {
-                var removeSelectable = openmct.selection.selectable(
-                    element[0],
-                    scope.$eval(attrs.mctSelectable),
-                    attrs.hasOwnProperty('mctInitSelect') && scope.$eval(attrs.mctInitSelect) !== false
-                );
-
-                scope.$on("$destroy", function () {
-                    removeSelectable();
-                });
+        function BottomBarController(indicators) {
+            // Utility function used to make indicators presentable
+            // for display.
+            function present(Indicator) {
+                return {
+                    template: Indicator.template || "indicator",
+                    ngModel: typeof Indicator === 'function' ?
+                            new Indicator() : Indicator
+                };
            }

-            return {
-                // mct-selectable only makes sense as an attribute
-                restrict: "A",
-                // Link function, to install event handlers
-                link: link
-            };
-
+            this.indicators = indicators.map(present);
        }

-        return MCTSelectable;
+        /**
+         * Get all indicators to display.
+         * @returns {Indicator[]} all indicators
+         *          to display in the bottom bar.
+         * @memberof platform/commonUI/general.BottomBarController#
+         */
+        BottomBarController.prototype.getIndicators = function () {
+            return this.indicators;
+        };
+
+        return BottomBarController;
    }
 );
--- a/platform/commonUI/general/src/controllers/ObjectInspectorController.js
+++ b/platform/commonUI/general/src/controllers/ObjectInspectorController.js
@@ -40,7 +40,7 @@ define(

            // Gets an array of the contextual parents/ancestors of the selected object
            function getContextualPath() {
-                var currentObj = $scope.domainObject,
+                var currentObj = $scope.ngModel.selectedObject,
                    currentParent,
                    parents = [];

@@ -68,7 +68,7 @@ define(

                // If this the the initial call of this recursive function
                if (!current) {
-                    current = $scope.domainObject;
+                    current = $scope.ngModel.selectedObject;
                    $scope.primaryParents = [];
                }

@@ -87,16 +87,16 @@ define(

            // Gets the metadata for the selected object
            function getMetadata() {
-                $scope.metadata = $scope.domainObject &&
-                    $scope.domainObject.hasCapability('metadata') &&
-                    $scope.domainObject.useCapability('metadata');
+                $scope.metadata = $scope.ngModel.selectedObject &&
+                    $scope.ngModel.selectedObject.hasCapability('metadata') &&
+                    $scope.ngModel.selectedObject.useCapability('metadata');
            }

            // Set scope variables when the selected object changes
-            $scope.$watch('domainObject', function () {
-                $scope.isLink = $scope.domainObject &&
-                    $scope.domainObject.hasCapability('location') &&
-                    $scope.domainObject.getCapability('location').isLink();
+            $scope.$watch('ngModel.selectedObject', function () {
+                $scope.isLink = $scope.ngModel.selectedObject &&
+                    $scope.ngModel.selectedObject.hasCapability('location') &&
+                    $scope.ngModel.selectedObject.getCapability('location').isLink();

                if ($scope.isLink) {
                    getPrimaryPath();
@@ -109,7 +109,7 @@ define(
                getMetadata();
            });

-            var mutation = $scope.domainObject.getCapability('mutation');
+            var mutation = $scope.ngModel.selectedObject.getCapability('mutation');
            var unlisten = mutation.listen(getMetadata);
            $scope.$on('$destroy', unlisten);
        }
--- a/platform/commonUI/general/src/directives/MCTIndicators.js
+++ b/platform/commonUI/general/src/directives/MCTIndicators.js
@@ -1,42 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, 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 MCTIndicators(openmct) {
-            return {
-                restrict: "E",
-                link: function link(scope, element) {
-                    openmct.indicators.allIndicatorElements().then(function (elements) {
-                        elements.forEach(function (indicatorElement) {
-                            element.append(indicatorElement);
-                        });
-                    });
-                }
-            };
-        }
-
-        return MCTIndicators;
-
-    }
-);
--- 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/BottomBarControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/BottomBarControllerSpec.js
@@ -0,0 +1,76 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    ["../../src/controllers/BottomBarController"],
+    function (BottomBarController) {
+
+        describe("The bottom bar controller", function () {
+            var testIndicators,
+                testIndicatorA,
+                testIndicatorB,
+                testIndicatorC,
+                mockIndicator,
+                controller;
+
+            beforeEach(function () {
+                mockIndicator = jasmine.createSpyObj(
+                    "indicator",
+                    ["getGlyph", "getCssClass", "getText"]
+                );
+
+                testIndicatorA = {};
+                testIndicatorB = function () {
+                    return mockIndicator;
+                };
+                testIndicatorC = { template: "someTemplate" };
+
+                testIndicators = [
+                    testIndicatorA,
+                    testIndicatorB,
+                    testIndicatorC
+                ];
+
+                controller = new BottomBarController(testIndicators);
+            });
+
+            it("exposes one indicator description per extension", function () {
+                expect(controller.getIndicators().length)
+                    .toEqual(testIndicators.length);
+            });
+
+            it("uses template field provided, or its own default", function () {
+                // "indicator" is the default;
+                // only testIndicatorC overrides this.
+                var indicators = controller.getIndicators();
+                expect(indicators[0].template).toEqual("indicator");
+                expect(indicators[1].template).toEqual("indicator");
+                expect(indicators[2].template).toEqual("someTemplate");
+            });
+
+            it("instantiates indicators given as constructors", function () {
+                // testIndicatorB constructs to mockIndicator
+                expect(controller.getIndicators()[1].ngModel).toBe(mockIndicator);
+            });
+        });
+    }
+);
--- a/platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js
@@ -41,6 +41,16 @@ define(
                    "$scope",
                    ["$watch", "$on"]
                );
+                mockScope.ngModel = {};
+                mockScope.ngModel.selectedObject = {
+                    getCapability: function () {
+                        return {
+                            listen: function () {
+                                return true;
+                            }
+                        };
+                    }
+                };

                mockObjectService = jasmine.createSpyObj(
                    "objectService",
@@ -67,27 +77,22 @@ define(
                    "location capability",
                    ["isLink"]
                );
-
                mockDomainObject.getCapability.andCallFake(function (param) {
                    if (param === 'location') {
                        return mockLocationCapability;
                    } else if (param === 'context') {
                        return mockContextCapability;
-                    } else if (param === 'mutation') {
-                        return {
-                            listen: function () {
-                                return true;
-                            }
-                        };
                    }
                });

-                mockScope.domainObject = mockDomainObject;
                controller = new ObjectInspectorController(mockScope, mockObjectService);
+
+                // Change the selected object to trigger the watch call
+                mockScope.ngModel.selectedObject = mockDomainObject;
            });

            it("watches for changes to the selected object", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith('domainObject', jasmine.any(Function));
+                expect(mockScope.$watch).toHaveBeenCalledWith('ngModel.selectedObject', jasmine.any(Function));
            });

            it("looks for contextual parent objects", function () {
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -65,10 +65,6 @@ define(
            options = Object.create(OPTIONS);
            options.marginX = -bubbleSpaceLR;

-            // prevent bubble from appearing right under pointer,
-            // which causes hover callback to be called multiple times
-            options.offsetX = 1;
-
            // On a phone, bubble takes up more screen real estate,
            // so position it differently (toward the bottom)
            if (this.agentService.isPhone()) {
--- a/platform/commonUI/notification/res/notification-indicator.html
+++ b/platform/commonUI/notification/res/notification-indicator.html
@@ -1,7 +1,9 @@
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<a ng-click="showNotificationsList()" ng-show="notifications.length > 0" class="l-indicator s-indicator s-indicator-status-{{highest.severity}} icon-bell"
+<a ng-click="showNotificationsList()" ng-show="notifications.length > 0" class="status block"
+      ng-class="highest.severity"
      ng-controller="NotificationIndicatorController">
-    <span class="label">
-        {{notifications.length}} Notification<span ng-show="notifications.length > 1">s</span>
+    <span class="status-indicator icon-bell"></span><span class="label">
+      {{notifications.length}} Notifications
    </span><span class="count">{{notifications.length}}</span>
+
 </a>
--- a/platform/commonUI/regions/bundle.js
+++ b/platform/commonUI/regions/bundle.js
@@ -38,8 +38,7 @@ define([
                    "implementation": InspectorController,
                    "depends": [
                        "$scope",
-                        "openmct",
-                        "$document"
+                        "policyService"
                    ]
                }
            ],
--- a/platform/commonUI/regions/src/InspectorController.js
+++ b/platform/commonUI/regions/src/InspectorController.js
@@ -21,73 +21,44 @@
 *****************************************************************************/

 define(
-    [],
-    function () {
+    ['../../browse/src/InspectorRegion'],
+    function (InspectorRegion) {

        /**
-         * The InspectorController listens for the selection changes and adds the selection
-         * object to the scope.
+         * The InspectorController adds region data for a domain object's type
+         * to the scope.
         *
         * @constructor
         */
-        function InspectorController($scope, openmct, $document) {
-            var self = this;
-            self.$scope = $scope;
+        function InspectorController($scope, policyService) {
+            var domainObject = $scope.domainObject,
+                typeCapability = domainObject.getCapability('type'),
+                statusListener;

            /**
-             * Callback handler for the selection change event.
-             * Adds the selection object to the scope. If the selected item has an inspector view,
-             * it puts the key in the scope. If provider view exists, it shows the view.
+             * Filters region parts to only those allowed by region policies
+             * @param regions
+             * @returns {{}}
             */
-            function setSelection(selection) {
-                if (selection[0]) {
-                    var view = openmct.inspectorViews.get(selection);
-                    var container = $document[0].querySelectorAll('.inspector-provider-view')[0];
-                    container.innerHTML = "";
-
-                    if (view) {
-                        self.providerView = true;
-                        view.show(container);
-                    } else {
-                        self.providerView = false;
-                        var selectedItem = selection[0].context.oldItem;
-
-                        if (selectedItem) {
-                            $scope.inspectorKey = selectedItem.getCapability("type").typeDef.inspector;
-                        }
-                    }
-                }
-
-                self.$scope.selection = selection;
+            function filterRegions(inspector) {
+                //Dupe so we're not modifying the type definition.
+                return inspector.regions && inspector.regions.filter(function (region) {
+                    return policyService.allow('region', region, domainObject);
+                });
            }

-            openmct.selection.on("change", setSelection);
-
-            setSelection(openmct.selection.get());
+            function setRegions() {
+                $scope.regions = filterRegions(typeCapability.getDefinition().inspector || new InspectorRegion());
+            }

+            statusListener = domainObject.getCapability("status").listen(setRegions);
            $scope.$on("$destroy", function () {
-                openmct.selection.off("change", setSelection);
+                statusListener();
            });
+
+            setRegions();
        }

-        /**
-         * Gets the selected item.
-         *
-         * @returns a domain object
-         */
-        InspectorController.prototype.selectedItem = function () {
-            return this.$scope.selection[0].context.oldItem;
-        };
-
-        /**
-         * Checks if a provider view exists.
-         *
-         * @returns 'true' if provider view exists, 'false' otherwise
-         */
-        InspectorController.prototype.hasProviderView = function () {
-            return this.providerView;
-        };
-
        return InspectorController;
    }
 );
--- a/platform/commonUI/regions/test/InspectorControllerSpec.js
+++ b/platform/commonUI/regions/test/InspectorControllerSpec.js
@@ -27,93 +27,82 @@ define(
        describe("The inspector controller ", function () {
            var mockScope,
                mockDomainObject,
-                mockOpenMCT,
-                mockSelection,
-                mockInspectorViews,
-                mockTypeDef,
-                controller,
-                container,
-                $document = [],
-                selectable = [];
+                mockTypeCapability,
+                mockTypeDefinition,
+                mockPolicyService,
+                mockStatusCapability,
+                capabilities = {},
+                controller;

            beforeEach(function () {
-                mockTypeDef = {
-                    typeDef: {
-                        inspector: "some-key"
-                    }
+                mockTypeDefinition = {
+                    inspector:
+                        {
+                            'regions': [
+                                {'name': 'Part One'},
+                                {'name': 'Part Two'}
+                            ]
+                        }
                };

+                mockTypeCapability = jasmine.createSpyObj('typeCapability', [
+                    'getDefinition'
+                ]);
+                mockTypeCapability.getDefinition.andReturn(mockTypeDefinition);
+                capabilities.type = mockTypeCapability;
+
+                mockStatusCapability = jasmine.createSpyObj('statusCapability', [
+                    'listen'
+                ]);
+                capabilities.status = mockStatusCapability;
+
                mockDomainObject = jasmine.createSpyObj('domainObject', [
                    'getCapability'
                ]);
-                mockDomainObject.getCapability.andReturn(mockTypeDef);
+                mockDomainObject.getCapability.andCallFake(function (name) {
+                    return capabilities[name];
+                });
+
+                mockPolicyService = jasmine.createSpyObj('policyService', [
+                   'allow'
+                ]);

                mockScope = jasmine.createSpyObj('$scope',
-                    ['$on', 'selection']
+                    ['$on']
                );

-                selectable[0] = {
-                    context: {
-                        oldItem: mockDomainObject
-                    }
-                };
-
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.andReturn(selectable);
-
-                mockInspectorViews = jasmine.createSpyObj('inspectorViews', ['get']);
-                mockOpenMCT = {
-                    selection: mockSelection,
-                    inspectorViews: mockInspectorViews
-                };
-
-                container = jasmine.createSpy('container', ['innerHTML']);
-                $document[0] = jasmine.createSpyObj("$document", ['querySelectorAll']);
-                $document[0].querySelectorAll.andReturn([container]);
-
-                controller = new InspectorController(mockScope, mockOpenMCT, $document);
+                mockScope.domainObject = mockDomainObject;
            });

-            it("listens for selection change event", function () {
-                expect(mockOpenMCT.selection.on).toHaveBeenCalledWith(
-                    'change',
-                    jasmine.any(Function)
-                );
-
-                expect(controller.selectedItem()).toEqual(mockDomainObject);
-
-                var mockItem = jasmine.createSpyObj('domainObject', [
-                    'getCapability'
-                ]);
-                mockItem.getCapability.andReturn(mockTypeDef);
-                selectable[0].context.oldItem = mockItem;
-
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
-
-                expect(controller.selectedItem()).toEqual(mockItem);
+            it("filters out regions disallowed by region policy", function () {
+                mockPolicyService.allow.andReturn(false);
+                controller = new InspectorController(mockScope, mockPolicyService);
+                expect(mockScope.regions.length).toBe(0);
            });

-            it("cleans up on scope destroy", function () {
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    '$destroy',
-                    jasmine.any(Function)
-                );
-
-                mockScope.$on.calls[0].args[1]();
-
-                expect(mockOpenMCT.selection.off).toHaveBeenCalledWith(
-                    'change',
-                    jasmine.any(Function)
-                );
+            it("does not filter out regions allowed by region policy", function () {
+                mockPolicyService.allow.andReturn(true);
+                controller = new InspectorController(mockScope, mockPolicyService);
+                expect(mockScope.regions.length).toBe(2);
            });

-            it("adds selection object to scope", function () {
-                expect(mockScope.selection).toEqual(selectable);
-                expect(controller.selectedItem()).toEqual(mockDomainObject);
+            it("Responds to status changes", function () {
+                mockPolicyService.allow.andReturn(true);
+                controller = new InspectorController(mockScope, mockPolicyService);
+                expect(mockScope.regions.length).toBe(2);
+                expect(mockStatusCapability.listen).toHaveBeenCalled();
+                mockPolicyService.allow.andReturn(false);
+                mockStatusCapability.listen.mostRecentCall.args[0]();
+                expect(mockScope.regions.length).toBe(0);
+            });
+
+            it("Unregisters status listener", function () {
+                var mockListener = jasmine.createSpy('listener');
+                mockStatusCapability.listen.andReturn(mockListener);
+                controller = new InspectorController(mockScope, mockPolicyService);
+                expect(mockScope.$on).toHaveBeenCalledWith("$destroy", jasmine.any(Function));
+                mockScope.$on.mostRecentCall.args[1]();
+                expect(mockListener).toHaveBeenCalled();
            });
        });
    }
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -55,7 +55,7 @@ $colorTransLucBg: #666; // Used as a visual blocking element over variable backg

 // Foundation Colors
 $colorAlt1: #ffc700;
-$colorAlert: #ff6600;
+$colorAlert: #ff3c00;
 $colorWarningHi: #cc0000;
 $colorWarningLo: #ff9900;
 $colorDiagnostic: #a4b442;
@@ -114,10 +114,10 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);

 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
-$colorStatusDefault: #999;
+$colorStatusDefault: #ccc;
 $colorStatusInfo: $colorInfo;
 $colorStatusAlert: $colorAlert;
-$colorStatusError: #ff3300;
+$colorStatusError: #d4585c;
 $colorStatusAvailable: $colorKey;
 $colorStatusBtnBg: $colorBtnBg;
 $colorProgressBarOuter: rgba(#000, 0.1);
@@ -181,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);
@@ -243,12 +245,6 @@ $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
 $colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);

-// Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
-$colorPaletteSelected: #fff;
-$shdwPaletteFg: black 0 0 2px;
-$shdwPaletteSelected: inset 0 0 0 1px #000;
-
 // About Screen
 $colorAboutLink: #84b3ff;

--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -181,6 +181,8 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$legendCollapsedNameMaxW: 50%;
+$legendHoverValueBg: rgba($colorBodyFg, 0.2);

 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
@@ -243,12 +245,6 @@ $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
 $colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);

-// Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
-$colorPaletteSelected: #333;
-$shdwPaletteFg: none;
-$shdwPaletteSelected: inset 0 0 0 1px #fff;
-
 // About Screen
 $colorAboutLink: #84b3ff;

--- a/platform/features/autoflow/plugin.js
+++ b/platform/features/autoflow/plugin.js
@@ -0,0 +1,54 @@
+define([
+    'text!./res/templates/autoflow-tabular.html',
+    './src/AutoflowTabularController',
+    './src/MCTAutoflowTable'
+], function (
+    autoflowTabularTemplate,
+    AutoflowTabularController,
+    MCTAutoflowTable
+) {
+    return function (options) {
+        return function (openmct) {
+            openmct.legacyRegistry.register("platform/features/autoflow", {
+                "name": "WARP Telemetry Adapter",
+                "description": "Retrieves telemetry from the WARP Server and provides related types and views.",
+                "resources": "res",
+                "extensions": {
+                    "views": [
+                        {
+                            "key": "autoflow",
+                            "name": "Autoflow Tabular",
+                            "cssClass": "icon-packet",
+                            "description": "A tabular view of packet contents.",
+                            "template": autoflowTabularTemplate,
+                            "type": options && options.type,
+                            "needs": [
+                                "telemetry"
+                            ],
+                            "delegation": true
+                        }
+                    ],
+                    "controllers": [
+                        {
+                            "key": "AutoflowTabularController",
+                            "implementation": AutoflowTabularController,
+                            "depends": [
+                                "$scope",
+                                "$timeout",
+                                "telemetrySubscriber"
+                            ]
+                        }
+                    ],
+                    "directives": [
+                        {
+                            "key": "mctAutoflowTable",
+                            "implementation": MCTAutoflowTable
+                        }
+                    ]
+                }
+            });
+            openmct.legacyRegistry.enable("platform/features/autoflow");
+        };
+    };
+});
+
--- a/platform/features/autoflow/res/templates/autoflow-tabular.html
+++ b/platform/features/autoflow/res/templates/autoflow-tabular.html
@@ -0,0 +1,26 @@
+<div class="items-holder abs contents autoflow obj-value-format"
+     ng-controller="AutoflowTabularController as autoflow">
+    <div class="abs l-flex-row holder t-autoflow-header l-autoflow-header">
+        <mct-include key="'input-filter'"
+                     ng-model="autoflow.filter"
+                     class="flex-elem">
+        </mct-include>
+        <div class="flex-elem grows t-last-update" title="Last Update">{{autoflow.updated()}}</div>
+        <a title="Change column width"
+            class="s-button flex-elem icon-arrows-right-left change-column-width"
+            ng-click="autoflow.increaseColumnWidth()"></a>
+    </div>
+    <div class="abs t-autoflow-items l-autoflow-items"
+         mct-resize="autoflow.setBounds(bounds)"
+         mct-resize-interval="50">
+        <mct-autoflow-table values="autoflow.rangeValues()"
+                            objects="autoflow.getTelemetryObjects()"
+                            rows="autoflow.getRows()"
+                            classes="autoflow.classes()"
+                            updated="autoflow.updated()"
+                            column-width="autoflow.columnWidth()"
+                            counter="autoflow.counter()"
+                            >
+        </mct-autoflow-table>
+    </div>
+</div>
--- a/platform/features/autoflow/src/AutoflowTableLinker.js
+++ b/platform/features/autoflow/src/AutoflowTableLinker.js
@@ -0,0 +1,169 @@
+/*global angular*/
+define(
+    [],
+    function () {
+
+        /**
+         * The link step for the `mct-autoflow-table` directive;
+         * watches scope and updates the DOM appropriately.
+         * See documentation in `MCTAutoflowTable.js` for the rationale
+         * for including this directive, as well as for an explanation
+         * of which values are placed in scope.
+         *
+         * @constructor
+         * @param {Scope} scope the scope for this usage of the directive
+         * @param element the jqLite-wrapped element which used this directive
+         */
+        function AutoflowTableLinker(scope, element) {
+            var objects, // Domain objects at last structure refresh
+                rows, // Number of rows from last structure refresh
+                priorClasses = {},
+                valueSpans = {}; // Span elements to put data values in
+
+            // Create a new name-value pair in the specified column
+            function createListItem(domainObject, ul) {
+                // Create a new li, and spans to go in it.
+                var li = angular.element('<li>'),
+                    titleSpan = angular.element('<span>'),
+                    valueSpan = angular.element('<span>');
+
+                // Place spans in the li, and li into the column.
+                // valueSpan must precede titleSpan in the DOM due to new CSS float approach
+                li.append(valueSpan).append(titleSpan);
+                ul.append(li);
+
+                // Style appropriately
+                li.addClass('l-autoflow-row');
+                titleSpan.addClass('l-autoflow-item l');
+                valueSpan.addClass('l-autoflow-item r l-obj-val-format');
+
+                // Set text/tooltip for the name-value row
+                titleSpan.text(domainObject.getModel().name);
+                titleSpan.attr("title", domainObject.getModel().name);
+
+                // Keep a reference to the span which will hold the
+                // data value, to populate in the next refreshValues call
+                valueSpans[domainObject.getId()] = valueSpan;
+
+                return li;
+            }
+
+            // Create a new column of name-value pairs in this table.
+            function createColumn(el) {
+                // Create a ul
+                var ul = angular.element('<ul>');
+
+                // Add it into the mct-autoflow-table
+                el.append(ul);
+
+                // Style appropriately
+                ul.addClass('l-autoflow-col');
+
+                // Get the current col width and apply at time of column creation
+                // Important to do this here, as new columns could be created after
+                // the user has changed the width.
+                ul.css('width', scope.columnWidth + 'px');
+
+                // Return it, so some li elements can be added
+                return ul;
+            }
+
+            // Change the width of the columns when user clicks the resize button.
+            function resizeColumn() {
+                element.find('ul').css('width', scope.columnWidth + 'px');
+            }
+
+            // Rebuild the DOM associated with this table.
+            function rebuild(domainObjects, rowCount) {
+                var activeColumn;
+
+                // Empty out our cached span elements
+                valueSpans = {};
+
+                // Start with an empty DOM beneath this directive
+                element.html("");
+
+                // Add DOM elements for each domain object being displayed
+                // in this table.
+                domainObjects.forEach(function (object, index) {
+                    // Start a new column if we'd run out of room
+                    if (index % rowCount === 0) {
+                        activeColumn = createColumn(element);
+                    }
+                    // Add the DOM elements for that object to whichever
+                    // column (a `ul` element) is current.
+                    createListItem(object, activeColumn);
+                });
+            }
+
+            // Update spans with values, as made available via the
+            // `values` attribute of this directive.
+            function refreshValues() {
+                // Get the available values
+                var values = scope.values || {},
+                    classes = scope.classes || {};
+
+                // Populate all spans with those values (or clear
+                // those spans if no value is available)
+                (objects || []).forEach(function (object) {
+                    var id = object.getId(),
+                        span = valueSpans[id],
+                        value;
+
+                    if (span) {
+                        // Look up the value...
+                        value = values[id];
+                        // ...and convert to empty string if it's undefined
+                        value = value === undefined ? "" : value;
+                        span.attr("data-value", value);
+
+                        // Update the span
+                        span.text(value);
+                        span.attr("title", value);
+                        span.removeClass(priorClasses[id]);
+                        span.addClass(classes[id]);
+                        priorClasses[id] = classes[id];
+                    }
+                    // Also need stale/alert/ok class
+                    // on span
+                });
+            }
+
+            // Refresh the DOM for this table, if necessary
+            function refreshStructure() {
+                // Only rebuild if number of rows or set of objects
+                // has changed; otherwise, our structure is still valid.
+                if (scope.objects !== objects ||
+                        scope.rows !== rows) {
+
+                    // Track those values to support future refresh checks
+                    objects = scope.objects;
+                    rows = scope.rows;
+
+                    // Rebuild the DOM
+                    rebuild(objects || [], rows || 1);
+
+                    // Refresh all data values shown
+                    refreshValues();
+                }
+            }
+
+            // Changing the domain objects in use or the number
+            // of rows should trigger a structure change (DOM rebuild)
+            scope.$watch("objects", refreshStructure);
+            scope.$watch("rows", refreshStructure);
+
+            // When the current column width has been changed, resize the column
+            scope.$watch('columnWidth', resizeColumn);
+
+            // When the last-updated time ticks,
+            scope.$watch("updated", refreshValues);
+
+            // Update displayed values when the counter changes.
+            scope.$watch("counter", refreshValues);
+
+        }
+
+        return AutoflowTableLinker;
+    }
+);
--- a/platform/features/autoflow/src/AutoflowTabularController.js
+++ b/platform/features/autoflow/src/AutoflowTabularController.js
@@ -0,0 +1,324 @@
+
+define(
+    ['moment'],
+    function (moment) {
+
+        var ROW_HEIGHT = 16,
+            SLIDER_HEIGHT = 10,
+            INITIAL_COLUMN_WIDTH = 225,
+            MAX_COLUMN_WIDTH = 525,
+            COLUMN_WIDTH_STEP = 25,
+            DEBOUNCE_INTERVAL = 100,
+            DATE_FORMAT = "YYYY-DDD HH:mm:ss.SSS\\Z",
+            NOT_UPDATED = "No updates",
+            EMPTY_ARRAY = [];
+
+        /**
+         * Responsible for supporting the autoflow tabular view.
+         * Implements the all-over logic which drives that view,
+         * mediating between template-provided areas, the included
+         * `mct-autoflow-table` directive, and the underlying
+         * domain object model.
+         * @constructor
+         */
+        function AutflowTabularController(
+            $scope,
+            $timeout,
+            telemetrySubscriber
+        ) {
+            var filterValue = "",
+                filterValueLowercase = "",
+                subscription,
+                filteredObjects = [],
+                lastUpdated = {},
+                updateText = NOT_UPDATED,
+                rangeValues = {},
+                classes = {},
+                limits = {},
+                updatePending = false,
+                lastBounce = Number.NEGATIVE_INFINITY,
+                columnWidth = INITIAL_COLUMN_WIDTH,
+                rows = 1,
+                counter = 0;
+
+            // Trigger an update of the displayed table by incrementing
+            // the counter that it watches.
+            function triggerDisplayUpdate() {
+                counter += 1;
+            }
+
+            // Check whether or not an object's name matches the
+            // user-entered filter value.
+            function filterObject(domainObject) {
+                return (domainObject.getModel().name || "")
+                    .toLowerCase()
+                    .indexOf(filterValueLowercase) !== -1;
+            }
+
+            // Comparator for sorting points back into packet order
+            function compareObject(objectA, objectB) {
+                var indexA = objectA.getModel().index || 0,
+                    indexB = objectB.getModel().index || 0;
+                return indexA - indexB;
+            }
+
+            // Update the list of currently-displayed objects; these
+            // will be the subset of currently subscribed-to objects
+            // which match a user-entered filter.
+            function doUpdateFilteredObjects() {
+                // Generate the list
+                filteredObjects = (
+                    subscription ?
+                            subscription.getTelemetryObjects() :
+                            []
+                ).filter(filterObject).sort(compareObject);
+
+                // Clear the pending flag
+                updatePending = false;
+
+                // Track when this occurred, so that we can wait
+                // a whole before updating again.
+                lastBounce = Date.now();
+
+                triggerDisplayUpdate();
+            }
+
+            // Request an update to the list of current objects; this may
+            // run on a timeout to avoid excessive calls, e.g. while the user
+            // is typing a filter.
+            function updateFilteredObjects() {
+                // Don't do anything if an update is already scheduled
+                if (!updatePending) {
+                    if (Date.now() > lastBounce + DEBOUNCE_INTERVAL) {
+                        // Update immediately if it's been long enough
+                        doUpdateFilteredObjects();
+                    } else {
+                        // Otherwise, update later, and track that we have
+                        // an update pending so that subsequent calls can
+                        // be ignored.
+                        updatePending = true;
+                        $timeout(doUpdateFilteredObjects, DEBOUNCE_INTERVAL);
+                    }
+                }
+            }
+
+            // Track the latest data values for this domain object
+            function recordData(telemetryObject) {
+                // Get latest domain/range values for this object.
+                var id = telemetryObject.getId(),
+                    domainValue = subscription.getDomainValue(telemetryObject),
+                    rangeValue = subscription.getRangeValue(telemetryObject);
+
+                // Track the most recent timestamp change observed...
+                if (domainValue !== undefined && domainValue !== lastUpdated[id]) {
+                    lastUpdated[id] = domainValue;
+                    // ... and update the displayable text for that timestamp
+                    updateText = isNaN(domainValue) ? "" :
+                            moment.utc(domainValue).format(DATE_FORMAT);
+                }
+
+                // Store data values into the rangeValues structure, which
+                // will be used to populate the table itself.
+                // Note that we want full precision here.
+                rangeValues[id] = rangeValue;
+
+                // Update limit states as well
+                classes[id] = limits[id] && (limits[id].evaluate({
+                    // This relies on external knowledge that the
+                    // range value of a telemetry point is encoded
+                    // in its datum as "value."
+                    value: rangeValue
+                }) || {}).cssClass;
+            }
+
+
+            // Look at telemetry objects from the subscription; this is watched
+            // to detect changes from the subscription.
+            function subscribedTelemetry() {
+                return subscription ?
+                        subscription.getTelemetryObjects() : EMPTY_ARRAY;
+            }
+
+            // Update the data values which will be used to populate the table
+            function updateValues() {
+                subscribedTelemetry().forEach(recordData);
+                triggerDisplayUpdate();
+            }
+
+            // Getter-setter function for user-entered filter text.
+            function filter(value) {
+                // If value was specified, we're a setter
+                if (value !== undefined) {
+                    // Store the new value
+                    filterValue = value;
+                    filterValueLowercase = value.toLowerCase();
+                    // Change which objects appear in the table
+                    updateFilteredObjects();
+                }
+
+                // Always act as a getter
+                return filterValue;
+            }
+
+            // Update the bounds (width and height) of this view;
+            // called from the mct-resize directive. Recalculates how
+            // many rows should appear in the contained table.
+            function setBounds(bounds) {
+                var availableSpace = bounds.height - SLIDER_HEIGHT;
+                rows = Math.max(1, Math.floor(availableSpace / ROW_HEIGHT));
+            }
+
+            // Increment the current column width, up to the defined maximum.
+            // When the max is hit, roll back to the default.
+            function increaseColumnWidth() {
+                columnWidth += COLUMN_WIDTH_STEP;
+                // Cycle down to the initial width instead of exceeding max
+                columnWidth = columnWidth > MAX_COLUMN_WIDTH ?
+                        INITIAL_COLUMN_WIDTH : columnWidth;
+            }
+
+            // Get displayable text for last-updated value
+            function updated() {
+                return updateText;
+            }
+
+            // Unsubscribe, if a subscription is active.
+            function releaseSubscription() {
+                if (subscription) {
+                    subscription.unsubscribe();
+                    subscription = undefined;
+                }
+            }
+
+            // Update set of telemetry objects managed by this view
+            function updateTelemetryObjects(telemetryObjects) {
+                updateFilteredObjects();
+                limits = {};
+                telemetryObjects.forEach(function (telemetryObject) {
+                    var id = telemetryObject.getId();
+                    limits[id] = telemetryObject.getCapability('limit');
+                });
+            }
+
+            // Create a subscription for the represented domain object.
+            // This will resolve capability delegation as necessary.
+            function makeSubscription(domainObject) {
+                // Unsubscribe, if there is an existing subscription
+                releaseSubscription();
+
+                // Clear updated timestamp
+                lastUpdated = {};
+                updateText = NOT_UPDATED;
+
+                // Create a new subscription; telemetrySubscriber gets
+                // to do the meaningful work here.
+                subscription = domainObject && telemetrySubscriber.subscribe(
+                    domainObject,
+                    updateValues
+                );
+
+                // Our set of in-view telemetry objects may have changed,
+                // so update the set that is being passed down to the table.
+                updateFilteredObjects();
+            }
+
+            // Watch for changes to the set of objects which have telemetry
+            $scope.$watch(subscribedTelemetry, updateTelemetryObjects);
+
+            // Watch for the represented domainObject (this field will
+            // be populated by mct-representation)
+            $scope.$watch("domainObject", makeSubscription);
+
+            // Make sure we unsubscribe when this view is destroyed.
+            $scope.$on("$destroy", releaseSubscription);
+
+            return {
+                /**
+                 * Get the number of rows which should be shown in this table.
+                 * @return {number} the number of rows to show
+                 */
+                getRows: function () {
+                    return rows;
+                },
+                /**
+                 * Get the objects which should currently be displayed in
+                 * this table. This will be watched, so the return value
+                 * should be stable when this list is unchanging. Only
+                 * objects which match the user-entered filter value should
+                 * be returned here.
+                 * @return {DomainObject[]} the domain objects to include in
+                 *         this table.
+                 */
+                getTelemetryObjects: function () {
+                    return filteredObjects;
+                },
+                /**
+                 * Set the bounds (width/height) of this autoflow tabular view.
+                 * The template must ensure that these bounds are tracked on
+                 * the table area only.
+                 * @param bounds the bounds; and object with `width` and
+                 *        `height` properties, both as numbers, in pixels.
+                 */
+                setBounds: setBounds,
+                /**
+                 * Increments the width of the autoflow column.
+                 * Setting does not yet persist.
+                 */
+                increaseColumnWidth: increaseColumnWidth,
+                /**
+                 * Get-or-set the user-supplied filter value.
+                 * @param {string} [value] the new filter value; omit to use
+                 *        as a getter
+                 * @returns {string} the user-supplied filter value
+                 */
+                filter: filter,
+                /**
+                 * Get all range values for use in this table. These will be
+                 * returned as an object of key-value pairs, where keys are
+                 * domain object IDs, and values are the most recently observed
+                 * data values associated with those objects, formatted for
+                 * display.
+                 * @returns {object.<string,string>} most recent values
+                 */
+                rangeValues: function () {
+                    return rangeValues;
+                },
+                /**
+                 * Get CSS classes to apply to specific rows, representing limit
+                 * states and/or stale states. These are returned as key-value
+                 * pairs where keys are domain object IDs, and values are CSS
+                 * classes to display for domain objects with those IDs.
+                 * @returns {object.<string,string>} CSS classes
+                 */
+                classes: function () {
+                    return classes;
+                },
+                /**
+                 * Get the "last updated" text for this view; this will be
+                 * the most recent timestamp observed for any telemetry-
+                 * providing object, formatted for display.
+                 * @returns {string} the time of the most recent update
+                 */
+                updated: updated,
+                /**
+                 * Get the current column width, in pixels.
+                 * @returns {number} column width
+                 */
+                columnWidth: function () {
+                    return columnWidth;
+                },
+                /**
+                 * Keep a counter and increment this whenever the display
+                 * should be updated; this will be watched by the
+                 * `mct-autoflow-table`.
+                 * @returns {number} a counter value
+                 */
+                counter: function () {
+                    return counter;
+                }
+            };
+        }
+
+        return AutflowTabularController;
+    }
+);
--- a/platform/features/autoflow/src/MCTAutoflowTable.js
+++ b/platform/features/autoflow/src/MCTAutoflowTable.js
@@ -0,0 +1,60 @@
+
+define(
+    ["./AutoflowTableLinker"],
+    function (AutoflowTableLinker) {
+
+        /**
+         * The `mct-autoflow-table` directive specifically supports
+         * autoflow tabular views; it is not intended for use outside
+         * of that view.
+         *
+         * This directive is responsible for creating the structure
+         * of the table in this view, and for updating its values.
+         * While this is achievable using a regular Angular template,
+         * this is undesirable from the perspective of performance
+         * due to the number of watches that can be involved for large
+         * tables. Instead, this directive will maintain a small number
+         * of watches, rebuilding table structure only when necessary,
+         * and updating displayed values in the more common case of
+         * new data arriving.
+         *
+         * @constructor
+         */
+        function MCTAutoflowTable() {
+            return {
+                // Only applicable at the element level
+                restrict: "E",
+
+                // The link function; handles DOM update/manipulation
+                link: AutoflowTableLinker,
+
+                // Parameters to pass from attributes into scope
+                scope: {
+                    // Set of domain objects to show in the table
+                    objects: "=",
+
+                    // Values for those objects, by ID
+                    values: "=",
+
+                    // CSS classes to show for objects, by ID
+                    classes: "=",
+
+                    // Number of rows to show before autoflowing
+                    rows: "=",
+
+                    // Time of last update; watched to refresh values
+                    updated: "=",
+
+                    // Current width of the autoflow column
+                    columnWidth: "=",
+
+                    // A counter used to trigger display updates
+                    counter: "="
+                }
+            };
+        }
+
+        return MCTAutoflowTable;
+
+    }
+);
--- a/platform/features/autoflow/test/AutoflowTableLinkerSpec.js
+++ b/platform/features/autoflow/test/AutoflowTableLinkerSpec.js
@@ -0,0 +1,178 @@
+
+define(
+    ["../src/AutoflowTableLinker"],
+    function (AutoflowTableLinker) {
+
+        describe("The mct-autoflow-table linker", function () {
+            var cachedAngular,
+                mockAngular,
+                mockScope,
+                mockElement,
+                mockElements,
+                linker;
+
+            // Utility function to generate more mock elements
+            function createMockElement(html) {
+                var mockEl = jasmine.createSpyObj(
+                    "element-" + html,
+                    [
+                        "append",
+                        "addClass",
+                        "removeClass",
+                        "text",
+                        "attr",
+                        "html",
+                        "css",
+                        "find"
+                    ]
+                );
+                mockEl.testHtml = html;
+                mockEl.append.andReturn(mockEl);
+                mockElements.push(mockEl);
+                return mockEl;
+            }
+
+            function createMockDomainObject(id) {
+                var mockDomainObject = jasmine.createSpyObj(
+                    "domainObject-" + id,
+                    ["getId", "getModel"]
+                );
+                mockDomainObject.getId.andReturn(id);
+                mockDomainObject.getModel.andReturn({name: id.toUpperCase()});
+                return mockDomainObject;
+            }
+
+            function fireWatch(watchExpression, value) {
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (call.args[0] === watchExpression) {
+                        call.args[1](value);
+                    }
+                });
+            }
+
+            // AutoflowTableLinker accesses Angular in the global
+            // scope, since it is not injectable; we simulate that
+            // here by adding/removing it to/from the window object.
+            beforeEach(function () {
+                mockElements = [];
+
+                mockAngular = jasmine.createSpyObj("angular", ["element"]);
+                mockScope = jasmine.createSpyObj("scope", ["$watch"]);
+                mockElement = createMockElement('<div>');
+
+                mockAngular.element.andCallFake(createMockElement);
+
+                if (window.angular !== undefined) {
+                    cachedAngular = window.angular;
+                }
+                window.angular = mockAngular;
+
+                linker = new AutoflowTableLinker(mockScope, mockElement);
+            });
+
+            afterEach(function () {
+                if (cachedAngular !== undefined) {
+                    window.angular = cachedAngular;
+                } else {
+                    delete window.angular;
+                }
+            });
+
+            it("watches for changes in inputs", function () {
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "objects",
+                    jasmine.any(Function)
+                );
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "rows",
+                    jasmine.any(Function)
+                );
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "counter",
+                    jasmine.any(Function)
+                );
+            });
+
+            it("changes structure when domain objects change", function () {
+                // Set up scope
+                mockScope.rows = 4;
+                mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
+                    .map(createMockDomainObject);
+
+                // Fire an update to the set of objects
+                fireWatch("objects");
+
+                // Should have rebuilt with two columns of
+                // four and two rows each; first, by clearing...
+                expect(mockElement.html).toHaveBeenCalledWith("");
+
+                // Should have appended two columns...
+                expect(mockElement.append.calls.length).toEqual(2);
+
+                // ...which should have received two and four rows each
+                expect(mockElement.append.calls[0].args[0].append.calls.length)
+                    .toEqual(4);
+                expect(mockElement.append.calls[1].args[0].append.calls.length)
+                    .toEqual(2);
+            });
+
+            it("updates values", function () {
+                var mockSpans;
+
+                mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
+                    .map(createMockDomainObject);
+                mockScope.values = { a: 0 };
+
+                // Fire an update to the set of values
+                fireWatch("objects");
+                fireWatch("updated");
+
+                // Get all created spans
+                mockSpans = mockElements.filter(function (mockElem) {
+                    return mockElem.testHtml === '<span>';
+                });
+
+                // First span should be a, should have gotten this value.
+                // This test detects, in particular, WTD-749
+                expect(mockSpans[0].text).toHaveBeenCalledWith('A');
+                expect(mockSpans[1].text).toHaveBeenCalledWith(0);
+            });
+
+            it("listens for changes in column width", function () {
+                var mockUL = createMockElement("<ul>");
+                mockElement.find.andReturn(mockUL);
+                mockScope.columnWidth = 200;
+                fireWatch("columnWidth", mockScope.columnWidth);
+                expect(mockUL.css).toHaveBeenCalledWith("width", "200px");
+            });
+
+            it("updates CSS classes", function () {
+                var mockSpans;
+
+                mockScope.objects = ['a', 'b', 'c', 'd', 'e', 'f']
+                    .map(createMockDomainObject);
+                mockScope.values = { a: "a value to find" };
+                mockScope.classes = { a: 'class-a' };
+
+                // Fire an update to the set of values
+                fireWatch("objects");
+                fireWatch("updated");
+
+                // Figure out which span holds the relevant value...
+                mockSpans = mockElements.filter(function (mockElem) {
+                    return mockElem.testHtml === '<span>';
+                }).filter(function (mockSpan) {
+                    var attrCalls = mockSpan.attr.calls;
+                    return attrCalls.some(function (call) {
+                        return call.args[0] === 'title' &&
+                                call.args[1] === mockScope.values.a;
+                    });
+                });
+
+                // ...and make sure it also has had its class applied
+                expect(mockSpans[0].addClass)
+                    .toHaveBeenCalledWith(mockScope.classes.a);
+            });
+        });
+    }
+);
--- a/platform/features/autoflow/test/AutoflowTabularControllerSpec.js
+++ b/platform/features/autoflow/test/AutoflowTabularControllerSpec.js
@@ -0,0 +1,341 @@
+
+define(
+    ["../src/AutoflowTabularController"],
+    function (AutoflowTabularController) {
+
+        describe("The autoflow tabular controller", function () {
+            var mockScope,
+                mockTimeout,
+                mockSubscriber,
+                mockDomainObject,
+                mockSubscription,
+                controller;
+
+            // Fire watches that are registered as functions.
+            function fireFnWatches() {
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (typeof call.args[0] === 'function') {
+                        call.args[1](call.args[0]());
+                    }
+                });
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj(
+                    "$scope",
+                    ["$on", "$watch"]
+                );
+                mockTimeout = jasmine.createSpy("$timeout");
+                mockSubscriber = jasmine.createSpyObj(
+                    "telemetrySubscriber",
+                    ["subscribe"]
+                );
+                mockDomainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    ["getId", "getModel", "getCapability"]
+                );
+                mockSubscription = jasmine.createSpyObj(
+                    "subscription",
+                    [
+                        "unsubscribe",
+                        "getTelemetryObjects",
+                        "getDomainValue",
+                        "getRangeValue"
+                    ]
+                );
+
+                mockSubscriber.subscribe.andReturn(mockSubscription);
+                mockDomainObject.getModel.andReturn({name: "something"});
+
+                controller = new AutoflowTabularController(
+                    mockScope,
+                    mockTimeout,
+                    mockSubscriber
+                );
+            });
+
+            it("listens for the represented domain object", function () {
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "domainObject",
+                    jasmine.any(Function)
+                );
+            });
+
+            it("provides a getter-setter function for filtering", function () {
+                expect(controller.filter()).toEqual("");
+                controller.filter("something");
+                expect(controller.filter()).toEqual("something");
+            });
+
+            it("tracks bounds and adjust number of rows accordingly", function () {
+                // Rows are 15px high, and need room for an 10px slider
+                controller.setBounds({ width: 700, height: 120 });
+                expect(controller.getRows()).toEqual(6); // 110 usable height / 16px
+                controller.setBounds({ width: 700, height: 240 });
+                expect(controller.getRows()).toEqual(14); // 230 usable height / 16px
+            });
+
+            it("subscribes to a represented object's telemetry", function () {
+                // Set up subscription, scope
+                mockSubscription.getTelemetryObjects
+                    .andReturn([mockDomainObject]);
+                mockScope.domainObject = mockDomainObject;
+
+                // Invoke the watcher with represented domain object
+                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+
+                // Should have subscribed to it
+                expect(mockSubscriber.subscribe).toHaveBeenCalledWith(
+                    mockDomainObject,
+                    jasmine.any(Function)
+                );
+
+                // Should report objects as reported from subscription
+                expect(controller.getTelemetryObjects())
+                    .toEqual([mockDomainObject]);
+            });
+
+            it("releases subscriptions on destroy", function () {
+                // Set up subscription...
+                mockSubscription.getTelemetryObjects
+                    .andReturn([mockDomainObject]);
+                mockScope.domainObject = mockDomainObject;
+                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+
+                // Verify precondition
+                expect(mockSubscription.unsubscribe).not.toHaveBeenCalled();
+
+                // Make sure we're listening for $destroy
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    "$destroy",
+                    jasmine.any(Function)
+                );
+
+                // Fire a destroy event
+                mockScope.$on.mostRecentCall.args[1]();
+
+                // Should have unsubscribed
+                expect(mockSubscription.unsubscribe).toHaveBeenCalled();
+            });
+
+            it("presents latest values and latest update state", function () {
+                // Make sure values are available
+                mockSubscription.getDomainValue.andReturn(402654321123);
+                mockSubscription.getRangeValue.andReturn(789);
+                mockDomainObject.getId.andReturn('testId');
+
+                // Set up subscription...
+                mockSubscription.getTelemetryObjects
+                    .andReturn([mockDomainObject]);
+                mockScope.domainObject = mockDomainObject;
+                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+
+                // Fire subscription callback
+                mockSubscriber.subscribe.mostRecentCall.args[1]();
+
+                // ...and exposed the results for template to consume
+                expect(controller.updated()).toEqual("1982-278 08:25:21.123Z");
+                expect(controller.rangeValues().testId).toEqual(789);
+            });
+
+            it("sorts domain objects by index", function () {
+                var testIndexes = { a: 2, b: 1, c: 3, d: 0 },
+                    mockDomainObjects = Object.keys(testIndexes).sort().map(function (id) {
+                        var mockDomainObj = jasmine.createSpyObj(
+                            "domainObject",
+                            ["getId", "getModel"]
+                        );
+
+                        mockDomainObj.getId.andReturn(id);
+                        mockDomainObj.getModel.andReturn({ index: testIndexes[id] });
+
+                        return mockDomainObj;
+                    });
+
+                // Expose those domain objects...
+                mockSubscription.getTelemetryObjects.andReturn(mockDomainObjects);
+                mockScope.domainObject = mockDomainObject;
+                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+
+                // Fire subscription callback
+                mockSubscriber.subscribe.mostRecentCall.args[1]();
+
+                // Controller should expose same objects, but sorted by index from model
+                expect(controller.getTelemetryObjects()).toEqual([
+                    mockDomainObjects[3], // d, index=0
+                    mockDomainObjects[1], // b, index=1
+                    mockDomainObjects[0], // a, index=2
+                    mockDomainObjects[2]  // c, index=3
+                ]);
+            });
+
+            it("uses a timeout to throttle update", function () {
+                // Set up subscription...
+                mockSubscription.getTelemetryObjects
+                    .andReturn([mockDomainObject]);
+                mockScope.domainObject = mockDomainObject;
+
+                // Set the object in view; should not need a timeout
+                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                expect(mockTimeout.calls.length).toEqual(0);
+
+                // Next call should schedule an update on a timeout
+                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                expect(mockTimeout.calls.length).toEqual(1);
+
+                // ...but this last one should not, since existing
+                // timeout will cover it
+                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                expect(mockTimeout.calls.length).toEqual(1);
+            });
+
+            it("allows changing column width", function () {
+                var initialWidth = controller.columnWidth();
+                controller.increaseColumnWidth();
+                expect(controller.columnWidth()).toBeGreaterThan(initialWidth);
+            });
+
+            describe("filter", function () {
+                var doFilter,
+                    filteredObjects,
+                    filteredObjectNames;
+
+                beforeEach(function () {
+                    var telemetryObjects,
+                        updateFilteredObjects;
+
+                    telemetryObjects = [
+                        'DEF123',
+                        'abc789',
+                        '456abc',
+                        '4ab3cdef',
+                        'hjs[12].*(){}^\\'
+                    ].map(function (objectName, index) {
+                        var mockTelemetryObject = jasmine.createSpyObj(
+                            objectName,
+                            ["getId", "getModel"]
+                        );
+
+                        mockTelemetryObject.getId.andReturn(objectName);
+                        mockTelemetryObject.getModel.andReturn({
+                            name: objectName,
+                            index: index
+                        });
+
+                        return mockTelemetryObject;
+                    });
+
+                    mockSubscription
+                        .getTelemetryObjects
+                        .andReturn(telemetryObjects);
+
+                    // Trigger domainObject change to create subscription.
+                    mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+
+                    updateFilteredObjects = function () {
+                        filteredObjects = controller.getTelemetryObjects();
+                        filteredObjectNames = filteredObjects.map(function (o) {
+                            return o.getModel().name;
+                        });
+                    };
+
+                    doFilter = function (term) {
+                        controller.filter(term);
+                        // Filter is debounced so we have to force it to occur.
+                        mockTimeout.mostRecentCall.args[0]();
+                        updateFilteredObjects();
+                    };
+
+                    updateFilteredObjects();
+                });
+
+                it("initially shows all objects", function () {
+                    expect(filteredObjectNames).toEqual([
+                        'DEF123',
+                        'abc789',
+                        '456abc',
+                        '4ab3cdef',
+                        'hjs[12].*(){}^\\'
+                    ]);
+                });
+
+                it("by blank string matches all objects", function () {
+                    doFilter('');
+                    expect(filteredObjectNames).toEqual([
+                        'DEF123',
+                        'abc789',
+                        '456abc',
+                        '4ab3cdef',
+                        'hjs[12].*(){}^\\'
+                    ]);
+                });
+
+                it("exactly matches an object name", function () {
+                    doFilter('4ab3cdef');
+                    expect(filteredObjectNames).toEqual(['4ab3cdef']);
+                });
+
+                it("partially matches object names", function () {
+                    doFilter('abc');
+                    expect(filteredObjectNames).toEqual([
+                        'abc789',
+                        '456abc'
+                    ]);
+                });
+
+                it("matches case insensitive names", function () {
+                    doFilter('def');
+                    expect(filteredObjectNames).toEqual([
+                        'DEF123',
+                        '4ab3cdef'
+                    ]);
+                });
+
+                it("works as expected with special characters", function () {
+                    doFilter('[12]');
+                    expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
+                    doFilter('.*');
+                    expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
+                    doFilter('.*()');
+                    expect(filteredObjectNames).toEqual(['hjs[12].*(){}^\\']);
+                    doFilter('.*?');
+                    expect(filteredObjectNames).toEqual([]);
+                    doFilter('.+');
+                    expect(filteredObjectNames).toEqual([]);
+                });
+
+                it("exposes CSS classes from limits", function () {
+                    var id = mockDomainObject.getId(),
+                        testClass = "some-css-class",
+                        mockLimitCapability =
+                            jasmine.createSpyObj('limit', ['evaluate']);
+
+                    mockDomainObject.getCapability.andCallFake(function (key) {
+                        return key === 'limit' && mockLimitCapability;
+                    });
+                    mockLimitCapability.evaluate
+                        .andReturn({ cssClass: testClass });
+
+                    mockSubscription.getTelemetryObjects
+                        .andReturn([mockDomainObject]);
+
+                    fireFnWatches();
+                    mockSubscriber.subscribe.mostRecentCall.args[1]();
+
+                    expect(controller.classes()[id]).toEqual(testClass);
+                });
+
+                it("exposes a counter that changes with each update", function () {
+                    var i, prior;
+
+                    for (i = 0; i < 10; i += 1) {
+                        prior = controller.counter();
+                        expect(controller.counter()).toEqual(prior);
+                        mockSubscriber.subscribe.mostRecentCall.args[1]();
+                        expect(controller.counter()).not.toEqual(prior);
+                    }
+                });
+            });
+        });
+    }
+);
--- a/platform/features/autoflow/test/MCTAutoflowTableSpec.js
+++ b/platform/features/autoflow/test/MCTAutoflowTableSpec.js
@@ -0,0 +1,39 @@
+
+define(
+    ["../src/MCTAutoflowTable"],
+    function (MCTAutoflowTable) {
+
+        describe("The mct-autoflow-table directive", function () {
+            var mctAutoflowTable;
+
+            beforeEach(function () {
+                mctAutoflowTable = new MCTAutoflowTable();
+            });
+
+            // Real functionality is contained/tested in the linker,
+            // so just check to make sure we're exposing the directive
+            // appropriately.
+            it("is applicable at the element level", function () {
+                expect(mctAutoflowTable.restrict).toEqual("E");
+            });
+
+            it("two-ways binds needed scope variables", function () {
+                expect(mctAutoflowTable.scope).toEqual({
+                    objects: "=",
+                    values: "=",
+                    rows: "=",
+                    updated: "=",
+                    classes: "=",
+                    columnWidth: "=",
+                    counter: "="
+                });
+            });
+
+            it("provides a link function", function () {
+                expect(mctAutoflowTable.link).toEqual(jasmine.any(Function));
+            });
+
+
+        });
+    }
+);
--- a/platform/features/clock/bundle.js
+++ b/platform/features/clock/bundle.js
@@ -55,6 +55,7 @@ define([
    timerTemplate,
    legacyRegistry
 ) {
+
    legacyRegistry.register("platform/features/clock", {
        "name": "Clocks/Timers",
        "descriptions": "Domain objects for displaying current & relative times.",
@@ -85,6 +86,11 @@ define([
                        "CLOCK_INDICATOR_FORMAT"
                    ],
                    "priority": "preferred"
+                },
+                {
+                    "implementation": FollowIndicator,
+                    "depends": ["timerService"],
+                    "priority": "fallback"
                }
            ],
            "services": [
@@ -299,10 +305,6 @@ define([
                    }
                }
            ],
-            "runs": [{
-                "implementation": FollowIndicator,
-                "depends": ["openmct", "timerService"]
-            }],
            "licenses": [
                {
                    "name": "moment-duration-format",
--- a/platform/features/clock/src/indicators/ClockIndicator.js
+++ b/platform/features/clock/src/indicators/ClockIndicator.js
@@ -45,11 +45,11 @@ define(
        }

        ClockIndicator.prototype.getGlyphClass = function () {
-            return "subdued";
+            return "no-collapse float-right subdued";
        };

        ClockIndicator.prototype.getCssClass = function () {
-            return "icon-clock no-collapse float-right";
+            return "icon-clock";
        };

        ClockIndicator.prototype.getText = function () {
--- a/platform/features/clock/src/indicators/FollowIndicator.js
+++ b/platform/features/clock/src/indicators/FollowIndicator.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2018, United States Government
+ * Open MCT, Copyright (c) 2009-2016, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
@@ -20,32 +20,38 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

-define([], function () {
+define(
+    ['moment'],
+    function (moment) {
+        var NO_TIMER = "No timer being followed";

-    /**
-     * Indicator that displays the active timer, as well as its
-     * current state.
-     * @memberof platform/features/clock
-     */
-    return function installFollowIndicator(openmct, timerService) {
-        var indicator = openmct.indicators.simpleIndicator();
-        var timer = timerService.getTimer();
-        setIndicatorStatus(timer);
-
-        function setIndicatorStatus(newTimer) {
-            if (newTimer !== undefined) {
-                indicator.iconClass('icon-timer');
-                indicator.statusClass('s-status-ok');
-                indicator.text('Following timer ' + newTimer.name);
-            } else {
-                indicator.iconClass('icon-timer');
-                indicator.statusClass('');
-                indicator.text('No timer being followed');
-            }
+        /**
+         * Indicator that displays the active timer, as well as its
+         * current state.
+         * @implements {Indicator}
+         * @memberof platform/features/clock
+         */
+        function FollowIndicator(timerService) {
+            this.timerService = timerService;
        }

-        timerService.on('change', setIndicatorStatus);
+        FollowIndicator.prototype.getGlyphClass = function () {
+            return "";
+        };

-        openmct.indicators.add(indicator);
-    };
-});
+        FollowIndicator.prototype.getCssClass = function () {
+            return (this.timerService.getTimer()) ? "icon-timer s-status-ok" : "icon-timer";
+        };
+
+        FollowIndicator.prototype.getText = function () {
+            var timer = this.timerService.getTimer();
+            return (timer) ? 'Following timer ' + timer.getModel().name : NO_TIMER;
+        };
+
+        FollowIndicator.prototype.getDescription = function () {
+            return "";
+        };
+
+        return FollowIndicator;
+    }
+);
--- a/platform/features/clock/src/services/TimerService.js
+++ b/platform/features/clock/src/services/TimerService.js
@@ -44,7 +44,7 @@ define(['EventEmitter'], function (EventEmitter) {
     */
    TimerService.prototype.setTimer = function (timer) {
        this.timer = timer;
-        this.emit('change', timer);
+        this.emit('change');

        if (this.stopObserving) {
            this.stopObserving();
--- a/platform/features/clock/test/indicators/FollowIndicatorSpec.js
+++ b/platform/features/clock/test/indicators/FollowIndicatorSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2018, United States Government
+ * Open MCT, Copyright (c) 2009-2016, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
@@ -20,77 +20,42 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

-define([
-    "../../src/indicators/FollowIndicator",
-    "../../src/services/TimerService",
-    "../../../../../src/MCT",
-    'zepto'
-], function (
-    FollowIndicator,
-    TimerService,
-    MCT,
-    $
-) {
+define(["../../src/indicators/FollowIndicator"], function (FollowIndicator) {
+    var TIMER_SERVICE_METHODS =
+        ['setTimer', 'getTimer', 'clearTimer', 'on', 'off'];
+
    describe("The timer-following indicator", function () {
-        var timerService;
-        var openmct;
+        var mockTimerService;
+        var indicator;

        beforeEach(function () {
-            openmct = new MCT();
-            timerService = new TimerService(openmct);
-            spyOn(openmct.indicators, "add");
+            mockTimerService =
+                jasmine.createSpyObj('timerService', TIMER_SERVICE_METHODS);
+            indicator = new FollowIndicator(mockTimerService);
        });

-        it("adds an indicator when installed", function () {
-            FollowIndicator(openmct, timerService);
-            expect(openmct.indicators.add).toHaveBeenCalled();
-        });
-
-        it("indicates that no timer is being followed", function () {
-            FollowIndicator(openmct, timerService);
-            var simpleIndicator = openmct.indicators.add.mostRecentCall.args[0];
-            var element = simpleIndicator.element;
-            var text = $('.indicator-text', element).text().trim();
-            expect(text).toEqual('No timer being followed');
+        it("implements the Indicator interface", function () {
+            expect(indicator.getGlyphClass()).toEqual(jasmine.any(String));
+            expect(indicator.getCssClass()).toEqual(jasmine.any(String));
+            expect(indicator.getText()).toEqual(jasmine.any(String));
+            expect(indicator.getDescription()).toEqual(jasmine.any(String));
        });

        describe("when a timer is set", function () {
-            var testObject;
-            var simpleIndicator;
+            var testModel;
+            var mockDomainObject;

            beforeEach(function () {
-                testObject = {
-                    identifier: {
-                        namespace: 'namespace',
-                        key: 'key'
-                    },
-                    name: "some timer!"
-                };
-                timerService.setTimer(testObject);
-                FollowIndicator(openmct, timerService);
-                simpleIndicator = openmct.indicators.add.mostRecentCall.args[0];
+                testModel = { name: "some timer!" };
+                mockDomainObject = jasmine.createSpyObj('timer', ['getModel']);
+                mockDomainObject.getModel.andReturn(testModel);
+                mockTimerService.getTimer.andReturn(mockDomainObject);
            });

            it("displays the timer's name", function () {
-                var element = simpleIndicator.element;
-                var text = $('.indicator-text', element).text().trim();
-                expect(text).toEqual('Following timer ' + testObject.name);
+                expect(indicator.getText().indexOf(testModel.name))
+                    .not.toEqual(-1);
            });
-
-            it("displays the timer's name when it changes", function () {
-                var secondTimer = {
-                    identifier: {
-                        namespace: 'namespace',
-                        key: 'key2'
-                    },
-                    name: "Some other timer"
-                };
-                var element = simpleIndicator.element;
-                timerService.setTimer(secondTimer);
-                var text = $('.indicator-text', element).text().trim();
-                expect(text).toEqual('Following timer ' + secondTimer.name);
-            });
-
        });
    });
 });
--- a/platform/features/imagery/src/controllers/ImageryController.js
+++ b/platform/features/imagery/src/controllers/ImageryController.js
@@ -255,8 +255,6 @@ define(
                if (this.nextDatum) {
                    this.updateValues(this.nextDatum);
                    delete this.nextDatum;
-                } else {
-                    this.updateValues(this.$scope.imageHistory[this.$scope.imageHistory.length - 1]);
                }
                this.autoScroll = true;
            }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Pete Richards	3ead4375c8	Moved all internal state logic out of plotcontroller	2017-11-22 18:11:03 -08:00
Pete Richards	386cb1c3af	Move more state management to model	2017-11-22 17:42:06 -08:00
Pete Richards	553989638d	More refactor	2017-11-21 17:08:16 -08:00
Pete Richards	088bd565d9	refactor in work	2017-11-21 16:58:24 -08:00
Pete Richards	c0df73265c	start of model formalization	2017-11-21 12:07:02 -08:00
Pete Richards	de971772e3	Add state generator, add name columns to all examples	2017-11-21 11:28:15 -08:00
Pete Richards	d4785446f1	sortkey is xkey	2017-11-20 11:39:06 -08:00
Pete Richards	54ac81b98e	don't reset offsets on series reset, fix bug with multi-series plot	2017-11-20 11:15:17 -08:00
Pete Richards	08d31cc493	purge plot data before adding more to prevent large dupe insert costs	2017-11-20 11:11:31 -08:00
Pete Richards	d749a6693b	Support Phase in sinewave generator	2017-11-20 11:10:06 -08:00
Pete Richards	e6f4098ed0	Bring back PlotViewPolicy	2017-10-31 12:18:20 -07:00
Pete Richards	fb1b765002	[Plot] First cut of new Plots [Plot] Remove Old Plot [Plot] Remove Telemetry Panel [UTC] parse number is passthrough [Telemetry] Support default arguments [Plot] Include new plot destroy is a model method Cleanup models send bounds and domain in telemetry request pass value instead of trying to create datum Fix Enum Formatting Set max precision to avoid errors Change plot series model management Install plot by default Make sure plots are always plots Set default yKey on series Use new time API Update hints proper id formats Only redraw on change Set x axis on bounds change wip Basic support for legend customization Reasonable timeframe [CSS] Generalized .view-control Moved .view-control out of tree.scss and generalized as a control prior to implementing it as the expand/collapse control in plot legends for #584 and #618. [Frontend] New Styling for Plots Large squish commit, messages as follows: [Frontend] WIP style plot legends Fixes #584 Fixes #618 Major layout changes to enable flex approach for legend and plot display area; table styling for expanded legend; legend on top, bottom, right and left support added but still a bunch to do. [Frontend] WIP style plot legends Fixes #1590 Style and markup normalization for legend elements. [Frontend] WIP style plot legends Fixes #1590 Incremental progress. [Frontend] WIP style plot legends Fixes #1590 Legend layout enhancements. [Frontend] WIP style plot legends Fixes #1590 Significant mods to layout in Inspector while editing, using new .compact-form class; mod to ul.tree li to allow .compact-form layout class within tree scope; [Frontend] WIP style plot legends Fixes #1590 Significant layout cleanup, mainly for stacked plots and expanded legend; Config options hide/show controls fully ported from Pete's original version; [Frontend] WIP style plot legends Fixes #1590 New 12px crosshair glyph added; 'hover-value-enabled' markup and class refinements; [Frontend] WIP style plot legends Fixes #1590 Whoops - removed erroneous background-color based on swatch color; [Frontend] WIP style plot legends Fixes #1590 Generalized .t-alert-unsynced, moved to _icons.scss; Moved .t-object-alert to proper location in plot markup; Added new .t-stacked-plot class; [Frontend] WIP style plot legends Fixes #1590 WIP styles for collapsed legend [Frontend] WIP style plot legends Fixes #1590 WIP styles for collapsed legend, major progress [Frontend] WIP style plot legends Fixes #1590 WIP styles for collapsed legend, major progress [Frontend] WIP style plot legends Fixes #1590 Legends v1 near complete, pre unit-testing [Frontend] WIP style plot legends Fixes #1590 Moved location of padding for .hover-value-enabled elements [Frontend] WIP style plot legends Fixes #1590 Finessing of legend on side [Frontend] WIP style plot legends Fixes #1590 Sanding and shimming on legend overflow [Frontend] WIP style plot legends Fixes #1590 Added human-nice column labels for expanded legend [Frontend] WIP style plot legends Fixes #1590 Minor refactor to use explicit legend-collapsed and -expanded CSS classes, replacing ng-show statements; Removed ng-style that was setting column widths based on char count of column name; [Frontend] WIP style plot legends Fixes #1590 Moved legend styles to own file; [Frontend] WIP style plot legends Fixes #1590 Cleaned up config error messaging; changed config to default to collapsed legend by default; [Frontend] WIP style plot legends Fixes #1590 Sanding on side positions name/value display [Frontend] WIP style plot legends Fixes #1590 Global rename of `compact-form` to `inspector-config`; Applied same to plot-options-browse.html for tree items; [Frontend] WIP style plot legends Fixes #1590 Renamed `plot-legend-on-` selector; Fixed layout for plot-legend-hidden, involved returning `plot-wrapper-axis-and-display-area` to use position: absolute; [Frontend] WIP style plot legends Fixes #1590 Minor tweak to cause hover values to wrap in side-positioned legend. [Frontend] WIP style plot legends Fixes #1590 Removed abs positioning on `.plot-wrapper-axis-and-display-area`; Removed ng-style to set height of stacked plot element, use flex layout instead, fixes problem of bottom-most plot getting clipped; polishing of hover display in collapsed legend; [Frontend] WIP style plot legends Fixes #1590 Removed commented dev markup [Frontend] MIsc mods and fixes Fixes #1590 Less brittle approach to 'niceValuesToShowWhenExpanded' array that won't break when user config is wired up; mobile styling added to hide nearest columns in mobile (no hover) context; removed hex color value display and use niceValuesToShowWhenExpanded lookup in plot-options-browse.html; added CSS class 'comma-list'; handle missing request Fix form options for plot fix autoscale padding and custom ranges proper expand by default handling Show limit state in hover values Draw special markers for points with limits prevent unexpected range change when using autoscale Don't floor coordinates implement chart markers as options Compatiblity series supports getData Fallback when no limit evaluator present	2017-10-30 14:20:47 -07:00