[Gesture API] added license to gestureSpec

[Resize] don't trigger callback after being destroyed

API.md

@@ -372,6 +372,7 @@ Known hints:
 
 * `domain`: Indicates that the value represents the "input" of a datum. Values with a `domain` hint will be used for the x-axis of a plot, and tables will render columns for these values first.
 * `range`: Indicates that the value is the "output" of a datum.  Values with a `range` hint will be used as the y-axis on a plot, and tables will render columns for these values after the `domain` values.
+* `image`: Indicates that the value may be interpreted as the URL to an image file, in which case appropriate views will be made available.
 
 ##### The Time Conductor and Telemetry 
 
@@ -547,29 +548,24 @@ numbers in UTC terrestrial time.
 
 #### Getting and Setting the Active Time System
 
-Once registered, a time system can be activated using a key, or an instance of 
-the time system itself.
+Once registered, a time system can be activated by calling `timeSystem` with
+the timeSystem `key` or an instance of the time system.  If you are not using a
+[clock](#clocks), you must also specify valid [bounds](#time-bounds) for the
+timeSystem.
 
 ```javascript
-openmct.time.timeSystem('utc');
+openmct.time.timeSystem('utc', bounds);
 ```
 
-A time system can be immediately activated upon registration: 
+A time system can be immediately activated after registration: 
 
 ```javascript
-var utcTimeSystem = {
-    key: 'utc',
-    name: 'UTC Time',
-    cssClass = 'icon-clock',
-    timeFormat = 'utc',
-    durationFormat = 'duration',
-    isUTCBased = true
-};
 openmct.time.addTimeSystem(utcTimeSystem);
-openmct.time.timeSystem(utcTimeSystem);
+openmct.time.timeSystem(utcTimeSystem, bounds);
 ```
 
-Setting the active time system will trigger a [time system event](#time-events). 
+Setting the active time system will trigger a [`'timeSystem'`](#time-events) 
+event.  If you supplied bounds, a [`'bounds'`](#time-events) event will be triggered afterwards with your newly supplied bounds.
 
 ### Time Bounds
 
@@ -592,8 +588,8 @@ let now = Date.now();
 openmct.time.bounds({start: now - ONE_HOUR, now);
 ```
 
-To respond to bounds change events, simply register a callback against the `bounds`
-event. For more information on the bounds event, please see the section on [Time Events](#time-events).
+To respond to bounds change events, listen for the [`'bounds'`](#time-events)
+event.
 
 ## Clocks
 
@@ -673,14 +669,16 @@ An example clock implementation is provided in the form of the [LocalClock](http
 Once registered a clock can be activated by calling the `clock` function on the 
 Time API passing in the key or instance of a registered clock. Only one clock 
 may be active at once, so activating a clock will deactivate any currently 
-active clock. Setting the clock will also trigger a ['clock' event](#time-events).
+active clock. [`clockOffsets`](#clock-offsets) must be specified when changing a clock.
+
+Setting the clock triggers a [`'clock'`](#time-events) event, followed by a [`'clockOffsets'`](#time-events) event, and then a [`'bounds'`](#time-events) event as the offsets are applied to the clock's currentValue().
+
 
 ```
-openmct.time.clock(someClock);
+openmct.time.clock(someClock, clockOffsets);
 ```
 
-Upon being activated, a clock's `on` function will be immediately called to subscribe
-to `tick` events.
+Upon being activated, the time API will listen for tick events on the clock by calling `clock.on`.
 
 The currently active clock (if any) can be retrieved by calling the same 
 function without any arguments.
@@ -707,7 +705,7 @@ relative time spans. Offsets are defined as an object with two properties:
 * `start`: A `number` that must be < 0 and which is used to calculate the start 
 bounds on each clock tick. The start offset will be calculated relative to the 
 value provided by a clock's tick callback, or its `currentValue()` function.
-* `end`: A `number` that must be >=0 and which is used to calculate the end 
+* `end`: A `number` that must be >= 0 and which is used to calculate the end 
 bounds on each clock tick.
 
 The `clockOffsets` function can be used to get or set clock offsets. For example, 
@@ -728,16 +726,9 @@ Clock offsets are only relevant when a clock source is active.
 
 ## Time Events
 
-The time API supports the registration of listeners that will be invoked when the 
-application's temporal state changes. Events listeners can be registered using 
-the `on` function. They can be deregistered using the `off` function. The arguments
-accepted by the `on` and `off` functions are:
+The Time API is a standard event emitter; you can register callbacks for events using the `on` method and remove callbacks for events with the `off` method.
 
-* `event`: A `string` naming the event to subscribe to. Event names correspond to
-the property of the Time API you're interested in. A [full list of time events](#list-of-time-events) 
-is provided later.
-
-As an example, the code to listen to bounds change events looks like:
+For example:
 
 ``` javascript
 openmct.time.on('bounds', function callback (newBounds, tick) {
@@ -747,40 +738,38 @@ openmct.time.on('bounds', function callback (newBounds, tick) {
 
 #### List of Time Events
 
-The events supported by the Time API are:
+The events emitted by the Time API are:
 
-* `bounds`: Listen for changes to current bounds. The callback will be invoked 
-with two arguments:
-    * `bounds`: A [bounds](#getting-and-setting-bounds) bounds object representing 
-    a new time period bound by the specified start and send times.
-    * `tick`: A `boolean` indicating whether or not this bounds change is due to a 
-    "tick" from a [clock source](#clocks). This information can be useful when 
-    determining a strategy for fetching telemetry data in response to a bounds 
-    change event. For example, if the bounds change was automatic, and is due 
-    to a tick then it's unlikely that you would need to perform a historical 
-    data query. It should be sufficient to just show any new telemetry received 
-    via subscription since the last tick, and optionally to discard any older 
-    data that now falls outside of the currently set bounds. If `tick` is false,
-    then the bounds change was not due to an automatic tick, and a query for 
-    historical data may be necessary, depending on your data caching strategy, 
-    and how significantly the start bound has changed.
-* `timeSystem`: Listen for changes to the active [time system](#defining-and-registering-time-systems).
-The callback will be invoked with a single argument - the newly active time system.
-    * `timeSystem`: The newly active [time system](#defining-and-registering-time-systems) object.
-* `clock`: Listen for changes to the active clock. When invoked, the callback 
-will be provided with the new clock.
-    * `clock`: The newly active [clock](#clocks), or `undefined` if an active clock
-    has been deactivated.
-* `clockOffsets`: Listen for changes to active clock offsets. When invoked the 
-callback will be provided with the new clock offsets.
-    * `clockOffsets`: A [clock offsets](#clock-offsets) object.
+* `bounds`: emitted whenever the bounds change.  The callback will be invoked 
+  with two arguments:
+  * `bounds`: A [bounds](#getting-and-setting-bounds) bounds object
+    representing a new time period bound by the specified start and send times.
+  * `tick`: A `boolean` indicating whether or not this bounds change is due to
+    a "tick" from a [clock source](#clocks). This information can be useful 
+    when determining a strategy for fetching telemetry data in response to a 
+    bounds change event. For example, if the bounds change was automatic, and 
+    is due to a tick then it's unlikely that you would need to perform a 
+    historical data query. It should be sufficient to just show any new 
+    telemetry received via subscription since the last tick, and optionally to 
+    discard any older data that now falls outside of the currently set bounds. 
+    If `tick` is false,then the bounds change was not due to an automatic tick, 
+    and a query for historical data may be necessary, depending on your data 
+    caching strategy, and how significantly the start bound has changed.
+* `timeSystem`: emitted whenever the active time system changes.  The callback will be invoked with a single argument:
+  * `timeSystem`: The newly active [time system](#defining-and-registering-time-systems).
+* `clock`: emitted whenever the clock changes.  The callback will be invoked 
+  with a single argument:
+  * `clock`: The newly active [clock](#clocks), or `undefined` if an active 
+    clock has been deactivated.
+* `clockOffsets`: emitted whenever the active clock offsets change.  The 
+  callback will be invoked with a single argument:
+  * `clockOffsets`: The new [clock offsets](#clock-offsets).
 
 
 ## The Time Conductor
 
-The Time Conductor provides a user interface for managing time bounds in Open MCT.
-It allows a user to select from configured time systems and clocks, and to set bounds
-and clock offsets.
+The Time Conductor provides a user interface for managing time bounds in Open 
+MCT. It allows a user to select from configured time systems and clocks, and to set bounds and clock offsets.
 
 If activated, the time conductor must be provided with configuration options, 
 detailed below.

README.md

@@ -137,20 +137,6 @@ naming convention is otherwise the same.)
 When `npm test` is run, test results will be written as HTML to
 `target/tests`. Code coverage information is written to `target/coverage`.
 
-
-### Functional Testing
-
-The tests described above are all at the unit-level; an additional
-test suite using [Protractor](https://angular.github.io/protractor/)
-is under development, in the `protractor` folder.
-
-To run:
-
-* Install protractor following the instructions above.
-* `cd protractor`
-* `npm install`
-* `npm run all`
-
 # Glossary
 
 Certain terms are used throughout Open MCT with consistent meanings

bower.json

@@ -22,6 +22,7 @@
     "eventemitter3": "^1.2.0",
     "lodash": "3.10.1",
     "almond": "~0.3.2",
-    "html2canvas": "^0.4.1"
+    "html2canvas": "^0.4.1",
+    "moment-timezone": "^0.5.13"
   }
 }

docs/src/guide/index.md

@@ -933,9 +933,10 @@ Note that `templateUrl` is not supported for `containers`.
 
 Controls provide options for the `mct-control` directive. 
  
-Ten standard control types are included in the forms bundle:
+These standard control types are included in the forms bundle:
 
-* `textfield`: An area to enter plain text.
+* `textfield`: A text input to enter plain text.
+* `numberfield`: A text input to enter numbers.
 * `select`: A drop-down list of options.
 * `checkbox`: A box which may be checked/unchecked.
 * `color`: A color picker.

example/imagery/bundle.js

@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define*/
-
-define([
-    "./src/ImageTelemetryProvider",
-    'legacyRegistry'
-], function (
-    ImageTelemetryProvider,
-    legacyRegistry
-) {
-    "use strict";
-
-    legacyRegistry.register("example/imagery", {
-        "name": "Imagery",
-        "description": "Example of a component that produces image telemetry.",
-        "extensions": {
-            "components": [
-                {
-                    "implementation": ImageTelemetryProvider,
-                    "type": "provider",
-                    "provides": "telemetryService",
-                    "depends": [
-                        "$q",
-                        "$timeout"
-                    ]
-                }
-            ],
-            "types": [
-                {
-                    "key": "imagery",
-                    "name": "Example Imagery",
-                    "cssClass": "icon-image",
-                    "features": "creation",
-                    "description": "For development use. Creates example imagery data that mimics a live imagery stream.",
-                    "priority": 10,
-                    "model": {
-                        "telemetry": {}
-                    },
-                    "telemetry": {
-                        "source": "imagery",
-                        "domains": [
-                            {
-                                "name": "Time",
-                                "key": "time",
-                                "format": "utc"
-                            }
-                        ],
-                        "ranges": [
-                            {
-                                "name": "Image",
-                                "key": "url",
-                                "format": "imageUrl"
-                            }
-                        ]
-                    }
-                }
-            ]
-        }
-    });
-});

example/imagery/plugin.js

@@ -0,0 +1,140 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+
+], function(
+
+) {
+    function ImageryPlugin() {
+
+        var IMAGE_SAMPLES = [
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
+                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
+            ];
+
+        function pointForTimestamp(timestamp) {
+            return {
+                utc: Math.floor(timestamp / 5000) * 5000,
+                url: IMAGE_SAMPLES[Math.floor(timestamp / 5000) % IMAGE_SAMPLES.length]
+            };
+        }
+
+        var realtimeProvider = {
+            supportsSubscribe: function (domainObject) {
+                return domainObject.type === 'example.imagery';
+            },
+            subscribe: function (domainObject, callback) {
+                var interval = setInterval(function () {
+                    callback(pointForTimestamp(Date.now()));
+                }, 5000);
+
+                return function (interval) {
+                    clearInterval(interval);
+                };
+            }
+        };
+
+        var historicalProvider = {
+            supportsRequest: function (domainObject, options) {
+                return domainObject.type === 'example.imagery'
+                    && options.strategy !== 'latest';
+            },
+            request: function (domainObject, options) {
+                var start = options.start;
+                var end = options.end;
+                var data = [];
+                while (start < end) {
+                    data.push(pointForTimestamp(start));
+                    start += 5000;
+                }
+                return Promise.resolve(data);
+            }
+        };
+
+        var ladProvider = {
+            supportsRequest: function (domainObject, options) {
+                return domainObject.type === 'example.imagery' &&
+                    options.strategy === 'latest';
+            },
+            request: function (domainObject, options) {
+                return Promise.resolve([pointForTimestamp(Date.now())]);
+            }
+        };
+
+
+        return function install(openmct) {
+            openmct.types.addType('example.imagery', {
+                key: 'example.imagery',
+                name: 'Example Imagery',
+                cssClass: 'icon-image',
+                description: 'For development use. Creates example imagery ' +
+                    'data that mimics a live imagery stream.',
+                creatable: true,
+                initialize: function (object) {
+                    object.telemetry = {
+                        values: [
+                            {
+                                name: 'Time',
+                                key: 'utc',
+                                format: 'utc',
+                                hints: {
+                                    domain: 1
+                                }
+                            },
+                            {
+                                name: 'Image',
+                                key: 'url',
+                                format: 'image',
+                                hints: {
+                                    image: 1
+                                }
+                            }
+                        ]
+                    }
+                }
+            });
+
+            openmct.telemetry.addProvider(realtimeProvider);
+            openmct.telemetry.addProvider(historicalProvider);
+            openmct.telemetry.addProvider(ladProvider);
+        };
+    }
+
+    return ImageryPlugin;
+});

example/imagery/src/ImageTelemetry.js

@@ -1,81 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining ImageTelemetry. Created by vwoeltje on 06/22/15.
- */
-define(
-    [],
-    function () {
-        "use strict";
-
-        var firstObservedTime = Date.now(),
-            images = [
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
-
-            ].map(function (url, index) {
-                return {
-                    timestamp: firstObservedTime + 1000 * index,
-                    url: url
-                };
-            });
-
-
-        /**
-         *
-         * @constructor
-         */
-        function ImageTelemetry() {
-            return {
-                getPointCount: function () {
-                    return Math.floor((Date.now() - firstObservedTime) / 1000);
-                },
-                getDomainValue: function (i, domain) {
-                    return images[i % images.length].timestamp;
-                },
-                getRangeValue: function (i, range) {
-                    return images[i % images.length].url;
-                }
-            };
-        }
-
-        return ImageTelemetry;
-    }
-);

example/imagery/src/ImageTelemetryProvider.js

@@ -1,115 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining ImageTelemetryProvider. Created by vwoeltje on 06/22/15.
- */
-define(
-    ["./ImageTelemetry"],
-    function (ImageTelemetry) {
-        "use strict";
-
-        /**
-         *
-         * @constructor
-         */
-        function ImageTelemetryProvider($q, $timeout) {
-            var subscriptions = [];
-
-            //
-            function matchesSource(request) {
-                return request.source === "imagery";
-            }
-
-            // Used internally; this will be repacked by doPackage
-            function generateData(request) {
-                return {
-                    key: request.key,
-                    telemetry: new ImageTelemetry()
-                };
-            }
-
-            //
-            function doPackage(results) {
-                var packaged = {};
-                results.forEach(function (result) {
-                    packaged[result.key] = result.telemetry;
-                });
-                // Format as expected (sources -> keys -> telemetry)
-                return { imagery: packaged };
-            }
-
-            function requestTelemetry(requests) {
-                return $timeout(function () {
-                    return doPackage(requests.filter(matchesSource).map(generateData));
-                }, 0);
-            }
-
-            function handleSubscriptions() {
-                subscriptions.forEach(function (subscription) {
-                    var requests = subscription.requests;
-                    subscription.callback(doPackage(
-                        requests.filter(matchesSource).map(generateData)
-                    ));
-                });
-            }
-
-            function startGenerating() {
-                $timeout(function () {
-                    handleSubscriptions();
-                    if (subscriptions.length > 0) {
-                        startGenerating();
-                    }
-                }, 1000);
-            }
-
-            function subscribe(callback, requests) {
-                var subscription = {
-                    callback: callback,
-                    requests: requests
-                };
-
-                function unsubscribe() {
-                    subscriptions = subscriptions.filter(function (s) {
-                        return s !== subscription;
-                    });
-                }
-
-                subscriptions.push(subscription);
-
-                if (subscriptions.length === 1) {
-                    startGenerating();
-                }
-
-                return unsubscribe;
-            }
-
-            return {
-                requestTelemetry: requestTelemetry,
-                subscribe: subscribe
-            };
-        }
-
-        return ImageTelemetryProvider;
-    }
-);

gulpfile.js

@@ -77,11 +77,15 @@ if (process.env.NODE_ENV === 'development') {
 gulp.task('scripts', function () {
     var requirejsOptimize = require('gulp-requirejs-optimize');
     var replace = require('gulp-replace-task');
+    var header = require('gulp-header');
+    var comment = fs.readFileSync('src/about.frag');
+
     return gulp.src(paths.main)
         .pipe(sourcemaps.init())
         .pipe(requirejsOptimize(options.requirejsOptimize))
         .pipe(sourcemaps.write('.'))
         .pipe(replace(options.replace))
+        .pipe(header(comment, options.replace.variables))
         .pipe(gulp.dest(paths.dist));
 });
 

index.html

@@ -32,21 +32,40 @@
 
         require(['openmct'], function (openmct) {
             [
-                'example/imagery',
-                'example/eventGenerator'
+                'example/eventGenerator',
+                'example/styleguide'
             ].forEach(
                 openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
             );
             openmct.install(openmct.plugins.MyItems());
             openmct.install(openmct.plugins.LocalStorage());
-            openmct.install(openmct.plugins.Snow());
+            openmct.install(openmct.plugins.Espresso());
             openmct.install(openmct.plugins.Generator());
+            openmct.install(openmct.plugins.ExampleImagery());
             openmct.install(openmct.plugins.UTCTimeSystem());
-
-            openmct.time.clock('local', {start: -15 * 60 * 1000, end: 0});
-            openmct.time.clockOffsets({start: -15 * 60 * 1000, end: 0});
-            openmct.time.timeSystem('utc', openmct.time.bounds());
-            window.openmct = openmct;
+            openmct.install(openmct.plugins.Conductor({
+                menuOptions: [
+                    {
+                        name: "Fixed",
+                        timeSystem: 'utc',
+                        bounds: {
+                            start: Date.now() - 30 * 60 * 1000,
+                            end: Date.now()
+                        }
+                    },
+                    {
+                        name: "Realtime",
+                        timeSystem: 'utc',
+                        clock: 'local',
+                        clockOffsets: {
+                            start: -25 * 60 * 1000,
+                            end: 5 * 60 * 1000
+                        }
+                    }
+                ]
+            }));
+            openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
+            openmct.time.timeSystem('utc');
             openmct.start();
         });
     </script>

openmct.js

@@ -32,6 +32,7 @@ requirejs.config({
         "html2canvas": "bower_components/html2canvas/build/html2canvas.min",
         "moment": "bower_components/moment/moment",
         "moment-duration-format": "bower_components/moment-duration-format/lib/moment-duration-format",
+        "moment-timezone": "bower_components/moment-timezone/builds/moment-timezone-with-data",
         "saveAs": "bower_components/FileSaver.js/FileSaver.min",
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",

package.json

@@ -22,6 +22,7 @@
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
     "gulp": "^3.9.0",
+    "gulp-header": "^1.8.8",
     "gulp-jscs": "^3.0.2",
     "gulp-jshint": "^2.0.0",
     "gulp-jshint-html-reporter": "^0.1.3",

platform/commonUI/browse/bundle.js

@@ -240,7 +240,7 @@ define([
             "views": [
                 {
                     "key": "items",
-                    "name": "Items",
+                    "name": "Grid",
                     "cssClass": "icon-thumbs-strip",
                     "description": "Grid of available items",
                     "template": itemsTemplate,

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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="BrowseObjectController" class="abs l-flex-col">
-    <div class="holder flex-elem l-flex-row object-browse-bar ">
+    <div class="holder flex-elem l-flex-row object-browse-bar t-primary">
         <div class="items-select left flex-elem l-flex-row grows">
             <mct-representation key="'back-arrow'"
                                 mct-object="domainObject"
@@ -31,16 +31,18 @@
             </mct-representation>
         </div>
         <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <mct-representation key="'switcher'"
-                                mct-object="domainObject"
-                                ng-model="representation">
-            </mct-representation>
-            <!-- Temporarily, on mobile, the action buttons are hidden-->
-            <mct-representation key="'action-group'"
-                                mct-object="domainObject"
-                                parameters="{ category: 'view-control' }"
-                                class="mobile-hide">
-            </mct-representation>
+            <span class="l-object-action-buttons">
+                <mct-representation key="'switcher'"
+                                    mct-object="domainObject"
+                                    ng-model="representation">
+                </mct-representation>
+                <!-- Temporarily, on mobile, the action buttons are hidden-->
+                <mct-representation key="'action-group'"
+                                    mct-object="domainObject"
+                                    parameters="{ category: 'view-control' }"
+                                    class="mobile-hide l-object-action-buttons">
+                </mct-representation>
+            </span>
         </div>
     </div>
     <div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">

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

@@ -29,3 +29,7 @@
         mct-object='domainObject'
         class="flex-elem context-available-w"></mct-representation>
 </span>
+<a class="s-button icon-expand t-btn-view-large"
+   title="View large"
+   mct-trigger-modal>
+</a>

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

@@ -16,7 +16,7 @@
         </div>
         <div class="bottom-bar">
             <a ng-repeat="dialogOption in ngModel.options"
-               class="s-button major"
+               class="s-button"
                ng-click="dialogOption.callback()">
                 {{dialogOption.label}}
             </a>

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

@@ -19,12 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs overlay" ng-class="{'delayEntry100ms' : ngModel.delay}">
+<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
     <div class="abs blocker"></div>
-    <div class="abs holder">
+    <div class="abs outer-holder">
         <a ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="close icon-x"></a>
-        <div class="abs contents" ng-transclude></div>
+           class="close icon-x-in-circle"></a>
+        <div class="abs inner-holder contents" ng-transclude></div>
     </div>
 </div>

platform/commonUI/formats/src/UTCTimeFormat.js

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

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

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

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

@@ -1,8 +1,8 @@
 {
   "metadata": {
     "name": "openmct-symbols-16px",
-    "lastOpened": 1487197651675,
-    "created": 1487194069058
+    "lastOpened": 0,
+    "created": 1497475810461
   },
   "iconSets": [
     {
@@ -573,20 +573,28 @@
           "tempChar": ""
         },
         {
-          "order": 122,
+          "order": 124,
           "id": 106,
           "name": "icon-expand",
           "prevSize": 24,
           "code": 921665,
           "tempChar": ""
         },
+        {
+          "order": 123,
+          "id": 107,
+          "name": "icon-list-view",
+          "prevSize": 24,
+          "code": 921666,
+          "tempChar": ""
+        },
         {
           "order": 37,
           "prevSize": 24,
           "name": "icon-activity",
           "id": 32,
           "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 36,
@@ -594,7 +602,7 @@
           "name": "icon-activity-mode",
           "id": 31,
           "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -602,7 +610,7 @@
           "name": "icon-autoflow-tabular",
           "id": 47,
           "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -610,7 +618,7 @@
           "name": "icon-clock",
           "id": 50,
           "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -618,7 +626,7 @@
           "name": "icon-database",
           "id": 53,
           "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 57,
@@ -626,7 +634,7 @@
           "name": "icon-database-query",
           "id": 52,
           "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 17,
@@ -634,7 +642,7 @@
           "name": "icon-dataset",
           "id": 12,
           "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 22,
@@ -642,7 +650,7 @@
           "name": "icon-datatable",
           "id": 17,
           "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -650,7 +658,7 @@
           "name": "icon-dictionary",
           "id": 54,
           "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 62,
@@ -658,7 +666,7 @@
           "name": "icon-folder",
           "id": 57,
           "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 66,
@@ -666,7 +674,7 @@
           "name": "icon-image",
           "id": 61,
           "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -674,7 +682,7 @@
           "name": "icon-layout",
           "id": 63,
           "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 77,
@@ -682,7 +690,7 @@
           "name": "icon-object",
           "id": 72,
           "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 78,
@@ -690,7 +698,7 @@
           "name": "icon-object-unknown",
           "id": 73,
           "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -698,7 +706,7 @@
           "name": "icon-packet",
           "id": 74,
           "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -706,7 +714,7 @@
           "name": "icon-page",
           "id": 75,
           "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 114,
@@ -714,7 +722,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -722,7 +730,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -730,7 +738,7 @@
           "name": "icon-session",
           "id": 5,
           "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -738,7 +746,7 @@
           "name": "icon-tabular",
           "id": 19,
           "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -746,7 +754,7 @@
           "name": "icon-tabular-lad",
           "id": 2,
           "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -754,7 +762,7 @@
           "name": "icon-tabular-lad-set",
           "id": 1,
           "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 8,
@@ -762,7 +770,7 @@
           "name": "icon-tabular-realtime",
           "id": 3,
           "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 23,
@@ -770,7 +778,7 @@
           "name": "icon-tabular-scrolling",
           "id": 18,
           "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 112,
@@ -778,7 +786,7 @@
           "name": "icon-telemetry",
           "id": 86,
           "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -786,7 +794,7 @@
           "name": "icon-telemetry-panel",
           "id": 85,
           "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 93,
@@ -794,7 +802,7 @@
           "name": "icon-timeline",
           "id": 88,
           "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 116,
@@ -802,7 +810,7 @@
           "name": "icon-timer-v1.5",
           "prevSize": 24,
           "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -810,7 +818,7 @@
           "name": "icon-topic",
           "id": 6,
           "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -818,7 +826,7 @@
           "name": "icon-box-with-dashed-lines",
           "id": 29,
           "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "metadata": {
@@ -2363,6 +2371,51 @@
             ]
           }
         },
+        {
+          "id": 107,
+          "paths": [
+            "M0 64h1024v128h-1024v-128z",
+            "M0 320h1024v128h-1024v-128z",
+            "M0 576h1024v128h-1024v-128z",
+            "M0 832h1024v128h-1024v-128z"
+          ],
+          "attrs": [
+            {
+              "fill": "rgb(0, 161, 75)"
+            },
+            {
+              "fill": "rgb(0, 161, 75)"
+            },
+            {
+              "fill": "rgb(0, 161, 75)"
+            },
+            {
+              "fill": "rgb(0, 161, 75)"
+            }
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-list-view"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {
+                "f": 1
+              },
+              {
+                "f": 1
+              },
+              {
+                "f": 1
+              },
+              {
+                "f": 1
+              }
+            ]
+          }
+        },
         {
           "paths": [
             "M576 64h-256l320 320h-290.256c-44.264-76.516-126.99-128-221.744-128h-128v512h128c94.754 0 177.48-51.484 221.744-128h290.256l-320 320h256l448-448-448-448z"
@@ -3237,4 +3290,4 @@
     "showGrid": true
   },
   "uid": -1
-}
+}

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

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

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

@@ -78,6 +78,7 @@
 <glyph unicode="&#xe1039;" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
 <glyph unicode="&#xe1040;" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
 <glyph unicode="&#xe1041;" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
+<glyph unicode="&#xe1042;" glyph-name="icon-list-view" d="M0 896h1024v-128h-1024v128zM0 640h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
@@ -108,4 +109,4 @@
 <glyph unicode="&#xe1127;" glyph-name="icon-timer-v1.5" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
 <glyph unicode="&#xe1128;" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
 <glyph unicode="&#xe1129;" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
-</font></defs></svg>
+</font></defs></svg>

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

@@ -99,7 +99,7 @@ $plotXBarH: 32px;
 $plotLegendH: 20px;
 $plotSwatchD: 8px;
 // 1: Top, 2: right, 3: bottom, 4: left
-$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW);
+$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH, $plotYBarW);
 /* min plot height is based on user testing to find minimum useful height */
 $plotMinH: 95px;
 /*************** Bubbles */

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

@@ -40,7 +40,7 @@
     * Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json
     * to generate font files
     */
-    font-family: 'symbolsfont-12px';
+    font-family: 'symbolsfont 12px';
     src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.eot');
     src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.eot?#iefix') format('embedded-opentype'),
     url($dirCommonRes + 'fonts/symbols/openmct-symbols-12px.woff') format('woff'),
@@ -81,12 +81,6 @@ input, textarea {
     letter-spacing: inherit;
 }
 
-input[type="text"],
-input[type="search"] {
-    vertical-align: baseline;
-    padding: $inputTextP;
-}
-
 h1, h2, h3 {
     letter-spacing: 0.04em;
     margin: 0;
@@ -240,12 +234,6 @@ a.disabled {
     color: rgba(#fff, 0.2);
 }
 
-.comma-list span {
-    &:not(:first-child) {
-        &:before { content: ', '; }
-    }
-}
-
 .test-stripes {
     @include bgDiagonalStripes();
 }

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

@@ -1,10 +1,17 @@
-@mixin glyph($unicode, $family: 'symbolsfont') {
+@mixin glyphBefore($unicode, $family: 'symbolsfont') {
     &:before {
         content: $unicode;
         font-family: $family;
     }
 }
 
+@mixin glyphAfter($unicode, $family: 'symbolsfont') {
+    &:after {
+        content: $unicode;
+        font-family: $family;
+    }
+}
+
 /************************** CHAR UNICODES */
 
 $glyph-icon-alert-rect: '\e900';
@@ -37,7 +44,6 @@ $glyph-icon-plus: '\e926';
 $glyph-icon-trash: '\e927';
 $glyph-icon-x: '\e928';
 $glyph-icon-brackets: '\e929';
-$glyph-icon-crosshair: '\e930';
 $glyph-icon-arrows-out: '\e1000';
 $glyph-icon-arrows-right-left: '\e1001';
 $glyph-icon-arrows-up-down: '\e1002';
@@ -79,6 +85,7 @@ $glyph-icon-x-in-circle: '\e1038';
 $glyph-icon-brightness: '\e1039';
 $glyph-icon-contrast: '\e1040';
 $glyph-icon-expand: '\e1041';
+$glyph-icon-list-view: '\e1042';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -112,112 +119,112 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
 
 /************************** 16 PX CLASSES */
 
-.icon-alert-rect {  @include glyph($glyph-icon-alert-rect); }
-.icon-alert-triangle {  @include glyph($glyph-icon-alert-triangle); }
-.icon-arrow-down {  @include glyph($glyph-icon-arrow-down); }
-.icon-arrow-left {  @include glyph($glyph-icon-arrow-left); }
-.icon-arrow-right {  @include glyph($glyph-icon-arrow-right); }
-.icon-arrow-double-up {  @include glyph($glyph-icon-arrow-double-up); }
-.icon-arrow-tall-up {  @include glyph($glyph-icon-arrow-tall-up); }
-.icon-arrow-tall-down {  @include glyph($glyph-icon-arrow-tall-down); }
-.icon-arrow-double-down {  @include glyph($glyph-icon-arrow-double-down); }
-.icon-arrow-up {  @include glyph($glyph-icon-arrow-up); }
-.icon-asterisk {  @include glyph($glyph-icon-asterisk); }
-.icon-bell {  @include glyph($glyph-icon-bell); }
-.icon-box {  @include glyph($glyph-icon-box); }
-.icon-box-with-arrow {  @include glyph($glyph-icon-box-with-arrow); }
-.icon-check {  @include glyph($glyph-icon-check); }
-.icon-connectivity {  @include glyph($glyph-icon-connectivity); }
-.icon-database-in-brackets {  @include glyph($glyph-icon-database-in-brackets); }
-.icon-eye-open {  @include glyph($glyph-icon-eye-open); }
-.icon-gear {  @include glyph($glyph-icon-gear); }
-.icon-hourglass {  @include glyph($glyph-icon-hourglass); }
-.icon-info {  @include glyph($glyph-icon-info); }
-.icon-link {  @include glyph($glyph-icon-link); }
-.icon-lock {  @include glyph($glyph-icon-lock); }
-.icon-minus {  @include glyph($glyph-icon-minus); }
-.icon-people {  @include glyph($glyph-icon-people); }
-.icon-person {  @include glyph($glyph-icon-person); }
-.icon-plus {  @include glyph($glyph-icon-plus); }
-.icon-trash {  @include glyph($glyph-icon-trash); }
-.icon-x {  @include glyph($glyph-icon-x); }
-.icon-brackets {  @include glyph($glyph-icon-brackets); }
-.icon-arrows-out {  @include glyph($glyph-icon-arrows-out); }
-.icon-arrows-right-left {  @include glyph($glyph-icon-arrows-right-left); }
-.icon-arrows-up-down {  @include glyph($glyph-icon-arrows-up-down); }
-.icon-bullet {  @include glyph($glyph-icon-bullet); }
-.icon-calendar {  @include glyph($glyph-icon-calendar); }
-.icon-chain-links {  @include glyph($glyph-icon-chain-links); }
-.icon-collapse-pane-left {  @include glyph($glyph-icon-collapse-pane-left); }
-.icon-collapse-pane-right {  @include glyph($glyph-icon-collapse-pane-right); }
-.icon-download {  @include glyph($glyph-icon-download); }
-.icon-duplicate {  @include glyph($glyph-icon-duplicate); }
-.icon-folder-new {  @include glyph($glyph-icon-folder-new); }
-.icon-fullscreen-collapse {  @include glyph($glyph-icon-fullscreen-collapse); }
-.icon-fullscreen-expand {  @include glyph($glyph-icon-fullscreen-expand); }
-.icon-layers {  @include glyph($glyph-icon-layers); }
-.icon-line-horz {  @include glyph($glyph-icon-line-horz); }
-.icon-magnify {  @include glyph($glyph-icon-magnify); }
-.icon-magnify-in {  @include glyph($glyph-icon-magnify-in); }
-.icon-magnify-out {  @include glyph($glyph-icon-magnify-out); }
-.icon-menu-hamburger {  @include glyph($glyph-icon-menu-hamburger); }
-.icon-move {  @include glyph($glyph-icon-move); }
-.icon-new-window {  @include glyph($glyph-icon-new-window); }
-.icon-paint-bucket {  @include glyph($glyph-icon-paint-bucket); }
-.icon-pause {  @include glyph($glyph-icon-pause); }
-.icon-pencil {  @include glyph($glyph-icon-pencil); }
-.icon-play {  @include glyph($glyph-icon-play); }
-.icon-plot-resource {  @include glyph($glyph-icon-plot-resource); }
-.icon-pointer-left {  @include glyph($glyph-icon-pointer-left); }
-.icon-pointer-right {  @include glyph($glyph-icon-pointer-right); }
-.icon-refresh {  @include glyph($glyph-icon-refresh); }
-.icon-save {  @include glyph($glyph-icon-save); }
-.icon-sine {  @include glyph($glyph-icon-sine); }
-.icon-T {  @include glyph($glyph-icon-T); }
-.icon-thumbs-strip {  @include glyph($glyph-icon-thumbs-strip); }
-.icon-two-parts-both {  @include glyph($glyph-icon-two-parts-both); }
-.icon-two-parts-one-only {  @include glyph($glyph-icon-two-parts-one-only); }
-.icon-resync {  @include glyph($glyph-icon-resync); }
-.icon-reset {  @include glyph($glyph-icon-reset); }
-.icon-x-in-circle {  @include glyph($glyph-icon-x-in-circle); }
-.icon-brightness {  @include glyph($glyph-icon-brightness); }
-.icon-contrast {  @include glyph($glyph-icon-contrast); }
-.icon-expand {  @include glyph($glyph-icon-expand); }
-.icon-activity {  @include glyph($glyph-icon-activity); }
-.icon-activity-mode {  @include glyph($glyph-icon-activity-mode); }
-.icon-autoflow-tabular {  @include glyph($glyph-icon-autoflow-tabular); }
-.icon-clock {  @include glyph($glyph-icon-clock); }
-.icon-database {  @include glyph($glyph-icon-database); }
-.icon-database-query {  @include glyph($glyph-icon-database-query); }
-.icon-dataset {  @include glyph($glyph-icon-dataset); }
-.icon-datatable {  @include glyph($glyph-icon-datatable); }
-.icon-dictionary {  @include glyph($glyph-icon-dictionary); }
-.icon-folder {  @include glyph($glyph-icon-folder); }
-.icon-image {  @include glyph($glyph-icon-image); }
-.icon-layout {  @include glyph($glyph-icon-layout); }
-.icon-object {  @include glyph($glyph-icon-object); }
-.icon-object-unknown {  @include glyph($glyph-icon-object-unknown); }
-.icon-packet {  @include glyph($glyph-icon-packet); }
-.icon-page {  @include glyph($glyph-icon-page); }
-.icon-plot-overlay {  @include glyph($glyph-icon-plot-overlay); }
-.icon-plot-stacked {  @include glyph($glyph-icon-plot-stacked); }
-.icon-session {  @include glyph($glyph-icon-session); }
-.icon-tabular {  @include glyph($glyph-icon-tabular); }
-.icon-tabular-lad {  @include glyph($glyph-icon-tabular-lad); }
-.icon-tabular-lad-set {  @include glyph($glyph-icon-tabular-lad-set); }
-.icon-tabular-realtime {  @include glyph($glyph-icon-tabular-realtime); }
-.icon-tabular-scrolling {  @include glyph($glyph-icon-tabular-scrolling); }
-.icon-telemetry {  @include glyph($glyph-icon-telemetry); }
-.icon-telemetry-panel {  @include glyph($glyph-icon-telemetry-panel); }
-.icon-timeline {  @include glyph($glyph-icon-timeline); }
-.icon-timer {  @include glyph($glyph-icon-timer); }
-.icon-topic {  @include glyph($glyph-icon-topic); }
-.icon-box-with-dashed-lines {  @include glyph($glyph-icon-box-with-dashed-lines); }
+.icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
+.icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
+.icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
+.icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
+.icon-arrow-right {  @include glyphBefore($glyph-icon-arrow-right); }
+.icon-arrow-double-up {  @include glyphBefore($glyph-icon-arrow-double-up); }
+.icon-arrow-tall-up {  @include glyphBefore($glyph-icon-arrow-tall-up); }
+.icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
+.icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
+.icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
+.icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
+.icon-bell {  @include glyphBefore($glyph-icon-bell); }
+.icon-box {  @include glyphBefore($glyph-icon-box); }
+.icon-box-with-arrow {  @include glyphBefore($glyph-icon-box-with-arrow); }
+.icon-check {  @include glyphBefore($glyph-icon-check); }
+.icon-connectivity {  @include glyphBefore($glyph-icon-connectivity); }
+.icon-database-in-brackets {  @include glyphBefore($glyph-icon-database-in-brackets); }
+.icon-eye-open {  @include glyphBefore($glyph-icon-eye-open); }
+.icon-gear {  @include glyphBefore($glyph-icon-gear); }
+.icon-hourglass {  @include glyphBefore($glyph-icon-hourglass); }
+.icon-info {  @include glyphBefore($glyph-icon-info); }
+.icon-link {  @include glyphBefore($glyph-icon-link); }
+.icon-lock {  @include glyphBefore($glyph-icon-lock); }
+.icon-minus {  @include glyphBefore($glyph-icon-minus); }
+.icon-people {  @include glyphBefore($glyph-icon-people); }
+.icon-person {  @include glyphBefore($glyph-icon-person); }
+.icon-plus {  @include glyphBefore($glyph-icon-plus); }
+.icon-trash {  @include glyphBefore($glyph-icon-trash); }
+.icon-x {  @include glyphBefore($glyph-icon-x); }
+.icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
+.icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
+.icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
+.icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
+.icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
+.icon-calendar {  @include glyphBefore($glyph-icon-calendar); }
+.icon-chain-links {  @include glyphBefore($glyph-icon-chain-links); }
+.icon-collapse-pane-left {  @include glyphBefore($glyph-icon-collapse-pane-left); }
+.icon-collapse-pane-right {  @include glyphBefore($glyph-icon-collapse-pane-right); }
+.icon-download {  @include glyphBefore($glyph-icon-download); }
+.icon-duplicate {  @include glyphBefore($glyph-icon-duplicate); }
+.icon-folder-new {  @include glyphBefore($glyph-icon-folder-new); }
+.icon-fullscreen-collapse {  @include glyphBefore($glyph-icon-fullscreen-collapse); }
+.icon-fullscreen-expand {  @include glyphBefore($glyph-icon-fullscreen-expand); }
+.icon-layers {  @include glyphBefore($glyph-icon-layers); }
+.icon-line-horz {  @include glyphBefore($glyph-icon-line-horz); }
+.icon-magnify {  @include glyphBefore($glyph-icon-magnify); }
+.icon-magnify-in {  @include glyphBefore($glyph-icon-magnify-in); }
+.icon-magnify-out {  @include glyphBefore($glyph-icon-magnify-out); }
+.icon-menu-hamburger {  @include glyphBefore($glyph-icon-menu-hamburger); }
+.icon-move {  @include glyphBefore($glyph-icon-move); }
+.icon-new-window {  @include glyphBefore($glyph-icon-new-window); }
+.icon-paint-bucket {  @include glyphBefore($glyph-icon-paint-bucket); }
+.icon-pause {  @include glyphBefore($glyph-icon-pause); }
+.icon-pencil {  @include glyphBefore($glyph-icon-pencil); }
+.icon-play {  @include glyphBefore($glyph-icon-play); }
+.icon-plot-resource {  @include glyphBefore($glyph-icon-plot-resource); }
+.icon-pointer-left {  @include glyphBefore($glyph-icon-pointer-left); }
+.icon-pointer-right {  @include glyphBefore($glyph-icon-pointer-right); }
+.icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
+.icon-save {  @include glyphBefore($glyph-icon-save); }
+.icon-sine {  @include glyphBefore($glyph-icon-sine); }
+.icon-T {  @include glyphBefore($glyph-icon-T); }
+.icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
+.icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
+.icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
+.icon-resync {  @include glyphBefore($glyph-icon-resync); }
+.icon-reset {  @include glyphBefore($glyph-icon-reset); }
+.icon-x-in-circle {  @include glyphBefore($glyph-icon-x-in-circle); }
+.icon-brightness {  @include glyphBefore($glyph-icon-brightness); }
+.icon-contrast {  @include glyphBefore($glyph-icon-contrast); }
+.icon-expand {  @include glyphBefore($glyph-icon-expand); }
+.icon-list-view {  @include glyphBefore($glyph-icon-list-view); }
+.icon-activity {  @include glyphBefore($glyph-icon-activity); }
+.icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
+.icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
+.icon-clock {  @include glyphBefore($glyph-icon-clock); }
+.icon-database {  @include glyphBefore($glyph-icon-database); }
+.icon-database-query {  @include glyphBefore($glyph-icon-database-query); }
+.icon-dataset {  @include glyphBefore($glyph-icon-dataset); }
+.icon-datatable {  @include glyphBefore($glyph-icon-datatable); }
+.icon-dictionary {  @include glyphBefore($glyph-icon-dictionary); }
+.icon-folder {  @include glyphBefore($glyph-icon-folder); }
+.icon-image {  @include glyphBefore($glyph-icon-image); }
+.icon-layout {  @include glyphBefore($glyph-icon-layout); }
+.icon-object {  @include glyphBefore($glyph-icon-object); }
+.icon-object-unknown {  @include glyphBefore($glyph-icon-object-unknown); }
+.icon-packet {  @include glyphBefore($glyph-icon-packet); }
+.icon-page {  @include glyphBefore($glyph-icon-page); }
+.icon-plot-overlay {  @include glyphBefore($glyph-icon-plot-overlay); }
+.icon-plot-stacked {  @include glyphBefore($glyph-icon-plot-stacked); }
+.icon-session {  @include glyphBefore($glyph-icon-session); }
+.icon-tabular {  @include glyphBefore($glyph-icon-tabular); }
+.icon-tabular-lad {  @include glyphBefore($glyph-icon-tabular-lad); }
+.icon-tabular-lad-set {  @include glyphBefore($glyph-icon-tabular-lad-set); }
+.icon-tabular-realtime {  @include glyphBefore($glyph-icon-tabular-realtime); }
+.icon-tabular-scrolling {  @include glyphBefore($glyph-icon-tabular-scrolling); }
+.icon-telemetry {  @include glyphBefore($glyph-icon-telemetry); }
+.icon-telemetry-panel {  @include glyphBefore($glyph-icon-telemetry-panel); }
+.icon-timeline {  @include glyphBefore($glyph-icon-timeline); }
+.icon-timer {  @include glyphBefore($glyph-icon-timer); }
+.icon-topic {  @include glyphBefore($glyph-icon-topic); }
+.icon-box-with-dashed-lines {  @include glyphBefore($glyph-icon-box-with-dashed-lines); }
 
 /************************** 12 PX CLASSES */
 
-.icon-eye-open-12px {  @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
-.icon-crosshair-12px {  @include glyph($glyph-icon-crosshair,'symbolsfont-12px'); }
-.icon-collapse-pane-left-12px {  @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
-.icon-collapse-pane-right-12px {  @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
-.icon-folder-12px {  @include glyph($glyph-icon-folder,'symbolsfont-12px'); }
+.icon-eye-open-12px {  @include glyphBefore($glyph-icon-eye-open,'symbolsfont-12px'); }
+.icon-collapse-pane-left-12px {  @include glyphBefore($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
+.icon-collapse-pane-right-12px {  @include glyphBefore($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
+.icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }

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

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

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

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

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

@@ -58,7 +58,6 @@
 @import "search/search";
 @import "mobile/search/search";
 @import "overlay/overlay";
-@import "mobile/overlay/overlay";
 @import "tree/tree";
 @import "object-label";
 @import "mobile/tree";
@@ -71,7 +70,6 @@
 @import "fixed-position";
 @import "lists/tabular";
 @import "plots/plots-main";
-@import "plots/legend";
 @import "iframe";
 @import "views";
 @import "items/item";

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

@@ -285,13 +285,14 @@
 
 @mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
 	background-color: $bg;
-	border-radius: $controlCr;
+	//border-radius: $controlCr;
 	box-sizing: border-box;
 	color: $fg;
 }
 
 @mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
 	@include user-select(none);
+    border-radius: $controlCr;
     color: $fg;
 	.icon,
     &:before {

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

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

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

@@ -19,22 +19,11 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
-.s-palette-item {
-    $colorSelectedColor: #fff;
-    @include txtShdwSubtle(0.8);
-    @include trans-prop-nice-fade(0.25s);
-    border: 1px solid transparent;
-    &:hover {
-        @include trans-prop-nice-fade(0);
-        border-color: $colorSelectedColor !important;
-    }
-}
-
 .l-color-palette {
 	$d: 16px;
 	$colorsPerRow: 10;
 	$m: 1;
+	$colorSelectedColor: #fff;
 
 	box-sizing: border-box;
 	padding: $interiorMargin !important;
@@ -46,6 +35,10 @@
 
 		.l-palette-item {
 			box-sizing: border-box;
+			@include txtShdwSubtle(0.8);
+			@include trans-prop-nice-fade(0.25s);
+			border: 1px solid transparent;
+			color: $colorSelectedColor;
 			display: block;
 			float: left;
 			height: $d; width: $d;
@@ -58,6 +51,13 @@
             }
 		}
 
+		.s-palette-item {
+			&:hover {
+				@include trans-prop-nice-fade(0);
+				border-color: $colorSelectedColor !important;
+			}
+		}
+
 		.l-palette-item-label {
 			margin-left: $interiorMargin;
 		}
@@ -69,21 +69,10 @@
 			}
 		}
 	}
-}
 
-.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%;
-            }
-        }
-    }
+
+
+
+
+
 }

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

@@ -139,26 +139,6 @@
     }
 }
 
-/******************************************************** VIEW CONTROLS */
-// Expand/collapse > and v arrows, used in tree and plot legend
-// Moved this over from a tree-only context 5/18/17
-
-.view-control {
-    @extend .ui-symbol;
-    cursor: pointer;
-    height: 1em; width: 1em;
-    line-height: inherit;
-    &:before {
-        position: absolute;
-        @include trans-prop-nice(transform, 100ms);
-        content: $glyph-icon-arrow-right;
-        @include transform-origin(center);
-    }
-    &.expanded:before {
-        @include transform(rotate(90deg));
-    }
-}
-
 /******************************************************** CUSTOM CHECKBOXES */
 label.checkbox.custom,
 label.radio.custom {
@@ -244,18 +224,28 @@ textarea {
 
 /******************************************************** INPUTS */
 input[type="text"],
-input[type="search"] {
+input[type="search"],
+input[type="number"] {
     @include nice-input();
+    vertical-align: baseline;
+    padding: $inputTextP;
     &.numeric {
         text-align: right;
     }
 }
 
+.l-input-sm {
+    input[type="text"],
+    input[type="search"],
+    input[type="number"] {
+        width: 50px !important;
+    }
+}
+
 .l-input-lg input[type="text"],
 input[type="text"].lg {  width: 100% !important; }
 .l-input-med input[type="text"],
 input[type="text"].med { width: 200px !important; }
-.l-input-sm input[type="text"],
 input[type="text"].sm {  width: 50px !important; }
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }
@@ -317,6 +307,40 @@ textarea.lg { position: relative; height: 300px; }
     }
 }
 
+/******************************************************** AUTOCOMPLETE */
+.autocomplete {
+    input {
+        width: 226px;
+        padding: 5px 0px 5px 7px;
+    }
+    .icon-arrow-down {
+        position: absolute;
+        top: 8px;
+        left: 210px;
+        font-size: 10px;
+        cursor: pointer;
+    }
+    .autocompleteOptions {
+        border: 1px solid $colorFormLines;
+        border-radius: 5px;
+        width: 224px;
+        max-height: 170px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        li {
+            border: 1px solid $colorFormLines;
+            padding: 8px 0px 8px 5px;
+            .optionText {
+                cursor: pointer;
+            }
+        }
+        .optionPreSelected {
+            background-color: $colorInspectorSectionHeaderBg;
+            color: $colorInspectorSectionHeaderFg;
+        }
+    }
+}
+
 /******************************************************** OBJECT-HEADER */
 .object-header {
     font-size: 1em;
@@ -671,7 +695,8 @@ textarea {
     }
 }
 
-.view-switcher {
+.view-switcher,
+.t-btn-view-large {
     @include trans-prop-nice-fade($controlFadeMs);
 }
 

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

@@ -249,7 +249,7 @@
 .context-menu-holder,
 .menu-holder {
 	position: absolute;
-	z-index: 70;
+	z-index: 120;
 	.context-menu-wrapper {
 		position: absolute;
 		height: 100%;
@@ -273,7 +273,7 @@
 
 .btn-bar.right .menu,
 .menus-to-left .menu {
-        z-index: 79;
+    z-index: 79;
 	left: auto;
 	right: 0;
 	width: auto;

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

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

platform/commonUI/general/res/sass/features/_time-display.scss

@@ -1,33 +1,36 @@
 .l-time-display {
 	$transTime: 200ms;
+    $controlSize: 14px;
+    $control1ControlW: $controlSize + $interiorMargin;
+    $control2ControlW: $control1ControlW * 2;
     line-height: 140%;
 	&:hover {
-		.l-btn.control {
+		.l-btn.controls {
 			opacity: 1;
 		}
 	}
 
 	&.l-timer {
-        .l-value:before,
-        .control {
-            font-size: 0.8em;
-        }
-
         .l-value:before {
             // Direction +/- element
+            font-size: $controlSize;
             margin-right: $interiorMarginSm;
+
         }
-        .control {
+        .controls {
             @include trans-prop-nice((width, opacity), $transTime);
+            font-size: $controlSize;
             line-height: inherit;
             margin-right: 0;
             opacity: 0;
             width: 0;
+            .flex-elem {
+                margin-right: $interiorMargin;
+            }
         }
-		&:hover .control {
-            margin-right: $interiorMargin;
+		&:hover .controls {
             opacity: 1;
-			width: 1em;
+			width: $control2ControlW;
 		}
 	}
 
@@ -35,4 +38,34 @@
         color: pullForward($colorBodyFg, 50%);
         font-weight: 400;
     }
+
+    // States
+    &.s-state-stopped,
+    &.s-state-paused {
+        .l-value {
+            opacity: 0.4;
+        }
+    }
+
+    &.s-state-started {
+        .l-value {
+            opacity: 1;
+        }
+    }
+
+    &.s-state-stopped {
+        // Hide Stop button, 1controlW
+        .t-btn-stop {
+            display: none;
+        }
+        &:hover .controls {  width: $control1ControlW;  }
+
+    }
+
+    &.s-state-paused {
+        // Paused, do something visual
+        .l-value {
+            &:before { @extend .pulse; }
+        }
+    }
 }

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

@@ -19,44 +19,40 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@mixin labelValidate($sym, $c) {
+    > .label {
+        @include glyphAfter($sym);
+        &:after {
+            color: $c;
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+
 mct-form.validates {
     .form-row.validates {
         > .label {
             padding-right: $reqSymbolM; // Keep room for validation element
-            &:before {
-                position: absolute;
-                right: $interiorMargin;
+            &:after {
                 font-size: $reqSymbolFontSize;
-                height: 100%;
-                line-height: 200%;
-
             }
         }
         &.invalid,
-        &.invalid.req {
-            > .label {
-                @extend .icon-x;
-                &:before {
-                    color: $colorFormInvalid;
-                }
-            }
-        }
+        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
+
         &.valid,
-        &.valid.req {
-            > .label {
-                @extend .icon-check;
-                &:before {
-                    color: $colorFormValid;
-                }
-            }
-        }
-        &.req {
-            > .label {
-                @extend .icon-asterisk;
-                &:before {
-                    color: $colorFormRequired;
-                }
-            }
-        }
+        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
+
+        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
+    }
+}
+
+body.desktop .form-row.validates > .label {
+    &:after {
+        position: absolute;
+        right: $interiorMargin;
+        height: 100%;
+        line-height: 200%;
     }
 }

platform/commonUI/general/res/sass/items/_item.scss

@@ -132,5 +132,33 @@
 	        }
         }
     }
-
+}
+
+table.list-view {
+    $s: 1.2em;
+    width: 100%;
+    th, td {
+        cursor: pointer;
+    }
+    tr:hover td {
+        background-color: $colorItemBg;
+        color: $colorItemFg;
+    }
+    td {
+        $p: $interiorMargin;
+        @include ellipsize;
+        color: $colorItemFg;
+        font-size: 1em;
+        line-height: $s;
+        max-width: 0;
+        padding-top: $p;
+        padding-bottom: $p;
+    }
+    .t-item-icon {
+        font-size: $s;
+        margin-right: $interiorMargin;
+    }
+    .t-title-label {
+        @include ellipsize; // Yep, need it here too as well as the <td>
+    }
 }

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

@@ -92,7 +92,7 @@ body.mobile {
     }
 
     .object-browse-bar {
-        margin-left: 45px;
+        &.t-primary { margin-left: 45px; }
         .context-available {
             opacity: 1 !important;
         }

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

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

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

@@ -1,74 +0,0 @@
-@include phoneandtablet {
-    .overlay {
-        .clk-icon.close {
-            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
-        }
-
-        > .holder {
-            height: 90%; width: 90%;
-
-            > .contents {
-                top: $mobileOverlayMargin;
-                right: $mobileOverlayMargin;
-                bottom: $mobileOverlayMargin;
-                left: $mobileOverlayMargin;
-
-                .top-bar {
-                    > .title {
-                        margin-right: 1.2em;
-                    }
-                }
-            }
-        }
-    }
-}
-
-@include phone {
-    .overlay > .holder {
-        $m: 0;
-        border-radius: $m;
-        top: $m;
-        right: $m;
-        bottom: $m;
-        left: $m;
-        height: auto; width: auto;
-        min-width: 200px; min-height: 200px;
-        max-height: 100%; max-width: 100%;
-        overflow: auto;
-        @include transform(none);
-
-        .editor .form .form-row.l-flex-row  {
-            // Display elements in a columnar view
-            @include flex-direction(column);
-            > .flex-elem {
-                &:not(:first-child) {
-                    margin-top: $interiorMargin;
-                }
-                &.label {
-                    width: 100%;
-                }
-                &.controls {
-                    overflow: auto;
-                }
-            }
-
-            &.validates > .label:before {
-                position: relative;
-                right: auto;
-                line-height: inherit;
-                margin-right: $interiorMargin;
-            }
-        }
-    }
-    .t-dialog-sm .overlay > .holder {
-        height: auto; max-height: 100%;
-    }
-}
-
-@include phonePortrait {
-    .overlay > .holder {
-        .contents .bottom-bar {
-            text-align: center;
-        }
-    }
-}

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

@@ -21,11 +21,16 @@
  *****************************************************************************/
 
 .overlay {
-    font-size: 90%;
     &.delayEntry100ms {
         @include keyframes(fadeInFromNone) {
-            0% { display: none; opacity: 0; }
-            100% { display: block; opacity: 1; }
+            0% {
+                display: none;
+                opacity: 0;
+            }
+            100% {
+                display: block;
+                opacity: 1;
+            }
         }
         @include animation-delay($delayEntryMs);
         @include animation(fadeInFromNone $durEntryMs ease-in);
@@ -35,29 +40,21 @@
         z-index: 100;
     }
     .close {
-        font-size: 0.8rem;
+        $d: $interiorMargin;
+        opacity: 0.3;
         position: absolute;
-        top: $interiorMarginLg;
-        right: $interiorMarginLg;
+        top: $d;
+        right: $d;
         bottom: auto;
         left: auto;
-        z-index: 100;
+        &:hover {
+            opacity: 0.6;
+        }
     }
-    > .holder {
-        @include containerSubtle($colorOvrBg, $colorOvrFg);
-        border-radius: $basicCr * 3;
-        color: $colorOvrFg;
-        top: 50%;
-        right: auto;
-        bottom: auto;
-        left: 50%;
-        @include transform(translateX(-50%) translateY(-50%));
-        height: 70%;
-        width: 50%;
-        min-height: 300px;
-        min-width: 600px;
-        z-index: 101;
-        > .contents {
+
+    > .abs.outer-holder {
+        z-index: 102;
+        > .abs.inner-holder {
             $m: $overlayMargin;
             top: $m;
             right: $m;
@@ -65,78 +62,176 @@
             left: $m;
         }
     }
-    .title {
-        @include ellipsize();
-        font-size: 1.2em;
-        line-height: 120%;
-        margin-bottom: $interiorMargin;
-    }
-
-    .hint, .field-hints { color: $colorFieldHintOverlay !important;  }
-
-    .abs.top-bar {
-        height: $ovrTopBarH;
-    }
-
-    .abs.editor,
-    .abs.message-body {
-        top: $ovrTopBarH + $interiorMarginLg;
-        bottom: $ovrFooterH + $interiorMarginLg;
-        left: 0;
-        right: 0;
-        overflow: auto;
-        .field.l-input-med {
-            input[type='text'] {
-                width: 100%;
-            }
-        }
-    }
 
     .bottom-bar {
         text-align: right;
         .s-button {
-            $bg: $colorOvrBtnBg;
-            &:not(.major) {
-                @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
-            }
             font-size: 95%;
             height: $ovrFooterH;
             line-height: $ovrFooterH;
-            margin-left: $interiorMargin;
+            margin-bottom: $interiorMarginSm;
             padding: 0 $interiorMargin * 3;
-            &:first-child {
-                margin-left: 0;
+            &:not(:last-child) {
+                margin-right: $interiorMargin;
+            }
+        }
+    }
+
+    // Dialog boxes, size constrained and centered in desktop/tablet
+    &.l-dialog {
+        .s-button {
+            &:not(.major) {
+                @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
             }
         }
 
+        > .abs.outer-holder {
+            @include desktopandtablet {
+                $max: 1280px;
+                @include transform(translateX(-50%) translateY(-50%));
+                border-radius: $overlayCr;
+                top: 50%; right: auto; bottom: auto; left: 50%;
+                width: 70%; height: 70%;
+                min-width: 520px;
+                max-width: $max; max-height: $max;
+            }
+            @include phone {
+                overflow: auto;
+
+                .editor .form .form-row.l-flex-row  {
+                    // Display elements in a columnar view
+                    @include flex-direction(column);
+                    > .flex-elem {
+                        &:not(:first-child) {
+                            margin-top: $interiorMargin;
+                        }
+                        &.label {
+                            width: 100%;
+                        }
+                        &.controls {
+                            overflow: auto;
+                        }
+                    }
+
+                    &.validates > .label:before {
+                        position: relative;
+                        right: auto;
+                        line-height: inherit;
+                        margin-right: $interiorMargin;
+                    }
+                }
+            }
+
+            @include containerSubtle($colorOvrBg, $colorOvrFg);
+        }
+
+        .title {
+            @include ellipsize();
+            font-size: 1.2em;
+            line-height: 120%;
+            margin-bottom: $interiorMargin;
+        }
+
+        .hint, .field-hints {
+            color: $colorFieldHintOverlay !important;
+        }
+
+        .abs.top-bar {
+            height: $ovrTopBarH;
+        }
+
+        .abs.bottom-bar {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            overflow: visible;
+            height: $ovrFooterH;
+        }
+
+        .abs.editor,
+        .abs.message-body {
+            top: $ovrTopBarH + $interiorMarginLg;
+            bottom: $ovrFooterH + $interiorMarginLg;
+            left: 0;
+            right: 0;
+            overflow: auto;
+            .field.l-input-med {
+                input[type='text'] {
+                    width: 100%;
+                }
+            }
+        }
+
+        .l-progress-bar {
+            $h: $progressBarHOverlay;
+            display: block;
+            height: $h;
+            line-height: $h;
+            margin: .5em 0;
+            width: 100%;
+        }
+
+        .select {
+            box-shadow: $shdwBtnsOverlay;
+        }
     }
 
-    .abs.bottom-bar {
-        top: auto;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        overflow: visible;
-        height: $ovrFooterH;
+    // Large view overlays for mobile and desktop
+    &.l-large-view {
+        > .abs.outer-holder {
+            @include keyframes(overlayIn) {
+                from {
+                    opacity: 0;
+                    transform: scale(0, 0);
+                }
+                to {
+                    opacity: 1;
+                    transform: scale(1.0, 1.0);
+                }
+            }
+
+            @include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
+            background: $colorBodyBg;
+
+            .abs.inner-holder {
+                opacity: 0;
+                @include keyframes(contentsIn) {
+                    from { opacity: 0; }
+                    to { opacity: 1; }
+                }
+                @include animToParams(contentsIn, $dur: 50ms, $delay: $durLargeViewExpand * 1.25);
+            }
+
+            .t-btn-view-large {
+                display: none;
+            }
+            z-index: 101;
+        }
+    }
+}
+
+body.desktop {
+    .overlay {
+        > .abs.outer-holder {
+            border-radius: $overlayCr;
+        }
+
+        &.l-large-view {
+            > .abs.outer-holder {
+                width: 90%;
+                height: 90%;
+                top: 5%;
+                left: 5%;
+                @include boxShdwLarge();
+            }
+        }
     }
 
-    .l-progress-bar {
-        $h: $progressBarHOverlay;
-        display: block;
+    .t-dialog-sm .overlay > .outer-holder {
+        // Used for blocker and in-progress dialogs, modal alerts, etc.
+        $h: 225px;
+        max-height: $h;
         height: $h;
-        line-height: $h;
-        margin: .5em 0;
-        width: 100%;
-    }
-
-    .select {
-        box-shadow: $shdwBtnsOverlay;
     }
 }
-
-.t-dialog-sm .overlay > .holder {
-    // Used for blocker and in-progress dialogs, modal alerts, etc.
-    $h: 225px;
-    min-height: $h;
-    height: $h;
-}

platform/commonUI/general/res/sass/plots/_legend.scss

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

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

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

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

@@ -23,7 +23,7 @@
 ul.tree {
     @include menuUlReset();
     @include user-select(none);
-    > li {
+    li {
         display: block;
         position: relative;
     }
@@ -54,10 +54,18 @@ ul.tree {
         color: $colorItemTreeVC;
         font-size: 0.75em;
         margin-right: $interiorMargin;
+        height: 100%;
+        line-height: inherit;
         width: $treeVCW;
-        &.no-children {
+        &.has-children {
             &:before {
-                content:"";
+                position: absolute;
+                @include trans-prop-nice(transform, 100ms);
+                content: "\e904";
+                @include transform-origin(center);
+            }
+            &.expanded:before {
+                @include transform(rotate(90deg));
             }
         }
     }

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

@@ -20,69 +20,77 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .frame {
-	$ohH: $btnFrameH;
-	$bc: $colorInteriorBorder;
-	&.child-frame.panel {
-		background: $colorBodyBg;
-		border: 1px solid $bc;
+    $ohH: $btnFrameH;
+    $bc: $colorInteriorBorder;
+    &.child-frame.panel {
+        background: $colorBodyBg;
+        border: 1px solid $bc;
         z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
-		&:hover {
-			border-color: lighten($bc, 10%);
-		}
-	}
-	.object-top-bar {
-		font-size: 0.75em;
-		height: $ohH;
-		line-height: $ohH;
-        .left {
-            padding-right: $interiorMarginLg;
+        &:hover {
+            border-color: lighten($bc, 10%);
         }
-	}
-	>.object-holder.abs {
-		top: $ohH + $interiorMargin;
-	}
-	.contents {
-		$myM: $interiorMargin;
-		top: $myM;
-		right: $myM;
-		bottom: $myM;
-		left: $myM;
-	}
-	&.frame-template {
-		.s-button,
-		.s-menu-button {
-			height: $ohH;
-			line-height: $ohH;
-			padding: 0 $interiorMargin;
-			> span,
+    }
+    .object-browse-bar {
+        font-size: 0.75em;
+        height: $ohH;
+        line-height: $ohH;
+    }
+
+    > .object-holder.abs {
+        top: $ohH + $interiorMargin;
+    }
+    .contents {
+        $myM: $interiorMargin;
+        top: $myM;
+        right: $myM;
+        bottom: $myM;
+        left: $myM;
+    }
+    &.frame-template {
+        .s-button,
+        .s-menu-button {
+            height: $ohH;
+            line-height: $ohH;
+            padding: 0 $interiorMargin;
+            > span,
             &:before {
-				font-size: 0.65rem;
-			}
-		}
+                font-size: 0.65rem;
+            }
+        }
 
-		.s-menu-button:after {
-			font-size: 8px;
-		}
+        .s-menu-button:after {
+            font-size: 8px;
+        }
 
-		.view-switcher {
-			z-index: 10;
-		}
-	}
-	.view-switcher {
-		// Hide the name when the view switcher is in a frame context
-		.title-label {
-			display: none;
-		}
-	}
+        .view-switcher {
+            z-index: 10;
+        }
+    }
+    .view-switcher {
+        margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
+        // Hide the name when the view switcher is in a frame context
+        .title-label {
+            display: none;
+        }
+    }
+}
+
+body.desktop .frame {
+    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
+    // Frame template is used because we need to target the lowest nested frame
+    .view-switcher,
+    .t-btn-view-large {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    // Target the first descendant so that we only show the elements in the outermost container.
+    // Handles the case where we have layouts in layouts.
+    &:hover > .object-browse-bar {
+        .view-switcher,
+        .t-btn-view-large {
+            opacity: 1;
+            pointer-events: inherit;
+        }
+    }
 }
- body.desktop .frame.frame-template {
-     // Hide the view switcher by default when it's in an element that's in a frame context
-     // Frame template is used because we need to target the lowest nested frame
-     .view-switcher {
-         opacity: 0;
-     }
-     &:hover .view-switcher {
-         // Show the view switcher on frame hover
-         opacity: 1;
-     }
- }

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

@@ -136,14 +136,6 @@
     .mini-tab-icon.toggle-pane {
         z-index: 5;
     }
-    &.items {
-        .object-browse-bar {
-            .left.abs,
-            .right.abs {
-                top: auto;
-            }
-        }
-    }
 }
 
 body.desktop .pane .mini-tab-icon.toggle-pane {
@@ -235,8 +227,13 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     top: $ueTopBarH + $interiorMarginLg;
 }
 
-.l-object-wrapper-inner {
-    @include trans-prop-nice-resize(0.25s);
+.l-object-wrapper {
+    padding: 0;
+    @include trans-prop-nice((padding), 0.25s);
+    .l-edit-controls {
+        @include trans-prop-nice((height), 0.5s);
+        height: 0;
+    }
 }
 
 .object-browse-bar .s-button,
@@ -250,10 +247,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     vertical-align: top;
 }
 
-.object-browse-bar,
-.top-bar {
-    .view-switcher {
-        margin-right: $interiorMarginLg * 2;
+.object-browse-bar {
+    .l-object-action-buttons {
+        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
     }
 }
 
@@ -265,7 +261,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     white-space: nowrap;
 
     .left {
-        padding-right: $interiorMarginLg;
         .l-back {
             margin-right: $interiorMarginLg;
             &.s-status-editing { display: none; }
@@ -348,53 +343,21 @@ body.desktop {
     .pane:not(.resizing) {
         @include trans-prop-nice-resize-w(250ms);
     }
-    .pane.primary-pane .object-browse-bar {
+    .pane.primary-pane > .object-browse-bar {
         min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
     }
 }
 
 .s-status-editing {
     .l-object-wrapper {
-        $t2Dur: $browseToEditAnimMs;
-        $t1Dur: $t2Dur / 2;
-        $pulseDur: $editBorderPulseMs;
-        $bC0: rgba($colorEditAreaFg, 0.5);
-        $bC100: rgba($colorEditAreaFg, 1);
-
         background-color: $colorEditAreaBg;
         border-radius: $controlCr;
-        border: 1px dotted $bC0;
-
-        // Transition 1
-        @include keyframes(wrapperIn) {
-            from { border: 0px dotted transparent; padding: 0; }
-            to { border: 1px dotted $bC0; padding: 5px; }
-        }
-
-        // Do last
-        @include keyframes(pulseNew) {
-            from  { border-color: $bC0; }
-            to { border-color: $bC100; }
-        }
-
-        @include animation-name(wrapperIn, pulseNew);
-        @include animation-duration($t1Dur, $pulseDur);
-        @include animation-delay(0s, $t1Dur + $t2Dur);
-        @include animation-direction(normal, alternate);
-        @include animation-fill-mode(both, none);
-        @include animation-iteration-count(1, infinite);
-        @include animation-timing-function(ease-in-out, linear);
-
+        border: 1px dotted $colorEditAreaFg;
+        padding: $interiorMargin;
 
         .l-edit-controls {
-            height: 0;
+            height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin;
             border-bottom: 1px solid $colorInteriorBorder;
-            // Transition 2: reveal edit controls
-            @include keyframes(editIn) {
-                from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; }
-                to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; }
-            }
-            @include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur);
             .tool-bar {
                 right: $interiorMargin;
             }

platform/commonUI/general/res/sass/user-environ/_tool-bar.scss

@@ -26,9 +26,11 @@
 	.l-control-group {
 		height: $btnToolbarH;
 	}
-	input[type="text"] {
+	input[type="text"],
+    input[type="search"],
+    input[type="number"] {
 		box-sizing: border-box;
-		font-size: .9em;
+		font-size: .8em;
 		height: $btnToolbarH;
 		margin-bottom: 1px;
 		position: relative;

platform/commonUI/general/src/directives/MCTResize.js

@@ -83,13 +83,14 @@ define(
                 // Callback to fire after each timeout;
                 // update bounds and schedule another timeout
                 function onInterval() {
+                    if (!active) {
+                        return;
+                    }
                     fireEval({
                         width: element[0].offsetWidth,
                         height: element[0].offsetHeight
                     });
-                    if (active) {
-                        $timeout(onInterval, currentInterval(), false);
-                    }
+                    $timeout(onInterval, currentInterval(), false);
                 }
 
                 // Stop running in the background

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

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

platform/commonUI/general/test/directives/MCTResizeSpec.js

@@ -102,11 +102,16 @@ define(
                 // Broadcast a destroy event
                 mockScope.$on.mostRecentCall.args[1]();
 
+                testElement.offsetWidth = 300;
+                testElement.offsetHeight = 350;
+                mockScope.$eval.reset();
+
                 // Fire the timeout
                 mockTimeout.mostRecentCall.args[0]();
 
                 // Should NOT have scheduled another timeout
                 expect(mockTimeout.calls.length).toEqual(2);
+                expect(mockScope.$eval).not.toHaveBeenCalled();
             });
 
             it("triggers a digest cycle when size changes", function () {

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

@@ -17,6 +17,7 @@ $hoverRatioPercent: 10%;
 $basicCr: 3px;
 $controlCr: 2px;
 $smallCr: 2px;
+$overlayCr: 11px;
 
 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
@@ -146,6 +147,7 @@ $colorOvrFg: pullForward($colorBodyFg, 30%);
 $colorOvrBtnBg: pullForward($colorOvrBg, 20%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
+$durLargeViewExpand: 250ms;
 
 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
@@ -173,8 +175,6 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
-$legendHoverValueBg: rgba($colorBodyFg, 0.1);
 
 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);

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

@@ -17,6 +17,7 @@ $hoverRatioPercent: 10%;
 $basicCr: 4px;
 $controlCr: $basicCr;
 $smallCr: 3px;
+$overlayCr: 11px;
 
 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
@@ -146,6 +147,7 @@ $colorOvrFg: $colorBodyFg;
 $colorOvrBtnBg: pullForward($colorOvrBg, 40%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
+$durLargeViewExpand: 250ms;
 
 // Items
 $colorItemBg: #ddd;
@@ -173,8 +175,6 @@ $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
-$legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);

platform/features/clock/bundle.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 
 define([
+    "moment-timezone",
     "./src/indicators/ClockIndicator",
     "./src/services/TickerService",
     "./src/controllers/ClockController",
@@ -28,10 +29,13 @@ define([
     "./src/controllers/RefreshingController",
     "./src/actions/StartTimerAction",
     "./src/actions/RestartTimerAction",
+    "./src/actions/StopTimerAction",
+    "./src/actions/PauseTimerAction",
     "text!./res/templates/clock.html",
     "text!./res/templates/timer.html",
     'legacyRegistry'
 ], function (
+    MomentTimezone,
     ClockIndicator,
     TickerService,
     ClockController,
@@ -39,6 +43,8 @@ define([
     RefreshingController,
     StartTimerAction,
     RestartTimerAction,
+    StopTimerAction,
+    PauseTimerAction,
     clockTemplate,
     timerTemplate,
     legacyRegistry
@@ -139,6 +145,17 @@ define([
                     "cssClass": "icon-play",
                     "priority": "preferred"
                 },
+                {
+                    "key": "timer.pause",
+                    "implementation": PauseTimerAction,
+                    "depends": [
+                        "now"
+                    ],
+                    "category": "contextual",
+                    "name": "Pause",
+                    "cssClass": "icon-pause",
+                    "priority": "preferred"
+                },
                 {
                     "key": "timer.restart",
                     "implementation": RestartTimerAction,
@@ -149,6 +166,17 @@ define([
                     "name": "Restart at 0",
                     "cssClass": "icon-refresh",
                     "priority": "preferred"
+                },
+                {
+                    "key": "timer.stop",
+                    "implementation": StopTimerAction,
+                    "depends": [
+                        "now"
+                    ],
+                    "category": "contextual",
+                    "name": "Stop",
+                    "cssClass": "icon-box",
+                    "priority": "preferred"
                 }
             ],
             "types": [
@@ -200,13 +228,20 @@ define([
                                     "cssClass": "l-inline"
                                 }
                             ]
+                        },
+                        {
+                            "key": "timezone",
+                            "name": "Timezone",
+                            "control": "autocomplete",
+                            "options": MomentTimezone.tz.names()
                         }
                     ],
                     "model": {
                         "clockFormat": [
                             "YYYY/MM/DD hh:mm:ss",
                             "clock12"
-                        ]
+                        ],
+                        "timezone": "UTC"
                     }
                 },
                 {

platform/features/clock/res/templates/timer.html

@@ -19,11 +19,16 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-time-display l-digital l-timer s-timer" ng-controller="TimerController as timer">
+<div class="l-time-display l-digital l-timer s-timer s-state-{{timer.timerState}}" ng-controller="TimerController as timer">
 	<div class="l-elem-wrapper l-flex-row">
-		<a ng-click="timer.clickButton()"
-			title="{{timer.buttonText()}}"
-			class="flex-elem control s-icon-button {{timer.buttonCssClass()}}"></a>
+        <div class="l-elem-wrapper l-flex-row controls">
+            <a ng-click="timer.clickStopButton()"
+               title="Stop"
+               class="flex-elem s-icon-button t-btn-stop icon-box"></a>
+            <a ng-click="timer.clickButton()"
+               title="{{timer.buttonText()}}"
+               class="flex-elem s-icon-button t-btn-pauseplay {{timer.buttonCssClass()}}"></a>
+        </div>
 	    <span class="flex-elem l-value {{timer.signClass()}}">
 	        <span class="value"
 		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}

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

@@ -25,13 +25,10 @@ define(
     function () {
 
         /**
-         * Implements the "Start" and "Restart" action for timers.
+         * Implements the "Pause" action for timers.
          *
-         * Sets the reference timestamp in a timer to the current
-         * time, such that it begins counting up.
-         *
-         * Both "Start" and "Restart" share this implementation, but
-         * control their visibility with different `appliesTo` behavior.
+         * Sets the reference pausedTime in a timer to the current
+         * time, such that it stops counting up.
          *
          * @implements {Action}
          * @memberof platform/features/clock
@@ -40,22 +37,35 @@ define(
          *        time (typically wrapping `Date.now`)
          * @param {ActionContext} context the context for this action
          */
-        function AbstractStartTimerAction(now, context) {
+        function PauseTimerAction(now, context) {
             this.domainObject = context.domainObject;
             this.now = now;
         }
 
-        AbstractStartTimerAction.prototype.perform = function () {
+        PauseTimerAction.appliesTo = function (context) {
+            var model =
+                (context.domainObject && context.domainObject.getModel()) ||
+                {};
+
+
+            // We show this variant for timers which have
+            // a target time, or is in a playing state.
+            return model.type === 'timer' &&
+                    model.timerState === 'started';
+        };
+
+        PauseTimerAction.prototype.perform = function () {
             var domainObject = this.domainObject,
                 now = this.now;
 
-            function setTimestamp(model) {
-                model.timestamp = now();
+            function updateModel(model) {
+                model.timerState = 'paused';
+                model.pausedTime = now();
             }
 
-            return domainObject.useCapability('mutation', setTimestamp);
+            return domainObject.useCapability('mutation', updateModel);
         };
 
-        return AbstractStartTimerAction;
+        return PauseTimerAction;
     }
 );

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

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    ['./AbstractStartTimerAction'],
-    function (AbstractStartTimerAction) {
+    [],
+    function () {
 
         /**
          * Implements the "Restart at 0" action.
@@ -30,7 +30,6 @@ define(
          * Behaves the same as (and delegates functionality to)
          * the "Start" action.
          *
-         * @extends {platform/features/clock.AbstractTimerAction}
          * @implements {Action}
          * @memberof platform/features/clock
          * @constructor
@@ -39,24 +38,33 @@ define(
          * @param {ActionContext} context the context for this action
          */
         function RestartTimerAction(now, context) {
-            AbstractStartTimerAction.apply(this, [now, context]);
+            this.domainObject = context.domainObject;
+            this.now = now;
         }
 
-        RestartTimerAction.prototype =
-            Object.create(AbstractStartTimerAction.prototype);
-
         RestartTimerAction.appliesTo = function (context) {
             var model =
                 (context.domainObject && context.domainObject.getModel()) ||
                 {};
 
-            // We show this variant for timers which already have
-            // a target time.
+            // We show this variant for timers which already have a target time.
             return model.type === 'timer' &&
-                    model.timestamp !== undefined;
+                model.timerState !== 'stopped';
+        };
+
+        RestartTimerAction.prototype.perform = function () {
+            var domainObject = this.domainObject,
+                now = this.now;
+
+            function updateModel(model) {
+                model.timestamp = now();
+                model.timerState = 'started';
+                model.pausedTime = undefined;
+            }
+
+            return domainObject.useCapability('mutation', updateModel);
         };
 
         return RestartTimerAction;
-
     }
 );

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

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    ['./AbstractStartTimerAction'],
-    function (AbstractStartTimerAction) {
+    [],
+    function () {
 
         /**
          * Implements the "Start" action for timers.
@@ -30,7 +30,6 @@ define(
          * Sets the reference timestamp in a timer to the current
          * time, such that it begins counting up.
          *
-         * @extends {platform/features/clock.AbstractTimerAction}
          * @implements {Action}
          * @memberof platform/features/clock
          * @constructor
@@ -39,12 +38,10 @@ define(
          * @param {ActionContext} context the context for this action
          */
         function StartTimerAction(now, context) {
-            AbstractStartTimerAction.apply(this, [now, context]);
+            this.domainObject = context.domainObject;
+            this.now = now;
         }
 
-        StartTimerAction.prototype =
-            Object.create(AbstractStartTimerAction.prototype);
-
         StartTimerAction.appliesTo = function (context) {
             var model =
                 (context.domainObject && context.domainObject.getModel()) ||
@@ -53,10 +50,28 @@ define(
             // We show this variant for timers which do not yet have
             // a target time.
             return model.type === 'timer' &&
-                    model.timestamp === undefined;
+                    model.timerState !== 'started';
+        };
+
+        StartTimerAction.prototype.perform = function () {
+            var domainObject = this.domainObject,
+                now = this.now;
+
+            function updateModel(model) {
+                //if we are resuming
+                if (model.pausedTime) {
+                    var timeShift = now() - model.pausedTime;
+                    model.timestamp = model.timestamp + timeShift;
+                } else {
+                    model.timestamp = now();
+                }
+                model.timerState = 'started';
+                model.pausedTime = undefined;
+            }
+
+            return domainObject.useCapability('mutation', updateModel);
         };
 
         return StartTimerAction;
-
     }
 );

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

@@ -0,0 +1,71 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2009-2016, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    [],
+    function () {
+
+        /**
+         * Implements the "Stop" action for timers.
+         *
+         * Sets the reference timestamp in a timer undefined,
+         * such that it is reset and makes no movements.
+         *
+         * @implements {Action}
+         * @memberof platform/features/clock
+         * @constructor
+         * @param {Function} now a function which returns the current
+         *        time (typically wrapping `Date.now`)
+         * @param {ActionContext} context the context for this action
+         */
+        function StopTimerAction(now, context) {
+            this.domainObject = context.domainObject;
+            this.now = now;
+        }
+
+        StopTimerAction.appliesTo = function (context) {
+            var model =
+                (context.domainObject && context.domainObject.getModel()) ||
+                {};
+
+
+            // We show this variant for timers which do not yet have
+            // a target time.
+            return model.type === 'timer' &&
+                    model.timerState !== 'stopped';
+        };
+
+        StopTimerAction.prototype.perform = function () {
+            var domainObject = this.domainObject;
+
+            function updateModel(model) {
+                model.timestamp = undefined;
+                model.timerState = 'stopped';
+                model.pausedTime = undefined;
+            }
+
+            return domainObject.useCapability('mutation', updateModel);
+        };
+
+        return StopTimerAction;
+    }
+);

platform/features/clock/src/controllers/ClockController.js

@@ -20,9 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    ['moment'],
-    function (moment) {
+define([
+    'moment',
+    'moment-timezone'
+    ],
+    function (
+        moment,
+        momentTimezone
+    ) {
 
         /**
          * Controller for views of a Clock domain object.
@@ -37,10 +42,13 @@ define(
             var lastTimestamp,
                 unlisten,
                 timeFormat,
+                zoneName,
                 self = this;
 
             function update() {
-                var m = moment.utc(lastTimestamp);
+                var m = zoneName ?
+                    moment.utc(lastTimestamp).tz(zoneName) : moment.utc(lastTimestamp);
+                self.zoneAbbr = m.zoneAbbr();
                 self.textValue = timeFormat && m.format(timeFormat);
                 self.ampmValue = m.format("A"); // Just the AM or PM part
             }
@@ -50,21 +58,23 @@ define(
                 update();
             }
 
-            function updateFormat(clockFormat) {
+            function updateModel(model) {
                 var baseFormat;
+                if (model !== undefined) {
+                    baseFormat = model.clockFormat[0];
 
-                if (clockFormat !== undefined) {
-                    baseFormat = clockFormat[0];
-
-                    self.use24 = clockFormat[1] === 'clock24';
+                    self.use24 = model.clockFormat[1] === 'clock24';
                     timeFormat = self.use24 ?
                             baseFormat.replace('hh', "HH") : baseFormat;
-
+                    // If wrong timezone is provided, the UTC will be used
+                    zoneName = momentTimezone.tz.names().includes(model.timezone) ?
+                        model.timezone : "UTC";
                     update();
                 }
             }
-            // Pull in the clock format from the domain object model
-            $scope.$watch('model.clockFormat', updateFormat);
+
+            // Pull in the model (clockFormat and timezone) from the domain object model
+            $scope.$watch('model', updateModel);
 
             // Listen for clock ticks ... and stop listening on destroy
             unlisten = tickerService.listen(tick);
@@ -76,7 +86,7 @@ define(
          * @returns {string}
          */
         ClockController.prototype.zone = function () {
-            return "UTC";
+            return this.zoneAbbr;
         };
 
         /**

platform/features/clock/src/controllers/TimerController.js

@@ -42,6 +42,7 @@ define(
                 active = true,
                 relativeTimestamp,
                 lastTimestamp,
+                relativeTimerState,
                 self = this;
 
             function update() {
@@ -51,12 +52,9 @@ define(
                     self.textValue = formatter(timeDelta);
                     self.signValue = timeDelta < 0 ? "-" :
                         timeDelta >= 1000 ? "+" : "";
-                    self.signCssClass = timeDelta < 0 ? "icon-minus" :
-                        timeDelta >= 1000 ? "icon-plus" : "";
                 } else {
                     self.textValue = "";
                     self.signValue = "";
-                    self.signCssClass = "";
                 }
             }
 
@@ -68,19 +66,50 @@ define(
                 relativeTimestamp = timestamp;
             }
 
+            function updateTimerState(timerState) {
+                self.timerState = relativeTimerState = timerState;
+            }
+
+            function updateActions(actionCapability, actionKey) {
+                self.relevantAction = actionCapability &&
+                    actionCapability.getActions(actionKey)[0];
+
+                self.stopAction = relativeTimerState !== 'stopped' ?
+                    actionCapability && actionCapability.getActions('timer.stop')[0] : undefined;
+
+            }
+
+            function isPaused() {
+                return relativeTimerState === 'paused';
+            }
+
+            function handleLegacyTimer(model) {
+                if (model.timerState === undefined) {
+                    model.timerState = model.timestamp === undefined ?
+                        'stopped' : 'started';
+                }
+            }
+
             function updateObject(domainObject) {
-                var model = domainObject.getModel(),
-                    timestamp = model.timestamp,
+                var model = domainObject.getModel();
+                handleLegacyTimer(model);
+
+                var timestamp = model.timestamp,
                     formatKey = model.timerFormat,
+                    timerState = model.timerState,
                     actionCapability = domainObject.getCapability('action'),
-                    actionKey = (timestamp === undefined) ?
-                            'timer.start' : 'timer.restart';
+                    actionKey = (timerState !== 'started') ?
+                        'timer.start' : 'timer.pause';
 
                 updateFormat(formatKey);
                 updateTimestamp(timestamp);
+                updateTimerState(timerState);
+                updateActions(actionCapability, actionKey);
 
-                self.relevantAction = actionCapability &&
-                    actionCapability.getActions(actionKey)[0];
+                //if paused on startup show last known position
+                if (isPaused() && !lastTimestamp) {
+                    lastTimestamp = model.pausedTime;
+                }
 
                 update();
             }
@@ -98,8 +127,16 @@ define(
             function tick() {
                 var lastSign = self.signValue,
                     lastText = self.textValue;
-                lastTimestamp = now();
-                update();
+
+                if (!isPaused()) {
+                    lastTimestamp = now();
+                    update();
+                }
+
+                if (relativeTimerState === undefined) {
+                    handleModification();
+                }
+
                 // We're running in an animation frame, not in a digest cycle.
                 // We need to trigger a digest cycle if our displayable data
                 // changes.
@@ -130,27 +167,27 @@ define(
 
         /**
          * Get the CSS class to display the right icon
-         * for the start/restart button.
-         * @returns {string} cssClass to display
+         * for the start/pause button.
+         * @returns {string} cssclass to display
          */
         TimerController.prototype.buttonCssClass = function () {
             return this.relevantAction ?
-                    this.relevantAction.getMetadata().cssClass : "";
+                this.relevantAction.getMetadata().cssClass : "";
         };
 
         /**
-         * Get the text to show for the start/restart button
+         * Get the text to show for the start/pause button
          * (e.g. in a tooltip)
          * @returns {string} name of the action
          */
         TimerController.prototype.buttonText = function () {
             return this.relevantAction ?
-                    this.relevantAction.getMetadata().name : "";
+                this.relevantAction.getMetadata().name : "";
         };
 
 
         /**
-         * Perform the action associated with the start/restart button.
+         * Perform the action associated with the start/pause button.
          */
         TimerController.prototype.clickButton = function () {
             if (this.relevantAction) {
@@ -159,6 +196,16 @@ define(
             }
         };
 
+        /**
+         * Perform the action associated with the stop button.
+         */
+        TimerController.prototype.clickStopButton = function () {
+            if (this.stopAction) {
+                this.stopAction.perform();
+                this.updateObject(this.$scope.domainObject);
+            }
+        };
+
         /**
          * Get the sign (+ or -) of the current timer value, as
          * displayable text.
@@ -168,15 +215,6 @@ define(
             return this.signValue;
         };
 
-        /**
-         * Get the sign (+ or -) of the current timer value, as
-         * a CSS class.
-         * @returns {string} sign of the current timer value
-         */
-        TimerController.prototype.signClass = function () {
-            return this.signCssClass;
-        };
-
         /**
          * Get the text to display for the current timer value.
          * @returns {string} current timer value

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

@@ -21,28 +21,41 @@
  *****************************************************************************/
 
 define(
-    ["../../src/actions/AbstractStartTimerAction"],
-    function (AbstractStartTimerAction) {
+    ["../../src/actions/PauseTimerAction"],
+    function (PauseTimerAction) {
 
-        describe("A timer's start/restart action", function () {
+        describe("A timer's Pause action", function () {
             var mockNow,
                 mockDomainObject,
                 testModel,
+                testContext,
                 action;
 
             function asPromise(value) {
                 return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
+                        then: function (callback) {
+                            return asPromise(callback(value));
+                        }
+                    };
+            }
+
+            function testState(type, timerState, timestamp, expected) {
+                testModel.type = type;
+                testModel.timerState = timerState;
+                testModel.timestamp = timestamp;
+
+                if (expected) {
+                    expect(PauseTimerAction.appliesTo(testContext)).toBeTruthy();
+                } else {
+                    expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy();
+                }
             }
 
             beforeEach(function () {
                 mockNow = jasmine.createSpy('now');
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
-                    ['getCapability', 'useCapability']
+                    ['getCapability', 'useCapability', 'getModel']
                 );
 
                 mockDomainObject.useCapability.andCallFake(function (c, v) {
@@ -51,24 +64,41 @@ define(
                         return asPromise(true);
                     }
                 });
+                mockDomainObject.getModel.andCallFake(function () {
+                    return testModel;
+                });
 
                 testModel = {};
+                testContext = {domainObject: mockDomainObject};
 
-                action = new AbstractStartTimerAction(mockNow, {
-                    domainObject: mockDomainObject
-                });
+                action = new PauseTimerAction(mockNow, testContext);
             });
 
-            it("updates the model with a timestamp", function () {
+            it("updates the model with a timerState", function () {
+                testModel.timerState = 'started';
+                action.perform();
+                expect(testModel.timerState).toEqual('paused');
+            });
+
+            it("updates the model with a pausedTime", function () {
+                testModel.pausedTime = undefined;
                 mockNow.andReturn(12000);
                 action.perform();
-                expect(testModel.timestamp).toEqual(12000);
+                expect(testModel.pausedTime).toEqual(12000);
             });
 
-            it("does not truncate milliseconds", function () {
-                mockNow.andReturn(42321);
-                action.perform();
-                expect(testModel.timestamp).toEqual(42321);
+            it("applies only to timers in a playing state", function () {
+                //in a stopped state
+                testState('timer', 'stopped', undefined, false);
+
+                //in a paused state
+                testState('timer', 'paused', 12000, false);
+
+                //in a playing state
+                testState('timer', 'started', 12000, true);
+
+                //not a timer
+                testState('clock', 'started', 12000, false);
             });
         });
     }

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

@@ -39,6 +39,18 @@ define(
                 };
             }
 
+            function testState(type, timerState, timestamp, expected) {
+                testModel.type = type;
+                testModel.timerState = timerState;
+                testModel.timestamp = timestamp;
+
+                if (expected) {
+                    expect(RestartTimerAction.appliesTo(testContext)).toBeTruthy();
+                } else {
+                    expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
+                }
+            }
+
             beforeEach(function () {
                 mockNow = jasmine.createSpy('now');
                 mockDomainObject = jasmine.createSpyObj(
@@ -63,23 +75,36 @@ define(
             });
 
             it("updates the model with a timestamp", function () {
+                testModel.pausedTime = 12000;
                 mockNow.andReturn(12000);
                 action.perform();
                 expect(testModel.timestamp).toEqual(12000);
             });
 
-            it("applies only to timers with a target time", function () {
-                testModel.type = 'timer';
-                testModel.timestamp = 12000;
-                expect(RestartTimerAction.appliesTo(testContext)).toBeTruthy();
+            it("updates the model with a pausedTime", function () {
+                testModel.pausedTime = 12000;
+                action.perform();
+                expect(testModel.pausedTime).toEqual(undefined);
+            });
 
-                testModel.type = 'timer';
-                testModel.timestamp = undefined;
-                expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
+            it("updates the model with a timerState", function () {
+                testModel.timerState = 'stopped';
+                action.perform();
+                expect(testModel.timerState).toEqual('started');
+            });
 
-                testModel.type = 'clock';
-                testModel.timestamp = 12000;
-                expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
+            it("applies only to timers in a non-stopped state", function () {
+                //in a stopped state
+                testState('timer', 'stopped', undefined, false);
+
+                //in a paused state
+                testState('timer', 'paused', 12000, true);
+
+                //in a playing state
+                testState('timer', 'started', 12000, true);
+
+                //not a timer
+                testState('clock', 'paused', 12000, false);
             });
         });
     }

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

@@ -33,10 +33,22 @@ define(
 
             function asPromise(value) {
                 return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
+                        then: function (callback) {
+                            return asPromise(callback(value));
+                        }
+                    };
+            }
+
+            function testState(type, timerState, timestamp, expected) {
+                testModel.type = type;
+                testModel.timerState = timerState;
+                testModel.timestamp = timestamp;
+
+                if (expected) {
+                    expect(StartTimerAction.appliesTo(testContext)).toBeTruthy();
+                } else {
+                    expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
+                }
             }
 
             beforeEach(function () {
@@ -57,7 +69,7 @@ define(
                 });
 
                 testModel = {};
-                testContext = { domainObject: mockDomainObject };
+                testContext = {domainObject: mockDomainObject};
 
                 action = new StartTimerAction(mockNow, testContext);
             });
@@ -68,18 +80,30 @@ define(
                 expect(testModel.timestamp).toEqual(12000);
             });
 
-            it("applies only to timers without a target time", function () {
-                testModel.type = 'timer';
-                testModel.timestamp = 12000;
-                expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
+            it("updates the model with a pausedTime", function () {
+                testModel.pausedTime = 12000;
+                action.perform();
+                expect(testModel.pausedTime).toEqual(undefined);
+            });
 
-                testModel.type = 'timer';
-                testModel.timestamp = undefined;
-                expect(StartTimerAction.appliesTo(testContext)).toBeTruthy();
+            it("updates the model with a timerState", function () {
+                testModel.timerState = undefined;
+                action.perform();
+                expect(testModel.timerState).toEqual('started');
+            });
 
-                testModel.type = 'clock';
-                testModel.timestamp = 12000;
-                expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
+            it("applies only to timers not in a playing state", function () {
+                //in a stopped state
+                testState('timer', 'stopped', undefined, true);
+
+                //in a paused state
+                testState('timer', 'paused', 12000, true);
+
+                //in a playing state
+                testState('timer', 'started', 12000, false);
+
+                //not a timer
+                testState('clock', 'paused', 12000, false);
             });
         });
     }

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

@@ -0,0 +1,110 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2009-2016, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    ["../../src/actions/StopTimerAction"],
+    function (StopTimerAction) {
+
+        describe("A timer's stop action", function () {
+            var mockNow,
+                mockDomainObject,
+                testModel,
+                testContext,
+                action;
+
+            function asPromise(value) {
+                return (value || {}).then ? value : {
+                        then: function (callback) {
+                            return asPromise(callback(value));
+                        }
+                    };
+            }
+
+            function testState(type, timerState, timestamp, expected) {
+                testModel.type = type;
+                testModel.timerState = timerState;
+                testModel.timestamp = timestamp;
+
+                if (expected) {
+                    expect(StopTimerAction.appliesTo(testContext)).toBeTruthy();
+                } else {
+                    expect(StopTimerAction.appliesTo(testContext)).toBeFalsy();
+                }
+            }
+
+            beforeEach(function () {
+                mockNow = jasmine.createSpy('now');
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    ['getCapability', 'useCapability', 'getModel']
+                );
+
+                mockDomainObject.useCapability.andCallFake(function (c, v) {
+                    if (c === 'mutation') {
+                        testModel = v(testModel) || testModel;
+                        return asPromise(true);
+                    }
+                });
+                mockDomainObject.getModel.andCallFake(function () {
+                    return testModel;
+                });
+
+                testModel = {};
+                testContext = {domainObject: mockDomainObject};
+
+                action = new StopTimerAction(mockNow, testContext);
+            });
+
+            it("updates the model with a timestamp", function () {
+                mockNow.andReturn(12000);
+                action.perform();
+                expect(testModel.timestamp).toEqual(undefined);
+            });
+
+            it("updates the model with a pausedTime", function () {
+                testModel.pausedTime = 12000;
+                action.perform();
+                expect(testModel.pausedTime).toEqual(undefined);
+            });
+
+            it("updates the model with a timerState", function () {
+                testModel.timerState = 'started';
+                action.perform();
+                expect(testModel.timerState).toEqual('stopped');
+            });
+
+            it("applies only to timers in a non-stopped state", function () {
+                //in a stopped state
+                testState('timer', 'stopped', undefined, false);
+
+                //in a paused state
+                testState('timer', 'paused', 12000, true);
+
+                //in a playing state
+                testState('timer', 'started', 12000, true);
+
+                //not a timer
+                testState('clock', 'paused', 12000, false);
+            });
+        });
+    }
+);

platform/features/clock/test/controllers/ClockControllerSpec.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
+ * Open MCT, Copyright (c) 2009-2017, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -43,9 +43,9 @@ define(
                 controller = new ClockController(mockScope, mockTicker);
             });
 
-            it("watches for clock format from the domain object model", function () {
+            it("watches for model (clockFormat and timezone) from the domain object model", function () {
                 expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "model.clockFormat",
+                    "model",
                     jasmine.any(Function)
                 );
             });
@@ -67,29 +67,35 @@ define(
 
             it("formats using the format string from the model", function () {
                 mockTicker.listen.mostRecentCall.args[0](TEST_TIMESTAMP);
-                mockScope.$watch.mostRecentCall.args[1]([
-                    "YYYY-DDD hh:mm:ss",
-                    "clock24"
-                ]);
+                mockScope.$watch.mostRecentCall.args[1]({
+                    "clockFormat": [
+                        "YYYY-DDD hh:mm:ss",
+                        "clock24"
+                    ],
+                    "timezone": "Canada/Eastern"
+                });
 
-                expect(controller.zone()).toEqual("UTC");
-                expect(controller.text()).toEqual("2015-154 17:56:14");
+                expect(controller.zone()).toEqual("EDT");
+                expect(controller.text()).toEqual("2015-154 13:56:14");
                 expect(controller.ampm()).toEqual("");
             });
 
             it("formats 12-hour time", function () {
                 mockTicker.listen.mostRecentCall.args[0](TEST_TIMESTAMP);
-                mockScope.$watch.mostRecentCall.args[1]([
-                    "YYYY-DDD hh:mm:ss",
-                    "clock12"
-                ]);
+                mockScope.$watch.mostRecentCall.args[1]({
+                    "clockFormat": [
+                        "YYYY-DDD hh:mm:ss",
+                        "clock12"
+                    ],
+                    "timezone": ""
+                });
 
                 expect(controller.zone()).toEqual("UTC");
                 expect(controller.text()).toEqual("2015-154 05:56:14");
                 expect(controller.ampm()).toEqual("PM");
             });
 
-            it("does not throw exceptions when clockFormat is undefined", function () {
+            it("does not throw exceptions when model is undefined", function () {
                 mockTicker.listen.mostRecentCall.args[0](TEST_TIMESTAMP);
                 expect(function () {
                     mockScope.$watch.mostRecentCall.args[1](undefined);

platform/features/clock/test/controllers/TimerControllerSpec.js

@@ -34,13 +34,14 @@ define(
                 mockDomainObject,
                 mockActionCapability,
                 mockStart,
-                mockRestart,
+                mockPause,
+                mockStop,
                 testModel,
                 controller;
 
             function invokeWatch(expr, value) {
                 mockScope.$watch.calls.forEach(function (call) {
-                    if (call.args[0] ===  expr) {
+                    if (call.args[0] === expr) {
                         call.args[1](value);
                     }
                 });
@@ -67,8 +68,12 @@ define(
                     'start',
                     ['getMetadata', 'perform']
                 );
-                mockRestart = jasmine.createSpyObj(
-                    'restart',
+                mockPause = jasmine.createSpyObj(
+                    'paused',
+                    ['getMetadata', 'perform']
+                );
+                mockStop = jasmine.createSpyObj(
+                    'stopped',
                     ['getMetadata', 'perform']
                 );
                 mockNow = jasmine.createSpy('now');
@@ -82,11 +87,14 @@ define(
                 mockActionCapability.getActions.andCallFake(function (k) {
                     return [{
                         'timer.start': mockStart,
-                        'timer.restart': mockRestart
+                        'timer.pause': mockPause,
+                        'timer.stop': mockStop
                     }[k]];
                 });
-                mockStart.getMetadata.andReturn({ cssClass: "icon-play", name: "Start" });
-                mockRestart.getMetadata.andReturn({ cssClass: "icon-refresh", name: "Restart" });
+
+                mockStart.getMetadata.andReturn({cssClass: "icon-play", name: "Start"});
+                mockPause.getMetadata.andReturn({cssClass: "icon-pause", name: "Pause"});
+                mockStop.getMetadata.andReturn({cssClass: "icon-box", name: "Stop"});
                 mockScope.domainObject = mockDomainObject;
 
                 testModel = {};
@@ -144,28 +152,37 @@ define(
                 expect(controller.text()).toEqual("0D 00:00:00");
             });
 
-            it("shows cssClass & name for the applicable start/restart action", function () {
+            it("shows cssClass & name for the applicable start/pause action", function () {
                 invokeWatch('domainObject', mockDomainObject);
                 expect(controller.buttonCssClass()).toEqual("icon-play");
                 expect(controller.buttonText()).toEqual("Start");
 
                 testModel.timestamp = 12321;
+                testModel.timerState = 'started';
                 invokeWatch('model.modified', 1);
-                expect(controller.buttonCssClass()).toEqual("icon-refresh");
-                expect(controller.buttonText()).toEqual("Restart");
+                expect(controller.buttonCssClass()).toEqual("icon-pause");
+                expect(controller.buttonText()).toEqual("Pause");
             });
 
-            it("performs correct start/restart action on click", function () {
+            it("performs correct start/pause/stop action on click", function () {
+                //test start
                 invokeWatch('domainObject', mockDomainObject);
                 expect(mockStart.perform).not.toHaveBeenCalled();
                 controller.clickButton();
                 expect(mockStart.perform).toHaveBeenCalled();
 
+                //test pause
                 testModel.timestamp = 12321;
+                testModel.timerState = 'started';
                 invokeWatch('model.modified', 1);
-                expect(mockRestart.perform).not.toHaveBeenCalled();
+                expect(mockPause.perform).not.toHaveBeenCalled();
                 controller.clickButton();
-                expect(mockRestart.perform).toHaveBeenCalled();
+                expect(mockPause.perform).toHaveBeenCalled();
+
+                //test stop
+                expect(mockStop.perform).not.toHaveBeenCalled();
+                controller.clickStopButton();
+                expect(mockStop.perform).toHaveBeenCalled();
             });
 
             it("stops requesting animation frames when destroyed", function () {

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

@@ -19,7 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global console*/
 
 define(
     [
@@ -98,7 +97,6 @@ define(
             this.validation = new TimeConductorValidation(this.timeAPI);
             this.formatService = formatService;
             this.config = config;
-            this.clocksForTimeSystem = {};
             this.timeSystemsForClocks = {};
             this.$scope.timeSystemModel = {};
             this.$scope.boundsModel = {};
@@ -171,23 +169,20 @@ define(
         TimeConductorController.prototype.selectMenuOption = function (newOption, oldOption) {
             if (newOption !== oldOption) {
                 var config = this.getConfig(this.timeAPI.timeSystem(), newOption.clock);
-
-                /*
-                 * If there is no configuration defined for the selected clock
-                 * and time system default to the first time system that
-                 * configuration is available for.
-                 */
-                if (config === undefined) {
-                    var timeSystem = this.timeSystemsForClocks[newOption.key][0];
-                    this.$scope.timeSystemModel.selected = timeSystem;
-                    this.setTimeSystemFromView(timeSystem.key);
-                    config = this.getConfig(timeSystem, newOption.clock);
+                if (!config) {
+                    // Clock does not support this timeSystem, fallback to first
+                    // option provided for clock.
+                    config = this.config.menuOptions.filter(function (menuOption) {
+                        return menuOption.clock === (newOption.clock && newOption.clock.key);
+                    })[0];
                 }
 
-                if (newOption.key === 'fixed') {
-                    this.timeAPI.stopClock();
+                if (config.clock) {
+                    this.timeAPI.clock(config.clock, config.clockOffsets);
+                    this.timeAPI.timeSystem(config.timeSystem);
                 } else {
-                    this.timeAPI.clock(newOption.key, config.clockOffsets);
+                    this.timeAPI.stopClock();
+                    this.timeAPI.timeSystem(config.timeSystem, config.bounds);
                 }
             }
         };
@@ -209,28 +204,22 @@ define(
                 cssClass: 'icon-calendar'
             }];
             var clocks = {};
-            var clocksForTimeSystem = this.clocksForTimeSystem;
             var timeSystemsForClocks = this.timeSystemsForClocks;
 
             (config.menuOptions || []).forEach(function (menuOption) {
-                var clock = this.getClock(menuOption.clock);
                 var clockKey = menuOption.clock || 'fixed';
+                var clock = this.getClock(clockKey);
+
+                if (clock !== undefined) {
+                    clocks[clock.key] = clock;
+                }
 
                 var timeSystem = this.timeSystems[menuOption.timeSystem];
                 if (timeSystem !== undefined) {
-                    if (clock !== undefined) {
-                        // Use an associative array to built a set of unique
-                        // clocks
-                        clocks[clock.key] = clock;
-                        clocksForTimeSystem[timeSystem.key] = clocksForTimeSystem[timeSystem.key] || [];
-                        clocksForTimeSystem[timeSystem.key].push(clock);
-                    }
                     timeSystemsForClocks[clockKey] = timeSystemsForClocks[clockKey] || [];
                     timeSystemsForClocks[clockKey].push(timeSystem);
-                } else if (menuOption.clock !== undefined) {
-                    console.error('Unknown clock "' + clockKey + '", has it been registered?');
                 }
-            }.bind(this));
+            }, this);
 
             /*
              * Populate the clocks menu with metadata from the available clocks
@@ -362,10 +351,10 @@ define(
          * @param {Clock} clock
          */
         TimeConductorController.prototype.setViewFromClock = function (clock) {
-            var newClockKey = clock && clock.key;
-            var timeSystems = this.timeSystemsForClocks[newClockKey || 'fixed'];
+            var newClockKey = clock ? clock.key : 'fixed';
+            var timeSystems = this.timeSystemsForClocks[newClockKey];
             var menuOption = this.menu.options.filter(function (option) {
-                return option.key === (newClockKey || 'fixed');
+                return option.key === (newClockKey);
             })[0];
 
             this.menu.selected = menuOption;
@@ -394,9 +383,7 @@ define(
 
             this.isFixed = clock === undefined;
 
-            if (clock !== undefined) {
-                this.setViewFromOffsets(this.timeAPI.clockOffsets());
-            } else {
+            if (clock === undefined) {
                 this.setViewFromBounds(this.timeAPI.bounds());
             }
 
@@ -417,34 +404,15 @@ define(
             var clock = this.menu.selected.clock;
             var timeSystem = this.timeSystems[key];
             var config = this.getConfig(timeSystem, clock);
-            var bounds;
 
             this.$scope.timeSystemModel.selected = timeSystem;
+            this.$scope.timeSystemModel.format = timeSystem.timeFormat;
 
-            /**
-             * Time systems require default bounds to be specified when they
-             * are set
-             */
             if (clock === undefined) {
-                bounds = config.bounds;
-                this.timeAPI.timeSystem(timeSystem, bounds);
+                this.timeAPI.timeSystem(timeSystem, config.bounds);
             } else {
-                bounds = {
-                    start: clock.currentValue() + config.clockOffsets.start,
-                    end: clock.currentValue() + config.clockOffsets.end
-                };
-                //Has time system change resulted in offsets change (based on config)?
-                this.timeAPI.timeSystem(timeSystem, bounds);
-                var configOffsets = config.clockOffsets;
-                var apiOffsets = this.timeAPI.clockOffsets();
-
-                //Checking if a clock is actually set on the Time API before
-                // trying to set offsets.
-                if (this.timeAPI.clock() !== undefined &&
-                    (configOffsets.start !== apiOffsets.start ||
-                    configOffsets.end !== apiOffsets.end)) {
-                    this.timeAPI.clockOffsets(configOffsets);
-                }
+                this.timeAPI.clock(clock, config.clockOffsets);
+                this.timeAPI.timeSystem(timeSystem);
             }
         };
 

platform/features/fixed/bundle.js

@@ -142,7 +142,90 @@ define([
                                             "cssClass": "l-input-lg",
                                             "required": true
                                         }
+                                    }
+                                ]
+                            },
+                            {
+                                "items": [
+                                    {
+                                        "property": "editX",
+                                        "text": "X",
+                                        "name": "X",
+                                        "cssClass": "l-input-sm",
+                                        "control": "numberfield",
+                                        "min": "0"
                                     },
+                                    {
+                                        "property": "editY",
+                                        "text": "Y",
+                                        "name": "Y",
+                                        "cssClass": "l-input-sm",
+                                        "control": "numberfield",
+                                        "min": "0"
+                                    },
+                                    {
+                                        "property": "editX1",
+                                        "text": "X1",
+                                        "name": "X1",
+                                        "cssClass": "l-input-sm",
+                                        "control" : "numberfield",
+                                        "min": "0"
+                                    },
+                                    {
+                                        "property": "editY1",
+                                        "text": "Y1",
+                                        "name": "Y1",
+                                        "cssClass": "l-input-sm",
+                                        "control" : "numberfield",
+                                        "min": "0"
+                                    },
+                                    {
+                                        "property": "editX2",
+                                        "text": "X2",
+                                        "name": "X2",
+                                        "cssClass": "l-input-sm",
+                                        "control" : "numberfield",
+                                        "min": "0"
+                                    },
+                                    {
+                                        "property": "editY2",
+                                        "text": "Y2",
+                                        "name": "Y2",
+                                        "cssClass": "l-input-sm",
+                                        "control" : "numberfield",
+                                        "min": "0"
+                                    },
+                                    {
+                                        "property": "editHeight",
+                                        "text": "H",
+                                        "name": "H",
+                                        "cssClass": "l-input-sm",
+                                        "control": "numberfield",
+                                        "description": "Resize object height",
+                                        "min": "1"
+                                    },
+                                    {
+                                        "property": "editWidth",
+                                        "text": "W",
+                                        "name": "W",
+                                        "cssClass": "l-input-sm",
+                                        "control": "numberfield",
+                                        "description": "Resize object width",
+                                        "min": "1"
+                                    }
+                                ]
+                            },
+                            {
+                                "items": [
+                                    {
+                                        "property": "useGrid",
+                                        "name": "Snap to Grid",
+                                        "control": "checkbox"
+                                    }
+                                ]
+                            },
+                            {
+                                "items": [
                                     {
                                         "property": "text",
                                         "cssClass": "icon-gear",

platform/features/imagery/bundle.js

@@ -53,7 +53,10 @@ define([
             "policies": [
                 {
                     "category": "view",
-                    "implementation": ImageryViewPolicy
+                    "implementation": ImageryViewPolicy,
+                    "depends": [
+                        "openmct"
+                    ]
                 }
             ],
             "controllers": [
@@ -62,7 +65,7 @@ define([
                     "implementation": ImageryController,
                     "depends": [
                         "$scope",
-                        "telemetryHandler"
+                        "openmct"
                     ]
                 }
             ],

platform/features/imagery/res/templates/imagery.html

@@ -34,10 +34,8 @@
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="left flex-elem grows">
                 <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
-                    ng-click="showThumbsBubble = (showThumbsBubble)? false:true"></a>
-                <span class="l-timezone">{{imagery.getZone()}}</span>
+                    ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
                 <span class="l-time">{{imagery.getTime()}}</span>
-                <span class="l-date">{{imagery.getDate()}}</span>
             </div>
             <div class="right flex-elem">
                 <a class="s-button pause-play"

platform/features/imagery/src/controllers/ImageryController.js

@@ -28,74 +28,82 @@ define(
     ['moment'],
     function (moment) {
 
-        var DATE_FORMAT = "YYYY-MM-DD",
-            TIME_FORMAT = "HH:mm:ss.SSS";
-
         /**
          * Controller for the "Imagery" view of a domain object which
          * provides image telemetry.
          * @constructor
          * @memberof platform/features/imagery
          */
-        function ImageryController($scope, telemetryHandler) {
-            var self = this;
+        function ImageryController($scope, openmct) {
+            this.$scope = $scope;
+            this.openmct = openmct;
+            this.date = "";
+            this.time = "";
+            this.zone = "";
+            this.imageUrl = "";
 
-            function releaseSubscription() {
-                if (self.handle) {
-                    self.handle.unsubscribe();
-                    self.handle = undefined;
-                }
-            }
-
-            function updateValuesCallback() {
-                return self.updateValues();
-            }
-
-            // Create a new subscription; telemetrySubscriber gets
-            // to do the meaningful work here.
-            function subscribe(domainObject) {
-                releaseSubscription();
-                self.date = "";
-                self.time = "";
-                self.zone = "";
-                self.imageUrl = "";
-                self.handle = domainObject && telemetryHandler.handle(
-                    domainObject,
-                    updateValuesCallback,
-                    true // Lossless
-                );
-            }
-
-            $scope.filters = {
+            this.$scope.filters = {
                 brightness: 100,
                 contrast: 100
             };
 
+            this.subscribe = this.subscribe.bind(this);
+            this.stopListening = this.stopListening.bind(this);
+            this.updateValues = this.updateValues.bind(this);
+
             // Subscribe to telemetry when a domain object becomes available
-            $scope.$watch('domainObject', subscribe);
+            this.subscribe(this.$scope.domainObject);
 
             // Unsubscribe when the plot is destroyed
-            $scope.$on("$destroy", releaseSubscription);
+            this.$scope.$on("$destroy", this.stopListening);
         }
 
-        // Update displayable values to reflect latest image telemetry
-        ImageryController.prototype.updateValues = function () {
-            var imageObject =
-                    this.handle && this.handle.getTelemetryObjects()[0],
-                timestamp,
-                m;
-            if (imageObject && !this.isPaused) {
-                timestamp = this.handle.getDomainValue(imageObject);
-                m = timestamp !== undefined ?
-                        moment.utc(timestamp) :
-                        undefined;
-                this.date = m ? m.format(DATE_FORMAT) : "";
-                this.time = m ? m.format(TIME_FORMAT) : "";
-                this.zone = m ? "UTC" : "";
-                this.imageUrl = this.handle.getRangeValue(imageObject);
+        ImageryController.prototype.subscribe = function (domainObject) {
+            this.date = "";
+            this.imageUrl = "";
+            this.openmct.objects.get(domainObject.getId())
+                .then(function (object) {
+                    this.domainObject = object;
+                    var metadata = this.openmct
+                        .telemetry
+                        .getMetadata(this.domainObject);
+                    var timeKey = this.openmct.time.timeSystem().key;
+                    this.timeFormat = this.openmct
+                        .telemetry
+                        .getValueFormatter(metadata.value(timeKey));
+                    this.imageFormat = this.openmct
+                        .telemetry
+                        .getValueFormatter(metadata.valuesForHints(['image'])[0]);
+                    this.unsubscribe = this.openmct.telemetry
+                        .subscribe(this.domainObject, this.updateValues);
+                    this.openmct.telemetry
+                        .request(this.domainObject, {
+                            strategy: 'latest',
+                            size: 1
+                        })
+                        .then(function (values) {
+                            this.updateValues(values[0]);
+                        }.bind(this));
+                }.bind(this));
+        };
+
+        ImageryController.prototype.stopListening = function () {
+            if (this.unsubscribe) {
+                this.unsubscribe();
+                delete this.unsubscribe;
             }
         };
 
+        // Update displayable values to reflect latest image telemetry
+        ImageryController.prototype.updateValues = function (datum) {
+            if (this.isPaused) {
+                this.nextDatum = datum;
+                return;
+            }
+            this.time = this.timeFormat.format(datum);
+            this.imageUrl = this.imageFormat.format(datum);
+        };
+
         /**
          * Get the time portion (hours, minutes, seconds) of the
          * timestamp associated with the incoming image telemetry.
@@ -105,25 +113,6 @@ define(
             return this.time;
         };
 
-        /**
-         * Get the date portion (month, year) of the
-         * timestamp associated with the incoming image telemetry.
-         * @returns {string} the date
-         */
-        ImageryController.prototype.getDate = function () {
-            return this.date;
-        };
-
-        /**
-         * Get the time zone for the displayed time/date corresponding
-         * to the timestamp associated with the incoming image
-         * telemetry.
-         * @returns {string} the time
-         */
-        ImageryController.prototype.getZone = function () {
-            return this.zone;
-        };
-
         /**
          * Get the URL of the image telemetry to display.
          * @returns {string} URL for telemetry image
@@ -141,8 +130,10 @@ define(
         ImageryController.prototype.paused = function (state) {
             if (arguments.length > 0 && state !== this.isPaused) {
                 this.isPaused = state;
-                // Switch to latest image
-                this.updateValues();
+                if (this.nextDatum) {
+                    this.updateValues(this.nextDatum);
+                    delete this.nextDatum;
+                }
             }
             return this.isPaused;
         };
@@ -150,4 +141,3 @@ define(
         return ImageryController;
     }
 );
-

platform/features/imagery/src/policies/ImageryViewPolicy.js

@@ -20,39 +20,40 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    function () {
-
-        /**
-         * Policy preventing the Imagery view from being made available for
-         * domain objects which do not have associated image telemetry.
-         * @implements {Policy.<View, DomainObject>}
-         * @constructor
-         */
-        function ImageryViewPolicy() {
-        }
-
-        function hasImageTelemetry(domainObject) {
-            var telemetry = domainObject &&
-                    domainObject.getCapability('telemetry'),
-                metadata = telemetry ? telemetry.getMetadata() : {},
-                ranges = metadata.ranges || [];
-
-            return ranges.some(function (range) {
-                return range.format === 'imageUrl' ||
-                    range.format === 'image';
-            });
-        }
-
-        ImageryViewPolicy.prototype.allow = function (view, domainObject) {
-            if (view.key === 'imagery') {
-                return hasImageTelemetry(domainObject);
-            }
-
-            return true;
-        };
-
-        return ImageryViewPolicy;
+define([
+    '../../../../../src/api/objects/object-utils'
+], function (
+    objectUtils
+) {
+    /**
+     * Policy preventing the Imagery view from being made available for
+     * domain objects which do not have associated image telemetry.
+     * @implements {Policy.<View, DomainObject>}
+     * @constructor
+     */
+    function ImageryViewPolicy(openmct) {
+        this.openmct = openmct;
     }
-);
+
+    ImageryViewPolicy.prototype.hasImageTelemetry = function (domainObject) {
+        var newDO = objectUtils.toNewFormat(
+            domainObject.getModel(),
+            domainObject.getId()
+        );
+
+        var metadata = this.openmct.telemetry.getMetadata(newDO);
+        var values = metadata.valuesForHints(['image']);
+        return values.length >= 1;
+    };
+
+    ImageryViewPolicy.prototype.allow = function (view, domainObject) {
+        if (view.key === 'imagery') {
+            return this.hasImageTelemetry(domainObject);
+        }
+
+        return true;
+    };
+
+    return ImageryViewPolicy;
+});
 

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

@@ -25,137 +25,161 @@ define(
     function (ImageryController) {
 
         describe("The Imagery controller", function () {
-            var mockScope,
-                mockTelemetryHandler,
-                mockHandle,
-                mockDomainObject,
-                controller;
-
-            function invokeWatch(expr, value) {
-                mockScope.$watch.calls.forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
+            var $scope,
+                openmct,
+                oldDomainObject,
+                newDomainObject,
+                unsubscribe,
+                metadata,
+                prefix,
+                controller,
+                hasLoaded;
 
             beforeEach(function () {
-                mockScope = jasmine.createSpyObj('$scope', ['$on', '$watch']);
-                mockTelemetryHandler = jasmine.createSpyObj(
-                    'telemetryHandler',
-                    ['handle']
-                );
-                mockHandle = jasmine.createSpyObj(
-                    'handle',
-                    [
-                        'getDomainValue',
-                        'getRangeValue',
-                        'getTelemetryObjects',
-                        'unsubscribe'
-                    ]
-                );
-                mockDomainObject = jasmine.createSpyObj(
+                $scope = jasmine.createSpyObj('$scope', ['$on', '$watch']);
+                oldDomainObject = jasmine.createSpyObj(
                     'domainObject',
-                    ['getId', 'getModel', 'getCapability']
+                    ['getId']
                 );
+                newDomainObject = { name: 'foo' };
 
-                mockTelemetryHandler.handle.andReturn(mockHandle);
-                mockHandle.getTelemetryObjects.andReturn([mockDomainObject]);
-
-                controller = new ImageryController(
-                    mockScope,
-                    mockTelemetryHandler
-                );
-                invokeWatch('domainObject', mockDomainObject);
-            });
-
-            it("unsubscribes when scope is destroyed", function () {
-                expect(mockHandle.unsubscribe).not.toHaveBeenCalled();
-
-                // Find the $destroy listener and call it
-                mockScope.$on.calls.forEach(function (call) {
-                    if (call.args[0] === '$destroy') {
-                        call.args[1]();
-                    }
+                oldDomainObject.getId.andReturn('testID');
+                openmct = {
+                    objects: jasmine.createSpyObj('objectAPI', [
+                        'get'
+                    ]),
+                    time: jasmine.createSpyObj('timeAPI', [
+                        'timeSystem'
+                    ]),
+                    telemetry: jasmine.createSpyObj('telemetryAPI', [
+                        'subscribe',
+                        'request',
+                        'getValueFormatter',
+                        'getMetadata'
+                    ])
+                };
+                metadata = jasmine.createSpyObj('metadata', [
+                    'value',
+                    'valuesForHints'
+                ]);
+                prefix = "formatted ";
+                unsubscribe = jasmine.createSpy('unsubscribe');
+                openmct.telemetry.subscribe.andReturn(unsubscribe);
+                openmct.time.timeSystem.andReturn({
+                    key: 'testKey'
                 });
-                expect(mockHandle.unsubscribe).toHaveBeenCalled();
+                $scope.domainObject = oldDomainObject;
+                openmct.objects.get.andReturn(Promise.resolve(newDomainObject));
+                openmct.telemetry.getMetadata.andReturn(metadata);
+                openmct.telemetry.getValueFormatter.andCallFake(function (property) {
+                    var formatter =
+                        jasmine.createSpyObj("formatter-" + property, ['format']);
+                    var isTime = (property === "timestamp");
+                    formatter.format.andCallFake(function (datum) {
+                        return (isTime ? prefix : "") + datum[property];
+                    });
+                    return formatter;
+                });
+                hasLoaded = false;
+                openmct.telemetry.request.andCallFake(function () {
+                    setTimeout(function () {
+                        hasLoaded = true;
+                    }, 10);
+                    return Promise.resolve([{
+                            timestamp: 1434600258123,
+                            value: 'some/url'
+                        }]);
+                });
+                metadata.value.andReturn("timestamp");
+                metadata.valuesForHints.andReturn(["value"]);
+
+                controller = new ImageryController($scope, openmct);
+
             });
 
-            it("exposes the latest telemetry values", function () {
-                // 06/18/2015 4:04am UTC
-                var testTimestamp = 1434600258123,
-                    testUrl = "some/url",
-                    nextTimestamp = 1434600259456, // 4:05.456
-                    nextUrl = "some/other/url";
+            describe("when loaded", function () {
+                var callback;
+                beforeEach(function () {
+                    waitsFor(function () {
+                        return hasLoaded;
+                    }, 500);
 
-                mockHandle.getDomainValue.andReturn(testTimestamp);
-                mockHandle.getRangeValue.andReturn(testUrl);
 
-                // Call the subscription listener
-                mockTelemetryHandler.handle.mostRecentCall.args[1]();
+                    runs(function () {
+                        callback =
+                            openmct.telemetry.subscribe.mostRecentCall.args[1];
+                    });
+                });
 
-                expect(controller.getTime()).toEqual("04:04:18.123");
-                expect(controller.getDate()).toEqual("2015-06-18");
-                expect(controller.getZone()).toEqual("UTC");
-                expect(controller.getImageUrl()).toEqual(testUrl);
 
-                mockHandle.getDomainValue.andReturn(nextTimestamp);
-                mockHandle.getRangeValue.andReturn(nextUrl);
-                mockTelemetryHandler.handle.mostRecentCall.args[1]();
+                it("uses LAD telemetry", function () {
+                    expect(openmct.telemetry.request).toHaveBeenCalledWith(
+                        newDomainObject,
+                        {
+                            strategy: 'latest',
+                            size: 1
+                        }
+                    );
+                    expect(controller.getTime()).toEqual(prefix + 1434600258123);
+                    expect(controller.getImageUrl()).toEqual('some/url');
+                });
 
-                expect(controller.getTime()).toEqual("04:04:19.456");
-                expect(controller.getDate()).toEqual("2015-06-18");
-                expect(controller.getZone()).toEqual("UTC");
-                expect(controller.getImageUrl()).toEqual(nextUrl);
-            });
 
-            it("allows updates to be paused", function () {
-                // 06/18/2015 4:04am UTC
-                var testTimestamp = 1434600258123,
-                    testUrl = "some/url",
-                    nextTimestamp = 1434600259456, // 4:05.456
-                    nextUrl = "some/other/url";
+                it("exposes the latest telemetry values", function () {
+                    callback({
+                        timestamp: 1434600259456,
+                        value: "some/other/url"
+                    });
 
-                // As above, but pause in between. Expect details
-                // not to change this time
+                    expect(controller.getTime()).toEqual(prefix + 1434600259456);
+                    expect(controller.getImageUrl()).toEqual("some/other/url");
+                });
 
-                mockHandle.getDomainValue.andReturn(testTimestamp);
-                mockHandle.getRangeValue.andReturn(testUrl);
+                it("allows updates to be paused and unpaused", function () {
+                    var newTimestamp = 1434600259456,
+                        newUrl = "some/other/url",
+                        initialTimestamp = controller.getTime(),
+                        initialUrl = controller.getImageUrl();
 
-                // Call the subscription listener
-                mockTelemetryHandler.handle.mostRecentCall.args[1]();
+                    expect(initialTimestamp).not.toBe(prefix + newTimestamp);
+                    expect(initialUrl).not.toBe(newUrl);
+                    expect(controller.paused()).toBeFalsy();
 
-                expect(controller.getTime()).toEqual("04:04:18.123");
-                expect(controller.getDate()).toEqual("2015-06-18");
-                expect(controller.getZone()).toEqual("UTC");
-                expect(controller.getImageUrl()).toEqual(testUrl);
+                    controller.paused(true);
+                    expect(controller.paused()).toBeTruthy();
+                    callback({ timestamp: newTimestamp, value: newUrl });
 
-                expect(controller.paused()).toBeFalsy();
-                controller.paused(true); // Pause!
-                expect(controller.paused()).toBeTruthy();
+                    expect(controller.getTime()).toEqual(initialTimestamp);
+                    expect(controller.getImageUrl()).toEqual(initialUrl);
 
-                mockHandle.getDomainValue.andReturn(nextTimestamp);
-                mockHandle.getRangeValue.andReturn(nextUrl);
-                mockTelemetryHandler.handle.mostRecentCall.args[1]();
+                    controller.paused(false);
+                    expect(controller.paused()).toBeFalsy();
+                    expect(controller.getTime()).toEqual(prefix + newTimestamp);
+                    expect(controller.getImageUrl()).toEqual(newUrl);
+                });
 
-                expect(controller.getTime()).toEqual("04:04:18.123");
-                expect(controller.getDate()).toEqual("2015-06-18");
-                expect(controller.getZone()).toEqual("UTC");
-                expect(controller.getImageUrl()).toEqual(testUrl);
+                it("subscribes to telemetry", function () {
+                    expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
+                        newDomainObject,
+                        jasmine.any(Function)
+                    );
+                });
+
+                it("unsubscribes when scope is destroyed", function () {
+                    expect(unsubscribe).not.toHaveBeenCalled();
+
+                    $scope.$on.calls.forEach(function (call) {
+                        if (call.args[0] === '$destroy') {
+                            call.args[1]();
+                        }
+                    });
+                    expect(unsubscribe).toHaveBeenCalled();
+                });
             });
 
             it("initially shows an empty string for date/time", function () {
-                // Call the subscription listener while domain/range
-                // values are still undefined
-                mockHandle.getDomainValue.andReturn(undefined);
-                mockHandle.getRangeValue.andReturn(undefined);
-                mockTelemetryHandler.handle.mostRecentCall.args[1]();
-
-                // Should have empty strings for date/time/zone
                 expect(controller.getTime()).toEqual("");
-                expect(controller.getDate()).toEqual("");
-                expect(controller.getZone()).toEqual("");
-                expect(controller.getImageUrl()).toBeUndefined();
+                expect(controller.getImageUrl()).toEqual("");
             });
         });
     }

platform/features/imagery/test/policies/ImageryViewPolicySpec.js

@@ -26,14 +26,17 @@ define(
 
         describe("Imagery view policy", function () {
             var testView,
+                openmct,
                 mockDomainObject,
                 mockTelemetry,
-                testMetadata,
+                mockMetadata,
                 policy;
 
             beforeEach(function () {
                 testView = { key: "imagery" };
-                testMetadata = {};
+                mockMetadata = jasmine.createSpyObj('metadata', [
+                    "valuesForHints"
+                ]);
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
                     ['getId', 'getModel', 'getCapability']
@@ -45,30 +48,33 @@ define(
                 mockDomainObject.getCapability.andCallFake(function (c) {
                     return c === 'telemetry' ? mockTelemetry : undefined;
                 });
-                mockTelemetry.getMetadata.andReturn(testMetadata);
+                mockDomainObject.getId.andReturn("some-id");
+                mockDomainObject.getModel.andReturn({ name: "foo" });
+                mockTelemetry.getMetadata.andReturn(mockMetadata);
+                mockMetadata.valuesForHints.andReturn(["bar"]);
 
-                policy = new ImageryViewPolicy();
+                openmct = { telemetry: mockTelemetry };
+
+                policy = new ImageryViewPolicy(openmct);
+            });
+
+            it("checks for hints indicating image telemetry", function () {
+                policy.allow(testView, mockDomainObject);
+                expect(mockMetadata.valuesForHints)
+                    .toHaveBeenCalledWith(["image"]);
             });
 
             it("allows the imagery view for domain objects with image telemetry", function () {
-                testMetadata.ranges = [{ key: "foo", format: "imageUrl" }];
                 expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
             });
 
             it("disallows the imagery view for domain objects without image telemetry", function () {
-                testMetadata.ranges = [{ key: "foo", format: "somethingElse" }];
-                expect(policy.allow(testView, mockDomainObject)).toBeFalsy();
-            });
-
-            it("disallows the imagery view for domain objects without telemetry", function () {
-                testMetadata.ranges = [{ key: "foo", format: "imageUrl" }];
-                mockDomainObject.getCapability.andReturn(undefined);
+                mockMetadata.valuesForHints.andReturn([]);
                 expect(policy.allow(testView, mockDomainObject)).toBeFalsy();
             });
 
             it("allows other views", function () {
                 testView.key = "somethingElse";
-                testMetadata.ranges = [{ key: "foo", format: "somethingElse" }];
                 expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
             });
 

platform/features/layout/bundle.js

@@ -24,6 +24,7 @@ define([
     "./src/LayoutController",
     "./src/FixedController",
     "./src/LayoutCompositionPolicy",
+    './src/MCTTriggerModal',
     "text!./res/templates/layout.html",
     "text!./res/templates/fixed.html",
     "text!./res/templates/frame.html",
@@ -37,6 +38,7 @@ define([
     LayoutController,
     FixedController,
     LayoutCompositionPolicy,
+    MCTTriggerModal,
     layoutTemplate,
     fixedTemplate,
     frameTemplate,
@@ -222,6 +224,15 @@ define([
                     "template": frameTemplate
                 }
             ],
+            "directives": [
+                {
+                    "key": "mctTriggerModal",
+                    "implementation": MCTTriggerModal,
+                    "depends": [
+                        "$document"
+                    ]
+                }
+            ],
             "controllers": [
                 {
                     "key": "LayoutController",
@@ -301,6 +312,46 @@ define([
                             "conversion": "number[]"
                         }
                     ]
+                },
+                {
+                    "key": "telemetry.panel",
+                    "name": "Telemetry Panel",
+                    "cssClass": "icon-telemetry-panel",
+                    "description": "A panel for collecting telemetry elements.",
+                    "priority": 899,
+                    "delegates": [
+                        "telemetry"
+                    ],
+                    "features": "creation",
+                    "contains": [
+                        {
+                            "has": "telemetry"
+                        }
+                    ],
+                    "model": {
+                        "composition": []
+                    },
+                    "properties": [
+                        {
+                            "name": "Layout Grid",
+                            "control": "composite",
+                            "items": [
+                                {
+                                    "name": "Horizontal grid (px)",
+                                    "control": "textfield",
+                                    "cssClass": "l-input-sm l-numeric"
+                                },
+                                {
+                                    "name": "Vertical grid (px)",
+                                    "control": "textfield",
+                                    "cssClass": "l-input-sm l-numeric"
+                                }
+                            ],
+                            "pattern": "^(\\d*[1-9]\\d*)?$",
+                            "property": "layoutGrid",
+                            "conversion": "number[]"
+                        }
+                    ]
                 }
             ]
         }

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

@@ -19,12 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<svg ng-attr-width="{{parameters.gridSize[0] * ngModel.width()}}"
-     ng-attr-height="{{parameters.gridSize[1] * ngModel.height()}}">
-    <line ng-attr-x1="{{parameters.gridSize[0] * ngModel.x1() + 1}}"
-          ng-attr-y1="{{parameters.gridSize[1] * ngModel.y1() + 1}}"
-          ng-attr-x2="{{parameters.gridSize[0] * ngModel.x2() + 1}}"
-          ng-attr-y2="{{parameters.gridSize[1] * ngModel.y2() + 1}}"
+<svg ng-attr-width="{{ngModel.getGridSize()[0] * ngModel.width()}}"
+     ng-attr-height="{{ngModel.getGridSize()[1] * ngModel.height()}}">
+    <line ng-attr-x1="{{ngModel.getGridSize()[0] * ngModel.x1() + 1}}"
+          ng-attr-y1="{{ngModel.getGridSize()[1] * ngModel.y1() + 1}}"
+          ng-attr-x2="{{ngModel.getGridSize()[0] * ngModel.x2() + 1}}"
+          ng-attr-y2="{{ngModel.getGridSize()[1] * ngModel.y2() + 1}}"
           ng-attr-stroke="{{ngModel.stroke()}}"
           stroke-width="2">
     </line>

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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="frame frame-template abs">
-    <div class="abs object-top-bar l-flex-row">
+    <div class="abs object-browse-bar l-flex-row">
         <div class="left flex-elem l-flex-row grows">
             <mct-representation
                 key="'object-header'"

platform/features/layout/src/FixedController.js

@@ -75,7 +75,7 @@ define(
             // Convert from element x/y/width/height to an
             // appropriate ng-style argument, to position elements.
             function convertPosition(elementProxy) {
-                var gridSize = self.gridSize;
+                var gridSize = elementProxy.getGridSize();
                 // Multiply position/dimensions by grid size
                 return {
                     left: (gridSize[0] * elementProxy.x()) + 'px',
@@ -114,6 +114,7 @@ define(
                 self.gridSize = layoutGrid;
 
                 self.elementProxies.forEach(function (elementProxy) {
+                    elementProxy.setGridSize(self.gridSize);
                     elementProxy.style = convertPosition(elementProxy);
                 });
             }
@@ -121,7 +122,7 @@ define(
             // Decorate an element for display
             function makeProxyElement(element, index, elements) {
                 var ElementProxy = ElementProxies[element.type],
-                    e = ElementProxy && new ElementProxy(element, index, elements);
+                    e = ElementProxy && new ElementProxy(element, index, elements, self.gridSize);
 
                 if (e) {
                     // Provide a displayable position (convert from grid to px)
@@ -254,7 +255,8 @@ define(
                     color: "",
                     titled: true,
                     width: DEFAULT_DIMENSIONS[0],
-                    height: DEFAULT_DIMENSIONS[1]
+                    height: DEFAULT_DIMENSIONS[1],
+                    useGrid: true
                 });
 
                 //Re-initialize objects, and subscribe to new object
@@ -518,4 +520,3 @@ define(
         return FixedController;
     }
 );
-

platform/features/layout/src/FixedDragHandle.js

@@ -47,9 +47,10 @@ define(
          * @memberof platform/features/layout.FixedDragHandle#
          */
         FixedDragHandle.prototype.style = function () {
+            var gridSize = this.elementHandle.getGridSize();
             // Adjust from grid to pixel coordinates
-            var x = this.elementHandle.x() * this.gridSize[0],
-                y = this.elementHandle.y() * this.gridSize[1];
+            var x = this.elementHandle.x() * gridSize[0],
+                y = this.elementHandle.y() * gridSize[1];
 
             // Convert to a CSS style centered on that point
             return {
@@ -78,13 +79,14 @@ define(
          *                   started
          */
         FixedDragHandle.prototype.continueDrag = function (delta) {
+            var gridSize = this.elementHandle.getGridSize();
             if (this.dragging) {
                 // Update x/y positions (snapping to grid)
                 this.elementHandle.x(
-                    this.dragging.x + Math.round(delta[0] / this.gridSize[0])
+                    this.dragging.x + Math.round(delta[0] / gridSize[0])
                 );
                 this.elementHandle.y(
-                    this.dragging.y + Math.round(delta[1] / this.gridSize[1])
+                    this.dragging.y + Math.round(delta[1] / gridSize[1])
                 );
                 // Invoke update callback
                 if (this.update) {

platform/features/layout/src/FixedProxy.js

@@ -61,6 +61,7 @@ define(
                 element.width = element.width || 1;
                 element.height = element.height || 1;
                 element.type = type;
+                element.useGrid = true;
 
                 // Finally, add it to the view's configuration
                 addElementCallback(element);

platform/features/layout/src/MCTTriggerModal.js

@@ -0,0 +1,137 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2016, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    'zepto'
+], function (
+    $
+) {
+
+    var OVERLAY_TEMPLATE = '' +
+'<div class="abs overlay l-large-view">' +
+'    <div class="abs blocker"></div>' +
+'    <div class="abs outer-holder">' +
+'       <a class="close icon-x-in-circle"></a>' +
+'       <div class="abs inner-holder l-flex-col">' +
+'           <div class="t-contents flex-elem holder grows"></div>' +
+'           <div class="bottom-bar flex-elem holder">' +
+'               <a class="t-done s-button major">Done</a>' +
+'           </div>' +
+'       </div>' +
+'    </div>' +
+'</div>';
+
+    /**
+     * MCT Trigger Modal is intended for use in only one location: inside the
+     * object-header to allow views in a layout to be popped out in a modal.
+     * Users can close the modal and go back to normal, and everything generally
+     * just works fine.
+     *
+     * This code is sensitive to how our html is constructed-- particularly with
+     * how it locates the the container of an element in a layout. However, it
+     * should be able to handle slight relocations so long as it is always a
+     * descendent of a `.frame` element.
+     */
+    function MCTTriggerModal($document) {
+        var document = $document[0];
+
+        function link($scope, $element) {
+            var frame = $element.parent();
+
+            for (var i = 0; i < 10; i++) {
+                if (frame.hasClass('frame')) {
+                    break;
+                }
+                frame = frame.parent();
+            }
+            if (!frame.hasClass('frame')) {
+                $element.remove();
+                return;
+            }
+
+            frame = frame[0];
+            var layoutContainer = frame.parentElement,
+                isOpen = false,
+                toggleOverlay,
+                overlay,
+                closeButton,
+                doneButton,
+                blocker,
+                overlayContainer;
+
+            function openOverlay() {
+                // Remove frame classes from being applied in a non-frame context
+                $(frame).removeClass('frame frame-template');
+                overlay = document.createElement('span');
+                overlay.innerHTML = OVERLAY_TEMPLATE;
+                overlayContainer = overlay.querySelector('.t-contents');
+                closeButton = overlay.querySelector('a.close');
+                closeButton.addEventListener('click', toggleOverlay);
+                doneButton = overlay.querySelector('a.t-done');
+                doneButton.addEventListener('click', toggleOverlay);
+                blocker = overlay.querySelector('.abs.blocker');
+                blocker.addEventListener('click', toggleOverlay);
+                document.body.appendChild(overlay);
+                layoutContainer.removeChild(frame);
+                overlayContainer.appendChild(frame);
+            }
+
+            function closeOverlay() {
+                $(frame).addClass('frame frame-template');
+                overlayContainer.removeChild(frame);
+                layoutContainer.appendChild(frame);
+                document.body.removeChild(overlay);
+                closeButton.removeEventListener('click', toggleOverlay);
+                closeButton = undefined;
+                doneButton.removeEventListener('click', toggleOverlay);
+                doneButton = undefined;
+                blocker.removeEventListener('click', toggleOverlay);
+                blocker = undefined;
+                overlayContainer = undefined;
+                overlay = undefined;
+            }
+
+            toggleOverlay = function () {
+                if (!isOpen) {
+                    openOverlay();
+                    isOpen = true;
+                } else {
+                    closeOverlay();
+                    isOpen = false;
+                }
+            };
+
+            $element.on('click', toggleOverlay);
+            $scope.$on('$destroy', function () {
+                $element.off('click', toggleOverlay);
+            });
+        }
+
+        return {
+            restrict: 'A',
+            link: link
+        };
+    }
+
+    return MCTTriggerModal;
+
+});

platform/features/layout/src/elements/BoxProxy.js

@@ -37,10 +37,11 @@ define(
          * @param element the fixed position element, as stored in its
          *        configuration
          * @param index the element's index within its array
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
          * @param {Array} elements the full array of elements
          */
-        function BoxProxy(element, index, elements) {
-            var proxy = new ElementProxy(element, index, elements);
+        function BoxProxy(element, index, elements, gridSize) {
+            var proxy = new ElementProxy(element, index, elements, gridSize);
 
             /**
              * Get/set this element's fill color. (Omitting the
@@ -52,6 +53,12 @@ define(
              */
             proxy.fill = new AccessorMutator(element, 'fill');
 
+            //Expose x,y, width and height for editing
+            proxy.editWidth = new AccessorMutator(element, 'width');
+            proxy.editHeight = new AccessorMutator(element, 'height');
+            proxy.editX = new AccessorMutator(element, 'x');
+            proxy.editY = new AccessorMutator(element, 'y');
+
             return proxy;
         }
 

platform/features/layout/src/elements/ElementProxy.js

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    ['./AccessorMutator', './ResizeHandle'],
-    function (AccessorMutator, ResizeHandle) {
+    ['./AccessorMutator', './ResizeHandle', './UnitAccessorMutator'],
+    function (AccessorMutator, ResizeHandle, UnitAccessorMutator) {
 
         // Index deltas for changes in order
         var ORDERS = {
@@ -32,6 +32,10 @@ define(
             bottom: Number.NEGATIVE_INFINITY
         };
 
+        // Mininmum pixel height and width for objects
+        var MIN_WIDTH = 10;
+        var MIN_HEIGHT = 10;
+
         // Ensure a value is non-negative (for x/y setters)
         function clamp(value) {
             return Math.max(value, 0);
@@ -51,17 +55,29 @@ define(
          * @param element the fixed position element, as stored in its
          *        configuration
          * @param index the element's index within its array
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
          * @param {Array} elements the full array of elements
          */
-        function ElementProxy(element, index, elements) {
-            this.resizeHandles = [new ResizeHandle(element, 1, 1)];
-
+        function ElementProxy(element, index, elements, gridSize) {
             /**
              * The element as stored in the view configuration.
              * @memberof platform/features/layout.ElementProxy#
              */
             this.element = element;
 
+            /**
+             * The current grid size of the layout.
+             * @memberof platform/features/layout.ElementProxy#
+             */
+            this.gridSize = gridSize || [1,1]; //Ensure a reasonable default
+
+            this.resizeHandles = [new ResizeHandle(
+                                    this.element,
+                                    this.getMinWidth(),
+                                    this.getMinHeight(),
+                                    this.getGridSize()
+                                  )];
+
             /**
              * Get and/or set the x position of this element.
              * Units are in fixed position grid space.
@@ -106,6 +122,8 @@ define(
              */
             this.height = new AccessorMutator(element, 'height');
 
+            this.useGrid = new UnitAccessorMutator(this);
+
             this.index = index;
             this.elements = elements;
         }
@@ -156,6 +174,51 @@ define(
             return this.resizeHandles;
         };
 
+        /**
+         * Returns which grid size the element is currently using.
+         * @return {number[]} The current grid size in [x,y] form if the element
+         *                    is currently using the grid, [1,1] if it is using
+         *                    pixels.
+         */
+        ElementProxy.prototype.getGridSize = function () {
+            var gridSize;
+            // Default to using the grid if useGrid was not defined
+            if (typeof this.element.useGrid === 'undefined') {
+                this.element.useGrid = true;
+            }
+            if (this.element.useGrid) {
+                gridSize = this.gridSize;
+            } else {
+                gridSize = [1,1];
+            }
+            return gridSize;
+        };
+
+        /**
+         * Set the current grid size stored by this element proxy
+         * @param {number[]} gridSize The current layout grid size in [x,y] form
+         */
+        ElementProxy.prototype.setGridSize = function (gridSize) {
+            this.gridSize = gridSize;
+        };
+
+        /**
+         * Get the current minimum element width in grid units
+         * @return {number} The current minimum element width
+         */
+        ElementProxy.prototype.getMinWidth = function () {
+            return Math.ceil(MIN_WIDTH / this.getGridSize()[0]);
+
+        };
+
+        /**
+         * Get the current minimum element height in grid units
+         * @return {number} The current minimum element height
+         */
+        ElementProxy.prototype.getMinHeight = function () {
+            return Math.ceil(MIN_HEIGHT / this.getGridSize()[1]);
+        };
+
         return ElementProxy;
     }
 );

platform/features/layout/src/elements/ImageProxy.js

@@ -36,10 +36,11 @@ define(
          *        configuration
          * @param index the element's index within its array
          * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
          * @augments {platform/features/layout.ElementProxy}
          */
-        function ImageProxy(element, index, elements) {
-            var proxy = new ElementProxy(element, index, elements);
+        function ImageProxy(element, index, elements, gridSize) {
+            var proxy = new ElementProxy(element, index, elements, gridSize);
 
             /**
              * Get and/or set the displayed text of this element.
@@ -49,6 +50,12 @@ define(
              */
             proxy.url = new AccessorMutator(element, 'url');
 
+            //Expose x,y, width and height properties for editing
+            proxy.editWidth = new AccessorMutator(element, 'width');
+            proxy.editHeight = new AccessorMutator(element, 'height');
+            proxy.editX = new AccessorMutator(element, 'x');
+            proxy.editY = new AccessorMutator(element, 'y');
+
             return proxy;
         }
 

platform/features/layout/src/elements/LineHandle.js

@@ -35,14 +35,16 @@ define(
          * @param {string} yProperty field which stores x position
          * @param {string} xOther field which stores x of other end
          * @param {string} yOther field which stores y of other end
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
          * @implements {platform/features/layout.ElementHandle}
          */
-        function LineHandle(element, xProperty, yProperty, xOther, yOther) {
+        function LineHandle(element, xProperty, yProperty, xOther, yOther, gridSize) {
             this.element = element;
             this.xProperty = xProperty;
             this.yProperty = yProperty;
             this.xOther = xOther;
             this.yOther = yOther;
+            this.gridSize = gridSize;
         }
 
         LineHandle.prototype.x = function (value) {
@@ -83,6 +85,10 @@ define(
             return element[yProperty];
         };
 
+        LineHandle.prototype.getGridSize = function () {
+            return this.gridSize;
+        };
+
         return LineHandle;
 
     }

platform/features/layout/src/elements/LineProxy.js

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    ['./ElementProxy', './LineHandle'],
-    function (ElementProxy, LineHandle) {
+    ['./ElementProxy', './LineHandle', './AccessorMutator'],
+    function (ElementProxy, LineHandle, AccessorMutator) {
 
         /**
          * Selection/diplay proxy for line elements of a fixed position
@@ -33,13 +33,14 @@ define(
          *        configuration
          * @param index the element's index within its array
          * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
          * @augments {platform/features/layout.ElementProxy}
          */
-        function LineProxy(element, index, elements) {
-            var proxy = new ElementProxy(element, index, elements),
+        function LineProxy(element, index, elements, gridSize) {
+            var proxy = new ElementProxy(element, index, elements, gridSize),
                 handles = [
-                    new LineHandle(element, 'x', 'y', 'x2', 'y2'),
-                    new LineHandle(element, 'x2', 'y2', 'x', 'y')
+                    new LineHandle(element, 'x', 'y', 'x2', 'y2', proxy.getGridSize()),
+                    new LineHandle(element, 'x2', 'y2', 'x', 'y', proxy.getGridSize())
                 ];
 
             /**
@@ -148,6 +149,12 @@ define(
                 return handles;
             };
 
+            // Expose endpoint coordinates for editing
+            proxy.editX1 = new AccessorMutator(element, 'x');
+            proxy.editY1 = new AccessorMutator(element, 'y');
+            proxy.editX2 = new AccessorMutator(element, 'x2');
+            proxy.editY2 = new AccessorMutator(element, 'y2');
+
             return proxy;
         }
 

platform/features/layout/src/elements/ResizeHandle.js

@@ -35,12 +35,14 @@ define(
          * @memberof platform/features/layout
          * @constructor
          */
-        function ResizeHandle(element, minWidth, minHeight) {
+        function ResizeHandle(element, minWidth, minHeight, gridSize) {
             this.element = element;
 
             // Ensure reasonable defaults
             this.minWidth = minWidth || 0;
             this.minHeight = minHeight || 0;
+
+            this.gridSize = gridSize;
         }
 
         ResizeHandle.prototype.x = function (value) {
@@ -65,6 +67,10 @@ define(
             return element.y + element.height;
         };
 
+        ResizeHandle.prototype.getGridSize = function () {
+            return this.gridSize;
+        };
+
         return ResizeHandle;
 
     }

platform/features/layout/src/elements/TelemetryProxy.js

@@ -39,10 +39,11 @@ define(
          *        configuration
          * @param index the element's index within its array
          * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] form
          * @augments {platform/features/layout.ElementProxy}
          */
-        function TelemetryProxy(element, index, elements) {
-            var proxy = new TextProxy(element, index, elements);
+        function TelemetryProxy(element, index, elements, gridSize) {
+            var proxy = new TextProxy(element, index, elements, gridSize);
 
             // Toggle the visibility of the title
             function toggle() {

platform/features/layout/src/elements/TextProxy.js

@@ -36,10 +36,11 @@ define(
          *        configuration
          * @param index the element's index within its array
          * @param {Array} elements the full array of elements
+         * @param {number[]} gridSize the current layout grid size in [x,y] from
          * @augments {platform/features/layout.ElementProxy}
          */
-        function TextProxy(element, index, elements) {
-            var proxy = new BoxProxy(element, index, elements);
+        function TextProxy(element, index, elements, gridSize) {
+            var proxy = new BoxProxy(element, index, elements, gridSize);
 
             /**
              * Get and/or set the text color of this element.

platform/features/layout/src/elements/UnitAccessorMutator.js

@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    [],
+    function () {
+
+        /**
+         * Variant of AccessorMutator to handle the specific case of updating
+         * useGrid, in order update the positions appropriately from within
+         * the scope of UnitAccessorMutator
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param {ElementProxy} proxy ElementProxy object to perform the update
+         *                             upon
+         */
+        function UnitAccessorMutator(elementProxy) {
+            var self = this;
+
+            this.elementProxy = elementProxy;
+            return function (useGrid) {
+                var current = elementProxy.element.useGrid;
+                if (arguments.length > 0) {
+                    elementProxy.element.useGrid = useGrid;
+                    if (useGrid && !current) {
+                        self.convertCoordsTo('grid');
+                    } else if (!useGrid && current) {
+                        self.convertCoordsTo('px');
+                    }
+                }
+
+                return elementProxy.element.useGrid;
+            };
+        }
+
+        /**
+         * For the elementProxy object called upon, convert its element's
+         * coordinates and size from pixels to grid units, or vice-versa.
+         * @param {string} unit When called with 'px', converts grid units to
+         *                      pixels; when called with 'grid', snaps element
+         *                      to grid units
+         */
+        UnitAccessorMutator.prototype.convertCoordsTo = function (unit) {
+            var proxy = this.elementProxy,
+                gridSize = proxy.gridSize,
+                element = proxy.element,
+                minWidth = proxy.getMinWidth(),
+                minHeight = proxy.getMinHeight();
+            if (unit === 'px') {
+                element.x = element.x * gridSize[0];
+                element.y = element.y * gridSize[1];
+                element.width = element.width * gridSize[0];
+                element.height = element.height * gridSize[1];
+                if (element.x2 && element.y2) {
+                    element.x2 = element.x2 * gridSize[0];
+                    element.y2 = element.y2 * gridSize[1];
+                }
+            } else if (unit === 'grid') {
+                element.x = Math.round(element.x / gridSize[0]);
+                element.y = Math.round(element.y / gridSize[1]);
+                element.width = Math.max(Math.round(element.width / gridSize[0]), minWidth);
+                element.height = Math.max(Math.round(element.height / gridSize[1]), minHeight);
+                if (element.x2 && element.y2) {
+                    element.x2 = Math.round(element.x2 / gridSize[0]);
+                    element.y2 = Math.round(element.y2 / gridSize[1]);
+                }
+            }
+        };
+
+        return UnitAccessorMutator;
+    }
+);

platform/features/layout/test/FixedControllerSpec.js

@@ -157,9 +157,9 @@ define(
                 };
                 testValues = { a: 10, b: 42, c: 31.42 };
                 testConfiguration = { elements: [
-                    { type: "fixed.telemetry", id: 'a', x: 1, y: 1 },
-                    { type: "fixed.telemetry", id: 'b', x: 1, y: 1 },
-                    { type: "fixed.telemetry", id: 'c', x: 1, y: 1 }
+                    { type: "fixed.telemetry", id: 'a', x: 1, y: 1, useGrid: true},
+                    { type: "fixed.telemetry", id: 'b', x: 1, y: 1, useGrid: true},
+                    { type: "fixed.telemetry", id: 'c', x: 1, y: 1, useGrid: true}
                 ]};
 
                 mockChildren = testModel.composition.map(makeMockDomainObject);

platform/features/layout/test/FixedDragHandleSpec.js

@@ -35,13 +35,14 @@ define(
             beforeEach(function () {
                 mockElementHandle = jasmine.createSpyObj(
                     'elementHandle',
-                    ['x', 'y']
+                    ['x', 'y','getGridSize']
                 );
                 mockUpdate = jasmine.createSpy('update');
                 mockCommit = jasmine.createSpy('commit');
 
                 mockElementHandle.x.andReturn(6);
                 mockElementHandle.y.andReturn(8);
+                mockElementHandle.getGridSize.andReturn(TEST_GRID_SIZE);
 
                 handle = new FixedDragHandle(
                     mockElementHandle,

platform/features/layout/test/FixedProxySpec.js

@@ -61,7 +61,8 @@ define(
                     x: 0,
                     y: 0,
                     width: 1,
-                    height: 1
+                    height: 1,
+                    useGrid: true
                 });
             });
 

platform/features/layout/test/MCTTriggerModalSpec.js

@@ -0,0 +1,122 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2016, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    '../src/MCTTriggerModal'
+], function (
+    MCTTriggerModal
+) {
+    describe('MCTTriggerModal', function () {
+        var $scope,
+            $element,
+            frame,
+            layoutContainer,
+            $document,
+            mctTriggerModal;
+
+        function makeElement(classes, parentEl) {
+            var elem = jasmine.createSpyObj('element.' + classes.join('.'), [
+                'hasClass',
+                'parent'
+            ]);
+            elem.hasClass.andCallFake(function (className) {
+                return classes.indexOf(className) !== -1;
+            });
+            elem.parent.andReturn(parentEl);
+            var div = document.createElement('div');
+            div.className = classes.join(' ');
+            parentEl[0].appendChild(div);
+            elem[0] = div;
+            return elem;
+        }
+
+
+        beforeEach(function () {
+            $scope = jasmine.createSpyObj('$scope', ['$on']);
+            $element = jasmine.createSpyObj('$element', [
+                'parent',
+                'remove',
+                'on',
+                'off'
+            ]);
+            layoutContainer = document.createElement('div');
+            frame = makeElement(['frame'], [layoutContainer]);
+            var child = makeElement([], frame);
+            for (var i = 0; i < 5; i++) {
+                child = makeElement([], child);
+            }
+            $element.parent.andReturn(child);
+            $document = [jasmine.createSpyObj('document', ['createElement'])];
+            $document[0].body = document.createElement('div');
+            $document[0].createElement.andCallFake(function (tag) {
+                return document.createElement(tag);
+            });
+
+            mctTriggerModal = new MCTTriggerModal($document);
+        });
+
+        it('is a directive definition', function () {
+            expect(mctTriggerModal.restrict).toBe('A');
+            expect(mctTriggerModal.link).toEqual(jasmine.any(Function));
+        });
+
+        describe('link', function () {
+            beforeEach(function () {
+                mctTriggerModal.link($scope, $element);
+            });
+
+            it('attaches handlers to $element', function () {
+                expect($element.on).toHaveBeenCalledWith(
+                    'click',
+                    jasmine.any(Function)
+                );
+            });
+
+            it('cleans up on $scope $destroy', function () {
+                expect($scope.$on).toHaveBeenCalledWith(
+                    '$destroy',
+                    jasmine.any(Function)
+                );
+                $scope.$on.mostRecentCall.args[1]();
+                expect($element.off).toHaveBeenCalledWith(
+                    'click',
+                    jasmine.any(Function)
+                );
+            });
+
+            it('opens and closes overlays', function () {
+                [
+                    'a.close', 'a.t-done', '.abs.blocker'
+                ].forEach(function (selector) {
+                    $element.on.mostRecentCall.args[1]();
+                    var container = $document[0].body.querySelector('.t-contents');
+                    expect(container.children[0]).toBe(frame[0]);
+                    expect(layoutContainer.children[0]).not.toBe(frame[0]);
+                    $document[0].body.querySelector(selector)
+                        .dispatchEvent(new Event('click'));
+                    expect(container.children[0]).not.toBe(frame[0]);
+                    expect(layoutContainer.children[0]).toBe(frame[0]);
+                });
+            });
+        });
+    });
+});