[Merge] Merged latest from imagery-issue-1676

Fixes #1676
Minor conflict in imagery.scss resolved;
Tweak to remove min-height from image-main-wrapper;

.gitignore

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

API.md

@@ -3,42 +3,45 @@
 ## Scope and purpose of this document
 
 This document is intended to serve as a reference for developing an application 
-based on Open MCT. It will provide details of the API functions necessary to extend the 
-Open MCT platform meet common use cases such as integrating with a telemetry source. 
+based on Open MCT. It will provide details of the API functions necessary to 
+extend the Open MCT platform meet common use cases such as integrating with a telemetry source. 
 
 The best place to start is with the [Open MCT Tutorials](https://github.com/nasa/openmct-tutorial). 
-These will walk you through the process of getting up and running with Open MCT, 
-as well as addressing some common developer use cases.
+These will walk you through the process of getting up and running with Open 
+MCT, as well as addressing some common developer use cases.
 
 ## Building From Source 
 
 The latest version of Open MCT is available from [our GitHub repository](https://github.com/nasa/openmct). 
-If you have `git`, and `node` installed, you can build Open MCT with the commands 
-```
+If you have `git`, and `node` installed, you can build Open MCT with the
+commands 
+
+```bash
 git clone https://github.com/nasa/openmct.git
 cd openmct
 npm install
 ```
 
-These commands will fetch the Open MCT source from our GitHub repository, and build 
-a minified version that can be included in your application. The output of the 
-build process is placed in a `dist` folder under the openmct source directory, 
-which can be copied out to another location as needed. The contents of this 
-folder will include a minified javascript file named `openmct.js` as well as 
-assets such as html, css, and images necessary for the UI. 
+These commands will fetch the Open MCT source from our GitHub repository, and 
+build a minified version that can be included in your application. The output 
+of the build process is placed in a `dist` folder under the openmct source 
+directory, which can be copied out to another location as needed. The contents 
+of this folder will include a minified javascript file named `openmct.js` as 
+well as assets such as html, css, and images necessary for the UI. 
 
 ## Starting an Open MCT application
 
-To start a minimally functional Open MCT application, it is necessary to include 
-the Open MCT distributable, enable some basic plugins, and bootstrap the application. 
-The tutorials walk through the process of getting Open MCT up and running from scratch,
-but provided below is a minimal HTML template that includes Open MCT, installs 
-some basic plugins, and bootstraps the application. It assumes that Open MCT is 
-installed under an `openmct` subdirectory, as described in [Building From Source](#building-from-source). 
+To start a minimally functional Open MCT application, it is necessary to 
+include the Open MCT distributable, enable some basic plugins, and bootstrap 
+the application. The tutorials walk through the process of getting Open MCT up 
+and running from scratch, but provided below is a minimal HTML template that 
+includes Open MCT, installs some basic plugins, and bootstraps the application. 
+It assumes that Open MCT is installed under an `openmct` subdirectory, as 
+described in [Building From Source](#building-from-source). 
 
 This approach includes openmct using a simple script tag, resulting in a global 
-variable named `openmct`. This `openmct` object is used subsequently to make API 
-calls. 
+variable named `openmct`. This `openmct` object is used subsequently to make 
+API calls. 
 
 Open MCT is packaged as a UMD (Universal Module Definition) module, so common 
 script loaders are also supported.
@@ -63,18 +66,19 @@ script loaders are also supported.
 </html>
 ```
 
-The Open MCT library included above requires certain assets such as html templates, 
-images, and css. If you installed Open MCT from GitHub as described in the section 
-on [Building from Source](#building-from-source) then these assets will have been 
-downloaded along with the Open MCT javascript library. You can specify the 
-location of these assets by calling `openmct.setAssetPath()`. Typically this will 
-be the same location as the `openmct.js` library is included from.
+The Open MCT library included above requires certain assets such as html 
+templates, images, and css. If you installed Open MCT from GitHub as described 
+in the section on [Building from Source](#building-from-source) then these
+assets will have been downloaded along with the Open MCT javascript library. 
+You can specify the location of these assets by calling `openmct.setAssetPath()`. 
+Typically this will be the same location as the `openmct.js` library is 
+included from.
 
-There are some plugins bundled with the application that provide UI, persistence, 
-and other default configuration which are necessary to be able to do anything with 
-the application initially. Any of these plugins can, in principle, be replaced with a custom 
-plugin. The included plugins are documented in the [Included Plugins](#included-plugins) 
-section.  
+There are some plugins bundled with the application that provide UI, 
+persistence, and other default configuration which are necessary to be able to 
+do anything with the application initially. Any of these plugins can, in 
+principle, be replaced with a custom plugin. The included plugins are 
+documented in the [Included Plugins](#included-plugins) section.  
 
 ## Plugins
 
@@ -87,25 +91,28 @@ openmct.install(function install(openmctAPI) {
 });
 ```
 
-New plugins are installed in Open MCT by calling `openmct.install`, and providing 
-a plugin installation function. This function will be invoked on application 
-startup with one parameter - the openmct API object. A common approach used in 
-the Open MCT codebase is to define a plugin as a function that returns this 
-installation function. This allows configuration to be specified when the plugin is included.
+New plugins are installed in Open MCT by calling `openmct.install`, and
+providing a plugin installation function. This function will be invoked on 
+application startup with one parameter - the openmct API object. A common 
+approach used in the Open MCT codebase is to define a plugin as a function that 
+returns this installation function. This allows configuration to be specified 
+when the plugin is included.
 
 eg.
+
 ```javascript
 openmct.install(openmct.plugins.Elasticsearch("http://localhost:8002/openmct"));
 ```
+
 This approach can be seen in all of the [plugins provided with Open MCT](https://github.com/nasa/openmct/blob/master/src/plugins/plugins.js).
 
 ## Domain Objects and Identifiers
 
-_Domain Objects_ are the basic entities that represent domain knowledge in Open MCT.
-The temperature sensor on a solar panel, an overlay plot comparing 
-the results of all temperature sensors, the command dictionary for a spacecraft,
-the individual commands in that dictionary, the "My Items" folder:
-All of these things are domain objects.
+_Domain Objects_ are the basic entities that represent domain knowledge in Open 
+MCT.  The temperature sensor on a solar panel, an overlay plot comparing the 
+results of all temperature sensors, the command dictionary for a spacecraft, 
+the individual commands in that dictionary, the "My Items" folder: All of these 
+things are domain objects.
 
 A _Domain Object_ is simply a javascript object with some standard attributes.  
 An example of a _Domain Object_ is the "My Items" object which is a folder in 
@@ -128,25 +135,27 @@ looks like this:
 ### Object Attributes
 
 The main attributes to note are the `identifier`, and `type` attributes.
-* `identifier`: A composite key that provides a universally unique identifier for 
-this object. The `namespace` and `key` are used to identify the object. The `key` 
-must be unique within the namespace. 
+
+* `identifier`: A composite key that provides a universally unique identifier 
+  for this object. The `namespace` and `key` are used to identify the object.
+  The `key` must be unique within the namespace. 
 * `type`: All objects in Open MCT have a type. Types allow you to form an 
-ontology of knowledge and provide an abstraction for grouping, visualizing, and 
-interpreting data. Details on how to define a new object type are provided below. 
+  ontology of knowledge and provide an abstraction for grouping, visualizing, 
+  and interpreting data. Details on how to define a new object type are 
+  provided below. 
 
 Open MCT uses a number of builtin types. Typically you are going to want to 
-define your own if extending Open MCT.
+define your own when extending Open MCT.
 
 ### Domain Object Types
 
-Custom types may be registered via the `addType` function on the opencmt Type 
+Custom types may be registered via the `addType` function on the Open MCT Type 
 registry.
 
 eg.
 ```javascript
 openmct.types.addType('my-type', {
-    label: "My Type",
+    name: "My Type",
     description: "This is a type that I added!",
     creatable: true
 });
@@ -157,7 +166,7 @@ The `addType` function accepts two arguments:
 for an object.
 * An object type specification. An object type definition supports the following 
 attributes      
-    * `label`: a `string` naming this object type
+    * `name`: a `string` naming this object type
     * `description`: a `string` specifying a longer-form description of this type
     * `initialize`: a `function` which initializes the model for new domain objects 
     of this type. This can be used for setting default values on an object when 
@@ -284,116 +293,576 @@ var domainObject = {
 };
 ```
 
-## Telemetry Providers
+## Telemetry API
 
-When connecting to a new telemetry source, you will need to register a new
-_Telemetry Provider_. A _Telemetry Provider_ retrieves telemetry data from some telemetry 
-source, and exposes them in a way that can be used by Open MCT. A telemetry 
-provider typically can support a one off __request__ for a batch of telemetry data, 
-or it can provide the ability to __subscribe__ to receive new telemetry data when 
-it becomes available, or both.
+The Open MCT telemetry API provides two main sets of interfaces-- one for integrating telemetry data into Open MCT, and another for developing Open MCT visualization plugins utilizing telemetry API.  
 
-```javascript
-openmct.telemetry.addProvider({
-    supportsRequest: function (domainObject) {
-        //...
-    },
-    supportsSubscribe: function (domainObject) {
-        //...
-    },
-    request: function (domainObject, options) {    
-        //...
-    },
-    subscribe: function (domainObject, callback, options) {
-        //...
-    }
-})
-```
+The APIs for visualization plugins are still a work in progress and docs may change at any time.  However, the APIs for integrating telemetry metadata into Open MCT are stable and documentation is included below.
 
-A telemetry provider is an object with the following functions defined:
+### Integrating Telemetry Sources
 
-* `supportsRequest`: An __optional__ `function` that accepts a 
-[Domain Object](#domain-objects-and-identifiers) and returns a `boolean` value
-indicating whether or not this provider supports telemetry requests for the 
-given object. If this returns `true` then a `request` function must be defined. 
-* `supportsSubscribe`: An __optional__ `function` that accepts a 
-[Domain Object](#domain-objects-and-identifiers) and returns a `boolean` value 
-indicating whether or not this provider supports telemetry subscriptions. If this 
-returns `true` then a `subscribe` function must also be defined. As with `request`, 
-the return value will typically be conditional, and based on attributes of 
-`domainObject` such as its identifier.
-* `request`: A `function` that returns a `Promise` that will resolve with an `Array` 
-of telemetry in a single query. This function accepts as arguments a 
-[Domain Object](#domain-objects-and-identifiers) and an object containing some 
-[request options](#telemetry-requests). 
-* `subscribe`:  A `function` that accepts a [Domain Object](#domain-objects-and-identifiers),
-a callback `function`, and a [telemetry request](#telemetry-requests). The 
-callback is invoked whenever telemetry is available, and 
-
-
-The implementations for `request` and `subscribe` can vary depending on the
-nature of the endpoint which will provide telemetry. In the example above,
-it is assumed that `myAdapter` contains the implementation details
-(such as HTTP requests, WebSocket connections, etc.) associated with some telemetry
-source.
+There are two main tasks for integrating telemetry sources-- describing telemetry objects with relevant metadata, and then providing telemetry data for those objects.  You'll use an [Object Provider](#object-providers) to provide objects with the necessary [Telemetry Metadata](#telemetry-metadata), and then register a [Telemetry Provider](#telemetry-providers) to retrieve telemetry data for those objects.
 
 For a step-by-step guide to building a telemetry adapter, please see the 
-[Open MCT Tutorials](https://github.com/larkin/openmct-tutorial).
+[Open MCT Tutorials](https://github.com/nasa/openmct-tutorial).
 
-### Telemetry Requests
-Telemetry requests support time bounded queries. A call to a _Telemetry Provider_'s 
-`request` function will include an `options` argument. These are simply javascript
-objects with attributes for the request parameters. An example of a telemetry 
-request object with a start and end time is included below:
-```javascript
+#### Telemetry Metadata
+
+A telemetry object is a domain object with a telemetry property.  To take an example from the tutorial, here is the telemetry object for the "fuel" measurement of the spacecraft:
+
+```json
 {
-    start: 1487981997240,
-    end: 1487982897240
+    "identifier": {
+        "namespace": "example.taxonomy",
+        "key": "prop.fuel"
+    },
+    "name": "Fuel",
+    "type": "example.telemetry",
+    "telemetry": {
+        "values": [
+            {
+                "key": "value",
+                "name": "Value",
+                "units": "kilograms",
+                "format": "float",
+                "min": 0,
+                "max": 100,
+                "hints": {
+                    "range": 1
+                }
+            },
+            {
+                "key": "utc",
+                "source": "timestamp",
+                "name": "Timestamp",
+                "format": "utc",
+                "hints": {
+                    "domain": 1
+                }
+            }
+        ]
+    }
 }
 ```
 
-### Telemetry Data
+The most important part of the telemetry metadata is the `values` property-- this describes the attributes of telemetry datums (objects) that a telemetry provider returns.  These descriptions must be provided for telemetry views to work properly.
 
-Telemetry data is provided to Open MCT by _[Telemetry Providers](#telemetry-providers)_
-in the form of javascript objects. A collection of telemetry values (for example, 
-retrieved in response to a `request`) is represented by an `Array` of javascript 
-objects. These telemetry javascript objects are simply key value pairs.
+##### Values
 
-Typically a telemetry datum will have some timestamp associated with it. This 
-time stamp should have a key that corresponds to some time system supported by 
-Open MCT. If the `UTCTimeSystem` plugin is installed, then the key `utc` can be used.
-   
-An example of a telemetry provider request function that returns a collection of
-mock telemtry data is below:
+`telemetry.values` is an array of value description objects, which have the following fields:
+
+attribute      | type   | flags    | notes
+---            |  ---   |  ---     | ---
+`key`          | string | required | unique identifier for this field.  
+`hints`        | object | required | Hints allow views to intelligently select relevant attributes for display, and are required for most views to function.  See section on "Value Hints" below.
+`name`         | string | optional | a human readible label for this field.  If omitted, defaults to `key`.
+`source`       | string | optional | identifies the property of a datum where this value is stored.  If omitted, defaults to `key`.
+`format`       | string | optional | a specific format identifier, mapping to a formatter.  If omitted, uses a default formatter.  For enumerations, use `enum`.  For timestamps, use `utc` if you are using utc dates, otherwise use a key mapping to your custom date format.  
+`units`        | string | optional | the units of this value, e.g. `km`, `seconds`, `parsecs`
+`min`          | number | optional | the minimum possible value of this measurement.  Will be used by plots, gauges, etc to automatically set a min value.
+`max`          | number | optional | the maximum possible value of this measurement.  Will be used by plots, gauges, etc to automatically set a max value.
+`enumerations` | array  | optional | for objects where `format` is `"enum"`, this array tracks all possible enumerations of the value.  Each entry in this array is an object, with a `value` property that is the numerical value of the enumeration, and a `string` property that is the text value of the enumeration.  ex: `{"value": 0, "string": "OFF"}`.  If you use an enumerations array, `min` and `max` will be set automatically for you.
+
+
+###### Value Hints
+
+Each telemetry value description has an object defining hints.  Keys in this this object represent the hint itself, and the value represents the weight of that hint.  A lower weight means the hint has a higher priority.  For example, multiple values could be hinted for use as the y axis of a plot (raw, engineering), but the highest priority would be the default choice.  Likewise, a table will use hints to determine the default order of columns.
+
+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 
+
+Open MCT provides a number of ways to pivot through data and link data via time.  The Time Conductor helps synchronize multiple views around the same time.
+
+In order for the time conductor to work, there will always be an active "time system".  All telemetry metadata *must* have a telemetry value with a `key` that matches the `key` of the active time system.  You can use the `source` attribute on the value metadata to remap this to a different field in the telemetry datum-- especially useful if you are working with disparate datasources that have different field mappings.
+
+
+#### Telemetry Providers
+
+Telemetry providers are responsible for providing historical and real time telemetry data for telemetry objects.  Each telemetry provider determines which objects it can provide telemetry for, and then must implement methods to provide telemetry for those objects.
+
+A telemetry provider is a javascript object with up to four methods:
+
+* `supportsSubscribe(domainObject, callback, options)` optional.  Must be implemented to provide realtime telemetry.  Should return `true` if the provider supports subscriptions for the given domain object (and request options).
+* `subscribe(domainObject, callback, options)` required if `supportsSubscribe` is implemented.  Establish a subscription for realtime data for the given domain object.  Should invoke `callback` with a single telemetry datum every time data is received.  Must return an unsubscribe function.  Multiple views can subscribe to the same telemetry object, so it should always return a new unsubscribe function.
+* `supportsRequest(domainObject, options)` optional.  Must be implemented to provide historical telemetry.  Should return `true` if the provider supports historical requests for the given domain object.
+* `request(domainObject, options)` required if `supportsRequest` is implemented.  Must return a promise for an array of telemetry datums that fulfills the request.  The `options` argument will include a `start`, `end`, and `domain` attribute representing the query bounds.  For more request properties, see Request Properties below.
+
+Telemetry providers are registered by calling `openmct.telemetry.addProvider(provider)`, e.g.
 
 ```javascript
 openmct.telemetry.addProvider({
-    supportsRequest: function (domainObject) {
-        return true
-    },
-    request: function (domainObject, options) {    
-        return Promise.resolve([
-            {
-                'utc': Date.now() - 2000,
-                'value': 1,
-            },
-            {
-                'utc': Date.now() - 1000,
-                'value': 2,
-            },
-            {
-                'utc': Date.now(),
-                'value': 3,
-            }
-        ]);
-    }
+    supportsRequest: function (domainObject, options) { /*...*/ },
+    request: function (domainObject, options) { /*...*/ },
+    supportsSubscribe: function (domainObject, callback, options) { /*...*/ },
+    subscribe: function (domainObject, callback, options) { /*...*/ }
 })
 ```
 
+#### Telemetry Requests
+
+Telemetry requests support time bounded queries. A call to a _Telemetry Provider_'s `request` function will include an `options` argument. These are simply javascript objects with attributes for the request parameters. An example of a telemetry request object with a start and end time is included below:
+```javascript
+{
+    start: 1487981997240,
+    end: 1487982897240,
+    domain: 'utc'
+}
+```
+
+#### Telemetry Formats
+
+Telemetry format objects define how to interpret and display telemetry data. 
+They have a simple structure:
+
+* `key`: A `string` that uniquely identifies this formatter.
+* `format`: A `function` that takes a raw telemetry value, and returns a 
+  human-readable `string` representation of that value. It has one required 
+  argument, and three optional arguments that provide context and can be used 
+  for returning scaled representations of a value. An example of this is 
+  representing time values in a scale such as the time conductor scale. There 
+  are multiple ways of representing a point in time, and by providing a minimum
+  scale value, maximum scale value, and a count, it's possible to provide more
+  useful representations of time given the provided limitations.  
+    * `value`: The raw telemetry value in its native type.
+    * `minValue`: An __optional__ argument specifying the minimum displayed 
+      value.
+    * `maxValue`: An __optional__ argument specifying the maximum displayed 
+      value.
+    * `count`: An __optional__ argument specifying the number of displayed 
+      values.
+* `parse`: A `function` that takes a `string` representation of a telemetry 
+  value, and returns the value in its native type. **Note** parse might receive an already-parsed value.  This function should be idempotent.
+* `validate`: A `function` that takes a `string` representation of a telemetry 
+  value, and returns a `boolean` value indicating whether the provided string
+  can be parsed.
+
+##### Registering Formats
+
+Formats are registered with the Telemetry API using the `addFormat` function. eg.
+
+``` javascript
+openmct.telemetry.addFormat({
+    key: 'number-to-string',
+    format: function (number) {
+        return number + '';
+    },
+    parse: function (text) {
+        return Number(text);
+    },
+    validate: function (text) {
+        return !isNaN(text);
+    }
+});
+```
+
+#### Telemetry Data
+
+A single telemetry point is considered a Datum, and is represented by a standard
+javascript object.  Realtime subscriptions (obtained via __subscribe__) will 
+invoke the supplied callback once for each telemetry datum recieved.  Telemetry
+requests (obtained via __request__) will return a promise for an array of 
+telemetry datums.
+
+##### Telemetry Datums
+
+A telemetry datum is a simple javascript object, e.g.:
+
+```json
+{
+    "timestamp": 1491267051538,
+    "value": 77,
+    "id": "prop.fuel"
+}
+```
+
+The key-value pairs of this object are described by the telemetry metadata of
+a domain object, as discussed in the [Telemetry Metadata](#telemetry-metadata)
+section.
+
+## Time API
+
+Open MCT provides API for managing the temporal state of the application.
+Central to this is the concept of "time bounds". Views in Open MCT will 
+typically show telemetry data for some prescribed date range, and the Time API 
+provides a way to centrally manage these bounds.
+
+The Time API exposes a number of methods for querying and setting the temporal 
+state of the application, and emits events to inform listeners when the state changes.
+
+Because the data displayed tends to be time domain data, Open MCT must always 
+have at least one time system installed and activated. When you download Open
+MCT, it will be pre-configured to use the UTC time system, which is installed and activated, along with other default plugins, in `index.html`. Installing and activating a time system is simple, and is covered 
+[in the next section](#defining-and-registering-time-systems). 
+
+### Time Systems and Bounds
+
+#### Defining and Registering Time Systems
+
+The time bounds of an Open MCT application are defined as numbers, and a Time 
+System gives meaning and context to these numbers so that they can be correctly 
+interpreted. Time Systems are javscript objects that provide some information 
+about the current time reference frame. An example of defining and registering 
+a new time system is given below:
+
+``` javascript
+openmct.time.addTimeSystem({
+    key: 'utc',
+    name: 'UTC Time',
+    cssClass = 'icon-clock',
+    timeFormat = 'utc',
+    durationFormat = 'duration',
+    isUTCBased = true
+});
+```
+
+The example above defines a new utc based time system. In fact, this time system 
+is configured and activated by default from `index.html` in the default 
+installation of Open MCT if you download the source from GitHub. Some details of 
+each of the required properties is provided below.
+
+* `key`: A `string` that uniquely identifies this time system.
+* `name`: A `string` providing a brief human readable label. If the [Time Conductor](#the-time-conductor) 
+plugin is enabled, this name will identify the time system in a dropdown menu.
+* `cssClass`: A class name `string` that will be applied to the time system when 
+it appears in the UI. This will be used to represent the time system with an icon. 
+There are a number of built-in icon classes [available in Open MCT](https://github.com/nasa/openmct/blob/master/platform/commonUI/general/res/sass/_glyphs.scss), 
+or a custom class can be used here. 
+* `timeFormat`: A `string` corresponding to the key of a registered 
+[telemetry time format](#telemetry-formats). The format will be used for 
+displaying discrete timestamps from telemetry streams when this time system is 
+activated. If the [UTCTimeSystem](#included-plugins) is enabled, then the `utc` 
+format can be used if this is a utc-based time system
+* `durationFormat`: A `string` corresponding to the key of a registered 
+[telemetry time format](#telemetry-formats). The format will be used for 
+displaying time ranges, for example `00:15:00` might be used to represent a time 
+period of fifteen minutes. These are used by the Time Conductor plugin to specify
+relative time offsets. If the [UTCTimeSystem](#included-plugins) is enabled, 
+then the `duration` format can be used if this is a utc-based time system
+* `isUTCBased`: A `boolean` that defines whether this time system represents 
+numbers in UTC terrestrial time. 
+
+#### Getting and Setting the Active Time System
+
+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', bounds);
+```
+
+A time system can be immediately activated after registration: 
+
+```javascript
+openmct.time.addTimeSystem(utcTimeSystem);
+openmct.time.timeSystem(utcTimeSystem, bounds);
+```
+
+Setting the active time system will trigger a [`'timeSystem'`](#time-events) 
+event.  If you supplied bounds, a [`'bounds'`](#time-events) event will be triggered afterwards with your newly supplied bounds.
+
+### Time Bounds
+
+The TimeAPI provides a getter/setter for querying and setting time bounds. Time 
+bounds are simply an object with a `start` and an end `end` attribute.
+
+* `start`: A `number` representing a moment in time in the active [Time System](#defining-and-registering-time-systems). 
+This will be used as the beginning of the time period displayed by time-responsive
+telemetry views.
+* `end`: A `number` representing a moment in time in the active [Time System](#defining-and-registering-time-systems).
+This will be used as the end of the time period displayed by time-responsive
+telemetry views.
+
+If invoked with bounds, it will set the new time bounds system-wide. If invoked 
+without any parameters, it will return the current application-wide time bounds. 
+
+``` javascript
+const ONE_HOUR = 60 * 60 * 1000;
+let now = Date.now();
+openmct.time.bounds({start: now - ONE_HOUR, now);
+```
+
+To respond to bounds change events, listen for the [`'bounds'`](#time-events)
+event.
+
+## Clocks
+
+The Time API can be set to follow a clock source which will cause the bounds
+to be updated automatically whenever the clock source "ticks". A clock is simply
+an object that supports registration of listeners and periodically invokes its 
+listeners with a number. Open MCT supports registration of new clock sources that 
+tick on almost anything. A tick occurs when the clock invokes callback functions 
+registered by its listeners with a new time value.
+
+An example of a clock source is the [LocalClock](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/LocalClock.js) 
+which emits the current time in UTC every 100ms. Clocks can tick on anything. For 
+example, a clock could be defined to provide the timestamp of any new data 
+received via a telemetry subscription. This would have the effect of advancing 
+the bounds of views automatically whenever data is received. A clock could also 
+be defined to tick on some remote timing source.
+
+The values provided by clocks are simple `number`s, which are interpreted in the
+context of the active [Time System](#defining-and-registering-time-systems).
+
+### Defining and registering clocks
+
+A clock is an object that defines certain required metadata and functions:
+
+* `key`: A `string` uniquely identifying this clock. This can be used later to 
+reference the clock in places such as the [Time Conductor configuration](#time-conductor-configuration)
+* `cssClass`: A `string` identifying a CSS class to apply to this clock when it's 
+displayed in the UI. This will be used to represent the time system with an icon. 
+There are a number of built-in icon classes [available in Open MCT](https://github.com/nasa/openmct/blob/master/platform/commonUI/general/res/sass/_glyphs.scss), 
+or a custom class can be used here. 
+* `name`: A `string` providing a human-readable identifier for the clock source. 
+This will be displayed in the clock selector menu in the Time Conductor UI 
+component, if active. 
+* `description`: An __optional__ `string` providing a longer description of the 
+clock. The description will be visible in the clock selection menu in the Time 
+Conductor plugin.
+* `on`: A `function` supporting registration of a new callback that will be 
+invoked when the clock next ticks. It will be invoked with two arguments:
+    * `eventName`: A `string` specifying the event to listen on. For now, clocks 
+    support one event - `tick`.
+    * `callback`: A `function` that will be invoked when this clock ticks. The 
+    function must be invoked with one parameter - a `number` representing a valid
+    time in the current time system.
+* `off`: A `function` that allows deregistration of a tick listener. It accepts 
+the same arguments as `on`.
+* `currentValue`: A `function` that returns a `number` representing a point in 
+time in the active time system. It should be the last value provided by a tick, 
+or some default value if no ticking has yet occurred.
+
+A new clock can be registered using the `addClock` function exposed by the Time 
+API:
+
+```javascript
+var someClock = {
+    key: 'someClock',
+    cssClass: 'icon-clock',
+    name: 'Some clock',
+    description: "Presumably does something useful",
+    on: function (event, callback) {
+        // Some function that registers listeners, and updates them on a tick
+    },
+    off: function (event, callback) {
+        // Some function that unregisters listeners.
+    },
+    currentValue: function () {
+        // A function that returns the last ticked value for the clock
+    }
+}
+
+openmct.time.addClock(someClock);
+```
+
+An example clock implementation is provided in the form of the [LocalClock](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/LocalClock.js)
+
+#### Getting and setting active clock
+
+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. [`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, clockOffsets);
+```
+
+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.
+
+#### Stopping an active clock
+
+The `stopClock` method can be used to stop an active clock, and to clear it. It 
+will stop the clock from ticking, and set the active clock to `undefined`.
+
+``` javascript
+openmct.time.stopClock();
+```
+
+#### Clock Offsets
+
+When a clock is active, the time bounds of the application will be updated 
+automatically each time the clock "ticks". The bounds are calculated based on 
+the current value provided by the active clock (via its `tick` event, or its 
+`currentValue()` method). 
+
+Unlike bounds, which represent absolute time values, clock offsets represent
+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 
+bounds on each clock tick.
+
+The `clockOffsets` function can be used to get or set clock offsets. For example, 
+to show the last fifteen minutes in a ms-based time system: 
+
+```javascript
+var FIFTEEN_MINUTES = 15 * 60 * 1000;
+
+openmct.time.clockOffsets({
+    start: -FIFTEEN_MINUTES,
+    end: 0
+})
+```
+
+__Note:__ Setting the clock offsets will trigger an immediate bounds change, as 
+new bounds will be calculated based on the `currentValue()` of the active clock. 
+Clock offsets are only relevant when a clock source is active.
+
+## Time Events
+
+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.
+
+For example:
+
+``` javascript
+openmct.time.on('bounds', function callback (newBounds, tick) {
+    // Do something with new bounds
+});
+```
+
+#### List of Time Events
+
+The events emitted by the Time API are:
+
+* `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.
+
+If activated, the time conductor must be provided with configuration options, 
+detailed below.
+
+#### Time Conductor Configuration
+
+The time conductor is configured by specifying the options that will be 
+available to the user from the menus in the time conductor. These will determine 
+the clocks available from the conductor, the time systems available for each 
+clock, and some default bounds and clock offsets for each combination of clock 
+and time system. By default, the conductor always supports a `fixed` mode where 
+no clock is active. To specify configuration for fixed mode, simply leave out a
+`clock` attribute in the configuration entry object.
+
+Configuration is provided as an `array` of menu options. Each entry of the 
+array is an object with some properties specifying configuration. The configuration
+options specified are slightly different depending on whether or not it is for 
+an active clock mode.
+
+__Configuration for Fixed Time Mode (no active clock)__
+
+* `timeSystem`: A `string`, the key for the time system that this configuration 
+relates to.
+* `bounds`: A [`Time Bounds`](#time-bounds) object. These bounds will be applied 
+when the user selects the time system specified in the previous `timeSystem` 
+property.
+* `zoomOutLimit`: An __optional__ `number` specifying the longest period of time 
+that can be represented by the conductor when zooming. If a `zoomOutLimit` is 
+provided, then a `zoomInLimit` must also be provided. If provided, the zoom 
+slider will automatically become available in the Time Conductor UI.
+* `zoomInLimit`: An __optional__ `number` specifying the shortest period of time 
+that can be represented by the conductor when zooming. If a `zoomInLimit` is 
+provided, then a `zoomOutLimit` must also be provided. If provided, the zoom 
+slider will automatically become available in the Time Conductor UI.
+
+__Configuration for Active Clock__
+
+* `clock`: A `string`, the `key` of the clock that this configuration applies to. 
+* `timeSystem`: A `string`, the key for the time system that this configuration 
+relates to. Separate configuration must be provided for each time system that you 
+wish to be available to users when they select the specified clock.
+* `clockOffsets`: A [`clockOffsets`](#clock-offsets) object that will be 
+automatically applied when the combination of clock and time system specified in 
+this configuration is selected from the UI.
+
+#### Example conductor configuration
+
+An example time conductor configuration is provided below. It sets up some 
+default options for the [UTCTimeSystem](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/UTCTimeSystem.js) 
+and [LocalTimeSystem](https://github.com/nasa/openmct/blob/master/src/plugins/localTimeSystem/LocalTimeSystem.js), 
+in both fixed mode, and for the [LocalClock](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/LocalClock.js) 
+source. In this configutation, the local clock supports both the UTCTimeSystem 
+and LocalTimeSystem. Configuration for fixed bounds mode is specified by omitting 
+a clock key.
+
+``` javascript
+const ONE_YEAR = 365 * 24 * 60 * 60 * 1000;
+const ONE_MINUTE = 60 * 1000;
+
+openmct.install(openmct.plugins.Conductor({
+    menuOptions: [
+        // 'Fixed' bounds mode configuation for the UTCTimeSystem
+        {
+            timeSystem: 'utc',
+            bounds: {start: Date.now() - 30 * ONE_MINUTE, end: Date.now()},
+            zoomOutLimit: ONE_YEAR,
+            zoomInLimit: ONE_MINUTE
+        },
+        // Configuration for the LocalClock in the UTC time system
+        {
+            clock: 'local',
+            timeSystem: 'utc',
+            clockOffsets: {start: - 30 * ONE_MINUTE, end: 0},
+            zoomOutLimit: ONE_YEAR,
+            zoomInLimit: ONE_MINUTE
+        },
+        //Configuration for the LocaLClock in the Local time system
+        {
+            clock: 'local',
+            timeSystem: 'local',
+            clockOffsets: {start: - 15 * ONE_MINUTE, end: 0}
+        }
+    ]
+}));
+```
+
 ## Included Plugins
 
 Open MCT is packaged along with a few general-purpose plugins:
 
+* `openmct.plugins.Conductor` provides a user interface for working with time
+within the application. If activated, configuration must be provided. This is 
+detailed in the section on [Time Conductor Configuration](#time-conductor-configuration).
 * `openmct.plugins.CouchDB` is an adapter for using CouchDB for persistence
   of user-created objects. This is a constructor that takes the URL for the
   CouchDB database as a parameter, e.g.

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/generator/SinewaveDeltaFormat.js

@@ -1,67 +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(
-    ['./SinewaveConstants', 'moment'],
-    function (SinewaveConstants, moment) {
-
-        var START_TIME = SinewaveConstants.START_TIME,
-            FORMAT_REGEX = /^-?\d+:\d+:\d+$/,
-            SECOND = 1000,
-            MINUTE = SECOND * 60,
-            HOUR = MINUTE * 60;
-
-        function SinewaveDeltaFormat() {
-        }
-
-        function twoDigit(v) {
-            return v >= 10 ? String(v) : ('0' + v);
-        }
-
-        SinewaveDeltaFormat.prototype.format = function (value) {
-            var delta = Math.abs(value - START_TIME),
-                negative = value < START_TIME,
-                seconds = Math.floor(delta / SECOND) % 60,
-                minutes = Math.floor(delta / MINUTE) % 60,
-                hours = Math.floor(delta / HOUR);
-            return (negative ? "-" : "") +
-                [ hours, minutes, seconds ].map(twoDigit).join(":");
-        };
-
-        SinewaveDeltaFormat.prototype.validate = function (text) {
-            return FORMAT_REGEX.test(text);
-        };
-
-        SinewaveDeltaFormat.prototype.parse = function (text) {
-            var negative = text[0] === "-",
-                parts = text.replace("-", "").split(":");
-            return [ HOUR, MINUTE, SECOND ].map(function (sz, i) {
-                return parseInt(parts[i], 10) * sz;
-            }).reduce(function (a, b) {
-                return a + b;
-            }, 0) * (negative ? -1 : 1) + START_TIME;
-        };
-
-        return SinewaveDeltaFormat;
-    }
-);

example/generator/SinewaveTelemetryProvider.js

@@ -1,70 +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 SinewaveTelemetryProvider. Created by vwoeltje on 11/12/14.
- */
-define([
-    "./SinewaveTelemetrySeries",
-    "./GeneratorProvider"
-], function (
-    SinewaveTelemetrySeries,
-    GeneratorProvider
-) {
-
-    function SinewaveTelemetryProvider() {
-        this.provider = new GeneratorProvider();
-    }
-
-    SinewaveTelemetryProvider.prototype.requestTelemetry = function (requests) {
-        if (requests[0].source !== 'generator') {
-            return Promise.resolve({});
-        }
-        return this.provider.request({}, requests[0])
-            .then(function (data) {
-                var res = {
-                    generator: {}
-                };
-                res.generator[requests[0].key] = new SinewaveTelemetrySeries(data);
-                return res;
-            });
-    };
-
-    SinewaveTelemetryProvider.prototype.subscribe = function (callback, requests) {
-        if (requests[0].source !== 'generator') {
-            return function unsubscribe() {};
-        }
-
-        function wrapper(data) {
-            var res = {
-                generator: {}
-            };
-            res.generator[requests[0].key] = new SinewaveTelemetrySeries(data);
-            callback(res);
-        }
-
-        return this.provider.subscribe({}, wrapper, requests[0]);
-    };
-
-    return SinewaveTelemetryProvider;
-});

example/generator/SinewaveTelemetrySeries.js

@@ -1,75 +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 SinewaveTelemetry. Created by vwoeltje on 11/12/14.
- */
-define([
-
-], function (
-
-) {
-        "use strict";
-
-        function SinewaveTelemetrySeries(data) {
-            if (!Array.isArray(data)) {
-                data = [data];
-            }
-            this.data = data;
-        }
-
-        SinewaveTelemetrySeries.prototype.getPointCount = function () {
-            return this.data.length;
-        };
-
-
-        SinewaveTelemetrySeries.prototype.getDomainValue = function (
-            index,
-            domain
-        ) {
-            domain = domain || 'time';
-
-            return this.getDatum(index)[domain];
-        };
-
-        SinewaveTelemetrySeries.prototype.getRangeValue = function (
-            index,
-            range
-        ) {
-            range = range || 'sin';
-            return this.getDatum(index)[range];
-        };
-
-        SinewaveTelemetrySeries.prototype.getDatum = function (index) {
-            if (index > this.data.length || index < 0) {
-                throw new Error('IndexOutOfRange: index not available in series.');
-            }
-            return this.data[index];
-        };
-
-        SinewaveTelemetrySeries.prototype.getData = function () {
-            return this.data;
-        };
-
-        return SinewaveTelemetrySeries;
-});

example/generator/generatorWorker.js

@@ -64,7 +64,6 @@
                     data: {
                         utc: nextStep,
                         yesterday: nextStep - 60*60*24*1000,
-                        delta: 60*60*24*1000,
                         sin: sin(nextStep, data.period, data.amplitude, data.offset),
                         cos: cos(nextStep, data.period, data.amplitude, data.offset)
                     }
@@ -104,11 +103,10 @@
 
         var data = [];
 
-        for (; nextStep < end; nextStep += step) {
+        for (; nextStep < end && data.length < 5000; nextStep += step) {
             data.push({
                 utc: nextStep,
                 yesterday: nextStep - 60*60*24*1000,
-                delta: 60*60*24*1000,
                 sin: sin(nextStep, period, amplitude, offset),
                 cos: cos(nextStep, period, amplitude, offset)
             });

example/generator/plugin.js

@@ -23,12 +23,10 @@
 
 define([
     "./GeneratorProvider",
-    "./SinewaveLimitCapability",
-    "./SinewaveDeltaFormat"
+    "./SinewaveLimitCapability"
 ], function (
     GeneratorProvider,
-    SinewaveLimitCapability,
-    SinewaveDeltaFormat
+    SinewaveLimitCapability
 ) {
 
     var legacyExtensions = {
@@ -37,34 +35,8 @@ define([
                 "key": "limit",
                 "implementation": SinewaveLimitCapability
             }
-        ],
-        "formats": [
-            {
-                "key": "example.delta",
-                "implementation": SinewaveDeltaFormat
-            }
-        ],
-        "constants": [
-            {
-                "key": "TIME_CONDUCTOR_DOMAINS",
-                "value": [
-                    {
-                        "key": "time",
-                        "name": "Time"
-                    },
-                    {
-                        "key": "yesterday",
-                        "name": "Yesterday"
-                    },
-                    {
-                        "key": "delta",
-                        "name": "Delta"
-                    }
-                ],
-                "priority": -1
-            }
         ]
-    }
+    };
 
     return function(openmct){
         //Register legacy extensions for things not yet supported by the new API
@@ -75,7 +47,7 @@ define([
             })
         });
         openmct.types.addType("generator", {
-            label: "Sine Wave Generator",
+            name: "Sine Wave Generator",
             description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
             cssClass: "icon-telemetry",
             creatable: true,
@@ -135,31 +107,36 @@ define([
                     amplitude: 1,
                     offset: 0,
                     dataRateInHz: 1,
-                    domains: [
+                    values: [
                         {
                             key: "utc",
                             name: "Time",
-                            format: "utc"
+                            format: "utc",
+                            hints: {
+                                domain: 1
+                            }
                         },
                         {
                             key: "yesterday",
                             name: "Yesterday",
-                            format: "utc"
+                            format: "utc",
+                            hints: {
+                                domain: 2
+                            }
                         },
-                        {
-                            key: "delta",
-                            name: "Delta",
-                            format: "example.delta"
-                        }
-                    ],
-                    ranges: [
                         {
                             key: "sin",
-                            name: "Sine"
+                            name: "Sine",
+                            hints: {
+                                range: 1
+                            }
                         },
                         {
                             key: "cos",
-                            name: "Cosine"
+                            name: "Cosine",
+                            hints: {
+                                range: 2
+                            }
                         }
                     ]
                 };

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.length < 5000) {
+                    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;
-    }
-);

example/localTimeSystem/src/LocalTimeSystem.js

@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web 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 Web 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([
-    '../../../platform/features/conductor/core/src/timeSystems/TimeSystem',
-    '../../../platform/features/conductor/core/src/timeSystems/LocalClock',
-    './LADTickSource'
-], function (TimeSystem, LocalClock, LADTickSource) {
-    var THIRTY_MINUTES = 30 * 60 * 1000,
-        DEFAULT_PERIOD = 1000;
-
-    /**
-     * This time system supports UTC dates and provides a ticking clock source.
-     * @implements TimeSystem
-     * @constructor
-     */
-    function LocalTimeSystem ($timeout) {
-        TimeSystem.call(this);
-
-        /**
-         * Some metadata, which will be used to identify the time system in
-         * the UI
-         * @type {{key: string, name: string, glyph: string}}
-         */
-        this.metadata = {
-            'key': 'local',
-            'name': 'Local',
-            'glyph': '\u0043'
-        };
-
-        this.fmts = ['local-format'];
-        this.sources = [new LocalClock($timeout, DEFAULT_PERIOD), new LADTickSource($timeout, DEFAULT_PERIOD)];
-    }
-
-    LocalTimeSystem.prototype = Object.create(TimeSystem.prototype);
-
-    LocalTimeSystem.prototype.formats = function () {
-        return this.fmts;
-    };
-
-    LocalTimeSystem.prototype.deltaFormat = function () {
-        return 'duration';
-    };
-
-    LocalTimeSystem.prototype.tickSources = function () {
-        return this.sources;
-    };
-
-    LocalTimeSystem.prototype.defaults = function (key) {
-        var now = Math.ceil(Date.now() / 1000) * 1000;
-        return {
-            key: 'local-default',
-            name: 'Local 12 hour time system defaults',
-            deltas: {start: THIRTY_MINUTES, end: 0},
-            bounds: {start: now - THIRTY_MINUTES, end: now}
-        };
-    };
-
-    return LocalTimeSystem;
-});

example/msl/src/MSLDataDictionary.js

@@ -44,31 +44,31 @@ define(
                         {
                             "name": "Min. Air Temperature",
                             "identifier": "min_temp",
-                            "units": "degrees",
+                            "units": "Degrees (C)",
                             "type": "float"
                         },
                         {
                             "name": "Max. Air Temperature",
                             "identifier": "max_temp",
-                            "units": "degrees",
+                            "units": "Degrees (C)",
                             "type": "float"
                         },
                         {
                             "name": "Atmospheric Pressure",
                             "identifier": "pressure",
-                            "units": "pascals",
+                            "units": "Millibars",
                             "type": "float"
                         },
                         {
                             "name": "Min. Ground Temperature",
                             "identifier": "min_gts_temp",
-                            "units": "degrees",
+                            "units": "Degrees (C)",
                             "type": "float"
                         },
                         {
                             "name": "Max. Ground Temperature",
                             "identifier": "max_gts_temp",
-                            "units": "degrees",
+                            "units": "Degrees (C)",
                             "type": "float"
                         }
                     ]
@@ -76,4 +76,4 @@ define(
             ]
         };
     }
-);
+);

example/msl/src/RemsTelemetryServerAdapter.js

@@ -48,6 +48,13 @@ define(
             this.$http = $http;
             this.$log = $log;
             this.promise = undefined;
+
+            this.dataTransforms = {
+                //Convert from pascals to millibars
+                'pressure': function pascalsToMillibars(pascals) {
+                    return pascals / 100;
+                }
+            };
         }
 
         /**
@@ -65,6 +72,8 @@ define(
             var self = this,
                 id = request.key;
 
+            var dataTransforms = this.dataTransforms;
+
             function processResponse(response){
                 var data = [];
                 /*
@@ -75,13 +84,14 @@ define(
                      * Check that valid data exists
                      */
                     if (!isNaN(solData[id])) {
+                        var dataTransform = dataTransforms[id];
                         /*
                          * Append each data point to the array of values
                          * for this data point property (min. temp, etc).
                          */
                         data.unshift({
                             date: Date.parse(solData[TERRESTRIAL_DATE]),
-                            value: solData[id]
+                            value: dataTransform ? dataTransform(solData[id]) : solData[id]
                         });
                     }
                 });

example/styleguide/bundle.js

@@ -0,0 +1,98 @@
+define([
+    "./src/ExampleStyleGuideModelProvider",
+    "./src/MCTExample",
+    'legacyRegistry'
+], function (
+    ExampleStyleGuideModelProvider,
+    MCTExample,
+    legacyRegistry
+) {
+    legacyRegistry.register("example/styleguide", {
+        "name": "Open MCT Style Guide",
+        "description": "Examples and documentation illustrating UI styles in use in Open MCT.",
+        "extensions":
+        {
+            "types": [
+                { "key": "styleguide.intro", "name": "Introduction", "cssClass": "icon-page", "description": "Introduction and overview to the style guide" },
+                { "key": "styleguide.standards", "name": "Standards", "cssClass": "icon-page", "description": "" },
+                { "key": "styleguide.colors", "name": "Colors", "cssClass": "icon-page", "description": "" },
+                { "key": "styleguide.glyphs", "name": "Glyphs", "cssClass": "icon-page", "description": "Glyphs overview" },
+                { "key": "styleguide.controls", "name": "Controls", "cssClass": "icon-page", "description": "Buttons, selects, HTML controls" },
+                { "key": "styleguide.input", "name": "Text Inputs", "cssClass": "icon-page", "description": "Various text inputs" },
+                { "key": "styleguide.menus", "name": "Menus", "cssClass": "icon-page", "description": "Context menus, dropdowns" }
+            ],
+            "views": [
+                { "key": "styleguide.intro", "type": "styleguide.intro", "templateUrl": "templates/intro.html", "editable": false },
+                { "key": "styleguide.standards", "type": "styleguide.standards", "templateUrl": "templates/standards.html", "editable": false },
+                { "key": "styleguide.colors", "type": "styleguide.colors", "templateUrl": "templates/colors.html", "editable": false },
+                { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "templateUrl": "templates/glyphs.html", "editable": false },
+                { "key": "styleguide.controls", "type": "styleguide.controls", "templateUrl": "templates/controls.html", "editable": false },
+                { "key": "styleguide.input", "type": "styleguide.input", "templateUrl": "templates/input.html", "editable": false },
+                { "key": "styleguide.menus", "type": "styleguide.menus", "templateUrl": "templates/menus.html", "editable": false }
+            ],
+            "roots": [
+                {
+                    "id": "styleguide:home"
+                }
+            ],
+            "models": [
+                {
+                    "id": "styleguide:home",
+                    "priority" : "preferred",
+                    "model": {
+                        "type": "folder",
+                        "name": "Style Guide Home",
+                        "location": "ROOT",
+                        "composition": [
+                            "intro",
+                            "standards",
+                            "colors",
+                            "glyphs",
+                            "styleguide:ui-elements"
+                        ]
+                    }
+                },
+                {
+                    "id": "styleguide:ui-elements",
+                    "priority" : "preferred",
+                    "model": {
+                        "type": "folder",
+                        "name": "UI Elements",
+                        "location": "styleguide:home",
+                        "composition": [
+                            "controls",
+                            "input",
+                            "menus"
+                        ]
+                    }
+                }
+            ],
+            "directives": [
+                {
+                    "key": "mctExample",
+                    "implementation": MCTExample
+                }
+            ],
+            "components": [
+                {
+                    "provides": "modelService",
+                    "type": "provider",
+                    "implementation": ExampleStyleGuideModelProvider,
+                    "depends": [
+                        "$q"
+                    ]
+                }
+            ],
+            "stylesheets": [
+                {
+                    "stylesheetUrl": "css/style-guide-espresso.css",
+                    "theme": "espresso"
+                },
+                {
+                    "stylesheetUrl": "css/style-guide-snow.css",
+                    "theme": "snow"
+                }
+            ]
+        }
+    });
+});

example/styleguide/res/images/diagram-views.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 622.47"><defs><style>.a,.d{fill:#fff;}.b,.c,.k,.m,.n,.o{fill:none;}.b{stroke:#000;stroke-linecap:square;}.b,.c,.d,.f,.k,.m,.n,.o{stroke-miterlimit:10;}.b,.k{stroke-width:2px;}.c{stroke:#ababab;stroke-dasharray:5;}.d,.k,.o{stroke:#737373;}.e{opacity:0.5;fill:url(#a);}.f{fill:#d6d6d6;fill-opacity:0.8;stroke:#fff;}.g{mask:url(#b);}.h{fill:#a8a8a8;}.i{fill:#00b1e2;}.j{fill:#f16e86;}.k{stroke-linecap:round;}.l{mask:url(#c);}.m{stroke:#00b1e2;}.m,.n{stroke-width:10px;}.n{stroke:#f16e86;}</style><linearGradient id="a" x1="523.15" y1="-401.02" x2="513.75" y2="-437.16" gradientTransform="translate(90.62 338.26) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><mask id="b" x="-1187.45" y="-269.68" width="1813.84" height="554.26" maskUnits="userSpaceOnUse"><polygon class="a" points="625.33 284.58 452.55 238.2 452.55 170.5 625.33 216.88 625.33 284.58"/><line class="b" x1="486.25" y1="179.55" x2="486.25" y2="247.32"/><line class="b" x1="573.58" y1="202.99" x2="573.58" y2="270.76"/><line class="b" x1="452.46" y1="192.89" x2="625.16" y2="239.25"/><line class="b" x1="452.46" y1="215.48" x2="625.16" y2="261.83"/></mask><mask id="c" x="-1468.9" y="-163.59" width="1866.4" height="673.87" maskUnits="userSpaceOnUse"><polygon class="a" points="344.11 510.28 171.1 462.49 171.1 289.49 344.11 337.28 344.11 510.28"/></mask></defs><title>objects-diagram</title><polyline class="c" points="460.63 153.71 480.14 142.45 513.15 123.39"/><polyline class="c" points="312.69 239.13 336.82 225.2 365.42 208.68"/><polygon class="d" points="742.15 65.53 519.88 5.97 519.88 368.97 742.15 428.53 742.15 65.53"/><polygon class="e" points="742.15 428.53 742.15 377.47 786.44 403 742.15 428.53"/><polyline class="c" points="619.05 308.21 626.95 303.65 636.44 298.17"/><polygon class="f" points="637.26 156.11 443.71 104.25 443.71 402.92 637.26 454.78 637.26 156.11"/><g class="g"><polygon class="h" points="625.33 239.44 452.55 193.07 452.55 170.5 625.33 216.88 625.33 239.44"/><polygon class="i" points="625.33 262.01 452.55 215.64 452.55 193.07 625.33 239.44 625.33 262.01"/><polygon class="j" points="625.33 284.58 452.55 238.2 452.55 215.64 625.33 262.01 625.33 284.58"/></g><polyline class="c" points="467.58 395.66 481.45 387.65 490.54 382.4"/><polygon class="f" points="490.33 240.94 296.78 189.08 296.78 487.75 490.33 539.62 490.33 240.94"/><polygon class="h" points="386.94 387.36 314 367.78 314 238.33 386.94 257.91 386.94 387.36"/><line class="k" x1="402.02" y1="280.97" x2="355.33" y2="284.32"/><line class="k" x1="401.71" y1="316.74" x2="355.33" y2="291.74"/><polygon class="i" points="473.63 301.9 400.69 282.32 400.69 261.6 473.63 281.18 473.63 301.9"/><polygon class="j" points="473.63 337.63 400.69 318.05 400.69 297.32 473.63 316.9 473.63 337.63"/><polyline class="c" points="331.67 474.13 343.85 467.1 356.86 459.58"/><polyline class="c" points="183.35 313.8 207.44 299.89 231.58 285.96"/><polygon class="c" points="710.61 148.05 546.55 104.09 546.55 144.26 710.61 188.22 710.61 148.05"/><polygon class="c" points="710.61 215.05 546.55 171.09 546.55 211.26 710.61 255.22 710.61 215.05"/><line class="c" x1="162.68" y1="266.5" x2="533" y2="52.7"/><line class="c" x1="356.23" y1="617.04" x2="726.54" y2="403.24"/><polygon class="f" points="356.23 318.36 162.68 266.5 162.68 565.18 356.23 617.04 356.23 318.36"/><g class="l"><path class="m" d="M165.1,350.83c12-19.68,24-57.37,47,7s29,42,46,35.71,27,34.46,50,51.81,75,16.72,89,15.59"/><path class="n" d="M349.1,427.78c-9.13-13.05-13.7-31.26-31.2-9.54s-22.07,9.47-35,.86-20.55,6.69-38.05,6.89-67.08-25.38-77.73-30.61"/></g><polygon class="i" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="o" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="j" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><polygon class="o" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><line class="c" x1="513.15" y1="123.39" x2="544.97" y2="105.02"/><line class="c" x1="365.42" y1="208.68" x2="460.63" y2="153.71"/><line class="c" x1="231.58" y1="285.96" x2="312.69" y2="239.13"/><line class="c" x1="48.79" y1="391.49" x2="183.35" y2="313.8"/><line class="c" x1="636.44" y1="298.17" x2="709.92" y2="255.75"/><line class="c" x1="490.54" y1="382.4" x2="619.05" y2="308.21"/><line class="c" x1="356.86" y1="459.58" x2="467.58" y2="395.66"/><line class="c" x1="212.34" y1="543.03" x2="331.67" y2="474.13"/></svg>

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

@@ -0,0 +1,201 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+.l-style-guide {
+    font-size: 0.9em;
+    text-align: justify;
+    margin: auto 10%;
+
+    a.link {
+        color: $colorKey;
+    }
+
+    h1, h2 {
+        color: pullForward($colorBodyFg, 20%);
+    }
+
+    h2 {
+        font-size: 1.25em;
+    }
+
+    h3 {
+        font-size: 0.9em;
+        margin: $interiorMargin 0;
+        &:not(:first-child) {
+            margin-top: $interiorMarginLg * 2;
+        }
+        text-transform: uppercase;
+    }
+
+    .w-markup {
+        //Wrap markup example "pre" element
+        background-color: $colorCode;
+        border-radius: $interiorMargin;
+        display: block;
+        padding: $interiorMarginLg $interiorMarginLg;
+        position: relative;
+    }
+
+    code,
+    pre {
+        font-size: 0.8rem;
+    }
+
+    code {
+        background-color: $colorCode;
+        border-radius: $controlCr;
+        display: inline-block;
+        padding: 1px $interiorMargin;
+    }
+
+    pre {
+        display: block;
+        margin: 0;
+        max-height: 300px;
+        overflow: auto;
+        padding-bottom: $interiorMarginLg;
+        white-space: pre;
+    }
+
+    table, ul {
+        margin-bottom: $interiorMarginLg;
+        width: auto;
+    }
+
+    .themed {
+        display: none; // Each themed styleguide file will set this to block.
+    }
+
+    .doc-title {
+        color: rgba(#fff, 0.3);
+        text-transform: uppercase;
+    }
+
+    .l-section {
+        border-top: 1px solid rgba(#999, 0.3);
+        margin-top: 2em;
+        padding-top: 1em;
+
+        .cols {
+            @include display(flex);
+            @include flex-direction(row);
+
+            .col {
+                @include flex(1 1 auto);
+                &:not(:last-child) {
+                    $v: $interiorMargin * 4;
+                    border-right: 1px solid $colorInteriorBorder;
+                    margin-right: $v;
+                    padding-right: $v;
+                }
+                min-width: 300px;
+                img {
+                    width: 100%;
+                }
+            }
+
+            &.cols1-1 {
+                // 2 cols, equal width
+                .col {
+                    width: 50%;
+                }
+            }
+
+            &.cols1-2 {
+                // 3 cols, first is 1/3 of the width
+                .col:first-child {
+                    width: 33%;
+                }
+                .col:last-child {
+                    width: 66%;
+                }
+            }
+
+            &.cols2-1 {
+                // 3 cols, first is 2/3 of the width
+                .col:first-child {
+                    width: 66%;
+                }
+                .col:last-child {
+                    width: 33%;
+                }
+            }
+        }
+    }
+
+    // Example grid of glyphs
+    .items-holder.grid {
+        table.details {
+            width: 100%;
+            td {
+                font-size: inherit;
+                &.label {
+                    color: pushBack($colorBodyFg, 10%);
+                    text-transform: uppercase;
+                    white-space: nowrap;
+                }
+            }
+        }
+        .item.glyph-item,
+        .item.swatch-item {
+            margin-bottom: 50px;
+            margin-right: 10px;
+            position: relative;
+            text-align: left;
+            .glyph {
+                color: $colorGlyphExample;
+                font-size: 5em;
+                margin: $interiorMarginLg 0;
+                text-align: center;
+            }
+        }
+
+        .item.glyph-item {
+            width: 225px;
+            height: 200px;
+        }
+
+        .item.swatch-item {
+            $h: 150px;
+            $d: 75px;
+            width: 200px;
+            height: $h;
+            .glyph {
+                text-shadow: 0px 1px 10px rgba(black, 0.3);
+            }
+
+            .h-swatch {
+                position: relative;
+                height: $d + $interiorMarginLg;
+            }
+
+            .swatch {
+                height: $d; width: $d;
+                border: 1px solid $colorInteriorBorder;
+                border-radius: 15%;
+                position: absolute;
+                left: 50%;
+                @include transform(translateX(-50%));
+            }
+        }
+    }
+}
+

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

@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2015, 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.
+ *****************************************************************************/
+@import "bourbon";
+@import "../../../../platform/commonUI/general/res/sass/constants";
+@import "../../../../platform/commonUI/general/res/sass/mixins";
+@import "../../../../platform/commonUI/themes/espresso/res/sass/constants";
+@import "../../../../platform/commonUI/themes/espresso/res/sass/mixins";
+@import "../../../../platform/commonUI/general/res/sass/glyphs";
+@import "../../../../platform/commonUI/general/res/sass/icons";
+
+// Thematic constants
+$colorCode: rgba(black, 0.2);
+$colorGlyphExample: #fff;
+
+@import "style-guide-base";
+
+div.themed.espresso { display: block; }
+span.themed.espresso { display: inline; }

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

@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2015, 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.
+ *****************************************************************************/
+@import "bourbon";
+@import "../../../../platform/commonUI/general/res/sass/constants";
+@import "../../../../platform/commonUI/general/res/sass/mixins";
+@import "../../../../platform/commonUI/themes/snow/res/sass/constants";
+@import "../../../../platform/commonUI/themes/snow/res/sass/mixins";
+@import "../../../../platform/commonUI/general/res/sass/glyphs";
+@import "../../../../platform/commonUI/general/res/sass/icons";
+
+// Thematic constants
+$colorCode: rgba(black, 0.1);
+$colorGlyphExample: darken($colorBodyBg, 30%);
+
+@import "style-guide-base";
+
+div.themed.snow { display: block; }
+span.themed.snow { display: inline; }

example/styleguide/res/templates/colors.html

@@ -0,0 +1,84 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div ng-init="colors = [
+{ 'category': 'Interface', 'description': 'Colors used in the application envelope, buttons and controls.', 'items': [{ 'name': 'Body Background', 'constant': '$colorBodyBg', 'valEspresso': '#333', 'valSnow': '#fcfcfc' },
+{ 'name': 'Body Foreground', 'constant': '$colorBodyFg', 'valEspresso': '#999', 'valSnow': '#666' },
+{ 'name': 'Key Color Background', 'constant': '$colorKey', 'valEspresso': '#0099cc', 'valSnow': '#0099cc' },
+{ 'name': 'Key Color Foreground', 'constant': '$colorKeyFg', 'valEspresso': '#fff', 'valSnow': '#fff' },
+{ 'name': 'Paused Color Background', 'constant': '$colorPausedBg', 'valEspresso': '#c56f01', 'valSnow': '#ff9900' },
+{ 'name': 'Paused Color Foreground', 'constant': '$colorPausedFg', 'valEspresso': '#fff', 'valSnow': '#fff' }]},
+{ 'category': 'Forms', 'description': 'Colors in forms, mainly to articulate validation status.', 'items': [{ 'name': 'Valid Entry', 'constant': '$colorFormValid', 'valEspresso': '#33cc33', 'valSnow': '#33cc33' },
+{ 'name': 'Errorenous Entry', 'constant': '$colorFormError', 'valEspresso': '#990000', 'valSnow': '#990000' },
+{ 'name': 'Invalid Entry', 'constant': '$colorFormInvalid', 'valEspresso': '#ff3300', 'valSnow': '#ff2200' }]},
+{ 'category': 'Application Status', 'description': 'Colors related to the status of application objects, such as a successful connection to a service.', 'items': [{ 'name': 'Alert Color', 'constant': '$colorAlert', 'valEspresso': '#ff3c00', 'valSnow': '#ff3c00' },
+{ 'name': 'Status Color Foreground', 'constant': '$colorStatusFg', 'valEspresso': '#ccc', 'valSnow': '#fff' },
+{ 'name': 'Default Status Color', 'constant': '$colorStatusDefault', 'valEspresso': '#ccc', 'valSnow': '#ccc' },
+{ 'name': 'Status: Informational Color', 'constant': '$colorStatusInfo', 'valEspresso': '#62ba72', 'valSnow': '#60ba7b' },
+{ 'name': 'Status: Alert Color', 'constant': '$colorStatusAlert', 'valEspresso': '#ffa66d', 'valSnow': '#ffb66c' },
+{ 'name': 'Status: Error Color', 'constant': '$colorStatusError', 'valEspresso': '#d4585c', 'valSnow': '#c96b68' }]},
+{ 'category': 'Telemetry Status', 'description': 'Telemetry status colors used to indicate limit violations and alarm states. Note that these colors should be reserved exclusively for this usage.', 'items': [{ 'name': 'Yellow Limit Color Background', 'constant': '$colorLimitYellowBg', 'valEspresso': 'rgba(255,170,0,0.3)', 'valSnow': 'rgba(255,170,0,0.3)' },
+{ 'name': 'Yellow Limit Color Icon', 'constant': '$colorLimitYellowIc', 'valEspresso': '#ffaa00', 'valSnow': '#ffaa00' },
+{ 'name': 'Red Limit Color Background', 'constant': '$colorLimitRedBg', 'valEspresso': 'rgba(255,0,0,0.3)', 'valSnow': 'rgba(255,0,0,0.3)' },
+{ 'name': 'Red Limit Color Icon', 'constant': '$colorLimitRedIc', 'valEspresso': 'red', 'valSnow': 'red' }]}
+]"></div>
+
+
+
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Colors</h1>
+
+    <div class="l-section">
+        <h2>Overview</h2>
+        <p>In mission operations, color is used to convey meaning. Alerts, warnings and status conditions are by convention communicated with colors in the green, yellow and red families. Colors must also be reserved for use in plots. As a result, Open MCT uses color selectively and sparingly. Follow these guidelines:</p>
+        <ul>
+            <li>Don't use red, orange, yellow or green colors in any element that isn't conveying some kind of status information.</li>
+            <li>Each theme has a key color (typically blue-ish) that should be used to emphasize interactive elements and important UI controls.</li>
+            <li>Within each theme values are used to push elements back or bring them forward, lowering or raising them in visual importance.
+                <span class="themed espresso">In this theme, Espresso, lighter colors are placed on a dark background. The lighter a color is, the more it comes toward the observer and is raised in importance.</span>
+                <span class="themed snow">In this theme, Snow, darker colors are placed on a light background. The darker a color is, the more it comes toward the observer and is raised in importance.</span>
+            </li>
+            <li>For consistency, use a theme's pre-defined status colors.</li>
+        </ul>
+    </div>
+
+    <div class="l-section" ng-repeat="colorSet in colors">
+        <h2>{{ colorSet.category }}</h2>
+        <p>{{ colorSet.description }}</p>
+        <div class="items-holder grid">
+            <div class="item swatch-item" ng-repeat="color in colorSet.items">
+                <div class="h-swatch">
+                    <div class="swatch themed espresso" style="background-color: {{ color.valEspresso }}"></div>
+                    <div class="swatch themed snow" style="background-color: {{ color.valSnow }}"></div>
+                </div>
+                <table class="details">
+                    <tr><td class="label">Name</td><td class="value">{{color.name}}</td></tr>
+                    <tr><td class="label">SASS</td><td class="value">{{color.constant}}</td></tr>
+                    <tr><td class="label">Value</td><td class="value">
+                        <span class="themed espresso">{{color.valEspresso}}</span>
+                        <span class="themed snow">{{color.valSnow}}</span>
+                    </td></tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

example/styleguide/res/templates/controls.html

@@ -0,0 +1,163 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Controls</h1>
+
+    <div class="l-section">
+        <h2>Standard Buttons</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
+                <p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
+            </div>
+<mct-example><a class="s-button icon-pencil" title="Edit"></a>
+<a class="s-button" title="Edit">Edit</a>
+<a class="s-button icon-pencil" title="Edit">
+    <span class="title-label">Edit</span>
+</a>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>&quot;Major&quot; Buttons</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add <code>.major</code> to any element that uses <code>.s-button</code>.</p>
+            </div>
+<mct-example><a class="s-button major">Ok</a>
+<a class="s-button">Cancel</a>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Button Sets</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.</p>
+                <p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
+            </div>
+<mct-example><span class="l-btn-set">
+    <a class="s-button icon-magnify"></a>
+    <a class="s-button icon-magnify-in"></a>
+    <a class="s-button icon-magnify-out"></a>
+</span>
+</mct-example>
+            </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Icon-only Buttons</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>When a button is presented within another control it may be advantageous to avoid visual clutter by using an icon-only button. These type of controls present an icon without the &quot;base&quot; of standard buttons. Icon-only buttons should only be used in a context where they are clearly an interactive element and not an object-type identifier, and should not be used with text.</p>
+            </div>
+<mct-example><a class="s-icon-button icon-pencil" title="Edit"></a>
+            </mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Checkboxes</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
+                <p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
+            </div>
+<mct-example><label class="checkbox custom no-text">
+    <input type="checkbox" />
+    <em></em>
+</label>
+<br />
+<label class="checkbox custom no-text">
+    <input type="checkbox" checked />
+    <em></em>
+</label>
+<br />
+<label class="checkbox custom">Labeled checkbox
+    <input type="checkbox" />
+    <em></em>
+</label></mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Radio Buttons</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Radio buttons use the same technique as checkboxes above.</p>
+            </div>
+<mct-example><label class="radio custom">Red
+    <input name="Alarm Status" type="radio" />
+    <em></em>
+</label>
+<br />
+<label class="radio custom">Orange
+    <input name="Alarm Status" type="radio" checked />
+    <em></em>
+</label>
+<br />
+<label class="radio custom">Yellow
+    <input name="Alarm Status" type="radio" />
+    <em></em>
+</label>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Selects</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms. The <code>select</code> element is wrapped by another element, such as a <code>div</code>, which acts as the main display element for the styling. The <code>select</code> provides the click and select functionality, while having all of its native look-and-feel suppressed.</p>
+            </div>
+<mct-example><div class="select">
+    <select>
+        <option value="" selected="selected">- Select One -</option>
+        <option value="Colussus">Colussus</option>
+        <option value="HAL 9000">HAL 9000</option>
+        <option value="Mother">Mother</option>
+        <option value="Skynet">Skynet</option>
+    </select>
+</div>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Local Controls</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Local controls are typically buttons and selects that provide local control to an individual element. Typically, these controls are hidden in order to not block data display until the user hovers their cursor over an element, when the controls are displayed using a transition fade. Mousing out of the element fades the controls from view.</p>
+            </div>
+            <mct-example><div class="plot-display-area" style="height: 100px; padding: 10px; position: relative;">Hover over me
+    <div class="l-local-controls gl-plot-local-controls t-plot-display-controls">
+        <a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
+        <a class="s-button icon-arrows-out" title="Reset pan/zoom"></a>
+    </div>
+</div></mct-example>
+        </div>
+    </div>
+
+</div>

example/styleguide/res/templates/glyphs.html

@@ -0,0 +1,215 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div ng-init="general= [{ 'meaning': 'Pay attention', 'cssClass': 'icon-alert-rect', 'cssContent': 'e900', 'htmlEntity': '&amp;#xe900' },
+{ 'meaning': 'Warning', 'cssClass': 'icon-alert-triangle', 'cssContent': 'e901', 'htmlEntity': '&amp;#xe901' },
+{ 'meaning': 'Invoke menu', 'cssClass': 'icon-arrow-down', 'cssContent': 'e902', 'htmlEntity': '&amp;#xe902' },
+{ 'meaning': 'General usage arrow pointing left', 'cssClass': 'icon-arrow-left', 'cssContent': 'e903', 'htmlEntity': '&amp;#xe903' },
+{ 'meaning': 'General usage arrow pointing right', 'cssClass': 'icon-arrow-right', 'cssContent': 'e904', 'htmlEntity': '&amp;#xe904' },
+{ 'meaning': 'Upper limit, red', 'cssClass': 'icon-arrow-double-up', 'cssContent': 'e905', 'htmlEntity': '&amp;#xe905' },
+{ 'meaning': 'Upper limit, yellow', 'cssClass': 'icon-arrow-tall-up', 'cssContent': 'e906', 'htmlEntity': '&amp;#xe906' },
+{ 'meaning': 'Lower limit, yellow', 'cssClass': 'icon-arrow-tall-down', 'cssContent': 'e907', 'htmlEntity': '&amp;#xe907' },
+{ 'meaning': 'Lower limit, red', 'cssClass': 'icon-arrow-double-down', 'cssContent': 'e908', 'htmlEntity': '&amp;#xe908' },
+{ 'meaning': 'General usage arrow pointing up', 'cssClass': 'icon-arrow-up', 'cssContent': 'e909', 'htmlEntity': '&amp;#xe909' },
+{ 'meaning': 'Required form element', 'cssClass': 'icon-asterisk', 'cssContent': 'e910', 'htmlEntity': '&amp;#xe910' },
+{ 'meaning': 'Alert', 'cssClass': 'icon-bell', 'cssContent': 'e911', 'htmlEntity': '&amp;#xe911' },
+{ 'meaning': 'General usage box symbol', 'cssClass': 'icon-box', 'cssContent': 'e912', 'htmlEntity': '&amp;#xe912' },
+{ 'meaning': 'Click on or into', 'cssClass': 'icon-box-with-arrow', 'cssContent': 'e913', 'htmlEntity': '&amp;#xe913' },
+{ 'meaning': 'General usage checkmark, used in checkboxes; complete', 'cssClass': 'icon-check', 'cssContent': 'e914', 'htmlEntity': '&amp;#xe914' },
+{ 'meaning': 'Connected', 'cssClass': 'icon-connectivity', 'cssContent': 'e915', 'htmlEntity': '&amp;#xe915' },
+{ 'meaning': 'Status: DB connected', 'cssClass': 'icon-database-in-brackets', 'cssContent': 'e916', 'htmlEntity': '&amp;#xe916' },
+{ 'meaning': 'View or make visible', 'cssClass': 'icon-eye-open', 'cssContent': 'e917', 'htmlEntity': '&amp;#xe917' },
+{ 'meaning': 'Settings, properties', 'cssClass': 'icon-gear', 'cssContent': 'e918', 'htmlEntity': '&amp;#xe918' },
+{ 'meaning': 'Process, progress, time', 'cssClass': 'icon-hourglass', 'cssContent': 'e919', 'htmlEntity': '&amp;#xe919' },
+{ 'meaning': 'Info', 'cssClass': 'icon-info', 'cssContent': 'e920', 'htmlEntity': '&amp;#xe920' },
+{ 'meaning': 'Link (alias)', 'cssClass': 'icon-link', 'cssContent': 'e921', 'htmlEntity': '&amp;#xe921' },
+{ 'meaning': 'Locked', 'cssClass': 'icon-lock', 'cssContent': 'e922', 'htmlEntity': '&amp;#xe922' },
+{ 'meaning': 'General usage minus symbol; used in timer object', 'cssClass': 'icon-minus', 'cssContent': 'e923', 'htmlEntity': '&amp;#xe923' },
+{ 'meaning': 'An item that is shared', 'cssClass': 'icon-people', 'cssContent': 'e924', 'htmlEntity': '&amp;#xe924' },
+{ 'meaning': 'User profile or belonging to an individual', 'cssClass': 'icon-person', 'cssContent': 'e925', 'htmlEntity': '&amp;#xe925' },
+{ 'meaning': 'General usage plus symbol; used in timer object', 'cssClass': 'icon-plus', 'cssContent': 'e926', 'htmlEntity': '&amp;#xe926' },
+{ 'meaning': 'Delete', 'cssClass': 'icon-trash', 'cssContent': 'e927', 'htmlEntity': '&amp;#xe927' },
+{ 'meaning': 'Close, remove', 'cssClass': 'icon-x', 'cssContent': 'e928', 'htmlEntity': '&amp;#xe928' },
+{ 'meaning': 'Enclosing, inclusive; used in Time Conductor', 'cssClass': 'icon-brackets', 'cssContent': 'e929', 'htmlEntity': '&amp;#xe929' },
+{ 'meaning': 'Something is targeted', 'cssClass': 'icon-crosshair', 'cssContent': 'e930', 'htmlEntity': '&amp;#xe930' },
+{ 'meaning': 'Draggable', 'cssClass': 'icon-grippy', 'cssContent': 'e931', 'htmlEntity': '&amp;#xe931' }
+]; controls= [{ 'meaning': 'Reset zoom/pam', 'cssClass': 'icon-arrows-out', 'cssContent': 'e1000', 'htmlEntity': '&amp;#xe1000' },
+{ 'meaning': 'Expand vertically', 'cssClass': 'icon-arrows-right-left', 'cssContent': 'e1001', 'htmlEntity': '&amp;#xe1001' },
+{ 'meaning': 'View scrolling', 'cssClass': 'icon-arrows-up-down', 'cssContent': 'e1002', 'htmlEntity': '&amp;#xe1002' },
+{ 'meaning': 'Bullet; used in radio buttons', 'cssClass': 'icon-bullet', 'cssContent': 'e1004', 'htmlEntity': '&amp;#xe1004' },
+{ 'meaning': 'Invoke datetime picker', 'cssClass': 'icon-calendar', 'cssContent': 'e1005', 'htmlEntity': '&amp;#xe1005' },
+{ 'meaning': 'Web link', 'cssClass': 'icon-chain-links', 'cssContent': 'e1006', 'htmlEntity': '&amp;#xe1006' },
+{ 'meaning': 'Collapse left', 'cssClass': 'icon-collapse-pane-left', 'cssContent': 'e1007', 'htmlEntity': '&amp;#xe1007' },
+{ 'meaning': 'Collapse right', 'cssClass': 'icon-collapse-pane-right', 'cssContent': 'e1008', 'htmlEntity': '&amp;#xe1008' },
+{ 'meaning': 'Download', 'cssClass': 'icon-download', 'cssContent': 'e1009', 'htmlEntity': '&amp;#xe1009' },
+{ 'meaning': 'Copy/Duplicate', 'cssClass': 'icon-duplicate', 'cssContent': 'e1010', 'htmlEntity': '&amp;#xe1010' },
+{ 'meaning': 'New folder', 'cssClass': 'icon-folder-new', 'cssContent': 'e1011', 'htmlEntity': '&amp;#xe1011' },
+{ 'meaning': 'Exit fullscreen mode', 'cssClass': 'icon-fullscreen-collapse', 'cssContent': 'e1012', 'htmlEntity': '&amp;#xe1012' },
+{ 'meaning': 'Display fullscreen', 'cssClass': 'icon-fullscreen-expand', 'cssContent': 'e1013', 'htmlEntity': '&amp;#xe1013' },
+{ 'meaning': 'Layer order', 'cssClass': 'icon-layers', 'cssContent': 'e1014', 'htmlEntity': '&amp;#xe1014' },
+{ 'meaning': 'Line color', 'cssClass': 'icon-line-horz', 'cssContent': 'e1015', 'htmlEntity': '&amp;#xe1015' },
+{ 'meaning': 'Search', 'cssClass': 'icon-magnify', 'cssContent': 'e1016', 'htmlEntity': '&amp;#xe1016' },
+{ 'meaning': 'Zoom in', 'cssClass': 'icon-magnify-in', 'cssContent': 'e1017', 'htmlEntity': '&amp;#xe1017' },
+{ 'meaning': 'Zoom out', 'cssClass': 'icon-magnify-out', 'cssContent': 'e1018', 'htmlEntity': '&amp;#xe1018' },
+{ 'meaning': 'Menu', 'cssClass': 'icon-menu-hamburger', 'cssContent': 'e1019', 'htmlEntity': '&amp;#xe1019' },
+{ 'meaning': 'Move', 'cssClass': 'icon-move', 'cssContent': 'e1020', 'htmlEntity': '&amp;#xe1020' },
+{ 'meaning': 'Open in new window', 'cssClass': 'icon-new-window', 'cssContent': 'e1021', 'htmlEntity': '&amp;#xe1021' },
+{ 'meaning': 'Fill', 'cssClass': 'icon-paint-bucket', 'cssContent': 'e1022', 'htmlEntity': '&amp;#xe1022' },
+{ 'meaning': 'Pause real-time streaming', 'cssClass': 'icon-pause', 'cssContent': 'e1023', 'htmlEntity': '&amp;#xe1023' },
+{ 'meaning': 'Edit', 'cssClass': 'icon-pencil', 'cssContent': 'e1024', 'htmlEntity': '&amp;#xe1024' },
+{ 'meaning': 'Stop pause, resume real-time streaming', 'cssClass': 'icon-play', 'cssContent': 'e1025', 'htmlEntity': '&amp;#xe1025' },
+{ 'meaning': 'Plot resources', 'cssClass': 'icon-plot-resource', 'cssContent': 'e1026', 'htmlEntity': '&amp;#xe1026' },
+{ 'meaning': 'Previous', 'cssClass': 'icon-pointer-left', 'cssContent': 'e1027', 'htmlEntity': '&amp;#xe1027' },
+{ 'meaning': 'Next, navigate to', 'cssClass': 'icon-pointer-right', 'cssContent': 'e1028', 'htmlEntity': '&amp;#xe1028' },
+{ 'meaning': 'Refresh', 'cssClass': 'icon-refresh', 'cssContent': 'e1029', 'htmlEntity': '&amp;#xe1029' },
+{ 'meaning': 'Save', 'cssClass': 'icon-save', 'cssContent': 'e1030', 'htmlEntity': '&amp;#xe1030' },
+{ 'meaning': 'View plot', 'cssClass': 'icon-sine', 'cssContent': 'e1031', 'htmlEntity': '&amp;#xe1031' },
+{ 'meaning': 'Text color', 'cssClass': 'icon-T', 'cssContent': 'e1032', 'htmlEntity': '&amp;#xe1032' },
+{ 'meaning': 'Image thumbs strip; view items grid', 'cssClass': 'icon-thumbs-strip', 'cssContent': 'e1033', 'htmlEntity': '&amp;#xe1033' },
+{ 'meaning': 'Two part item, both parts', 'cssClass': 'icon-two-parts-both', 'cssContent': 'e1034', 'htmlEntity': '&amp;#xe1034' },
+{ 'meaning': 'Two part item, one only', 'cssClass': 'icon-two-parts-one-only', 'cssContent': 'e1035', 'htmlEntity': '&amp;#xe1035' },
+{ 'meaning': 'Resync', 'cssClass': 'icon-resync', 'cssContent': 'e1036', 'htmlEntity': '&amp;#xe1036' },
+{ 'meaning': 'Reset', 'cssClass': 'icon-reset', 'cssContent': 'e1037', 'htmlEntity': '&amp;#xe1037' },
+{ 'meaning': 'Clear', 'cssClass': 'icon-x-in-circle', 'cssContent': 'e1038', 'htmlEntity': '&amp;#xe1038' },
+{ 'meaning': 'Brightness', 'cssClass': 'icon-brightness', 'cssContent': 'e1039', 'htmlEntity': '&amp;#xe1039' },
+{ 'meaning': 'Contrast', 'cssClass': 'icon-contrast', 'cssContent': 'e1040', 'htmlEntity': '&amp;#xe1040' },
+{ 'meaning': 'Expand', 'cssClass': 'icon-expand', 'cssContent': 'e1041', 'htmlEntity': '&amp;#xe1041' },
+{ 'meaning': 'View items in a tabular list', 'cssClass': 'icon-list-view', 'cssContent': 'e1042', 'htmlEntity': '&amp;#xe1042' },
+{ 'meaning': 'Snap an object corner to a grid', 'cssClass': 'icon-grid-snap-to', 'cssContent': 'e1043', 'htmlEntity': '&amp;#xe1043' },
+{ 'meaning': 'Do not snap an object corner to a grid', 'cssClass': 'icon-grid-snap-no', 'cssContent': 'e1044', 'htmlEntity': '&amp;#xe1044' },
+{ 'meaning': 'Show an object frame in a Display Layout', 'cssClass': 'icon-frame-show', 'cssContent': 'e1045', 'htmlEntity': '&amp;#xe1045' },
+{ 'meaning': 'Do not show an object frame in a Display Layout', 'cssClass': 'icon-frame-hide', 'cssContent': 'e1046', 'htmlEntity': '&amp;#xe1046' }
+]; objects= [{ 'meaning': 'Activity', 'cssClass': 'icon-activity', 'cssContent': 'e1100', 'htmlEntity': '&amp;#xe1100' },
+{ 'meaning': 'Activity Mode', 'cssClass': 'icon-activity-mode', 'cssContent': 'e1101', 'htmlEntity': '&amp;#xe1101' },
+{ 'meaning': 'Auto-flow Tabular view', 'cssClass': 'icon-autoflow-tabular', 'cssContent': 'e1102', 'htmlEntity': '&amp;#xe1102' },
+{ 'meaning': 'Clock object type', 'cssClass': 'icon-clock', 'cssContent': 'e1103', 'htmlEntity': '&amp;#xe1103' },
+{ 'meaning': 'Database', 'cssClass': 'icon-database', 'cssContent': 'e1104', 'htmlEntity': '&amp;#xe1104' },
+{ 'meaning': 'Data query', 'cssClass': 'icon-database-query', 'cssContent': 'e1105', 'htmlEntity': '&amp;#xe1105' },
+{ 'meaning': 'Data Set domain object', 'cssClass': 'icon-dataset', 'cssContent': 'e1106', 'htmlEntity': '&amp;#xe1106' },
+{ 'meaning': 'Datatable, channel table', 'cssClass': 'icon-datatable', 'cssContent': 'e1107', 'htmlEntity': '&amp;#xe1107' },
+{ 'meaning': 'Dictionary', 'cssClass': 'icon-dictionary', 'cssContent': 'e1108', 'htmlEntity': '&amp;#xe1108' },
+{ 'meaning': 'Folder', 'cssClass': 'icon-folder', 'cssContent': 'e1109', 'htmlEntity': '&amp;#xe1109' },
+{ 'meaning': 'Imagery', 'cssClass': 'icon-image', 'cssContent': 'e1110', 'htmlEntity': '&amp;#xe1110' },
+{ 'meaning': 'Display Layout', 'cssClass': 'icon-layout', 'cssContent': 'e1111', 'htmlEntity': '&amp;#xe1111' },
+{ 'meaning': 'Generic Object', 'cssClass': 'icon-object', 'cssContent': 'e1112', 'htmlEntity': '&amp;#xe1112' },
+{ 'meaning': 'Unknown object type', 'cssClass': 'icon-object-unknown', 'cssContent': 'e1113', 'htmlEntity': '&amp;#xe1113' },
+{ 'meaning': 'Packet domain object', 'cssClass': 'icon-packet', 'cssContent': 'e1114', 'htmlEntity': '&amp;#xe1114' },
+{ 'meaning': 'Page', 'cssClass': 'icon-page', 'cssContent': 'e1115', 'htmlEntity': '&amp;#xe1115' },
+{ 'meaning': 'Overlay plot', 'cssClass': 'icon-plot-overlay', 'cssContent': 'e1116', 'htmlEntity': '&amp;#xe1116' },
+{ 'meaning': 'Stacked plot', 'cssClass': 'icon-plot-stacked', 'cssContent': 'e1117', 'htmlEntity': '&amp;#xe1117' },
+{ 'meaning': 'Session object', 'cssClass': 'icon-session', 'cssContent': 'e1118', 'htmlEntity': '&amp;#xe1118' },
+{ 'meaning': 'Table', 'cssClass': 'icon-tabular', 'cssContent': 'e1119', 'htmlEntity': '&amp;#xe1119' },
+{ 'meaning': 'Latest available data object', 'cssClass': 'icon-tabular-lad', 'cssContent': 'e1120', 'htmlEntity': '&amp;#xe1120' },
+{ 'meaning': 'Latest available data set', 'cssClass': 'icon-tabular-lad-set', 'cssContent': 'e1121', 'htmlEntity': '&amp;#xe1121' },
+{ 'meaning': 'Real-time table view', 'cssClass': 'icon-tabular-realtime', 'cssContent': 'e1122', 'htmlEntity': '&amp;#xe1122' },
+{ 'meaning': 'Real-time scrolling table', 'cssClass': 'icon-tabular-scrolling', 'cssContent': 'e1123', 'htmlEntity': '&amp;#xe1123' },
+{ 'meaning': 'Telemetry element', 'cssClass': 'icon-telemetry', 'cssContent': 'e1124', 'htmlEntity': '&amp;#xe1124' },
+{ 'meaning': 'Telemetry Panel object', 'cssClass': 'icon-telemetry-panel', 'cssContent': 'e1125', 'htmlEntity': '&amp;#xe1125' },
+{ 'meaning': 'Timeline object', 'cssClass': 'icon-timeline', 'cssContent': 'e1126', 'htmlEntity': '&amp;#xe1126' },
+{ 'meaning': 'Timer object', 'cssClass': 'icon-timer', 'cssContent': 'e1127', 'htmlEntity': '&amp;#xe1127' },
+{ 'meaning': 'Data Topic', 'cssClass': 'icon-topic', 'cssContent': 'e1128', 'htmlEntity': '&amp;#xe1128' },
+{ 'meaning': 'Fixed Position object', 'cssClass': 'icon-box-with-dashed-lines', 'cssContent': 'e1129', 'htmlEntity': '&amp;#xe1129' },
+{ 'meaning': 'Summary Widget', 'cssClass': 'icon-summary-widget', 'cssContent': 'e1130', 'htmlEntity': '&amp;#xe1130' }
+];
+"></div>
+
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Glyphs</h1>
+    <div class="l-section">
+        <p>Symbolic glyphs are used extensively in Open MCT to call attention to interactive elements, identify objects, and aid in visual recall. Glyphs are made available in a custom symbols font, and have associated CSS classes for their usage. Using a font in this way (versus using images or sprites) has advantages in that each symbol is in effect a scalable vector that can be sized up or down as needed. Color can also quite easily be applied via CSS.</p>
+        <p>New glyphs can be added if needed. Take care to observe the following guidelines:
+        <ul>
+        <li>Symbols should be created at 512 pixels high, and no more than 512 pixels wide. This size is based on a &quot;crisp&quot; 16px approach. Find out more about <a class="link" target="_blank" href="http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon">crisp symbol fonts</a>.</li>
+            <li>In general, the symbol should occupy most of a square area as possible; avoid symbol aspect ratios that are squat or tall.</li>
+            <li>For consistency and legibility, symbols are designed as mostly solid shapes. Avoid using thin lines or fine detail that will be lost when the icon is sized down. In general, no stroke should be less than 32 pixels.</li>
+            <li>Symbols should be legible down to a minimum of 12 x 12 pixels.</li>
+
+        </ul>
+        </p>
+    </div>
+
+    <div class="l-section">
+        <h2>How to Use Glyphs</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>The easiest way to use a glyph is to include its CSS class in an element. The CSS adds a psuedo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
+                <p>Alternately, you can use the <code>.ui-symbol</code> class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach.</p>
+            </div>
+            <mct-example><a class="s-button icon-gear" title="Settings"></a>
+<br /><br />
+<a class="s-icon-button icon-gear" title="Settings"></a>
+<br /><br />
+<div class="ui-symbol">&#xe901 &#xe914 &#xe922</div>
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>General User Interface Glyphs</h2>
+        <p>Glyphs suitable for denoting general user interface verbs and nouns.</p>
+        <div class="items-holder grid">
+            <div class="item glyph-item" ng-repeat="glyph in general">
+                <div class="glyph" ng-class="glyph.cssClass"></div>
+                <table class="details">
+                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
+                    <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
+                    <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
+                    <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Control Glyphs</h2>
+        <p>Glyphs created for use in various controls.</p>
+        <div class="items-holder grid">
+            <div class="item glyph-item" ng-repeat="glyph in controls">
+                <div class="glyph" ng-class="glyph.cssClass"></div>
+                <table class="details">
+                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
+                    <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
+                    <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
+                    <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Object Type Glyphs</h2>
+        <p>These glyphs are reserved exclusively to denote types of objects in the application. Only use them if you are referring to a pre-existing object type.</p>
+        <div class="items-holder grid">
+            <div class="item glyph-item" ng-repeat="glyph in objects">
+                <div class="glyph" ng-class="glyph.cssClass"></div>
+                <table class="details">
+                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
+                    <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
+                    <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
+                    <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
+                </table>
+            </div>
+        </div>
+    </div>
+
+</div>
+

example/styleguide/res/templates/input.html

@@ -0,0 +1,75 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Text Input</h1>
+    <div class="l-section">
+        <p>Text inputs and textareas have a consistent look-and-feel across the application. The input's <code>placeholder</code> attribute is styled to appear visually different from an entered value.</p>
+    </div>
+
+    <div class="l-section">
+        <h2>Text Inputs</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Use a text input where the user should enter relatively short text entries.</p>
+                <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
+            </div>
+<mct-example><input type="text" placeholder="Enter a value" />
+<br /><br />
+<input type="text" placeholder="Enter a value" value="An entered value" />
+<br /><br />
+<input type="text" placeholder="Enter a value" class="sm" value="Small" />
+<br /><br />
+<input type="text" placeholder="Enter a value" class="med" value="A medium input" />
+<br /><br />
+<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
+<br /><br />
+<input type="text" placeholder="Enter a value" class="sm numeric" value="10.9" />
+</mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Textareas</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Use a textarea where the user should enter relatively longer or multi-line text entries.</p>
+                <p>By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
+            </div>
+<mct-example><div style="position: relative; height: 100px">
+    <textarea placeholder="Enter a value"></textarea>
+</div>
+<br />
+<div style="position: relative; height: 100px">
+    <textarea placeholder="Enter a value">An entered value</textarea>
+</div>
+<br /><br />
+<textarea placeholder="Enter a value" class="sm">A small textarea</textarea>
+<br /><br />
+<textarea placeholder="Enter a value" class="med">A medium textarea</textarea>
+<br /><br />
+<textarea placeholder="Enter a value" class="lg">A large textarea</textarea>
+</mct-example>
+        </div>
+    </div>
+</div>
+

example/styleguide/res/templates/intro.html

@@ -0,0 +1,73 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Introduction</h1>
+    <div class="l-section">
+    <p>Open MCT is a robust, extensible telemetry monitoring and situational awareness system that provides a framework supporting fast and efficient multi-mission deployment. This guide will explore the major concepts and design elements of Open MCT. Its overall goal is to guide you in creating new features and plugins that seamlessly integrate with the base application.</p>
+    </div>
+
+    <div class="l-section">
+        <h2>Everything Is An Object</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+            <p>First and foremost, Open MCT uses a “object-oriented” approach: everything in the system is an object. Objects come in different types, and some objects can contain other objects of given types. This is similar to how the file management system of all modern computers works: a folder object can contain any other type of object, a presentation file can contain an image. This is conceptually the same in Open MCT.</p>
+            <p>As you develop plugins for Open MCT, consider how a generalized component might be combined with others when designing to create a rich and powerful larger object, rather than adding a single monolithic, non-modular plugin. To solve a particular problem or allow a new feature in Open MCT, you may need to introduce more than just one new object type.</p>
+            </div>
+            <div class="col">
+                <img src="/example/styleguide/res/images/diagram-objects.svg" />
+            </div>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Object Types</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+            <p>In the same way that different types of files might be opened and edited by different applications, objects in Open MCT also have different types. For example, a Display Layout provides a way that other objects that display information can be combined and laid out in a canvas area to create a recallable display that suits the needs of the user that created it. A Telemetry Panel allows a user to collect together Telemetry Points and visualize them as a plot or a table.</p>
+            <p>Object types provide a containment model that guides the user in their choices while creating a new object, and allows view normalization when flipping between different views. When a given object may only contain other objects of certain types, advantages emerge: the result of adding new objects is more predictable, more alternate views can be provided because the similarities between the contained objects is close, and we can provide more helpful and pointed guidance to the user because we know what types of objects they might be working with at a given time.</p>
+            <p>The types of objects that a container can hold should be based on the purpose of the container and the views that it affords. For example, a Folder’s purpose is to allow a user to conceptually organize objects of all other types; a Folder must therefore be able to contain an object of any type.</p>
+            </div>
+            <div class="col">
+                <img src="/example/styleguide/res/images/diagram-containment.svg" />
+            </div>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Object Views</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Views are simply different ways to view the content of a given object. For example, telemetry data could be viewed as a plot or a table. A clock can display its time in analog fashion or with digital numbers. In each view, all of the content is present; it’s just represented differently. When providing views for an object, all the content of the object should be present in each view.</p>
+            </div>
+            <div class="col">
+                <img src="/example/styleguide/res/images/diagram-views.svg" />
+            </div>
+        </div>
+    </div>
+
+
+
+    <p></p>
+    <p></p>
+    <p></p>
+</div>

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

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

example/styleguide/res/templates/menus.html

@@ -0,0 +1,168 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Menus</h1>
+
+    <div class="l-section">
+        <h2>Context Menus</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Context menus are used extensively in Open MCT. They are created dynamically upon a contextual click and positioned at the user's cursor position coincident with the element that invoked them. Context menus must use absolute position and utilize a z-index that places them above other in-page elements.</p>
+                <p>See <a class="link" href="http://localhost:8080/#/browse/styleguide:home/controls?view=styleguide.standards">User Interface Standards</a> for more details on z-indexing in Open MCT. Context menus should be destroyed if the user clicks outside the menu element.</p>
+            </div>
+            <mct-example><div style="height: 120px">
+    <div class="menu-element context-menu-wrapper mobile-disable-select">
+        <div class="menu context-menu">
+            <ul>
+                <li onclick="alert('Perform an action')" title="Open in a new browser tab" class="icon-new-window">Open In New Tab</li>
+                <li onclick="alert('Perform an action')" title="Remove this object from its containing object." class="icon-trash">Remove</li>
+                <li onclick="alert('Perform an action')" title="Create Link to object in another location." class="icon-link">Create Link</li>
+            </ul>
+        </div>
+    </div>
+</div></mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Dropdown Menus</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Dropdown menus are a dedicated, more discoverable context menu for a given object. Like context menus, dropdown menus are used extensively in Open MCT, and are most often associated with object header elements. They visually manifest as a downward pointing arrow <span class="context-available"></span> associated with an element, and when clicked displays a context menu at that location. See guidelines above about context menus in regards to z-indexing and element lifecycle.</p>
+                <p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
+            </div>
+<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
+
+<div class="l-flex-row flex-elem grows object-header">
+    <span class="type-icon flex-elem icon-layout"></span>
+    <span class="l-elem-wrapper l-flex-row flex-elem grows">
+        <span class="title-label flex-elem holder flex-can-shrink ng-binding">Object Header</span>
+        <span class="flex-elem context-available-w">
+            <span ng-controller="MenuArrowController as menuArrow" class="ng-scope">
+                <a class="context-available" ng-click="menuArrow.showMenu($event)"></a>
+            </span>
+        </span>
+    </span>
+</div>
+
+</div></mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Checkbox Menus</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this to </p>
+                <p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
+            </div>
+<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
+<div ng-controller="SearchMenuController as controller" class="ng-scope">
+    <div class="menu checkbox-menu" mct-click-elsewhere="parameters.menuVisible(false)">
+        <ul>
+            <!-- First element is special - it's a reset option -->
+            <li class="search-menu-item special icon-asterisk" title="Select all filters" ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
+                <label class="checkbox custom no-text">
+                    <input type="checkbox" class="checkbox ng-untouched ng-valid ng-dirty" ng-model="ngModel.checkAll" ng-change="controller.checkAll()">
+                    <em></em>
+                </label>
+                All
+            </li>
+            <li class="search-menu-item icon-folder">
+                <label class="checkbox custom no-text">
+                    <input type="checkbox" class="checkbox">
+                    <em></em>
+                </label>
+                Folder
+            </li>
+            <li class="search-menu-item icon-layout">
+                <label class="checkbox custom no-text">
+                    <input type="checkbox" class="checkbox">
+                    <em></em>
+                </label>
+                Display Layout
+            </li>
+            <li class="search-menu-item icon-box-with-dashed-lines">
+                <label class="checkbox custom no-text">
+                    <input type="checkbox" class="checkbox">
+                    <em></em>
+                </label>
+                Fixed Position Display
+            </li>
+        </ul>
+    </div>
+</div>
+</div>
+</mct-example>
+    </div>
+</div>
+
+    <div class="l-section">
+        <h2>Palettes</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one.</p>
+                <p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
+            </div>
+            <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
+
+<div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
+    <span class="l-click-area" ng-click="toggle.toggle()"></span>
+    <span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
+    <div class="menu l-color-palette" ng-show="toggle.isActive()">
+        <div class="l-palette-row l-option-row">
+            <div class="l-palette-item s-palette-item " ng-click="ngModel[field] = 'transparent'"></div>
+            <span class="l-palette-item-label">None</span>
+        </div>
+        <div class="l-palette-row">
+            <div class="l-palette-item s-palette-item" style="background: rgb(0, 0, 0);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(28, 28, 28);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(57, 57, 57);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(85, 85, 85);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(113, 113, 113);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(142, 142, 142);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(170, 170, 170);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(198, 198, 198);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(227, 227, 227);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
+        </div>
+        <div class="l-palette-row">
+            <div class="l-palette-item s-palette-item" style="background: rgb(136, 32, 32);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(128, 240, 72);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(128, 248, 248);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(88, 144, 224);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(0, 72, 240);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(136, 80, 240);"></div>
+            <div class="l-palette-item s-palette-item" style="background: rgb(224, 96, 248);"></div>
+        </div>
+    </div>
+</div>
+
+</div></mct-example>
+        </div>
+    </div>
+
+</div>

example/styleguide/res/templates/standards.html

@@ -0,0 +1,48 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Standards</h1>
+
+    <div class="l-section">
+        <h2>Absolute Positioning and Z-Indexing</h2>
+        <p>Absolute positioning is used in Open MCT in the main envelope interface to handle layout and draggable pane splitters, for elements that must be dynamically created and positioned (like context menus) and for buttons that are placed over other elements, such as a plot's zoom/pan history and reset buttons. When using absolute positioning, follow these guidelines:</p>
+        <ul>
+            <li>Don't specify a z-index if you don't have to.</li>
+            <li>If you must specify a z-index, use the lowest number you that prevents your element from being covered and puts it at the correct level per the table below.</li>
+        </ul>
+        <!-- This content maintained at https://docs.google.com/spreadsheets/d/1AzhUY0P3hLCfT8yPa2Cb1dwOOsQXBuSgCrOkhIoVm0A/edit#gid=0 -->
+        <table>
+            <tr class='header'><td>Type</td><td>Description</td><td>Z-index Range</td></tr>
+            <tr><td>Base interface items</td><td>Base level elements</td><td>0 - 1</td></tr>
+            <tr><td>Primary pane</td><td>Elements in the primary "view area" pane</td><td>2</td></tr>
+            <tr><td>Inspector pane, splitters</td><td>Elements in the Inspector, and splitters themselves</td><td>3</td></tr>
+            <tr><td>More base interface stuff</td><td>Base level elements</td><td>4 - 9</td></tr>
+            <tr><td>Treeview</td><td>Lefthand treeview elements</td><td>30 - 39</td></tr>
+            <tr><td>Help bubbles, rollover hints</td><td>Infobubbles, and similar</td><td>50 - 59</td></tr>
+            <tr><td>Context, button and dropdown menus</td><td>Context menus, button menus, etc. that must overlay other elements</td><td>70 - 79</td></tr>
+            <tr><td>Overlays</td><td>Modal overlay displays</td><td>100 - 109</td></tr>
+            <tr><td>Event messages</td><td>Alerts, event dialogs</td><td>1000</td></tr>
+        </table>
+    </div>
+
+</div>

example/styleguide/src/ExampleStyleGuideModelProvider.js

@@ -0,0 +1,50 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function ExampleStyleGuideModelProvider($q) {
+            var pages = {};
+
+            // Add pages
+            pages['intro'] = { name: "Introduction", type: "styleguide.intro", location: "styleguide:home" };
+            pages['standards'] = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" };
+            pages['colors'] = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" };
+            pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" };
+            pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" };
+            pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" };
+            pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };
+
+            return {
+                getModels: function () {
+                    return $q.when(pages);
+                }
+            };
+        }
+
+        return ExampleStyleGuideModelProvider
+    }
+);

example/styleguide/src/MCTExample.js

@@ -0,0 +1,30 @@
+define([
+    'text!../res/templates/mct-example.html'
+], function (
+    MCTExampleTemplate
+) {
+
+    function MCTExample() {
+        function link($scope, $element, $attrs, controller, $transclude) {
+            var codeEl = $element.find('pre');
+            var exampleEl = $element.find('div');
+
+            $transclude(function (clone) {
+                exampleEl.append(clone);
+                codeEl.text(exampleEl.html()
+                    .replace(/ class="ng-scope"/g, "")
+                    .replace(/ ng-scope"/g, '"'));
+            });
+        }
+
+        return {
+            restrict: "E",
+            template: MCTExampleTemplate,
+            transclude: true,
+            link: link,
+            replace: true
+        };
+    }
+
+    return MCTExample;
+});

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

@@ -28,10 +28,12 @@
     <script src="bower_components/requirejs/require.js">
     </script>
     <script>
+        var THIRTY_MINUTES = 30 * 60 * 1000;
+
         require(['openmct'], function (openmct) {
             [
-                'example/imagery',
-                'example/eventGenerator'
+                'example/eventGenerator',
+                'example/styleguide'
             ].forEach(
                 openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
             );
@@ -39,7 +41,31 @@
             openmct.install(openmct.plugins.LocalStorage());
             openmct.install(openmct.plugins.Espresso());
             openmct.install(openmct.plugins.Generator());
+            openmct.install(openmct.plugins.ExampleImagery());
             openmct.install(openmct.plugins.UTCTimeSystem());
+            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>

karma.conf.js

@@ -37,6 +37,7 @@ module.exports = function(config) {
             {pattern: 'bower_components/**/*.js', included: false},
             {pattern: 'node_modules/d3-*/**/*.js', included: false},
             {pattern: 'src/**/*.js', included: false},
+            {pattern: 'example/**/*.html', included: false},
             {pattern: 'example/**/*.js', included: false},
             {pattern: 'example/**/*.json', included: false},
             {pattern: 'platform/**/*.js', included: false},

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",
@@ -100,11 +101,5 @@ define([
         return new Main().run(defaultRegistry);
     });
 
-    // For now, install conductor by default
-    openmct.install(openmct.plugins.Conductor({
-        showConductor: false
-    }));
-
-
     return openmct;
 });

package.json

@@ -21,7 +21,8 @@
     "bower": "^1.7.7",
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
-    "gulp": "^3.9.0",
+    "gulp": "^3.9.1",
+    "gulp-header": "^1.8.8",
     "gulp-jscs": "^3.0.2",
     "gulp-jshint": "^2.0.0",
     "gulp-jshint-html-reporter": "^0.1.3",

platform/commonUI/browse/bundle.js

@@ -107,7 +107,9 @@ define([
                     "depends": [
                         "$scope",
                         "agentService",
-                        "$window"
+                        "$window",
+                        "$location",
+                        "$attrs"
                     ]
                 },
                 {
@@ -134,7 +136,9 @@ define([
                         "$scope",
                         "agentService",
                         "$window",
-                        "navigationService"
+                        "navigationService",
+                        "$location",
+                        "$attrs"
                     ]
                 }
             ],
@@ -240,7 +244,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.html

@@ -24,9 +24,9 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="abs holder holder-main browse-area s-browse-area browse-wrapper"
          ng-controller="PaneController as modelPaneTree"
-         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'">
+         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'" hide-parameter="hideTree">
         <mct-split-pane class='abs contents'
-                        anchor='left'>
+                        anchor='left' alias="leftSide">
             <div class='split-pane-component treeview pane left'>
                 <div class="abs holder l-flex-col holder-treeview-elements">
                     <mct-representation key="'create-button'"
@@ -58,9 +58,10 @@
 
                 <div class='holder holder-object-and-inspector abs' id='content-area'
                      ng-controller="InspectorPaneController as modelPaneInspect"
-                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
+                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'" 
+                     hide-parameter="hideInspector">
 
-                    <mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
+                    <mct-split-pane class='l-object-and-inspector contents abs' anchor='right' alias="rightSide">
                         <div class='split-pane-component t-object pane primary-pane left'>
                             <mct-representation mct-object="navigatedObject"
                                                 key="navigatedObject.getCapability('status').get('editing') ? 'edit-object' : 'browse-object'"
@@ -87,4 +88,3 @@
     </div>
     <mct-include key="'bottombar'"></mct-include>
 </div>
-

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

@@ -25,8 +25,8 @@
  * @namespace platform/commonUI/browse
  */
 define(
-    [],
-    function () {
+    ['lodash'],
+    function (_) {
 
         /**
          * The BrowseController is used to populate the initial scope in Browse
@@ -113,11 +113,22 @@ define(
                 $location.path('/browse/' + currentIds);
             }
 
+            function getLastChildIfRoot(object) {
+                if (object.getId() !== 'ROOT') {
+                    return object;
+                }
+                return object.useCapability('composition')
+                    .then(function (composees) {
+                        return composees[composees.length - 1];
+                    });
+            }
+
             function navigateToPath(path) {
                 return getObject('ROOT')
                     .then(function (root) {
                         return findViaComposition(root, path);
                     })
+                    .then(getLastChildIfRoot)
                     .then(function (object) {
                         navigationService.setNavigation(object);
                     });
@@ -146,11 +157,31 @@ define(
             // (e.g. bookmarks to pages in OpenMCT) and prevent them.  Instead,
             // navigate to the path ourselves, which results in it being
             // properly set.
-            $scope.$on('$routeChangeStart', function (event, route) {
-                if (route.$$route === $route.current.$$route &&
-                    route.pathParams.ids !== $route.current.pathParams.ids) {
-                    event.preventDefault();
-                    navigateToPath(route.pathParams.ids.split('/'));
+            $scope.$on('$routeChangeStart', function (event, route, oldRoute) {
+                if (route.$$route === $route.current.$$route) {
+                    if (route.pathParams.ids &&
+                        route.pathParams.ids !== $route.current.pathParams.ids) {
+
+                        var otherParams = _.omit(route.params, 'ids');
+                        var oldOtherParams = _.omit(oldRoute.params, 'ids');
+                        var deletedParams = _.omit(oldOtherParams, _.keys(otherParams));
+
+                        event.preventDefault();
+
+                        navigateToPath(route.pathParams.ids.split('/'))
+                            .then(function () {
+                                if (!_.isEqual(otherParams, oldOtherParams)) {
+                                    _.forEach(otherParams, function (v, k) {
+                                        $location.search(k, v);
+                                    });
+                                    _.forEach(deletedParams, function (k) {
+                                        $location.search(k, null);
+                                    });
+                                }
+                            });
+                    } else {
+                        navigateToPath([]);
+                    }
                 }
             });
 

platform/commonUI/browse/src/InspectorPaneController.js

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

platform/commonUI/browse/src/PaneController.js

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

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

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

platform/commonUI/browse/test/InspectorPaneControllerSpec.js

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

platform/commonUI/browse/test/PaneControllerSpec.js

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

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

@@ -33,8 +33,8 @@ define([
 ) {
 
     legacyRegistry.register("platform/commonUI/formats", {
-        "name": "Time services bundle",
-        "description": "Defines interfaces and provides default implementations for handling different time systems.",
+        "name": "Format Registry",
+        "description": "Provides a registry for formats, which allow parsing and formatting of values.",
         "extensions": {
             "components": [
                 {

platform/commonUI/formats/src/DurationFormat.js

@@ -44,6 +44,7 @@ define([
      * @memberof platform/commonUI/formats
      */
     function DurationFormat() {
+        this.key = "duration";
     }
 
     DurationFormat.prototype.format = function (value) {

platform/commonUI/formats/src/FormatProvider.js

@@ -30,19 +30,23 @@ define([
      * An object used to convert between numeric values and text values,
      * typically used to display these values to the user and to convert
      * user input to a numeric format, particularly for time formats.
-     * @interface {Format}
+     * @interface Format
      */
-
     /**
      * Parse text (typically user input) to a numeric value.
      * Behavior is undefined when the text cannot be parsed;
      * `validate` should be called first if the text may be invalid.
-     * @method parse
+     * @method Format#parse
      * @memberof Format#
      * @param {string} text the text to parse
      * @returns {number} the parsed numeric value
      */
 
+    /**
+     * @property {string} key A unique identifier for this formatter.
+     * @memberof Format#
+     */
+
     /**
      * Determine whether or not some text (typically user input) can
      * be parsed to a numeric value by this format.
@@ -58,10 +62,12 @@ define([
      * @method format
      * @memberof Format#
      * @param {number} value the numeric value to format
-     * @param {number} [threshold]  Optionally provides context to the
-     * format request, allowing for scale-appropriate formatting. This value
-     * should be the minimum unit to be represented by this format, in ms. For
-     * example, to display seconds, a threshold of 1 * 1000 should be provided.
+     * @param {number} [minValue] Contextual information for scaled formatting used in linear scales such as conductor
+     * and plot axes. Specifies the smallest number on the scale.
+     * @param {number} [maxValue] Contextual information for scaled formatting used in linear scales such as conductor
+     * and plot axes. Specifies the largest number on the scale
+     * @param {number} [count] Contextual information for scaled formatting used in linear scales such as conductor
+     * and plot axes. The number of labels on the scale.
      * @returns {string} the text representation of the value
      */
 

platform/commonUI/formats/src/UTCTimeFormat.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
+ * Open MCT, Copyright (c) 2014-2016, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -49,6 +49,7 @@ define([
      * @memberof platform/commonUI/formats
      */
     function UTCTimeFormat() {
+        this.key = "utc";
     }
 
     /**
@@ -64,7 +65,7 @@ define([
          *
          * Licensed
          */
-        return [
+        var format = [
             [".SSS", function (m) {
                 return m.milliseconds();
             }],
@@ -91,64 +92,32 @@ define([
                 return true;
             }]
         ].filter(function (row) {
-            return row[1](momentified);
-        })[0][0];
+                return row[1](momentified);
+            })[0][0];
+
+        if (format !== undefined) {
+            return moment.utc(d).format(format);
+        }
     }
 
     /**
-     * Returns a description of the current range of the time conductor's
-     * bounds.
-     * @param timeRange
-     * @returns {*}
+     * @param {number} value The value to format.
+     * @param {number} [minValue] Contextual information for scaled formatting used in linear scales such as conductor
+     * and plot axes. Specifies the smallest number on the scale.
+     * @param {number} [maxValue] Contextual information for scaled formatting used in linear scales such as conductor
+     * and plot axes. Specifies the largest number on the scale
+     * @param {number} [count] Contextual information for scaled formatting used in linear scales such as conductor
+     * and plot axes. The number of labels on the scale.
+     * @returns {string} the formatted date(s). If multiple values were requested, then an array of
+     * formatted values will be returned. Where a value could not be formatted, `undefined` will be returned at its position
+     * in the array.
      */
-    UTCTimeFormat.prototype.timeUnits = function (timeRange) {
-        var momentified = moment.duration(timeRange);
-
-        return [
-            ["Decades", function (r) {
-                return r.years() > 15;
-            }],
-            ["Years", function (r) {
-                return r.years() > 1;
-            }],
-            ["Months", function (r) {
-                return r.years() === 1 || r.months() > 1;
-            }],
-            ["Days", function (r) {
-                return r.months() === 1 || r.days() > 1;
-            }],
-            ["Hours", function (r) {
-                return r.days() === 1 || r.hours() > 1;
-            }],
-            ["Minutes", function (r) {
-                return r.hours() === 1 || r.minutes() > 1;
-            }],
-            ["Seconds", function (r) {
-                return r.minutes() === 1 || r.seconds() > 1;
-            }],
-            ["Milliseconds", function (r) {
-                return true;
-            }]
-        ].filter(function (row) {
-            return row[1](momentified);
-        })[0][0];
-    };
-
-    /**
-     *
-     * @param value
-     * @param {Scale} [scale] Optionally provides context to the
-     * format request, allowing for scale-appropriate formatting.
-     * @returns {string} the formatted date
-     */
-    UTCTimeFormat.prototype.format = function (value, scale) {
-        if (scale !== undefined) {
-            var scaledFormat = getScaledFormat(value, scale);
-            if (scaledFormat) {
-                return moment.utc(value).format(scaledFormat);
-            }
+    UTCTimeFormat.prototype.format = function (value) {
+        if (arguments.length > 1) {
+            return getScaledFormat(value);
+        } else {
+            return moment.utc(value).format(DATE_FORMAT) + "Z";
         }
-        return moment.utc(value).format(DATE_FORMAT) + "Z";
     };
 
     UTCTimeFormat.prototype.parse = function (text) {

platform/commonUI/formats/src/UTCTimeFormatSpec.js

@@ -1,83 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web 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 Web 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([
-    "./UTCTimeFormat",
-    "moment"
-], function (
-    UTCTimeFormat,
-    moment
-) {
-    describe("The UTCTimeFormat class", function () {
-        var format;
-        var scale;
-
-        beforeEach(function () {
-            format = new UTCTimeFormat();
-            scale = {min: 0, max: 0};
-        });
-
-        it("Provides an appropriately scaled time format based on the input" +
-            " time", function () {
-            var TWO_HUNDRED_MS = 200;
-            var THREE_SECONDS = 3000;
-            var FIVE_MINUTES = 5 * 60 * 1000;
-            var ONE_HOUR_TWENTY_MINS = (1 * 60 * 60 * 1000) + (20 * 60 * 1000);
-            var TEN_HOURS = (10 * 60 * 60 * 1000);
-
-            var JUNE_THIRD = moment.utc("2016-06-03", "YYYY-MM-DD");
-            var APRIL = moment.utc("2016-04", "YYYY-MM");
-            var TWENTY_SIXTEEN = moment.utc("2016", "YYYY");
-
-            expect(format.format(TWO_HUNDRED_MS, scale)).toBe(".200");
-            expect(format.format(THREE_SECONDS, scale)).toBe(":03");
-            expect(format.format(FIVE_MINUTES, scale)).toBe("00:05");
-            expect(format.format(ONE_HOUR_TWENTY_MINS, scale)).toBe("01:20");
-            expect(format.format(TEN_HOURS, scale)).toBe("10");
-
-            expect(format.format(JUNE_THIRD, scale)).toBe("Fri 03");
-            expect(format.format(APRIL, scale)).toBe("April");
-            expect(format.format(TWENTY_SIXTEEN, scale)).toBe("2016");
-        });
-
-        it("Returns appropriate time units for a given time span", function () {
-            var ONE_DAY = 1000 * 60 * 60 * 24;
-            var FIVE_DAYS = 5 * ONE_DAY;
-            var FIVE_MONTHS = 60 * ONE_DAY;
-
-            var ONE_YEAR = 365 * ONE_DAY;
-            var SEVEN_YEARS = 7 * ONE_YEAR;
-            var TWO_DECADES = 20 * ONE_YEAR;
-
-            //A span of one day should show a zoom label of "Hours"
-            expect(format.timeUnits(ONE_DAY)).toEqual("Hours");
-            //Multiple days should display "Days"
-            expect(format.timeUnits(FIVE_DAYS)).toEqual("Days");
-            expect(format.timeUnits(FIVE_MONTHS)).toEqual("Days");
-            //A span of one year should show a zoom level of "Months".
-            // Multiple years will show "Years"
-            expect(format.timeUnits(ONE_YEAR)).toEqual("Months");
-            expect(format.timeUnits(SEVEN_YEARS)).toEqual("Years");
-            expect(format.timeUnits(TWO_DECADES)).toEqual("Decades");
-        });
-    });
-});

platform/commonUI/formats/test/UTCTimeFormatSpec.js

@@ -1,9 +1,9 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
+ * Open MCT Web, Copyright (c) 2014-2015, 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
+ * Open MCT Web 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.
@@ -14,47 +14,49 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  *
- * Open MCT includes source code licensed under additional open source
+ * Open MCT Web 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/UTCTimeFormat', 'moment'],
-    function (UTCTimeFormat, moment) {
+define([
+    "../src/UTCTimeFormat",
+    "moment"
+], function (
+    UTCTimeFormat,
+    moment
+) {
+    describe("The UTCTimeFormat class", function () {
+        var format;
+        var scale;
 
-        describe("The UTCTimeFormat", function () {
-            var format;
-
-            beforeEach(function () {
-                format = new UTCTimeFormat();
-            });
-
-            it("formats UTC timestamps", function () {
-                var timestamp = 12345670000,
-                    formatted = format.format(timestamp);
-                expect(formatted).toEqual(jasmine.any(String));
-                expect(moment.utc(formatted).valueOf()).toEqual(timestamp);
-            });
-
-            it("displays with millisecond precision", function () {
-                var timestamp = 12345670789,
-                    formatted = format.format(timestamp);
-                expect(moment.utc(formatted).valueOf()).toEqual(timestamp);
-            });
-
-            it("validates time inputs", function () {
-                expect(format.validate("1977-05-25 11:21:22")).toBe(true);
-                expect(format.validate("garbage text")).toBe(false);
-            });
-
-            it("parses valid input", function () {
-                var text = "1977-05-25 11:21:22",
-                    parsed = format.parse(text);
-                expect(parsed).toEqual(jasmine.any(Number));
-                expect(parsed).toEqual(moment.utc(text).valueOf());
-            });
+        beforeEach(function () {
+            format = new UTCTimeFormat();
+            scale = {min: 0, max: 0};
         });
-    }
-);
+
+        it("Provides an appropriately scaled time format based on the input" +
+            " time", function () {
+            var TWO_HUNDRED_MS = 200;
+            var THREE_SECONDS = 3000;
+            var FIVE_MINUTES = 5 * 60 * 1000;
+            var ONE_HOUR_TWENTY_MINS = (1 * 60 * 60 * 1000) + (20 * 60 * 1000);
+            var TEN_HOURS = (10 * 60 * 60 * 1000);
+
+            var JUNE_THIRD = moment.utc("2016-06-03", "YYYY-MM-DD");
+            var APRIL = moment.utc("2016-04", "YYYY-MM");
+            var TWENTY_SIXTEEN = moment.utc("2016", "YYYY");
+
+            expect(format.format(TWO_HUNDRED_MS, scale)).toBe(".200");
+            expect(format.format(THREE_SECONDS, scale)).toBe(":03");
+            expect(format.format(FIVE_MINUTES, scale)).toBe("00:05");
+            expect(format.format(ONE_HOUR_TWENTY_MINS, scale)).toBe("01:20");
+            expect(format.format(TEN_HOURS, scale)).toBe("10");
+
+            expect(format.format(JUNE_THIRD, scale)).toBe("Fri 03");
+            expect(format.format(APRIL, scale)).toBe("April");
+            expect(format.format(TWENTY_SIXTEEN, scale)).toBe("2016");
+        });
+    });
+});

platform/commonUI/general/bundle.js

@@ -374,7 +374,8 @@ define([
                     "depends": [
                         "$parse",
                         "$log",
-                        "$interval"
+                        "$interval",
+                        "$window"
                     ]
                 },
                 {

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

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

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

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

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

@@ -37,6 +37,8 @@
 <glyph unicode="&#xe927;" glyph-name="icon-trash" d="M832 832h-192.36v64c0 35.2-28.8 64-64 64h-128c-35.2 0-64-28.8-64-64v-64h-191.64c-105.6 0-192-72-192-160s0-160 0-160h64v-384c0-105.6 86.4-192 192-192h512c105.6 0 192 86.4 192 192v384h64c0 0 0 72 0 160s-86.4 160-192 160zM320 128h-128v384h128v-384zM576 128h-128v384h128v-384zM832 128h-128v384h128v-384z" />
 <glyph unicode="&#xe928;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 <glyph unicode="&#xe929;" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
+<glyph unicode="&#xe930;" glyph-name="icon-crosshair" d="M574 962h-128v-320h128v320zM1022 514h-320v-128h320v128zM574 258h-128v-320h128v320zM318 514h-320v-128h320v128z" />
+<glyph unicode="&#xe931;" glyph-name="icon-grippy-v2" horiz-adv-x="586" d="M146.4 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 886.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 667.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 448c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 228.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
 <glyph unicode="&#xe1000;" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
 <glyph unicode="&#xe1001;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe1002;" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
@@ -77,6 +79,12 @@
 <glyph unicode="&#xe1038;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
 <glyph unicode="&#xe1039;" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
 <glyph unicode="&#xe1040;" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
+<glyph unicode="&#xe1041;" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
+<glyph unicode="&#xe1042;" glyph-name="icon-list-view" d="M0 896h1024v-128h-1024v128zM0 640h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
+<glyph unicode="&#xe1043;" glyph-name="icon-grid-snap-to" d="M382 130h448v448h-448v-448zM510 450h192v-192h-192v192zM-2 386h320v-64h-320v64zM894 386h128v-64h-128v64zM574 962h64v-320h-64v320zM574 66h64v-128h-64v128zM574 386h64v-64h-64v64z" />
+<glyph unicode="&#xe1044;" glyph-name="icon-grid-snap-no" d="M768 384h192v-64h-192v64zM256 384h192v-64h-192v64zM0 384h192v-64h-192v64zM640 448h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 704h64v-192h-64v192zM576 960h64v-192h-64v192zM576 192h64v-192h-64v192z" />
+<glyph unicode="&#xe1045;" glyph-name="icon-frame-show" d="M0 896v-896h1024v896h-1024zM896 128h-768v640h768v-640zM192 704h384v-128h-384v128z" />
+<glyph unicode="&#xe1046;" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
 <glyph unicode="&#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" />
@@ -107,4 +115,5 @@
 <glyph unicode="&#xe1127;" glyph-name="icon-timer-v1.5" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
 <glyph unicode="&#xe1128;" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
 <glyph unicode="&#xe1129;" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
-</font></defs></svg>
+<glyph unicode="&#xe1130;" glyph-name="icon-summary-widget" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 349.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />
+</font></defs></svg>

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

@@ -42,6 +42,27 @@
 	a {
 		color: $colorAboutLink;
 	}
+
+    h1, h2, h3 {
+        color: pullForward($colorBodyFg, 20%);
+        margin-bottom: 1em;
+    }
+
+    h1 {
+        font-size: 2.25em;
+    }
+
+    h2 {
+        border-top: 1px solid $colorInteriorBorder;
+        font-size: 1.5em;
+        margin-top: 2em;
+        padding-top: 1em;
+    }
+
+    h3 {
+        margin-top: 2em;
+    }
+
 	.s-description,
 	.s-button {
 		line-height: 2em;

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

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

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

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 /************************** FEATURES */
-$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
+$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported
 
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
 $bodyMargin: 10px;
@@ -82,7 +82,7 @@ $tabularTdPadTB: 2px;
 /*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
-$imageThumbsWrapperH: $imageThumbsD * 1.4;
+$imageThumbsWrapperH: 155px;
 $imageThumbPad: 1px;
 /*************** Ticks */
 $ticksH: 25px;

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

@@ -66,7 +66,7 @@ body, html {
     color: $colorBodyFg;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 100%;
-    font-weight: 200;
+    font-weight: normal;
     height: 100%;
     width: 100%;
 }
@@ -76,22 +76,20 @@ em {
 }
 
 input, textarea {
-    font-family: Helvetica, Arial, sans-serif;
-}
-
-input[type="text"],
-input[type="search"] {
-    vertical-align: baseline;
-    padding: $inputTextP;
+    font-family: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
 }
 
 h1, h2, h3 {
+    letter-spacing: 0.04em;
     margin: 0;
 }
 
 h1 {
     font-size: 1.7em;
     font-weight: normal !important;
+    letter-spacing: 0.04em;
     line-height: 120%;
     margin-bottom: 20px;
     margin-top: 0;

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,6 +44,8 @@ $glyph-icon-plus: '\e926';
 $glyph-icon-trash: '\e927';
 $glyph-icon-x: '\e928';
 $glyph-icon-brackets: '\e929';
+$glyph-icon-crosshair: '\e930';
+$glyph-icon-grippy: '\e931';
 $glyph-icon-arrows-out: '\e1000';
 $glyph-icon-arrows-right-left: '\e1001';
 $glyph-icon-arrows-up-down: '\e1002';
@@ -73,10 +82,16 @@ $glyph-icon-thumbs-strip: '\e1033';
 $glyph-icon-two-parts-both: '\e1034';
 $glyph-icon-two-parts-one-only: '\e1035';
 $glyph-icon-resync: '\e1036';
+$glyph-icon-reset: '\e1037';
 $glyph-icon-x-in-circle: '\e1038';
 $glyph-icon-brightness: '\e1039';
 $glyph-icon-contrast: '\e1040';
-$glyph-icon-reset: '\e1037';
+$glyph-icon-expand: '\e1041';
+$glyph-icon-list-view: '\e1042';
+$glyph-icon-grid-snap-to: '\e1043';
+$glyph-icon-grid-snap-no: '\e1044';
+$glyph-icon-frame-show: '\e1045';
+$glyph-icon-frame-hide: '\e1046';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -107,113 +122,120 @@ $glyph-icon-timeline: '\e1126';
 $glyph-icon-timer: '\e1127';
 $glyph-icon-topic: '\e1128';
 $glyph-icon-box-with-dashed-lines: '\e1129';
+$glyph-icon-summary-widget: '\e1130';
 
 /************************** 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-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-reset {  @include glyph($glyph-icon-reset); }
-.icon-resync {  @include glyph($glyph-icon-resync); }
-.icon-activity {  @include glyph($glyph-icon-activity); }
-.icon-activity-mode {  @include glyph($glyph-icon-activity-mode); }
-.icon-autoflow-tabular {  @include glyph($glyph-icon-autoflow-tabular); }
-.icon-clock {  @include glyph($glyph-icon-clock); }
-.icon-database {  @include glyph($glyph-icon-database); }
-.icon-database-query {  @include glyph($glyph-icon-database-query); }
-.icon-dataset {  @include glyph($glyph-icon-dataset); }
-.icon-datatable {  @include glyph($glyph-icon-datatable); }
-.icon-dictionary {  @include glyph($glyph-icon-dictionary); }
-.icon-folder {  @include glyph($glyph-icon-folder); }
-.icon-image {  @include glyph($glyph-icon-image); }
-.icon-layout {  @include glyph($glyph-icon-layout); }
-.icon-object {  @include glyph($glyph-icon-object); }
-.icon-object-unknown {  @include glyph($glyph-icon-object-unknown); }
-.icon-packet {  @include glyph($glyph-icon-packet); }
-.icon-page {  @include glyph($glyph-icon-page); }
-.icon-plot-overlay {  @include glyph($glyph-icon-plot-overlay); }
-.icon-plot-stacked {  @include glyph($glyph-icon-plot-stacked); }
-.icon-session {  @include glyph($glyph-icon-session); }
-.icon-tabular {  @include glyph($glyph-icon-tabular); }
-.icon-tabular-lad {  @include glyph($glyph-icon-tabular-lad); }
-.icon-tabular-lad-set {  @include glyph($glyph-icon-tabular-lad-set); }
-.icon-tabular-realtime {  @include glyph($glyph-icon-tabular-realtime); }
-.icon-tabular-scrolling {  @include glyph($glyph-icon-tabular-scrolling); }
-.icon-telemetry {  @include glyph($glyph-icon-telemetry); }
-.icon-telemetry-panel {  @include glyph($glyph-icon-telemetry-panel); }
-.icon-timeline {  @include glyph($glyph-icon-timeline); }
-.icon-timer {  @include glyph($glyph-icon-timer); }
-.icon-topic {  @include glyph($glyph-icon-topic); }
-.icon-box-with-dashed-lines {  @include glyph($glyph-icon-box-with-dashed-lines); }
+.icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
+.icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
+.icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
+.icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
+.icon-arrow-right {  @include glyphBefore($glyph-icon-arrow-right); }
+.icon-arrow-double-up {  @include glyphBefore($glyph-icon-arrow-double-up); }
+.icon-arrow-tall-up {  @include glyphBefore($glyph-icon-arrow-tall-up); }
+.icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
+.icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
+.icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
+.icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
+.icon-bell {  @include glyphBefore($glyph-icon-bell); }
+.icon-box {  @include glyphBefore($glyph-icon-box); }
+.icon-box-with-arrow {  @include glyphBefore($glyph-icon-box-with-arrow); }
+.icon-check {  @include glyphBefore($glyph-icon-check); }
+.icon-connectivity {  @include glyphBefore($glyph-icon-connectivity); }
+.icon-database-in-brackets {  @include glyphBefore($glyph-icon-database-in-brackets); }
+.icon-eye-open {  @include glyphBefore($glyph-icon-eye-open); }
+.icon-gear {  @include glyphBefore($glyph-icon-gear); }
+.icon-hourglass {  @include glyphBefore($glyph-icon-hourglass); }
+.icon-info {  @include glyphBefore($glyph-icon-info); }
+.icon-link {  @include glyphBefore($glyph-icon-link); }
+.icon-lock {  @include glyphBefore($glyph-icon-lock); }
+.icon-minus {  @include glyphBefore($glyph-icon-minus); }
+.icon-people {  @include glyphBefore($glyph-icon-people); }
+.icon-person {  @include glyphBefore($glyph-icon-person); }
+.icon-plus {  @include glyphBefore($glyph-icon-plus); }
+.icon-trash {  @include glyphBefore($glyph-icon-trash); }
+.icon-x {  @include glyphBefore($glyph-icon-x); }
+.icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
+.icon-crosshair {  @include glyphBefore($glyph-icon-crosshair); }
+.icon-grippy {  @include glyphBefore($glyph-icon-grippy); }
+.icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
+.icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
+.icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
+.icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
+.icon-calendar {  @include glyphBefore($glyph-icon-calendar); }
+.icon-chain-links {  @include glyphBefore($glyph-icon-chain-links); }
+.icon-collapse-pane-left {  @include glyphBefore($glyph-icon-collapse-pane-left); }
+.icon-collapse-pane-right {  @include glyphBefore($glyph-icon-collapse-pane-right); }
+.icon-download {  @include glyphBefore($glyph-icon-download); }
+.icon-duplicate {  @include glyphBefore($glyph-icon-duplicate); }
+.icon-folder-new {  @include glyphBefore($glyph-icon-folder-new); }
+.icon-fullscreen-collapse {  @include glyphBefore($glyph-icon-fullscreen-collapse); }
+.icon-fullscreen-expand {  @include glyphBefore($glyph-icon-fullscreen-expand); }
+.icon-layers {  @include glyphBefore($glyph-icon-layers); }
+.icon-line-horz {  @include glyphBefore($glyph-icon-line-horz); }
+.icon-magnify {  @include glyphBefore($glyph-icon-magnify); }
+.icon-magnify-in {  @include glyphBefore($glyph-icon-magnify-in); }
+.icon-magnify-out {  @include glyphBefore($glyph-icon-magnify-out); }
+.icon-menu-hamburger {  @include glyphBefore($glyph-icon-menu-hamburger); }
+.icon-move {  @include glyphBefore($glyph-icon-move); }
+.icon-new-window {  @include glyphBefore($glyph-icon-new-window); }
+.icon-paint-bucket {  @include glyphBefore($glyph-icon-paint-bucket); }
+.icon-pause {  @include glyphBefore($glyph-icon-pause); }
+.icon-pencil {  @include glyphBefore($glyph-icon-pencil); }
+.icon-play {  @include glyphBefore($glyph-icon-play); }
+.icon-plot-resource {  @include glyphBefore($glyph-icon-plot-resource); }
+.icon-pointer-left {  @include glyphBefore($glyph-icon-pointer-left); }
+.icon-pointer-right {  @include glyphBefore($glyph-icon-pointer-right); }
+.icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
+.icon-save {  @include glyphBefore($glyph-icon-save); }
+.icon-sine {  @include glyphBefore($glyph-icon-sine); }
+.icon-T {  @include glyphBefore($glyph-icon-T); }
+.icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
+.icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
+.icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
+.icon-resync {  @include glyphBefore($glyph-icon-resync); }
+.icon-reset {  @include glyphBefore($glyph-icon-reset); }
+.icon-x-in-circle {  @include glyphBefore($glyph-icon-x-in-circle); }
+.icon-brightness {  @include glyphBefore($glyph-icon-brightness); }
+.icon-contrast {  @include glyphBefore($glyph-icon-contrast); }
+.icon-expand {  @include glyphBefore($glyph-icon-expand); }
+.icon-list-view {  @include glyphBefore($glyph-icon-list-view); }
+.icon-grid-snap-to {  @include glyphBefore($glyph-icon-grid-snap-to); }
+.icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
+.icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
+.icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
+.icon-activity {  @include glyphBefore($glyph-icon-activity); }
+.icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
+.icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
+.icon-clock {  @include glyphBefore($glyph-icon-clock); }
+.icon-database {  @include glyphBefore($glyph-icon-database); }
+.icon-database-query {  @include glyphBefore($glyph-icon-database-query); }
+.icon-dataset {  @include glyphBefore($glyph-icon-dataset); }
+.icon-datatable {  @include glyphBefore($glyph-icon-datatable); }
+.icon-dictionary {  @include glyphBefore($glyph-icon-dictionary); }
+.icon-folder {  @include glyphBefore($glyph-icon-folder); }
+.icon-image {  @include glyphBefore($glyph-icon-image); }
+.icon-layout {  @include glyphBefore($glyph-icon-layout); }
+.icon-object {  @include glyphBefore($glyph-icon-object); }
+.icon-object-unknown {  @include glyphBefore($glyph-icon-object-unknown); }
+.icon-packet {  @include glyphBefore($glyph-icon-packet); }
+.icon-page {  @include glyphBefore($glyph-icon-page); }
+.icon-plot-overlay {  @include glyphBefore($glyph-icon-plot-overlay); }
+.icon-plot-stacked {  @include glyphBefore($glyph-icon-plot-stacked); }
+.icon-session {  @include glyphBefore($glyph-icon-session); }
+.icon-tabular {  @include glyphBefore($glyph-icon-tabular); }
+.icon-tabular-lad {  @include glyphBefore($glyph-icon-tabular-lad); }
+.icon-tabular-lad-set {  @include glyphBefore($glyph-icon-tabular-lad-set); }
+.icon-tabular-realtime {  @include glyphBefore($glyph-icon-tabular-realtime); }
+.icon-tabular-scrolling {  @include glyphBefore($glyph-icon-tabular-scrolling); }
+.icon-telemetry {  @include glyphBefore($glyph-icon-telemetry); }
+.icon-telemetry-panel {  @include glyphBefore($glyph-icon-telemetry-panel); }
+.icon-timeline {  @include glyphBefore($glyph-icon-timeline); }
+.icon-timer {  @include glyphBefore($glyph-icon-timer); }
+.icon-topic {  @include glyphBefore($glyph-icon-topic); }
+.icon-box-with-dashed-lines {  @include glyphBefore($glyph-icon-box-with-dashed-lines); }
+.icon-summary-widget {  @include glyphBefore($glyph-icon-summary-widget); }
 
 /************************** 12 PX CLASSES */
-
-.icon-eye-open-12px {  @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
-.icon-collapse-pane-left-12px {  @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
-.icon-collapse-pane-right-12px {  @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
-.icon-folder-12px {  @include glyph($glyph-icon-folder,'symbolsfont-12px'); }
+.icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
+.icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }

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";

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/_text.scss

@@ -37,20 +37,13 @@
 	}
 
 	h1, h2, h3 {
-		color: pullForward($colorBodyFg, 20%);
-		font-weight: normal !important;
-		margin-bottom: 1em;
-	}
-
-	h2 {
-		border-top: 1px solid $colorInteriorBorder;
-		font-size: 1.5em;
-		margin-top: 2em;
-		padding-top: 1em;
-	}
-
-	h3 {
-		margin-top: 2em;
-	}
+        font-weight: 200 !important;
+    }
 
+    table {
+        td { font-size: inherit; }
+        tr.header {
+            background-color: rgba($colorBodyFg, 0.2);
+        }
+    }
 }

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

@@ -72,6 +72,15 @@
     }
 }
 
+.s-hyperlink {
+    // Hyperlink objects
+    &:not(.s-button) {
+        color: $colorKey;
+        font-size: 0.8rem;
+        &:hover { color: $colorKeyHov; }
+    }
+}
+
 .s-icon-button {
     // Clickable icon elements that have hover
     @extend .ui-symbol;
@@ -212,20 +221,50 @@ label.form-control.checkbox {
     }
 }
 
+/******************************************************** PLACEHOLDERS */
+input[type="text"],
+input[type="search"],
+textarea {
+    @include placeholder {
+        color: rgba($colorInputFg, 0.4);
+        font-style: italic;
+    }
+}
+
 /******************************************************** 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-lg input[type="text"] {  width: 100% !important; }
-.l-input-med input[type="text"] { width: 200px !important; }
-.l-input-sm input[type="text"] {  width: 50px !important; }
-.l-textarea-sm textarea { position: relative; height: 50px; }
-.l-numeric input[type="text"] { 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; }
+input[type="text"].sm {  width: 50px !important; }
+.l-numeric input[type="text"],
+input[type="text"].numeric { text-align: right; }
+
+.l-textarea-sm textarea,
+textarea.sm { position: relative; height: 50px; }
+.l-textarea-med textarea,
+textarea.med { position: relative; height: 150px; }
+.l-textarea-lg textarea,
+textarea.lg { position: relative; height: 300px; }
 
 .input-labeled {
     // Used in toolbar
@@ -277,6 +316,40 @@ input[type="search"] {
     }
 }
 
+/******************************************************** 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;
@@ -631,7 +704,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 {

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -9,7 +9,6 @@
 	@if $enableImageryThumbs == true {
 		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
 	}
-	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
 		background-color: $colorPlotBg;
@@ -22,7 +21,8 @@
 
 .l-image-thumbs-wrapper {
 	top: auto;
-	height: $imageThumbsWrapperH;
+	min-height: $imageThumbsWrapperH;
+	max-height: 60%;
 }
 
 .l-date,
@@ -82,20 +82,26 @@
 /*************************************** THUMBS */
 
 .l-image-thumbs-wrapper {
-	//@include test(green);
-	direction: rtl;
-	overflow-x: auto;
-	overflow-y: hidden;
+	overflow-x: hidden;
+	overflow-y: auto;
 	padding-bottom: $interiorMargin;
 	white-space: nowrap;
-	z-index: 70;
 }
 
 .l-image-thumb-item {
 	@include transition(background-color, 0.25s);
 	box-sizing: border-box;
+    cursor: pointer;
+    direction: ltr;
+    display: inline-block;
+    float: left;
+    font-size: 0.8em;
 	padding: 1px;
-	position: relative;
+    margin-left: $interiorMarginSm;
+    position: relative;
+    text-align: left;
+    width: $imageThumbsD + $imageThumbPad*2;
+    white-space: normal;
 	.l-thumb,
 	.l-date,
 	.l-time {
@@ -105,16 +111,9 @@
 	.l-time {
 		padding: 2px 3px;
 	}
-	cursor: pointer;
-	direction: ltr;
-	display: inline-block;
-	font-size: 0.8em;
-	margin-left: $interiorMarginSm;
-	text-align: left;
-	width: $imageThumbsD + $imageThumbPad*2;
-	white-space: normal;
+
 	&:hover {
-		background: rgba(#fff, 0.2);
+		background: $colorThumbHoverBg;
 		.l-date,
 		.l-time {
 			color: #fff;
@@ -186,7 +185,8 @@
 /*************************************** WHEN IN FRAME */
 .frame .t-imagery {
 	.l-image-main-wrapper {
-		bottom: 0;
+		bottom: 0 !important;
+        height: 100% !important;
 		.l-image-main-controlbar {
 			font-size: 0.7em;
 		}
@@ -196,7 +196,8 @@
 			}
 		}
 	}
-	.l-image-thumbs-wrapper {
+	.l-image-thumbs-wrapper,
+    mct-splitter {
 		display: none;
 	}
 }

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

@@ -26,20 +26,20 @@
 		top: 0;
 	}
     .item {
+        $d: $ueBrowseGridItemLg;
+        $iconMargin: 40px;
+        $iconD: ($d - ($iconMargin * 2)) * 0.85;
+        box-sizing: border-box;
+        float: left;
+        height: $d;
+        width: $d;
+        margin-bottom: $interiorMarginSm;
+        margin-right: $interiorMarginSm;
+        position: relative;
         &.grid-item {
-            $d: $ueBrowseGridItemLg;
-            $iconMargin: 40px;
-            $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
             @include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc);
-            box-sizing: border-box;
             cursor: pointer;
-            float: left;
-            height: $d;
-            width: $d;
-            margin-bottom: $interiorMarginSm;
-            margin-right: $interiorMarginSm;
-            position: relative;
             &:hover .item-main {
 	            .item-type {
 		            color: lighten($colorKey, 10%);
@@ -51,7 +51,7 @@
                     opacity: 1;
 	            }
             }
-	        .contents {
+	        .abs.contents {
                 $m: $interiorMarginLg;
 		        top: $m; right: $m; bottom: $m; left: $m;
 	        }
@@ -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/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/_plots-main.scss

@@ -32,20 +32,6 @@
 	height: 100%;
     min-height: $plotMinH;
 
-    .gl-plot-local-controls {
-        @include trans-prop-nice(opacity, 150ms);
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    .gl-plot-display-area,
-    .gl-plot-axis-area {
-        &:hover .gl-plot-local-controls {
-            opacity: 1;
-            pointer-events: inherit;
-        }
-    }
-
     .gl-plot-wrapper-display-area-and-x-axis {
         // Holds the plot area and the X-axis only
         position: absolute;
@@ -55,17 +41,11 @@
         left: nth($plotDisplayArea, 4);
 
         .gl-plot-display-area {
-            //@include test(yellow);
-            @if $colorPlotBg != none {
-                background-color: $colorPlotBg;
-            }
             position: absolute;
             top: 0;
             right: 0;
             bottom: nth($plotDisplayArea, 3);
             left: 0;
-            cursor: crosshair;
-            border: 1px solid $colorPlotAreaBorder;
         }
 
         .gl-plot-axis-area.gl-plot-x {
@@ -232,6 +212,29 @@
 	}
 }
 
+.gl-plot-display-area,
+.plot-display-area,
+.gl-plot-axis-area {
+    .gl-plot-local-controls,
+    .l-local-controls {
+        @include trans-prop-nice(opacity, 150ms);
+        opacity: 0;
+        pointer-events: none;
+    }
+    &:hover .gl-plot-local-controls,
+    &:hover .l-local-controls {
+        opacity: 1;
+        pointer-events: inherit;
+    }
+}
+
+.gl-plot-display-area,
+.plot-display-area {
+    @if $colorPlotBg != none { background-color: $colorPlotBg; }
+    cursor: crosshair;
+    border: 1px solid $colorPlotAreaBorder;
+}
+
 .gl-plot-legend,
 .legend {
 	.plot-legend-item,

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

@@ -20,69 +20,116 @@
  * 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;
+        }
+    }
+    &.no-frame {
+        background: transparent !important;
+        border: none !important;
+        &.t-frame-outer > .t-rep-frame {
+            &.contents {
+                $m: 2px;
+                top: $m;
+                right: $m;
+                bottom: $m;
+                left: $m;
+            }
+            > .t-frame-inner {
+                > .object-browse-bar {
+                    display: none;
+                }
+                > .object-holder.abs {
+                    top: 0 !important;
+                }
+            }
+        }
+    }
+
+    /********************************************************** OBJECT TYPES */
+    .t-object-type-hyperlink {
+        .s-hyperlink.s-button {
+            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
+            @extend .abs;
+            .label {
+                @include ellipsize();
+                @include transform(translateY(-50%));
+                padding: 0 $interiorMargin;
+                position: absolute;
+                min-width: 0;
+                left: 0; right: 0;
+                text-align: center;
+                top: 50%;
+            }
+        }
+    }
+}
+
+body.desktop .frame {
+    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
+    // Frame template is used because we need to target the lowest nested frame
+    .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/directives/MCTSplitPane.js

@@ -93,13 +93,21 @@ define(
          * @memberof platform/commonUI/general
          * @constructor
          */
-        function MCTSplitPane($parse, $log, $interval) {
+        function MCTSplitPane($parse, $log, $interval, $window) {
             function controller($scope, $element, $attrs) {
                 var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
+                    positionParsed = $parse($attrs.position),
                     anchor,
                     activeInterval,
-                    positionParsed = $parse($attrs.position),
-                    position; // Start undefined, until explicitly set
+                    position,
+                    splitterSize,
+
+                    alias = $attrs.alias !== undefined ?
+                      "mctSplitPane-" + $attrs.alias : undefined,
+
+                    //convert string to number from localStorage
+                    userWidthPreference = $window.localStorage.getItem(alias) === null ?
+                      undefined : Number($window.localStorage.getItem(alias));
 
                 // Get relevant size (height or width) of DOM element
                 function getSize(domElement) {
@@ -114,11 +122,11 @@ define(
                     var first = children.eq(anchor.reversed ? 2 : 0),
                         splitter = children.eq(1),
                         last = children.eq(anchor.reversed ? 0 : 2),
-                        splitterSize = getSize(splitter[0]),
                         firstSize;
 
+                    splitterSize = getSize(splitter[0]);
                     first.css(anchor.edge, "0px");
-                    first.css(anchor.dimension, (position - splitterSize) + 'px');
+                    first.css(anchor.dimension, (userWidthPreference|| position) + 'px');
 
                     // Get actual size (to obey min-width etc.)
                     firstSize = getSize(first[0]);
@@ -126,10 +134,9 @@ define(
                     splitter.css(anchor.edge, firstSize + 'px');
                     splitter.css(anchor.opposite, "auto");
 
-                    last.css(anchor.edge, (firstSize + splitterSize) + 'px');
+                    last.css(anchor.edge, firstSize + splitterSize + 'px');
                     last.css(anchor.opposite, "0px");
-
-                    position = firstSize + splitterSize;
+                    position = anchor.edge === 'bottom' ? firstSize + (0.75 * splitterSize) : firstSize + splitterSize;
                 }
 
                 // Update positioning of contained elements
@@ -155,20 +162,31 @@ define(
                 // Getter-setter for the pixel offset of the splitter,
                 // relative to the current edge.
                 function getSetPosition(value) {
-                    var prior = position;
                     if (typeof value === 'number') {
                         position = value;
                         enforceExtrema();
                         updateElementPositions();
 
                         // Pass change up so this state can be shared
-                        if (positionParsed.assign && position !== prior) {
+                        if (positionParsed.assign) {
                             positionParsed.assign($scope, position);
                         }
-                    }
+                    } 
+
                     return position;
                 }
 
+                function setUserWidthPreference(value) {
+                    userWidthPreference = value - splitterSize;
+                }
+
+                function persistToLocalStorage(value) {
+                    if (alias) {
+                        userWidthPreference = value - splitterSize;
+                        $window.localStorage.setItem(alias, userWidthPreference);
+                    }
+                }
+
                 // Dynamically apply a CSS class to elements when the user
                 // is actively resizing
                 function toggleClass(classToToggle) {
@@ -196,18 +214,31 @@ define(
                 activeInterval = $interval(function () {
                     getSetPosition(getSetPosition());
                 }, POLLING_INTERVAL, 0, false);
-
                 // ...and stop polling when we're destroyed.
                 $scope.$on('$destroy', function () {
                     $interval.cancel(activeInterval);
                 });
+                
 
                 // Interface exposed by controller, for mct-splitter to user
                 return {
-                    position: getSetPosition,
-                    toggleClass: toggleClass,
                     anchor: function () {
                         return anchor;
+                    },
+                    position: function (value) {
+                        if (arguments.length > 0) {
+                            setUserWidthPreference(value);
+                            return getSetPosition(value);
+                        } else {
+                            return getSetPosition();
+                        }
+                    },
+                    startResizing: function () {
+                        toggleClass('resizing');
+                    },
+                    endResizing: function (finalPosition) {
+                        persistToLocalStorage(finalPosition);
+                        toggleClass('resizing');
                     }
                 };
             }
@@ -219,9 +250,7 @@ define(
                 controller: ['$scope', '$element', '$attrs', controller]
             };
         }
-
         return MCTSplitPane;
 
     }
 );
-

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

@@ -37,15 +37,16 @@ define(
          */
         function MCTSplitter() {
             function link(scope, element, attrs, mctSplitPane) {
-                var initialPosition;
+                var initialPosition,
+                    newPosition;
 
                 element.addClass("splitter");
 
                 scope.splitter = {
                     // Begin moving this splitter
                     startMove: function () {
+                        mctSplitPane.startResizing();
                         initialPosition = mctSplitPane.position();
-                        mctSplitPane.toggleClass('resizing');
                     },
                     // Handle user changes to splitter position
                     move: function (delta) {
@@ -55,12 +56,13 @@ define(
                                 (anchor.reversed ? -1 : 1);
 
                         // Update the position of this splitter
-                        mctSplitPane.position(initialPosition + pixelDelta);
+                        newPosition =  initialPosition + pixelDelta;
+                        mctSplitPane.position(newPosition);
                     },
                     // Grab the event when the user is done moving
                     // the splitter and pass it on
                     endMove: function () {
-                        mctSplitPane.toggleClass('resizing');
+                        mctSplitPane.endResizing(newPosition);
                     }
                 };
             }
@@ -83,4 +85,3 @@ define(
 
     }
 );
-

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/general/test/directives/MCTSplitPaneSpec.js

@@ -38,7 +38,8 @@ define(
                 mockLog,
                 mockInterval,
                 mockParsed,
-                mctSplitPane;
+                mctSplitPane,
+                mockWindow = {};
 
             beforeEach(function () {
                 mockParse = jasmine.createSpy('$parse');
@@ -48,13 +49,23 @@ define(
                 mockInterval.cancel = jasmine.createSpy('mockCancel');
                 mockParsed = jasmine.createSpy('parsed');
                 mockParsed.assign = jasmine.createSpy('assign');
-
                 mockParse.andReturn(mockParsed);
 
+                mockWindow.localStorage =  {
+                    store: {},
+                    setItem: function (key, value) {
+                        this.store[key] = value;
+                    },
+                    getItem: function (key) {
+                        return this.store[key];
+                    }
+                };
+
                 mctSplitPane = new MCTSplitPane(
                     mockParse,
                     mockLog,
-                    mockInterval
+                    mockInterval,
+                    mockWindow
                 );
             });
 
@@ -85,7 +96,7 @@ define(
                         jasmine.createSpyObj('$scope', ['$apply', '$watch', '$on']);
                     mockElement =
                         jasmine.createSpyObj('element', JQLITE_METHODS);
-                    testAttrs = {};
+                    testAttrs = {alias: 'rightSide'};
                     mockChildren =
                         jasmine.createSpyObj('children', JQLITE_METHODS);
                     mockFirstPane =
@@ -142,10 +153,14 @@ define(
                     });
                 });
 
-                it("allows classes to be toggled on contained elements", function () {
-                    controller.toggleClass('resizing');
-                    expect(mockChildren.toggleClass)
-                        .toHaveBeenCalledWith('resizing');
+                it("applies resizing class to children when resizing", function () {
+                    controller.startResizing();
+                    expect(mockChildren.toggleClass).toHaveBeenCalledWith('resizing');
+                });
+
+                it("removes resizing class from children when resizing action ends", function () {
+                    controller.endResizing(0);
+                    expect(mockChildren.toggleClass).toHaveBeenCalledWith('resizing');
                 });
 
                 it("allows positions to be set", function () {
@@ -198,6 +213,12 @@ define(
                     fireOn('$destroy');
                     expect(mockInterval.cancel).toHaveBeenCalled();
                 });
+
+                it("saves user preference to localStorage when user is done resizing", function () {
+                    controller.endResizing(100);
+                    expect(Number(mockWindow.localStorage.getItem('mctSplitPane-rightSide'))).toEqual(100 - mockSplitter[0].offsetWidth);
+                });
+
             });
 
         });

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

@@ -57,7 +57,7 @@ define(
                     testAttrs = {};
                     mockSplitPane = jasmine.createSpyObj(
                         'mctSplitPane',
-                        ['position', 'toggleClass', 'anchor']
+                        ['position', 'startResizing', 'endResizing', 'anchor']
                     );
 
                     mctSplitter.link(
@@ -86,9 +86,9 @@ define(
                         mockScope.splitter.startMove();
                     });
 
-                    it("adds a 'resizing' class", function () {
-                        expect(mockSplitPane.toggleClass)
-                            .toHaveBeenCalledWith('resizing');
+                    it("tell's the splitter when it is resizing", function () {
+                        expect(mockSplitPane.startResizing)
+                            .toHaveBeenCalled();
                     });
 
                     it("repositions during drag", function () {
@@ -97,11 +97,10 @@ define(
                             .toHaveBeenCalledWith(testPosition + 10);
                     });
 
-                    it("removes the 'resizing' class when finished", function () {
-                        mockSplitPane.toggleClass.reset();
+                    it("tell's the splitter when it is done resizing", function () {
+                        mockScope.splitter.move([10,0]);
                         mockScope.splitter.endMove();
-                        expect(mockSplitPane.toggleClass)
-                            .toHaveBeenCalledWith('resizing');
+                        expect(mockSplitPane.endResizing).toHaveBeenCalledWith(testPosition + 10);
                     });
 
                 });

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);
@@ -92,6 +93,7 @@ $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#fff, 0.1);
 $colorInputBg: rgba(#000, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
 $colorFieldHint: pullForward($colorBodyFg, 20%);
@@ -145,6 +147,7 @@ $colorOvrFg: pullForward($colorBodyFg, 30%);
 $colorOvrBtnBg: pullForward($colorOvrBg, 20%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
+$durLargeViewExpand: 250ms;
 
 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
@@ -188,6 +191,9 @@ $colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
 $colorItemTreeSelectedVC: $colorItemTreeVC;
 $shdwItemTreeIcon: 0.6;
 
+// Images
+$colorThumbHoverBg: $colorItemTreeHoverBg;
+
 // Scrollbar
 $scrollbarTrackSize: 10px;
 $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;

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);
@@ -92,6 +93,7 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);
@@ -145,6 +147,7 @@ $colorOvrFg: $colorBodyFg;
 $colorOvrBtnBg: pullForward($colorOvrBg, 40%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
+$durLargeViewExpand: 250ms;
 
 // Items
 $colorItemBg: #ddd;
@@ -188,6 +191,9 @@ $colorItemTreeVCHover: $colorKey;
 $colorItemTreeSelectedVC: $colorBodyBg;
 $shdwItemTreeIcon: none;
 
+// Images
+$colorThumbHoverBg: $colorItemTreeHoverBg;
+
 // Scrollbar
 $scrollbarTrackSize: 10px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;

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() || "--:--:--"}}