[Frontend] Fixed scrolling view

open #199 open #293 open #201 Removed fixed-header class from table markup; (cherry picked from commit 6c4bdca)
[Frontend] Fixed plot display
2015-11-12 13:24:28 -08:00 · 2015-11-12 09:06:17 -08:00 · 2015-11-12 08:06:12 -08:00 · 2015-11-11 11:58:15 -08:00 · 2015-11-11 11:52:30 -08:00 · 2015-11-11 10:21:17 -08:00
292 changed files with 24376 additions and 5924 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,5 @@ node_modules
 # Protractor logs
 protractor/logs

+# npm-debug log
+npm-debug.log
--- a/LICENSES.md
+++ b/LICENSES.md
@@ -345,6 +345,41 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI

 ---

+### moment-duration-format
+
+#### Info
+
+* Link: https://github.com/jsmreese/moment-duration-format
+
+* Version: 1.3.0
+
+* Authors: John Madhavan-Reese
+
+* Description: Duration parsing/formatting
+
+#### License
+
+Copyright 2014 John Madhavan-Reese
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
 ### Json.NET

 #### Info
--- a/bundles.json
+++ b/bundles.json
@@ -6,13 +6,16 @@
    "platform/commonUI/browse",
    "platform/commonUI/edit",
    "platform/commonUI/dialog",
+    "platform/commonUI/formats",
    "platform/commonUI/general",
    "platform/commonUI/inspect",
    "platform/commonUI/mobile",
    "platform/commonUI/themes/espresso",
+    "platform/commonUI/notification",
    "platform/containment",
    "platform/execution",
    "platform/telemetry",
+    "platform/features/clock",
    "platform/features/imagery",
    "platform/features/layout",
    "platform/features/pages",
--- a/circle.yml
+++ b/circle.yml
@@ -1,3 +1,6 @@
+test:
+  override:
+    - exit 0
 deployment:
  production:
    branch: master
@@ -5,7 +8,7 @@ deployment:
      - ./build-docs.sh
      - git push git@heroku.com:openmctweb-demo.git $CIRCLE_SHA1:refs/heads/master
  openmctweb-staging-un:
-    branch: search
+    branch: open199
    heroku:
      appname: openmctweb-staging-un
  openmctweb-staging-deux:
--- a/docs/footer.html
+++ b/docs/footer.html
@@ -0,0 +1,9 @@
+        <hr>
+        <cite>
+            This document is styled using
+            <a href="https://github.com/jasonm23/markdown-css-themes">
+                https://github.com/jasonm23/markdown-css-themes
+            </a>.
+        </cite>
+    </body>
+</html>
--- a/docs/gendocs.js
+++ b/docs/gendocs.js
@@ -20,7 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

-/*global require,process,GLOBAL*/
+/*global require,process,__dirname,GLOBAL*/
 /*jslint nomen: false */


@@ -47,6 +47,8 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
        nomnoml = require('nomnoml'),
        toc = require("markdown-toc"),
        Canvas = require('canvas'),
+        header = fs.readFileSync(path.resolve(__dirname, 'header.html')),
+        footer = fs.readFileSync(path.resolve(__dirname, 'footer.html')),
        options = require("minimist")(process.argv.slice(2));

    // Convert from nomnoml source to a target PNG file.
@@ -115,9 +117,9 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
            // Prepend table of contents
            markdown =
                [ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
-            this.push("<html><body>\n");
+            this.push(header);
            this.push(marked(markdown));
-            this.push("\n</body></html>\n");
+            this.push(footer);
            done();
        };
        return transform;
@@ -186,12 +188,12 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
            var destination = file.replace(options['in'], options.out),
                destPath = path.dirname(destination),
                streamOptions = {};
-            if (file.match(/png$/)){
+            if (file.match(/png$/)) {
                streamOptions.encoding = null;
            } else {
                streamOptions.encoding = 'utf8';
            }
-            
+
            mkdirp(destPath, function (err) {
                fs.createReadStream(file, streamOptions)
                    .pipe(fs.createWriteStream(destination, streamOptions));
--- a/docs/header.html
+++ b/docs/header.html
@@ -0,0 +1,7 @@
+<html>
+    <head>
+        <link rel="stylesheet"
+              href="http://jasonm23.github.io/markdown-css-themes/avenir-white.css">
+    </head>
+    <body>
+
--- a/docs/src/architecture/framework.md
+++ b/docs/src/architecture/framework.md
--- a/docs/src/architecture/index.md
+++ b/docs/src/architecture/index.md
@@ -58,13 +58,13 @@ of the software.

 These layers are:

-* [_Framework_](Framework.md): The framework layer is responsible for
+* [_Framework_](framework.md): The framework layer is responsible for
  managing the interactions between application components. It has no
  application-specific knowledge; at this layer, we have only
  established an abstraction by which different software components
  may communicate and/or interact.
-* [_Platform_](Platform.md): The platform layer defines the general look, feel, and
-  behavior of Open MCT Web. This includes user-facing components like
+* [_Platform_](platform.md): The platform layer defines the general look, 
+  feel, and behavior of Open MCT Web. This includes user-facing components like
  Browse mode and Edit mode, as well as underlying elements of the
  information model and the general service infrastructure.
 * _Application_: The application layer defines specific features of
--- a/docs/src/architecture/platform.md
+++ b/docs/src/architecture/platform.md
--- a/docs/src/guide/index.md
+++ b/docs/src/guide/index.md
@@ -129,7 +129,7 @@ The framework's role in the application is to manage connections between
 bundles. All application-specific behavior is provided by individual bundles, or
 as the result of their collaboration.

-The framework is described in more detail in the [Framework Overview](../architecture/Framework.md#Overview) of the 
+The framework is described in more detail in the [Framework Overview](../architecture/framework.md#overview) of the 
 architecture guide.

 ### Tiers
@@ -186,7 +186,8 @@ as well as the framework layer's role in mediating between these components.
 Once the framework layer has wired these software components together, however,
 the application's logical architecture emerges.

-An overview of the logical architecture of the platform is given in the [Platform Architecture](../architecture/Platform.md#PlatformArchitecture) 
+An overview of the logical architecture of the platform is given in the 
+[Platform Architecture](../architecture/platform.md#platform-architecture) 
 section of the Platform guide

 ### Web Services
@@ -233,7 +234,7 @@ The application is composed of bundles. Plug-ins are bundles.
 non-persistent state associated with a domain object.
 * __category__: A machine-readable identifier for a group that something may 
 belong to.
-* __composition __: In the context of a domain object, this refers to the set of 
+* __composition__: In the context of a domain object, this refers to the set of 
 other domain objects that compose or are contained by that object. A domain 
 object's composition is the set of domain objects that should appear immediately
 beneath it in a tree hierarchy. A domain object's composition is described in 
@@ -244,10 +245,10 @@ identifiers asynchronously.
 readable description of a thing; usually a single sentence or short paragraph. 
 (Most often used in the context of extensions, domain object models, or other 
 similar application-specific objects.) 
-* __domain object __: A meaningful object to the user; a distinct thing in the 
+* __domain object__: A meaningful object to the user; a distinct thing in the 
 work support by Open MCT Web. Anything that appears in the left-hand tree is a 
 domain object. 
-* __extension __: An extension is a unit of functionality exposed to the platform 
+* __extension__: An extension is a unit of functionality exposed to the platform 
 in a declarative fashion by a bundle. The term 'extension category' is used to 
 distinguish types of extensions from specific extension instances. 
 * __id__: A string which uniquely identifies a domain object. 
@@ -609,8 +610,8 @@ path relative to the bundle's resource directory (`res` by default.)

 ### Composite Services

-Composite services are described in the [relevant section](../architecture/Framework.md#Composite-Services) 
-of the framework guide.
+Composite services are described in the [Composite Services](../architecture/framework.md#composite-services) 
+section of the framework guide.

 A component should include the following properties in its extension definition:

@@ -724,8 +725,8 @@ interpretations for specific sources.

 ### Telemetry Responses

-When returned from the `telemetryService` (see [Services](#Services) section), 
-telemetry series data will be packaged in a `source -> key -> TelemetrySeries` 
+When returned from the `telemetryService` (see [Telemetry Services](#telemetry-service) 
+section), telemetry series data will be packaged in a `source -> key -> TelemetrySeries` 
 fashion. That is, telemetry is passed in an object containing key-value pairs. 
 Keys identify telemetry sources; values are objects containing additional 
 key-value pairs. In this object, keys identify individual telemetry series (and 
@@ -1042,7 +1043,7 @@ Angular templates which need to interact with information (e.g. the domain
 object being represented) provided by the platform. This information is passed 
 in through the template's scope, such that simple representations may be created 
 by providing only templates. (More complex representations will need controllers 
-which are referenced from templates. See [https://docs.angularjs.org/guide/controller ]()
+which are referenced from templates. See https://docs.angularjs.org/guide/controller
 for more information on controllers in Angular.) 
 
 A representation's scope will contain:
@@ -1074,7 +1075,7 @@ representing domain objects in general. For example, support for the  _gestures_
 extension category is added by a _representer_.

 A representer needs only provide an implementation. When an `mct-representation` 
-is linked (see  [https://docs.angularjs.org/guide/directive ]() or when the 
+is linked (see https://docs.angularjs.org/guide/directive ) or when the 
 domain object being represented changes, a new _representer_ of each declared 
 type is instantiated. The constructor arguments for a _representer_ are the same 
 as the arguments to the link function in an Angular directive: `scope` the 
@@ -1106,6 +1107,8 @@ property:
 * `stylesheetUrl`: Path and filename, including extension, for the stylesheet to 
 include. This path is relative to the bundle's resources folder (by default,  
 `res`) 
+* `theme`: Optional; if present, this stylesheet will only be included if this
+value matches the `THEME` constant.
 
 To control the order of CSS files, use priority  (see the section on Extension 
 Definitions above.) 
@@ -1155,7 +1158,7 @@ capability.
 (as should appear in the _Create_ or the _Edit Properties_ dialog.) Each 
 property is described by an object containing the following properties:
    * `control`: The key of the control (see `mct-control` and the `controls` 
-    [extension category](#Controls)) to use for editing this property. 
+    [extension category](#controls-category)) to use for editing this property. 
    * `property`: A string which will be used as the name of the property in the 
    domain object's model that the value for this property should be stored 
    under. If this value should be stored in an object nested within the domain 
@@ -1178,7 +1181,7 @@ the list of version information in the About dialog.
 dialog.

 To control the ordering of line items within the About dialog, use `priority`. 
-(See section on [Extension Definitions](#ExtensionDefinitions) above.) 
+(See section on [Extensions](#extensions) above.) 

 This extension category does not have implementations. 
 
@@ -1200,7 +1203,7 @@ applicable for domain objects which have the capabilities identified by these
 strings. 
 * `delegation`: Optional boolean, intended to be used in conjunction with  
 `needs`;  if present, allow required capabilities to be satisfied by means of 
-capability delegation. (See [Delegation](#Delegation))
+capability delegation. (See [Delegation](#delegation-capability))
 * `toolbar`: Optional; a definition for the toolbar which may appear in a 
 toolbar when using this view in Edit mode. This should be specified as a 
 structure for mct-toolbar , with additional properties available for each item in 
@@ -1231,8 +1234,8 @@ A view's selection state is, conceptually, a set of JavaScript objects. The
 presence of methods/properties on these objects determine which toolbar controls 
 are visible, and what state they manage and/or behavior they invoke. 

-This set may contain up to two different objects: The  _view proxy _, which is 
-used to make changes to the view as a whole, and the _ selected object _, which is 
+This set may contain up to two different objects: The  _view proxy_, which is 
+used to make changes to the view as a whole, and the _selected object_, which is 
 used to represent some state within the view. (Future versions of Open MCT Web 
 may support multiple selected objects.) 

@@ -1561,7 +1564,8 @@ extension mechanism is insufficient to achieve a desired result.
 
 ### Action Service

-The [Action Service](../architecture/platform#action-service) (`actionService`) 
+The [Action Service](../architecture/platform.md#action-service) 
+(`actionService`) 
 provides `Action` instances which are applicable in specific contexts. See Core 
 API for additional notes on the interface for actions. The `actionService` has 
 the following interface: 
@@ -1571,7 +1575,8 @@ in the specified action context.

 ### Capability Service 

-The [Capability Service](../architecture/platform#capability-service) (`capabilityService`) 
+The [Capability Service](../architecture/platform.md#capability-service) 
+(`capabilityService`) 
 provides constructors for capabilities which will be exposed for a given domain 
 object. 

@@ -1691,7 +1696,7 @@ allowed within the application. It has the following interface:
 * `allow(category, candidate, context, [callback])`: Check if this decision 
 should be allowed. Returns a boolean. Its arguments are interpreted as: 
    * `category`: A string identifying which kind of decision is being made. See 
-    the [section on Categories](#PolicyCategories) for categories supported by 
+    the [section on Categories](#policy-categories) for categories supported by 
    the platform; plugins may define and utilize policies of additional 
    categories, as well. 
    * `candidate`: An object representing the thing which shall or shall not be 
@@ -1717,7 +1722,7 @@ When acquiring telemetry for display, it is recommended that the
 `telemetryHandler` service be used instead of this service. The 
 `telemetryHandler` has additional support for subscribing to and requesting 
 telemetry data associated with domain objects or groups of domain objects. See 
-the [Other Services](#Other-Services) section for more information. 
+the [Other Services](#other-services) section for more information. 

 The `telemetryService` has the following interface:

@@ -2152,7 +2157,7 @@ development. A few utilities are included to support development processes.

 ## Command-line Build
 Open MCT Web includes a script for building via command line using Maven 3.0.4 
-[https://maven.apache.org/]().
+https://maven.apache.org/ .
        
 Invoking mvn clean install will:

@@ -2169,7 +2174,7 @@ download build dependencies.

 ## Test Suite

-Open MCT Web uses Jasmine [http://jasmine.github.io/]() for automated testing. 
+Open MCT Web uses Jasmine http://jasmine.github.io/ for automated testing. 
 The file `test.html` included at the top level of the source repository, can be 
 run from the browser to perform tests for all active bundles, as defined in 
 `bundle.json`.
@@ -2260,30 +2265,30 @@ Examples of deployment strategies (and the conditions under which they make the
 most sense) include:

 * If the external services that Open MCT Web will utilize are all running on 
-Apache Tomcat [https://tomcat.apache.org/](), then it makes sense to run Open 
+[Apache Tomcat](https://tomcat.apache.org/), then it makes sense to run Open 
 MCT Web from the same Tomcat instance as a separate web application. The 
 `.war` artifact produced by the command line build facilitates this deployment 
-option. (See [https://tomcat.apache.org/tomcat-8.0-doc/deployer-howto.html() for 
+option. (See https://tomcat.apache.org/tomcat-8.0-doc/deployer-howto.html for 
 general information on deploying in Tomcat.)
 * If a variety of external services will be running from a variety of 
 hosts/ports, then it may make sense to use a web server that supports proxying, 
-such as the Apache HTTP Server [http://httpd.apache.org/](). In this 
+such as the [Apache HTTP Server](http://httpd.apache.org/). In this 
 configuration, the HTTP server would be configured to proxy (or reverse proxy) 
 requests at specific paths to the various external services, while providing 
 Open MCT Web as flat files from a different path.
 * If a single server component is being developed to handle all server-side 
 needs of an Open MCT Web instance, it can make sense to serve Open MCT Web (as 
-flat files) from the same component using an embedded HTTP server such as Nancy 
-[http://nancyfx.org/]().
+flat files) from the same component using an embedded HTTP server such as 
+[Nancy](http://nancyfx.org/).
 * If no external services are needed (or if the 'external services' will just 
 be generating flat files to read) it makes sense to utilize a lightweight flat 
-file HTTP server such as Lighttpd [http://www.lighttpd.net/](). In this 
+file HTTP server such as [Lighttpd](http://www.lighttpd.net/). In this 
 configuration, Open MCT Web sources/resources would be placed at one path, while 
 the files generated by the external service are placed at another path.
 * If all external services support CORS, it may make sense to have an HTTP 
 server that is solely responsible for making Open MCT Web sources/resources 
 available, and to have Open MCT Web contact these external services directly. 
-Again, lightweight HTTP servers such as Lighttpd [http://www.lighttpd.net/]() 
+Again, lightweight HTTP servers such as [Lighttpd](http://www.lighttpd.net/) 
 are useful in this circumstance. The downside of this option is that additional 
 configuration effort is required, both to enable CORS on the external services, 
 and to ensure that Open MCT Web can correctly locate these services.
@@ -2323,7 +2328,12 @@ default paths to reach external services are all correct.

 ### Configuration Constants

+
 The following configuration constants are recognized by Open MCT Web bundles:
+* Common UI elements - `platform/commonUI/general`
+    * `THEME`: A string identifying the current theme symbolically. Individual
+    stylesheets (the `stylesheets` extension category) may specify an optional
+    `theme` property which will be matched against this before inclusion.
 * CouchDB adapter - `platform/persistence/couch`
    * `COUCHDB_PATH`: URL or path to the CouchDB database to be used for domain 
    object persistence. Should not include a trailing slash.
--- a/docs/src/tutorials/index.md
+++ b/docs/src/tutorials/index.md
--- a/example/generator/bundle.json
+++ b/example/generator/bundle.json
@@ -16,6 +16,23 @@
                "implementation": "SinewaveLimitCapability.js"
            }
        ],
+        "formats": [
+            {
+                "key": "example.delta",
+                "implementation": "SinewaveDeltaFormat.js"
+            }
+        ],
+        "constants": [
+            {
+                "key": "TIME_CONDUCTOR_DOMAINS",
+                "value": [
+                    { "key": "time", "name": "Time" },
+                    { "key": "yesterday", "name": "Yesterday" },
+                    { "key": "delta", "name": "Delta", "format": "example.delta" }
+                ],
+                "priority": -1
+            }
+        ],
        "types": [
            {
                "key": "generator",
@@ -38,6 +55,11 @@
                        {
                            "key": "yesterday",
                            "name": "Yesterday"
+                        },
+                        {
+                            "key": "delta",
+                            "name": "Delta",
+                            "format": "example.delta"
                        }
                    ],
                    "ranges": [
--- a/example/generator/src/SinewaveConstants.js
+++ b/example/generator/src/SinewaveConstants.js
@@ -0,0 +1,26 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define({
+    START_TIME: Date.now() - 24 * 60 * 60 * 1000 // Now minus a day.
+});
--- a/example/generator/src/SinewaveDeltaFormat.js
+++ b/example/generator/src/SinewaveDeltaFormat.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    ['./SinewaveConstants', 'moment'],
+    function (SinewaveConstants, moment) {
+        "use strict";
+
+        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;
+    }
+);
--- a/example/generator/src/SinewaveTelemetrySeries.js
+++ b/example/generator/src/SinewaveTelemetrySeries.js
@@ -25,12 +25,12 @@
 * Module defining SinewaveTelemetry. Created by vwoeltje on 11/12/14.
 */
 define(
-    [],
-    function () {
+    ['./SinewaveConstants'],
+    function (SinewaveConstants) {
        "use strict";

        var ONE_DAY = 60 * 60 * 24,
-            firstObservedTime = Math.floor(Date.now() / 1000) - ONE_DAY;
+            firstObservedTime = Math.floor(SinewaveConstants.START_TIME / 1000);

        /**
         *
@@ -58,6 +58,9 @@ define(
            };

            generatorData.getDomainValue = function (i, domain) {
+                // delta uses the same numeric values as the default domain,
+                // so it's not checked for here, just formatted for display
+                // differently.
                return (i + offset) * 1000 + firstTime * 1000 -
                    (domain === 'yesterday' ? ONE_DAY : 0);
            };
--- a/example/mobile/bundle.json
+++ b/example/mobile/bundle.json
@@ -0,0 +1,12 @@
+{
+  "name": "Mobile",
+  "description": "Allows elements with pertinence to mobile usage and development",
+  "extensions": {
+    "stylesheets": [
+      {
+        "stylesheetUrl": "css/mobile-example.css",
+        "priority": "mandatory"
+      }
+    ]
+  }
+}
--- a/example/mobile/res/config.rb
+++ b/example/mobile/res/config.rb
@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+# require "compass-growl"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# :expanded, :compressed, :nested
+output_style = :nested
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass
--- a/example/mobile/res/css/mobile-example.css
+++ b/example/mobile/res/css/mobile-example.css
@@ -0,0 +1,103 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** FEATURES */
+/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** RATIOS */
+/************************** LAYOUT */
+/************************** CONTROLS */
+/************************** PATHS */
+/************************** TIMINGS */
+/************************** LIMITS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+/************************** MOBILE TREE MENU DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/* REQUIRES mobile/_constants */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 28, ../sass/mobile-example.scss */
+  .create-btn-holder {
+    display: block !important; } }
--- a/example/mobile/res/sass/mobile-example.scss
+++ b/example/mobile/res/sass/mobile-example.scss
@@ -0,0 +1,31 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+@import "../../../../platform/commonUI/general/res/sass/constants";
+@import "../../../../platform/commonUI/general/res/sass/mobile/constants";
+@import "../../../../platform/commonUI/general/res/sass/mobile/mixins";
+
+@include phoneandtablet {
+    // Show the Create button
+    .create-btn-holder {
+        display: block !important;
+    }
+}
--- a/example/notifications/bundle.json
+++ b/example/notifications/bundle.json
@@ -0,0 +1,47 @@
+{
+    "extensions": {
+        "templates": [
+            {
+                "key": "dialogLaunchTemplate",
+                "templateUrl": "dialog-launch.html"
+            },
+            {
+                "key": "notificationLaunchTemplate",
+                "templateUrl": "notification-launch.html"
+            }
+        ],
+        "controllers": [
+            {
+                "key": "DialogLaunchController",
+                "implementation": "DialogLaunchController.js",
+                "depends": [
+                    "$scope",
+                    "$timeout",
+                    "$log",
+                    "dialogService",
+                    "notificationService"
+                ]
+            },
+            {
+                "key": "NotificationLaunchController",
+                "implementation": "NotificationLaunchController.js",
+                "depends": [
+                    "$scope",
+                    "$timeout",
+                    "$log",
+                    "notificationService"
+                ]
+            }
+        ],
+        "indicators": [
+            {
+                "implementation": "DialogLaunchIndicator.js",
+                "priority": "fallback"
+            },
+            {
+                "implementation": "NotificationLaunchIndicator.js",
+                "priority": "fallback"
+            }
+        ]
+    }
+}
--- a/example/notifications/res/dialog-launch.html
+++ b/example/notifications/res/dialog-launch.html
@@ -0,0 +1,10 @@
+<span class="status block ok" ng-controller="DialogLaunchController">
+    <span class="ui-symbol status-indicator">&#xe600;</span>
+    <span class="label">
+        <a ng-click="launchProgress(true)">Known</a> |
+        <a ng-click="launchProgress(false)">Unknown</a> |
+        <a ng-click="launchError()">Error</a> |
+        <a ng-click="launchInfo()">Info</a>
+    </span>
+    <span class="count">Dialogs</span>
+</span>
--- a/example/notifications/res/notification-launch.html
+++ b/example/notifications/res/notification-launch.html
@@ -0,0 +1,10 @@
+<span class="status block ok" ng-controller="NotificationLaunchController">
+    <span class="ui-symbol status-indicator">&#xe600;</span>
+    <span class="label">
+        <a ng-click="newInfo()">Success</a> |
+        <a ng-click="newError()">Error</a> |
+        <a ng-click="newAlert()">Alert</a> |
+        <a ng-click="newProgress()">Progress</a>
+    </span>
+    <span class="count">Notifications</span>
+</span>
--- a/example/notifications/src/DialogLaunchController.js
+++ b/example/notifications/src/DialogLaunchController.js
@@ -0,0 +1,150 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * A controller for the dialog launch view. This view allows manual
+         * launching of dialogs for demonstration and testing purposes. It
+         * also demonstrates the use of the DialogService.
+         * @param $scope
+         * @param $timeout
+         * @param $log
+         * @param dialogService
+         * @param notificationService
+         * @constructor
+         */
+        function DialogLaunchController($scope, $timeout, $log, dialogService, notificationService) {
+
+            /*
+            Demonstrates launching a progress dialog and updating it
+             periodically with the progress of an ongoing process.
+             */
+            $scope.launchProgress = function (knownProgress) {
+                var model = {
+                    title: "Progress Dialog Example",
+                    progress: 0,
+                    hint: "Do not navigate away from this page or close this browser tab while this operation is in progress.",
+                    actionText: "Calculating...",
+                    unknownProgress: !knownProgress,
+                    unknownDuration: false,
+                    severity: "info",
+                    options: [
+                        {
+                            label: "Cancel Operation",
+                            callback: function () {
+                                $log.debug("Operation cancelled");
+                                dialogService.dismiss();
+                            }
+                        },
+                        {
+                            label: "Do something else...",
+                            callback: function () {
+                                $log.debug("Something else pressed");
+                            }
+                        }
+                    ]
+                };
+
+                function incrementProgress() {
+                    model.progress = Math.min(100, Math.floor(model.progress + Math.random() * 30));
+                    model.progressText = ["Estimated time remaining: about ", 60 - Math.floor((model.progress / 100) * 60), " seconds"].join(" ");
+                    if (model.progress < 100) {
+                        $timeout(incrementProgress, 1000);
+                    }
+                }
+
+                if (dialogService.showBlockingMessage(model)) {
+                    //Do processing here
+                    model.actionText = "Processing 100 objects...";
+                    if (knownProgress) {
+                        $timeout(incrementProgress, 1000);
+                    }
+                } else {
+                    $log.error("Could not display modal dialog");
+                }
+            };
+
+
+            /*
+             Demonstrates launching an error dialog
+             */
+            $scope.launchError = function () {
+                var model = {
+                    title: "Error Dialog Example",
+                    actionText: "Something happened, and it was not good.",
+                    severity: "error",
+                    options: [
+                        {
+                            label: "Try Again",
+                            callback: function () {
+                                $log.debug("Try Again Pressed");
+                                dialogService.dismiss();
+                            }
+                        },
+                        {
+                            label: "Cancel",
+                            callback: function () {
+                                $log.debug("Cancel Pressed");
+                                dialogService.dismiss();
+                            }
+                        }
+                    ]
+                };
+
+                if (!dialogService.showBlockingMessage(model)) {
+                    $log.error("Could not display modal dialog");
+                }
+            };
+
+            /*
+             Demonstrates launching an error dialog
+             */
+            $scope.launchInfo = function () {
+                var model = {
+                    title: "Info Dialog Example",
+                    actionText: "This is an example of a blocking info" +
+                    " dialog. This dialog can be used to draw the user's" +
+                    " attention to an event.",
+                    severity: "info",
+                    primaryOption: {
+                            label: "OK",
+                            callback: function () {
+                                $log.debug("OK Pressed");
+                                dialogService.dismiss();
+                            }
+                        }
+                };
+
+                if (!dialogService.showBlockingMessage(model)) {
+                    $log.error("Could not display modal dialog");
+                }
+            };
+
+        }
+        return DialogLaunchController;
+    }
+);
--- a/example/notifications/src/DialogLaunchIndicator.js
+++ b/example/notifications/src/DialogLaunchIndicator.js
@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,window*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * A tool for manually invoking dialogs. When included this
+         * indicator will allow for dialogs of different types to be
+         * launched for demonstration and testing purposes.
+         * @constructor
+         */
+        function DialogLaunchIndicator() {
+
+        }
+
+        DialogLaunchIndicator.template = 'dialogLaunchTemplate';
+
+        DialogLaunchIndicator.prototype.getGlyph = function () {
+            return "i";
+        };
+        DialogLaunchIndicator.prototype.getGlyphClass = function () {
+            return 'caution';
+        };
+        DialogLaunchIndicator.prototype.getText = function () {
+            return "Launch test dialog";
+        };
+        DialogLaunchIndicator.prototype.getDescription = function () {
+            return "Launch test dialog";
+        };
+
+        return DialogLaunchIndicator;
+    }
+);
--- a/example/notifications/src/NotificationLaunchController.js
+++ b/example/notifications/src/NotificationLaunchController.js
@@ -0,0 +1,172 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * Allows launching of notification messages for the purposes of
+         * demonstration and testing. Also demonstrates use of
+         * the NotificationService. Notifications are non-blocking messages that
+         * appear at the bottom of the screen to inform the user of events
+         * in a non-intrusive way. For more information see the
+         * {@link NotificationService}
+         * @param $scope
+         * @param $timeout
+         * @param $log
+         * @param notificationService
+         * @constructor
+         */
+        function NotificationLaunchController($scope, $timeout, $log, notificationService) {
+            var messageCounter = 1;
+
+            function getExampleActionText() {
+                var actionTexts = [
+                    "Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.",
+                    "Eros turpis, pulvinar turpis eros eu",
+                    "Lundium nascetur a, lectus montes ac, parturient in natoque, duis risus risus pulvinar pid rhoncus, habitasse auctor natoque!"
+                ];
+                return actionTexts[Math.floor(Math.random()*3)];
+            }
+
+            function getExampleActions() {
+                var actions = [
+                    {
+                        label: "Try Again",
+                        callback: function () {
+                            $log.debug("Try Again pressed");
+                        }
+                    },
+                    {
+                        label: "Remove",
+                        callback: function () {
+                            $log.debug("Remove pressed");
+                        }
+                    },
+                    {
+                        label: "Cancel",
+                        callback: function () {
+                            $log.debug("Cancel pressed");
+                        }
+                    }
+                ];
+
+                // Randomly remove some actions off the top; leave at least one
+                actions.splice(0,Math.floor(Math.random() * actions.length));
+
+                return actions;
+            }
+
+            function getExampleSeverity() {
+                var severities = [
+                    "info",
+                    "alert",
+                    "error"
+                ];
+                return severities[Math.floor(Math.random() * severities.length)];
+            }
+
+            /**
+             * Launch a new notification with a severity level of 'Error'.
+             */
+            $scope.newError = function(){
+
+                notificationService.notify({
+                    title: "Example error notification " + messageCounter++,
+                    hint: "An error has occurred",
+                    severity: "error",
+                    primaryOption: {
+                        label: 'Retry',
+                        callback: function() {
+                            $log.info('Retry clicked');
+                        }
+                    },
+                    options: getExampleActions()});
+            };
+            /**
+             * Launch a new notification with a severity of 'Alert'.
+             */
+            $scope.newAlert = function(){
+
+                notificationService.notify({
+                    title: "Alert notification " + (messageCounter++),
+                    hint: "This is an alert message",
+                    severity: "alert",
+                    primaryOption: {
+                        label: 'Retry',
+                        callback: function() {
+                            $log.info('Retry clicked');
+                        }
+                    },
+                    options: getExampleActions()});
+            };
+
+
+            /**
+             * Launch a new notification with a progress bar that is updated
+             * periodically, tracking an ongoing process.
+             */
+            $scope.newProgress = function(){
+
+                var notificationModel = {
+                    title: "Progress notification example",
+                    severity: "info",
+                    progress: 0,
+                    actionText: getExampleActionText(),
+                    unknownProgress: false
+                };
+
+                /**
+                 * Simulate an ongoing process and update the progress bar.
+                 * @param notification
+                 */
+                function incrementProgress(notificationModel) {
+                    notificationModel.progress = Math.min(100, Math.floor(notificationModel.progress + Math.random() * 30));
+                    notificationModel.progressText = ["Estimated time" +
+                    " remaining:" +
+                    " about ", 60 - Math.floor((notificationModel.progress / 100) * 60), " seconds"].join(" ");
+                    if (notificationModel.progress < 100) {
+                        $timeout(function(){incrementProgress(notificationModel);}, 1000);
+                    }
+                }
+
+                notificationService.notify(notificationModel);
+                incrementProgress(notificationModel);
+            };
+
+            /**
+             * Launch a new notification with severity level of INFO.
+             */
+            $scope.newInfo = function(){
+
+                notificationService.info({
+                    title: "Example Info notification " + messageCounter++
+                });
+            };
+
+        }
+        return NotificationLaunchController;
+    }
+);
--- a/example/notifications/src/NotificationLaunchIndicator.js
+++ b/example/notifications/src/NotificationLaunchIndicator.js
@@ -0,0 +1,50 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,window*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function NotificationLaunchIndicator() {
+
+        }
+
+        NotificationLaunchIndicator.template = 'notificationLaunchTemplate';
+
+        NotificationLaunchIndicator.prototype.getGlyph = function () {
+            return "i";
+        };
+        NotificationLaunchIndicator.prototype.getGlyphClass = function () {
+            return 'caution';
+        };
+        NotificationLaunchIndicator.prototype.getText = function () {
+            return "Launch notification";
+        };
+        NotificationLaunchIndicator.prototype.getDescription = function () {
+            return "Launch notification";
+        };
+
+        return NotificationLaunchIndicator;
+    }
+);
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -34,7 +34,6 @@ module.exports = function(config) {
        // List of files / patterns to load in the browser.
        // By default, files are also included in a script tag.
        files: [
-            '**/moment*',
            {pattern: 'example/**/*.js', included: false},
            {pattern: 'platform/**/*.js', included: false},
            {pattern: 'warp/**/*.js', included: false},
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -1,9 +1,4 @@
 {
-    "configuration": {
-        "paths": {
-            "uuid": "uuid"
-        }
-    },
    "extensions": {
        "routes": [
            {
@@ -25,6 +20,7 @@
                    "$scope",
                    "$route",
                    "$location",
+                    "$q",
                    "objectService",
                    "navigationService",
                    "urlService"
@@ -39,7 +35,8 @@
            {
                "key": "BrowseObjectController",
                "implementation": "BrowseObjectController.js",
-                "depends": [ "$scope", "$location", "$route" ]
+                "depends": [ "$scope", "$location", "$route", "$q",
+                    "navigationService" ]
            },
            {
                "key": "CreateMenuController",
@@ -67,6 +64,7 @@
            {
                "key": "browse-object",
                "templateUrl": "templates/browse-object.html",
+                "gestures": ["drop"],
                "uses": [ "view" ]
            },
            {
@@ -159,7 +157,7 @@
                "provides": "creationService",
                "type": "provider",
                "implementation": "creation/CreationService.js",
-                "depends": [ "persistenceService", "now", "$q", "$log" ]
+                "depends": [ "$q", "$log" ]
            }
        ],
        "runs": [
@@ -178,16 +176,6 @@
                "copyright": "Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)",
                "license": "license-mit",
                "link": "https://github.com/sindresorhus/screenfull.js/blob/gh-pages/license"
-            },
-            {
-                "name": "Math.uuid.js",
-                "version": "1.4",
-                "description": "Unique identifer generation (code adapted.)",
-                "author": "Robert Kieffer",
-                "website": "https://github.com/broofa/node-uuid",
-                "copyright": "Copyright (c) 2010 Robert Kieffer",
-                "license": "license-mit",
-                "link": "http://opensource.org/licenses/MIT"
            }
        ]
    }
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -19,16 +19,18 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<span ng-controller="BrowseObjectController">
-    <div class="object-browse-bar bar l-flex">
-        <div class="items-select left">
+<div ng-controller="BrowseObjectController" class="abs l-flex-col">
+    <div class="holder flex-elem l-flex-row object-browse-bar ">
+        <div class="items-select left flex-elem l-flex-row grows">
            <mct-representation key="'back-arrow'"
                                mct-object="domainObject"
-                                class="l-back"></mct-representation>
-            <mct-representation key="'object-header'" mct-object="domainObject">
+                                class="flex-elem l-back"></mct-representation>
+            <mct-representation key="'object-header'"
+                                mct-object="domainObject"
+                                class="l-flex-row flex-elem grows object-header">
            </mct-representation>
        </div>
-        <div class="btn-bar right">
+        <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">
@@ -41,8 +43,49 @@
            </mct-representation>
        </div>
    </div>
-    <mct-representation key="representation.selected.key"
-                        mct-object="representation.selected.key && domainObject"
-                        class="abs object-holder">
-    </mct-representation>
-</span>
+    <div class="holder l-flex-col flex-elem grows l-object-wrapper" ng-class="{ active:editMode, 'edit-main':editMode}">
+        <div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
+            <!-- Toolbar and Save/Cancel buttons -->
+            <div class="l-edit-controls flex-elem l-flex-row flex-align-end"
+                 ng-class="{ active:editMode }">
+    <!--            <mct-toolbar name="mctToolbar"
+                             structure="toolbar.structure"
+                             ng-model="toolbar.state"
+                             class="flex-elem grow"></mct-toolbar>-->
+
+                <!-- from toolbar.html -->
+                <mct-toolbar-x class="flex-elem grows ellipsis">
+                    <form novalidate>
+                        <div class="tool-bar btn-bar">
+                            <span class="l-control-group">
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
+                            </span>
+                            <span class="l-control-group">
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Lorem</span>
+                            </span>
+                            <span class="l-control-group">
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
+                                <span class="s-menu-btn">Lorem</span>
+                            </span>
+                            <span class="s-menu-btn">Lorem</span>
+                        </div>
+                    </form>
+                </mct-toolbar-x>
+                <mct-representation key="'edit-action-buttons'"
+                                    mct-object="domainObject"
+                                    class='flex-elem conclude-editing'>
+                </mct-representation>
+
+            </div>
+            <mct-representation key="representation.selected.key"
+                                mct-object="representation.selected.key && domainObject"
+                                class="abs flex-elem grows object-holder-main scroll">
+            </mct-representation>
+        </div><!--/ l-object-wrapper-inner -->
+    </div>
+</div>
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -28,31 +28,23 @@
        <mct-split-pane class='abs contents'
                        anchor='left'>
            <div class='split-pane-component treeview pane left'>
-                <!--<a class="mini-tab-icon anchor-left toggle-pane toggle-search mobile-hide"
-                   title="Enable search"
-                   ng-click="modelPaneTree.toggle()"
-                   ng-class="{ collapsed : !modelPaneTree.visible() }"
-                   ng-style="{ opacity: modelPaneTree.visible()? 0:1 }"></a>-->
-                <div class="holder holder-create-and-search abs l-mobile">
+                <div class="abs holder l-flex-col holder-treeview-elements">
                    <mct-representation key="'create-button'"
                                        mct-object="navigatedObject"
-                                        mct-device="desktop">
+                                        class="holder flex-elem create-btn-holder">
+                    </mct-representation>
+                    <mct-include key="'search'"
+                                 ng-model="treeModel"
+                                 class="holder l-flex-col flex-elem search-holder"
+                                 ng-class="{ active: treeModel.search, grows: treeModel.search }">
+                    </mct-include>
+                    <mct-representation key="'tree'"
+                                        mct-object="domainObject"
+                                        parameters="tree"
+                                        ng-model="treeModel"
+                                        class="holder flex-elem grows vscroll tree-holder"
+                                        ng-hide="treeModel.search">
                    </mct-representation>
-                    <div class='holder search-holder abs'
-                         ng-class="{active: treeModel.search}">
-                        <mct-representation key="'search'"
-                                     mct-object="domainObject"
-                                     ng-model="treeModel">
-                        </mct-representation>
-                    </div>
-                    <div class='tree-holder abs mobile-tree-holder'
-                         ng-hide="treeModel.search">
-                        <mct-representation key="'tree'"
-                                            mct-object="domainObject"
-                                            parameters="tree"
-                                            ng-model="treeModel">
-                        </mct-representation>
-                    </div>
                </div>
            </div>

@@ -64,7 +56,7 @@
                   ng-click="modelPaneTree.toggle()"
                   ng-class="{ collapsed : !modelPaneTree.visible() }"></a>

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

--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.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='object-header'>
-    <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
-    <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
-    <span class="l-elem-wrapper l-flex">
-        <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='title-label'>{{model.name}}</span>
-        <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
-    </span>
-</div>
+<span class='type-icon ui-symbol flex-elem'>{{type.getGlyph()}}</span>
+<span class="l-elem-wrapper l-flex-row flex-elem grows">
+    <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
+    <span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>
+    <mct-representation
+        key="'menu-arrow'"
+        mct-object='domainObject'
+        class="flex-elem"></mct-representation>
+</span>
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -26,8 +26,11 @@
 * @namespace platform/commonUI/browse
 */
 define(
-    [],
-    function () {
+    [
+        '../../../representation/src/gestures/GestureConstants',
+        '../../edit/src/objects/EditableDomainObject'
+    ],
+    function (GestureConstants, EditableDomainObject) {
        "use strict";

        var ROOT_ID = "ROOT",
@@ -43,7 +46,7 @@ define(
         * @memberof platform/commonUI/browse
         * @constructor
         */
-        function BrowseController($scope, $route, $location, objectService, navigationService, urlService) {
+        function BrowseController($scope, $route, $location, $q, objectService, navigationService, urlService) {
            var path = [ROOT_ID].concat(
                ($route.current.params.ids || DEFAULT_PATH).split("/")
            );
@@ -71,13 +74,17 @@ define(
            // Callback for updating the in-scope reference to the object
            // that is currently navigated-to.
            function setNavigation(domainObject) {
-                $scope.navigatedObject = domainObject;
+
+                var wrappedObject = domainObject;
+
+                $scope.navigatedObject = wrappedObject;
                $scope.treeModel.selectedObject = domainObject;
                navigationService.setNavigation(domainObject);
                updateRoute(domainObject);
            }

            function navigateTo(domainObject) {
+
                // Check if an object has been navigated-to already...
                // If not, or if an ID path has been explicitly set in the URL,
                // navigate to the URL-specified object.
@@ -143,12 +150,22 @@ define(
                selectedObject: navigationService.getNavigation()
            };

+            $scope.beforeUnloadWarning = function() {
+                var editorCapability = $scope.navigatedObject &&
+                        $scope.navigatedObject.getCapability("editor"),
+                    hasChanges = editorCapability && editorCapability.dirty();
+
+                return hasChanges ?
+                    "Unsaved changes will be lost if you leave this page." :
+                    undefined;
+            }
+
            // Listen for changes in navigation state.
            navigationService.addListener(setNavigation);

            // Also listen for changes which come from the tree
            $scope.$watch("treeModel.selectedObject", setNavigation);
-
+            
            // Clean up when the scope is destroyed
            $scope.$on("$destroy", function () {
                navigationService.removeListener(setNavigation);
--- a/platform/commonUI/browse/src/BrowseObjectController.js
+++ b/platform/commonUI/browse/src/BrowseObjectController.js
@@ -22,8 +22,9 @@
 /*global define,Promise*/

 define(
-    [],
-    function () {
+    ['../../../representation/src/gestures/GestureConstants', 
+        '../../edit/src/objects/EditableDomainObject'],
+    function (GestureConstants, EditableDomainObject) {
        "use strict";

        /**
@@ -32,8 +33,10 @@ define(
         * @memberof platform/commonUI/browse
         * @constructor
         */
-        function BrowseObjectController($scope, $location, $route) {
+        function BrowseObjectController($scope, $location, $route, $q, navigationService) {
+            var navigatedObject;
            function setViewForDomainObject(domainObject) {
+                
                var locationViewKey = $location.search().view;

                function selectViewIfMatching(view) {
@@ -47,6 +50,8 @@ define(
                    ((domainObject && domainObject.useCapability('view')) || [])
                        .forEach(selectViewIfMatching);
                }
+                $scope.editMode = domainObject.getDomainObject ? true : false;
+                navigatedObject = domainObject;
            }

            function updateQueryParam(viewKey) {
@@ -67,6 +72,15 @@ define(

            $scope.$watch('domainObject', setViewForDomainObject);
            $scope.$watch('representation.selected.key', updateQueryParam);
+
+            $scope.cancelEditing = function() {
+                navigationService.setNavigation($scope.domainObject.getDomainObject());
+            }
+
+            $scope.doAction = function (action){
+                $scope[action] && $scope[action]();
+            }
+
        }

        return BrowseObjectController;
--- a/platform/commonUI/browse/src/creation/CreationService.js
+++ b/platform/commonUI/browse/src/creation/CreationService.js
@@ -25,8 +25,8 @@
 * Module defining CreateService. Created by vwoeltje on 11/10/14.
 */
 define(
-    ["uuid"],
-    function (uuid) {
+    [],
+    function () {
        "use strict";

        var NON_PERSISTENT_WARNING =
@@ -42,11 +42,9 @@ define(
         * @memberof platform/commonUI/browse
         * @constructor
         */
-        function CreationService(persistenceService, now, $q, $log) {
-            this.persistenceService = persistenceService;
+        function CreationService($q, $log) {
            this.$q = $q;
            this.$log = $log;
-            this.now = now;
        }

        /**
@@ -70,26 +68,17 @@ define(
         */
        CreationService.prototype.createObject = function (model, parent) {
            var persistence = parent.getCapability("persistence"),
+                newObject = parent.useCapability("instantiation", model),
+                newObjectPersistence = newObject.getCapability("persistence"),
                self = this;

-            // Persist the new domain object's model; it will be fully
-            // constituted as a domain object when loaded back, as all
-            // domain object models are.
-            function doPersist(space, id, model) {
-                return self.persistenceService.createObject(
-                    space,
-                    id,
-                    model
-                ).then(function () { return id; });
-            }
-
            // Add the newly-created object's id to the parent's
            // composition, so that it will subsequently appear
            // as a child contained by that parent.
-            function addToComposition(id, parent, parentPersistence) {
+            function addToComposition() {
                var compositionCapability = parent.getCapability('composition'),
                    addResult = compositionCapability &&
-                        compositionCapability.add(id);
+                        compositionCapability.add(newObject);

                return self.$q.when(addResult).then(function (result) {
                    if (!result) {
@@ -97,7 +86,7 @@ define(
                        return undefined;
                    }

-                    return parentPersistence.persist().then(function () {
+                    return persistence.persist().then(function () {
                        return result;
                    });
                });
@@ -105,21 +94,13 @@ define(

            // We need the parent's persistence capability to determine
            // what space to create the new object's model in.
-            if (!persistence) {
+            if (!persistence || !newObjectPersistence) {
                self.$log.warn(NON_PERSISTENT_WARNING);
                return self.$q.reject(new Error(NON_PERSISTENT_WARNING));
            }

-            // We create a new domain object in three sequential steps:
-            // 1. Get a new UUID for the object
-            // 2. Create a model with that ID in the persistence space
-            // 3. Add that ID to
-            return self.$q.when(uuid()).then(function (id) {
-                model.persisted = self.now();
-                return doPersist(persistence.getSpace(), id, model);
-            }).then(function (id) {
-                return addToComposition(id, parent, persistence);
-            });
+            // Persist the new object, then add it to composition.
+            return newObjectPersistence.persist().then(addToComposition);
        };


--- a/platform/commonUI/browse/test/creation/CreationServiceSpec.js
+++ b/platform/commonUI/browse/test/creation/CreationServiceSpec.js
@@ -30,9 +30,7 @@ define(
        "use strict";

        describe("The creation service", function () {
-            var mockPersistenceService,
-                mockNow,
-                mockQ,
+            var mockQ,
                mockLog,
                mockParentObject,
                mockNewObject,
@@ -40,7 +38,9 @@ define(
                mockPersistenceCapability,
                mockCompositionCapability,
                mockContextCapability,
+                mockCreationCapability,
                mockCapabilities,
+                mockNewPersistenceCapability,
                creationService;

            function mockPromise(value) {
@@ -60,11 +60,6 @@ define(
            }

            beforeEach(function () {
-                mockPersistenceService = jasmine.createSpyObj(
-                    "persistenceService",
-                    [ "createObject" ]
-                );
-                mockNow = jasmine.createSpy('now');
                mockQ = { when: mockPromise, reject: mockReject };
                mockLog = jasmine.createSpyObj(
                    "$log",
@@ -76,7 +71,7 @@ define(
                );
                mockNewObject = jasmine.createSpyObj(
                    "newObject",
-                    [ "getId" ]
+                    [ "getId", "getCapability", "useCapability" ]
                );
                mockMutationCapability = jasmine.createSpyObj(
                    "mutation",
@@ -94,19 +89,22 @@ define(
                    "context",
                    ["getPath"]
                );
+                mockCreationCapability = jasmine.createSpyObj(
+                    "creation",
+                    ["instantiate", "invoke"]
+                );
                mockCapabilities = {
                    mutation: mockMutationCapability,
                    persistence: mockPersistenceCapability,
                    composition: mockCompositionCapability,
-                    context: mockContextCapability
+                    context: mockContextCapability,
+                    instantiation: mockCreationCapability
                };
-
-                mockPersistenceService.createObject.andReturn(
-                    mockPromise(true)
+                mockNewPersistenceCapability = jasmine.createSpyObj(
+                    "new-persistence",
+                    [ "persist", "getSpace" ]
                );

-                mockNow.andReturn(12321);
-
                mockParentObject.getCapability.andCallFake(function (key) {
                    return mockCapabilities[key];
                });
@@ -115,9 +113,16 @@ define(
                });
                mockParentObject.getId.andReturn('parentId');

-                mockPersistenceCapability.persist.andReturn(
-                    mockPromise(true)
-                );
+                mockNewObject.getId.andReturn('newId');
+                mockNewObject.getCapability.andCallFake(function (c) {
+                    return c === 'persistence' ?
+                            mockNewPersistenceCapability : undefined;
+                });
+
+                mockPersistenceCapability.persist
+                    .andReturn(mockPromise(true));
+                mockNewPersistenceCapability.persist
+                    .andReturn(mockPromise(true));

                mockMutationCapability.invoke.andReturn(mockPromise(true));
                mockPersistenceCapability.getSpace.andReturn("testSpace");
@@ -125,10 +130,12 @@ define(
                    mockPromise([mockNewObject])
                );
                mockCompositionCapability.add.andReturn(mockPromise(true));
+                mockCreationCapability.instantiate.andReturn(mockNewObject);
+                mockCreationCapability.invoke.andCallFake(function (model) {
+                    return mockCreationCapability.instantiate(model);
+                });

                creationService = new CreationService(
-                    mockPersistenceService,
-                    mockNow,
                    mockQ,
                    mockLog
                );
@@ -137,21 +144,18 @@ define(
            it("allows new objects to be created", function () {
                var model = { someKey: "some value" };
                creationService.createObject(model, mockParentObject);
-                expect(mockPersistenceService.createObject).toHaveBeenCalledWith(
-                    "testSpace",
-                    jasmine.any(String), // the object id; generated UUID
-                    model
-                );
+                expect(mockCreationCapability.instantiate)
+                    .toHaveBeenCalledWith(model);
            });

-            it("adds new id's to the parent's composition", function () {
+            it("adds new objects to the parent's composition", function () {
                var model = { someKey: "some value" },
                    parentModel = { composition: ["notAnyUUID"] };
                creationService.createObject(model, mockParentObject);

                // Verify that a new ID was added
                expect(mockCompositionCapability.add)
-                    .toHaveBeenCalledWith(jasmine.any(String));
+                    .toHaveBeenCalledWith(mockNewObject);
            });

            it("provides the newly-created object", function () {
@@ -207,11 +211,6 @@ define(
                expect(mockLog.error).toHaveBeenCalled();
            });

-            it("attaches a 'persisted' timestamp", function () {
-                var model = { someKey: "some value" };
-                creationService.createObject(model, mockParentObject);
-                expect(model.persisted).toEqual(mockNow());
-            });

        });
    }
--- a/platform/commonUI/dialog/bundle.json
+++ b/platform/commonUI/dialog/bundle.json
@@ -24,6 +24,18 @@
            {
                "key": "form-dialog",
                "templateUrl": "templates/dialog.html"
+            },
+            {
+                "key": "overlay-blocking-message",
+                "templateUrl": "templates/overlay-blocking-message.html"
+            },
+            {
+                "key": "message",
+                "templateUrl": "templates/message.html"
+            },
+            {
+                "key": "overlay-message-list",
+                "templateUrl": "templates/overlay-message-list.html"
            }
        ],
        "containers": [
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -21,17 +21,13 @@
 -->
 <div class="abs top-bar">
    <div class="title">{{ngModel.title}}</div>
-    <div class="hint">
-        All fields marked <span class="ui-symbol req">*</span> are required.
-    </div>
+    <div class="hint">All fields marked <span class="ui-symbol req">*</span> are required.</div>
 </div>
-<div class="abs form editor">
-    <div class='abs contents l-dialog'>
-        <mct-form ng-model="ngModel.value"
-                  structure="ngModel.structure"
-                  name="createForm">
-        </mct-form>
-    </div>
+<div class='abs editor'>
+    <mct-form ng-model="ngModel.value"
+              structure="ngModel.structure"
+              name="createForm">
+    </mct-form>
 </div>
 <div class="abs bottom-bar">
    <a class='s-btn major'
--- a/platform/commonUI/dialog/res/templates/message.html
+++ b/platform/commonUI/dialog/res/templates/message.html
@@ -0,0 +1,32 @@
+<div class="l-message"
+     ng-class="'message-severity-' + ngModel.severity">
+    <div class="ui-symbol type-icon message-type"></div>
+    <div class="message-contents">
+        <div class="top-bar">
+            <div class="title">{{ngModel.title}}</div>
+            <div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
+        </div>
+        <div class="message-body">
+            <div class="message-action">
+                {{ngModel.actionText}}
+            </div>
+            <mct-include key="'progress-bar'"
+                         ng-model="ngModel"
+                         ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
+        </div>
+        <div class="bottom-bar">
+            <a ng-repeat="dialogOption in ngModel.options"
+               class="s-btn major"
+               ng-click="dialogOption.callback()">
+                {{dialogOption.label}}
+            </a>
+            <a class="s-btn major"
+               ng-if="ngModel.primaryOption"
+               ng-click="ngModel.primaryOption.callback()">
+                {{ngModel.primaryOption.label}}
+            </a>
+
+        </div>
+
+    </div>
+</div>
--- a/platform/commonUI/dialog/res/templates/overlay-blocking-message.html
+++ b/platform/commonUI/dialog/res/templates/overlay-blocking-message.html
@@ -0,0 +1,25 @@
+<!--
+ 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.
+-->
+<mct-container key="overlay" class="t-message-single">
+    <mct-include key="'message'" ng-model="ngModel">
+    </mct-include>
+</mct-container>
--- a/platform/commonUI/dialog/res/templates/overlay-message-list.html
+++ b/platform/commonUI/dialog/res/templates/overlay-message-list.html
@@ -0,0 +1,19 @@
+<mct-container key="overlay" class="t-message-list">
+    <div class="message-contents">
+        <div class="abs top-bar">
+            <div class="title">{{ngModel.dialog.title}}</div>
+            <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1">s</span>
+            </div>
+        </div>
+        <div class="abs message-body">
+            <mct-include ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'" key="'message'" ng-model="msg"></mct-include>
+        </div>
+        <div class="abs bottom-bar">
+            <a ng-repeat="dialogAction in ngModel.dialog.actions"
+               class="s-btn major"
+               ng-click="dialogAction.action()">
+                {{dialogAction.label}}
+            </a>
+        </div>
+    </div>
+</mct-container>
--- a/platform/commonUI/dialog/res/templates/overlay-options.html
+++ b/platform/commonUI/dialog/res/templates/overlay-options.html
@@ -24,13 +24,11 @@
        <div class="title">{{ngModel.dialog.title}}</div>
        <div class="hint">{{ngModel.dialog.hint}}</div>
    </div>
-    <div class="abs form outline editor">
-        <div class='abs contents l-dialog'>
-            <mct-include key="ngModel.dialog.template"
-                         parameters="ngModel.dialog.parameters"
-                         ng-model="ngModel.dialog.model">
-            </mct-include>
-        </div>
+    <div class='abs editor'>
+        <mct-include key="ngModel.dialog.template"
+                     parameters="ngModel.dialog.parameters"
+                     ng-model="ngModel.dialog.model">
+        </mct-include>
    </div>
    <div class="abs bottom-bar">
        <a ng-repeat="option in ngModel.dialog.options"
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@@ -22,14 +22,9 @@
 <div class="abs overlay">
    <div class="abs blocker"></div>
    <div class="abs holder">
-        <a href=""
-           ng-click="ngModel.cancel()"
+        <a ng-click="ngModel.cancel()"
           ng-if="ngModel.cancel"
-           class="clk-icon icon ui-symbol close">
-            x
-        </a>
-        <div class="abs contents" ng-transclude>
-
-        </div>
+           class="clk-icon icon ui-symbol close">x</a>
+        <div class="abs contents" ng-transclude></div>
    </div>
 </div>
--- a/platform/commonUI/dialog/src/DialogService.js
+++ b/platform/commonUI/dialog/src/DialogService.js
@@ -55,7 +55,7 @@ define(
            this.dialogVisible = false;
        };

-        DialogService.prototype.getDialogResponse = function (key, model, resultGetter) {
+        DialogService.prototype.getDialogResponse = function (key, model, resultGetter, typeClass) {
            // We will return this result as a promise, because user
            // input is asynchronous.
            var deferred = this.$q.defer(),
@@ -84,27 +84,20 @@ define(
            model.confirm = confirm;
            model.cancel = cancel;

-            if (this.dialogVisible) {
-                // Only one dialog should be shown at a time.
-                // The application design should be such that
-                // we never even try to do this.
-                this.$log.warn([
-                    "Dialog already showing; ",
-                    "unable to show ",
-                    model.name
-                ].join(""));
-                deferred.reject();
-            } else {
+            if (this.canShowDialog(model)) {
                // Add the overlay using the OverlayService, which
                // will handle actual insertion into the DOM
                this.overlay = this.overlayService.createOverlay(
                    key,
-                    model
+                    model,
+                    typeClass || "t-dialog"
                );

                // Track that a dialog is already visible, to
                // avoid spawning multiple dialogs at once.
                this.dialogVisible = true;
+            } else {
+                deferred.reject();
            }

            return deferred.promise;
@@ -157,6 +150,99 @@ define(
            );
        };

+        /**
+         * Tests if a dialog can be displayed. A modal dialog may only be
+         * displayed if one is not already visible.
+         * Will log a warning message if it can't display a dialog.
+         * @returns {boolean} true if dialog is currently visible, false
+         * otherwise
+         */
+        DialogService.prototype.canShowDialog = function(dialogModel){
+            if (this.dialogVisible){
+                // Only one dialog should be shown at a time.
+                // The application design should be such that
+                // we never even try to do this.
+                this.$log.warn([
+                    "Dialog already showing; ",
+                    "unable to show ",
+                    dialogModel.title
+                ].join(""));
+
+                return false;
+            } else {
+                return true;
+            }
+        };
+
+        /**
+         * A user action that can be performed from a blocking dialog. These
+         * actions will be rendered as buttons within a blocking dialog.
+         *
+         * @typedef DialogOption
+         * @property {string} label a label to be displayed as the button
+         * text for this action
+         * @property {function} callback a function to be called when the
+         * button is clicked
+         */
+
+        /**
+         * A description of the model options that may be passed to the
+         * showBlockingMessage method. Note that the DialogModel desribed
+         * here is shared with the Notifications framework.
+         * @see NotificationService
+         *
+         * @typedef DialogModel
+         * @property {string} title the title to use for the dialog
+         * @property {string} severity the severity level of this message.
+         * These are defined in a bundle constant with key 'dialogSeverity'
+         * @property {string} hint the 'hint' message to show below the title
+         * @property {string} actionText text that indicates a current action,
+         * shown above a progress bar to indicate what's happening.
+         * @property {number} progress a percentage value (1-100)
+         * indicating the completion of the blocking task
+         * @property {string} progressText the message to show below a
+         * progress bar to indicate progress. For example, this might be
+         * used to indicate time remaining, or items still to process.
+         * @property {boolean} unknownProgress some tasks may be
+         * impossible to provide an estimate for. Providing a true value for
+         * this attribute will indicate to the user that the progress and
+         * duration cannot be estimated.
+         * @property {DialogOption} primaryOption an action that will
+         * be added to the dialog as a button. The primary action can be
+         * used as the suggested course of action for the user. Making it
+         * distinct from other actions allows it to be styled differently,
+         * and treated preferentially in banner mode.
+         * @property {DialogOption[]} options a list of actions that will
+         * be added to the dialog as buttons.
+         */
+
+        /**
+         * Displays a blocking (modal) dialog. This dialog can be used for
+         * displaying messages that require the user's
+         * immediate attention. The message may include an indication of
+         * progress, as well as a series of actions that
+         * the user can take if necessary
+         * @param {DialogModel} dialogModel defines options for the dialog
+         * @param {typeClass} string tells overlayService that this overlay should use appropriate CSS class
+         * @returns {boolean}
+         */
+        DialogService.prototype.showBlockingMessage = function(dialogModel) {
+            if (this.canShowDialog(dialogModel)) {
+                // Add the overlay using the OverlayService, which
+                // will handle actual insertion into the DOM
+                this.overlay = this.overlayService.createOverlay(
+                    "overlay-blocking-message",
+                    dialogModel,
+                    "t-dialog-sm"
+                );
+                // Track that a dialog is already visible, to
+                // avoid spawning multiple dialogs at once.
+                this.dialogVisible = true;
+                return true;
+            } else {
+                return false;
+            }
+        };

        return DialogService;
    }
--- a/platform/commonUI/dialog/src/OverlayService.js
+++ b/platform/commonUI/dialog/src/OverlayService.js
@@ -28,7 +28,7 @@ define(

        // Template to inject into the DOM to show the dialog; really just points to
        // the a specific template that can be included via mct-include
-        var TEMPLATE = '<mct-include ng-model="overlay" key="key"></mct-include>';
+        var TEMPLATE = '<mct-include ng-model="overlay" key="key" ng-class="typeClass"></mct-include>';


        /**
@@ -71,8 +71,11 @@ define(
         * @param {object} overlayModel the model to pass to the
         *        included overlay template (this will be passed
         *        in via ng-model)
+         * @param {string} typeClass the element class to use in rendering
+         *        the overlay. Can be specified to provide custom styling of
+         *        overlays
         */
-        OverlayService.prototype.createOverlay = function (key, overlayModel) {
+        OverlayService.prototype.createOverlay = function (key, overlayModel, typeClass) {
            // Create a new scope for this overlay
            var scope = this.newScope(),
                element;
@@ -90,6 +93,7 @@ define(
            // Populate the scope; will be passed directly to the template
            scope.overlay = overlayModel;
            scope.key = key;
+            scope.typeClass = typeClass || 't-dialog';

            // Create the overlay element and add it to the document's body
            element = this.$compile(TEMPLATE)(scope);
--- a/platform/commonUI/dialog/test/DialogServiceSpec.js
+++ b/platform/commonUI/dialog/test/DialogServiceSpec.js
@@ -116,10 +116,22 @@ define(
                        dialog: dialogModel,
                        confirm: jasmine.any(Function),
                        cancel: jasmine.any(Function)
-                    }
+                    },
+                    't-dialog'
+                );
+            });
+
+            it("invokes the overlay service with the correct parameters when" +
+                " a blocking dialog is requested", function() {
+                var dialogModel = {};
+                expect(dialogService.showBlockingMessage(dialogModel)).toBe(true);
+                expect(mockOverlayService.createOverlay).toHaveBeenCalledWith(
+                    "overlay-blocking-message",
+                    dialogModel,
+                    "t-dialog-sm"
                );
            });

        });
    }
-);
+);
--- a/platform/commonUI/edit/bundle.json
+++ b/platform/commonUI/edit/bundle.json
@@ -67,7 +67,9 @@
                "implementation": "actions/SaveAction.js",
                "name": "Save",
                "description": "Save changes made to these objects.",
-                "depends": [ "$location", "urlService" ],
+                "depends": [ "$q", "$location", "$injector",  "urlService",
+                    "navigationService", "policyService", "dialogService",
+                    "creationService" ],
                "priority": "mandatory"
            },
            {
@@ -76,7 +78,7 @@
                "implementation": "actions/CancelAction.js",
                "name": "Cancel",
                "description": "Discard changes made to these objects.",
-                "depends": [ "$location", "urlService" ]
+                "depends": [ "$location", "urlService", "navigationService" ]
            }
        ],
        "policies": [
--- a/platform/commonUI/edit/res/templates/edit-action-buttons.html
+++ b/platform/commonUI/edit/res/templates/edit-action-buttons.html
@@ -21,10 +21,11 @@
 -->
 <span ng-controller="EditActionController">
    <span ng-repeat="currentAction in editActions">
-        <a class='s-btn'
+        <a class='s-btn t-{{currentAction.getMetadata().key}}'
+           title='{{currentAction.getMetadata().name}}'
           ng-click="currentAction.perform()"
-           ng-class="{ major: $index === 0, subtle: $index !== 0 }">
-            {{currentAction.getMetadata().name}}
+           ng-class="{ major: $index === 0 }">
+            <span class="title-label">{{currentAction.getMetadata().name}}</span>
        </a>
    </span>
 </span>
--- a/platform/commonUI/edit/res/templates/topbar-edit.html
+++ b/platform/commonUI/edit/res/templates/topbar-edit.html
@@ -22,7 +22,8 @@
 <div class='top-bar edit abs'>
    <mct-representation key="'object-header'"
                        mct-object="domainObject"
-                        parameters="{ mode: 'Edit' }">
+                        parameters="{ mode: 'Edit' }"
+                        class="l-flex-row flex-elem grows object-header">
    </mct-representation>
    <div class='buttons-main btn-bar buttons abs'>
        <mct-representation key="'switcher'"
--- a/platform/commonUI/edit/src/actions/CancelAction.js
+++ b/platform/commonUI/edit/src/actions/CancelAction.js
@@ -33,10 +33,11 @@ define(
         * @memberof platform/commonUI/edit
         * @implements {Action}
         */
-        function CancelAction($location, urlService, context) {
+        function CancelAction($location, urlService, navigationService, context) {
            this.domainObject = context.domainObject;
            this.$location = $location;
            this.urlService = urlService;
+            this.navigationService = navigationService;
        }

        /**
@@ -48,7 +49,8 @@ define(
        CancelAction.prototype.perform = function () {
            var domainObject = this.domainObject,
                $location = this.$location,
-                urlService = this.urlService;
+                urlService = this.urlService,
+                self = this;

            // Look up the object's "editor.completion" capability;
            // this is introduced by EditableDomainObject which is
@@ -67,10 +69,11 @@ define(
            // Discard the current root view (which will be the editing
            // UI, which will have been pushed atop the Browise UI.)
            function returnToBrowse() {
-                $location.path($location.path(urlService.urlForLocation(
+                return self.navigationService.setNavigation(self.domainObject.getDomainObject());
+                /*$location.path($location.path(urlService.urlForLocation(
                    "browse",
                    domainObject
-                )));
+                )));*/
            }

            return doCancel(getEditorCapability())
--- a/platform/commonUI/edit/src/actions/EditAction.js
+++ b/platform/commonUI/edit/src/actions/EditAction.js
@@ -25,8 +25,8 @@
 * Module defining EditAction. Created by vwoeltje on 11/14/14.
 */
 define(
-    [],
-    function () {
+    ['../objects/EditableDomainObject'],
+    function (EditableDomainObject) {
        "use strict";

        // A no-op action to return in the event that the action cannot
@@ -71,8 +71,10 @@ define(
         * Enter edit mode.
         */
        EditAction.prototype.perform = function () {
-            this.navigationService.setNavigation(this.domainObject);
-            this.$location.path("/edit");
+            if (!this.domainObject.getDomainObject) {
+                this.navigationService.setNavigation(new EditableDomainObject(this.domainObject));
+            }
+            //this.$location.path("/edit");
        };

        /**
@@ -83,10 +85,11 @@ define(
         */
        EditAction.appliesTo = function (context) {
            var domainObject = (context || {}).domainObject,
-                type = domainObject && domainObject.getCapability('type');
+                type = domainObject && domainObject.getCapability('type'),
+                isEditMode = domainObject && domainObject.getDomainObject ? true : false;

            // Only allow creatable types to be edited
-            return type && type.hasFeature('creation');
+            return type && type.hasFeature('creation') && !isEditMode;
        };

        return EditAction;
--- a/platform/commonUI/edit/src/actions/SaveAction.js
+++ b/platform/commonUI/edit/src/actions/SaveAction.js
@@ -23,7 +23,8 @@


 define(
-    function () {
+    ['../../../browse/src/creation/createWizard'],
+    function (CreateWizard) {
        'use strict';

        /**
@@ -34,10 +35,26 @@ define(
         * @implements {Action}
         * @memberof platform/commonUI/edit
         */
-        function SaveAction($location, urlService, context) {
+        function SaveAction($q, $location, $injector, urlService, navigationService, policyService, dialogService, creationService, context) {
            this.domainObject = (context || {}).domainObject;
            this.$location = $location;
+            this.injectObjectService = function(){
+                this.objectService = $injector.get("objectService");
+            }
            this.urlService = urlService;
+            this.navigationService = navigationService;
+            this.policyService = policyService;
+            this.dialogService = dialogService;
+            this.creationService = creationService;
+            this.$q = $q;
+        }
+
+        SaveAction.prototype.getObjectService = function(){
+            // Lazily acquire object service (avoids cyclical dependency)
+            if (!this.objectService) {
+                this.injectObjectService();
+            }
+            return this.objectService;
        }

        /**
@@ -50,23 +67,69 @@ define(
        SaveAction.prototype.perform = function () {
            var domainObject = this.domainObject,
                $location = this.$location,
-                urlService = this.urlService;
+                urlService = this.urlService,
+                self = this;
+
+            function doWizardSave(domainObject, parent) {
+                var context = domainObject.getCapability("context");
+                var wizard = new CreateWizard(domainObject.useCapability('type'), parent, self.policyService);
+
+                // Create and persist the new object, based on user
+                // input.
+                function persistResult(formValue) {
+                    var parent = wizard.getLocation(formValue),
+                        newModel = wizard.createModel(formValue);
+                    return self.creationService.createObject(newModel, parent);
+                }
+
+                function doNothing() {
+                    // Create cancelled, do nothing
+                    return false;
+                }
+
+                /**
+                 * Add the composees of the 'virtual' object to the
+                 * persisted object
+                 * @param object
+                 * @returns {*}
+                 */
+                function composeObject(object){
+                    return object && self.$q.when(object.hasCapability('composition') && domainObject.hasCapability('composition'))
+                    .then(function(){
+                        return domainObject.useCapability('composition')
+                        .then(function(composees){
+                            return self.$q.all(composees.map(function(composee){
+                                return object.getCapability('composition').add(composee);
+                            }));
+                        });
+                    });
+                }
+
+                return self.dialogService.getUserInput(
+                    wizard.getFormStructure(),
+                    wizard.getInitialFormValue()
+                ).then(persistResult, doNothing).then(composeObject);
+            }

            // Invoke any save behavior introduced by the editor capability;
            // this is introduced by EditableDomainObject which is
            // used to insulate underlying objects from changes made
            // during editing.
            function doSave() {
-                return domainObject.getCapability("editor").save();
+                //WARNING: HACK
+                //This is a new 'virtual panel' that has not been persisted
+                // yet.
+                if (domainObject.getModel().type === 'telemetry.panel' && !domainObject.getModel().persisted){
+                    return self.getObjectService().getObjects([domainObject.getModel().location]).then(function(objs){ doWizardSave(domainObject, objs[domainObject.getModel().location])});
+                } else {
+                    return domainObject.getCapability("editor").save();
+                }
            }

            // Discard the current root view (which will be the editing
-            // UI, which will have been pushed atop the Browise UI.)
+            // UI, which will have been pushed atop the Browse UI.)
            function returnToBrowse() {
-                return $location.path(urlService.urlForLocation(
-                    "browse",
-                    domainObject
-                ));
+                return self.navigationService.setNavigation(self.domainObject.getDomainObject());
            }

            return doSave().then(returnToBrowse);
--- a/platform/commonUI/edit/src/objects/EditableDomainObject.js
+++ b/platform/commonUI/edit/src/objects/EditableDomainObject.js
@@ -101,6 +101,10 @@ define(
                            new Factory(capability, editableObject, domainObject, cache) :
                            capability;
                };
+                
+                editableObject.getDomainObject = function() {
+                    return domainObject;
+                }

                return editableObject;
            }
--- a/platform/commonUI/formats/bundle.json
+++ b/platform/commonUI/formats/bundle.json
@@ -0,0 +1,26 @@
+{
+    "name": "Time services bundle",
+    "description": "Defines interfaces and provides default implementations for handling different time systems.",
+    "extensions": {
+        "components": [
+            {
+                "provides": "formatService",
+                "type": "provider",
+                "implementation": "FormatProvider.js",
+                "depends": [ "formats[]" ]
+            }
+        ],
+        "formats": [
+            {
+                "key": "utc",
+                "implementation": "UTCTimeFormat.js"
+            }
+        ],
+        "constants": [
+            {
+                "key": "DEFAULT_TIME_FORMAT",
+                "value": "utc"
+            }
+        ]
+    }
+}
--- a/platform/commonUI/formats/src/FormatProvider.js
+++ b/platform/commonUI/formats/src/FormatProvider.js
@@ -0,0 +1,114 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define([
+
+], function (
+
+) {
+    "use strict";
+
+    /**
+     * 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}
+     */
+
+    /**
+     * 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
+     * @memberof Format#
+     * @param {string} text the text to parse
+     * @returns {number} the parsed numeric value
+     */
+
+    /**
+     * Determine whether or not some text (typically user input) can
+     * be parsed to a numeric value by this format.
+     * @method validate
+     * @memberof Format#
+     * @param {string} text the text to parse
+     * @returns {boolean} true if the text can be parsed
+     */
+
+    /**
+     * Convert a numeric value to a text value for display using
+     * this format.
+     * @method format
+     * @memberof Format#
+     * @param {number} value the numeric value to format
+     * @returns {string} the text representation of the value
+     */
+
+    /**
+     * Provides access to `Format` objects which can be used to
+     * convert values between human-readable text and numeric
+     * representations.
+     * @interface FormatService
+     */
+
+    /**
+     * Look up a format by its symbolic identifier.
+     * @method getFormat
+     * @memberof FormatService#
+     * @param {string} key the identifier for this format
+     * @returns {Format} the format
+     * @throws {Error} errors when the requested format is unrecognized
+     */
+
+    /**
+     * Provides formats from the `formats` extension category.
+     * @constructor
+     * @implements {FormatService}
+     * @memberof platform/commonUI/formats
+     * @param {Array.<function(new : Format)>} format constructors,
+     *        from the `formats` extension category.
+     */
+    function FormatProvider(formats) {
+        var formatMap = {};
+
+        function addToMap(Format) {
+            var key = Format.key;
+            if (key && !formatMap[key]) {
+                formatMap[key] = new Format();
+            }
+        }
+
+        formats.forEach(addToMap);
+        this.formatMap = formatMap;
+    }
+
+    FormatProvider.prototype.getFormat = function (key) {
+        var format = this.formatMap[key];
+        if (!format) {
+            throw new Error("FormatProvider: No format found for " + key);
+        }
+        return format;
+    };
+
+    return FormatProvider;
+
+});
--- a/platform/commonUI/formats/src/UTCTimeFormat.js
+++ b/platform/commonUI/formats/src/UTCTimeFormat.js
@@ -0,0 +1,63 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    'moment'
+], function (
+    moment
+) {
+    "use strict";
+
+    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
+        DATE_FORMATS = [
+            DATE_FORMAT,
+            "YYYY-MM-DD HH:mm",
+            "YYYY-MM-DD"
+        ];
+
+
+    /**
+     * Formatter for UTC timestamps. Interprets numeric values as
+     * milliseconds since the start of 1970.
+     *
+     * @implements {Format}
+     * @constructor
+     * @memberof platform/commonUI/formats
+     */
+    function UTCTimeFormat() {
+    }
+
+    UTCTimeFormat.prototype.format = function (value) {
+        return moment.utc(value).format(DATE_FORMAT);
+    };
+
+    UTCTimeFormat.prototype.parse = function (text) {
+        return moment.utc(text, DATE_FORMATS).valueOf();
+    };
+
+    UTCTimeFormat.prototype.validate = function (text) {
+        return moment.utc(text, DATE_FORMATS).isValid();
+    };
+
+    return UTCTimeFormat;
+});
--- a/platform/commonUI/formats/test/FormatProviderSpec.js
+++ b/platform/commonUI/formats/test/FormatProviderSpec.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../src/FormatProvider'],
+    function (FormatProvider) {
+        'use strict';
+
+        var KEYS = [ 'a', 'b', 'c' ];
+
+        describe("The FormatProvider", function () {
+            var mockFormats,
+                mockLog,
+                mockFormatInstances,
+                provider;
+
+            beforeEach(function () {
+                mockFormatInstances = KEYS.map(function (k) {
+                    return jasmine.createSpyObj(
+                        'format-' + k,
+                        [ 'parse', 'validate', 'format' ]
+                    );
+                });
+                // Return constructors
+                mockFormats = KEYS.map(function (k, i) {
+                    function MockFormat() { return mockFormatInstances[i]; }
+                    MockFormat.key = k;
+                    return MockFormat;
+                });
+                provider = new FormatProvider(mockFormats);
+            });
+
+            it("looks up formats by key", function () {
+                KEYS.forEach(function (k, i) {
+                    expect(provider.getFormat(k))
+                        .toEqual(mockFormatInstances[i]);
+                });
+            });
+
+            it("throws an error about unknown formats", function () {
+                expect(function () {
+                    provider.getFormat('some-unknown-format');
+                }).toThrow();
+            });
+
+        });
+    }
+);
--- a/platform/commonUI/formats/test/UTCTimeFormatSpec.js
+++ b/platform/commonUI/formats/test/UTCTimeFormatSpec.js
@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../src/UTCTimeFormat', 'moment'],
+    function (UTCTimeFormat, moment) {
+        'use strict';
+
+        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("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());
+            });
+        });
+    }
+);
--- a/platform/commonUI/formats/test/suite.json
+++ b/platform/commonUI/formats/test/suite.json
@@ -0,0 +1,4 @@
+[
+    "FormatProvider",
+    "UTCTimeFormat"
+]
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -18,7 +18,7 @@
        "runs": [
            {
                "implementation": "StyleSheetLoader.js",
-                "depends": [ "stylesheets[]", "$document" ]
+                "depends": [ "stylesheets[]", "$document", "THEME" ]
            }
        ],
        "stylesheets": [
@@ -44,6 +44,14 @@
                "key": "indicator",
                "templateUrl": "templates/indicator.html"
            },
+            {
+                "key": "message-banner",
+                "templateUrl": "templates/message-banner.html"
+            },
+            {
+                "key": "progress-bar",
+                "templateUrl": "templates/progress-bar.html"
+            },
            {
              "key": "time-controller",
              "templateUrl": "templates/controls/time-controller.html"
@@ -53,13 +61,18 @@
            {
                "key": "TimeRangeController",
                "implementation": "controllers/TimeRangeController.js",
-                "depends": [ "$scope", "now" ]
+                "depends": [ "$scope", "formatService", "DEFAULT_TIME_FORMAT", "now" ]
            },
            {
                "key": "DateTimePickerController",
                "implementation": "controllers/DateTimePickerController.js",
                "depends": [ "$scope", "now" ]
            },
+            {
+                "key": "DateTimeFieldController",
+                "implementation": "controllers/DateTimeFieldController.js",
+                "depends": [ "$scope", "formatService", "DEFAULT_TIME_FORMAT" ]
+            },
            {
                "key": "TreeNodeController",
                "implementation": "controllers/TreeNodeController.js",
@@ -112,6 +125,11 @@
                "key": "ObjectInspectorController",
                "implementation": "controllers/ObjectInspectorController.js",
                "depends": [ "$scope", "objectService" ]
+            },
+            {
+                "key": "BannerController",
+                "implementation": "controllers/BannerController.js",
+                "depends": ["$scope", "notificationService", "dialogService"]
            }
        ],
        "directives": [
@@ -176,6 +194,11 @@
            {
                "key": "MCT_SCROLL_Y_ATTRIBUTE",
                "value": "mctScrollY"
+            },
+            {
+                "key": "THEME",
+                "value": "unspecified",
+                "priority": "fallback"
            }
        ],
        "containers": [
@@ -251,6 +274,10 @@
            {
                "key": "datetime-picker",
                "templateUrl": "templates/controls/datetime-picker.html"
+            },
+            {
+                "key": "datetime-field",
+                "templateUrl": "templates/controls/datetime-field.html"
            }
        ],
        "licenses": [
--- a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
@@ -1,19 +1,27 @@
 {
 	"metadata": {
 		"name": "WTD Symbols",
-		"lastOpened": 1446490786311,
-		"created": 1446489891263
+		"lastOpened": 1446670352108,
+		"created": 1446670349721
 	},
 	"iconSets": [
 		{
 			"selection": [
 				{
-					"order": 113,
+					"order": 116,
+					"id": 93,
+					"prevSize": 32,
+					"code": 58902,
+					"name": "icon-eye-open-no-gleam",
+					"tempChar": ""
+				},
+				{
+					"order": 115,
 					"id": 92,
 					"prevSize": 32,
 					"code": 58901,
-					"name": "icon-crosshair",
-					"tempChar": ""
+					"name": "icon-eye-open",
+					"tempChar": ""
 				},
 				{
 					"order": 110,
@@ -21,7 +29,7 @@
 					"prevSize": 32,
 					"code": 58899,
 					"name": "icon-collapse-pane-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 111,
@@ -29,7 +37,7 @@
 					"prevSize": 32,
 					"code": 58900,
 					"name": "icon-collapse-pane-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 109,
@@ -37,7 +45,7 @@
 					"prevSize": 32,
 					"code": 58898,
 					"name": "icon-save",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 108,
@@ -45,7 +53,7 @@
 					"prevSize": 32,
 					"code": 58897,
 					"name": "icon-dataset",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 90,
@@ -53,7 +61,7 @@
 					"prevSize": 32,
 					"code": 58896,
 					"name": "icon-bell",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 91,
@@ -61,7 +69,7 @@
 					"prevSize": 32,
 					"code": 58889,
 					"name": "icon-hourglass",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 92,
@@ -74,7 +82,7 @@
 						58890
 					],
 					"name": "icon-info-v15",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 93,
@@ -82,7 +90,7 @@
 					"prevSize": 32,
 					"code": 58887,
 					"name": "icon-x-in-circle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 94,
@@ -90,7 +98,7 @@
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 95,
@@ -98,7 +106,7 @@
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 96,
@@ -106,7 +114,7 @@
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 97,
@@ -114,7 +122,7 @@
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 98,
@@ -122,7 +130,7 @@
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 99,
@@ -130,7 +138,7 @@
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 100,
@@ -138,7 +146,7 @@
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 101,
@@ -146,7 +154,7 @@
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 102,
@@ -154,7 +162,7 @@
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 103,
@@ -162,7 +170,7 @@
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 104,
@@ -170,7 +178,7 @@
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 105,
@@ -178,7 +186,7 @@
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 106,
@@ -186,7 +194,7 @@
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -194,7 +202,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -202,7 +210,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -210,7 +218,7 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 87,
@@ -218,7 +226,7 @@
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -226,7 +234,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -234,7 +242,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -242,7 +250,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -250,7 +258,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -258,7 +266,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -266,7 +274,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -274,7 +282,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -282,7 +290,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -290,7 +298,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -298,7 +306,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -306,7 +314,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -314,7 +322,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -322,7 +330,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -330,7 +338,7 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
@@ -338,7 +346,7 @@
 					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -346,7 +354,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -354,7 +362,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -362,7 +370,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -370,7 +378,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -378,7 +386,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -386,7 +394,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -394,7 +402,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -402,7 +410,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -410,7 +418,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -418,7 +426,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -426,7 +434,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -434,7 +442,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -442,7 +450,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -450,7 +458,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -458,7 +466,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -466,7 +474,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -474,7 +482,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -482,7 +490,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -490,7 +498,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -498,7 +506,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -506,7 +514,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -514,7 +522,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -522,7 +530,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -530,7 +538,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -538,7 +546,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -546,7 +554,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -554,7 +562,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -562,7 +570,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -570,7 +578,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -578,7 +586,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -586,7 +594,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -594,7 +602,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -602,7 +610,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -610,7 +618,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -618,7 +626,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -626,7 +634,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -634,7 +642,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -642,7 +650,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -650,7 +658,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -658,7 +666,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -666,7 +674,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -674,7 +682,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -682,7 +690,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -690,7 +698,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -698,7 +706,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -706,7 +714,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -722,13 +730,43 @@
 			"prevSize": 32,
 			"icons": [
 				{
-					"id": 92,
+					"id": 93,
 					"paths": [
-						"M514 2c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM860.2 450h-282.2v-282.2c69.6 12.8 133.8 46.2 185 97.4 51 51 84.4 115.2 97.2 184.8zM450 167.8v282.2h-282.2c12.8-69.6 46.2-133.8 97.4-185 51-51 115.2-84.4 184.8-97.2zM167.8 578h282.2v282.2c-69.6-12.8-133.8-46.2-185-97.4-51-51-84.4-115.2-97.2-184.8zM578 860.2v-282.2h282.2c-12.8 69.6-46.2 133.8-97.4 185-51 51-115.2 84.4-184.8 97.2z"
+						"M512 64c-261 0-480.6 195.4-512 448 31.4 252.6 251 448 512 448s480.6-195.4 512-448c-31.4-252.6-251-448-512-448zM768.2 734.6c-71.4 62.8-162.8 97.4-257.6 97.4s-186.2-34.6-257.6-97.4c-66.6-58.6-110.6-137.2-125-222.6 0 0 0-0.2 0-0.2 76.8-154 220.8-257.6 384-257.6s307.2 103.8 384 257.6c0 0 0 0.2 0 0.2-14.4 85.4-61.2 164-127.8 222.6z",
+						"M512 288c-123.8 0-224 100.2-224 224s100.2 224 224 224 224-100.2 224-224-100.2-224-224-224zM576 544c-53 0-96-43-96-96s43-96 96-96 96 43 96 96c0 53-43 96-96 96z"
 					],
 					"attrs": [
 						{
-							"fill": "rgb(0, 0, 0)"
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-eye-open-no-gleam"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							1,
+							1
+						]
+					}
+				},
+				{
+					"id": 92,
+					"paths": [
+						"M512 64c-261 0-480.6 195.4-512 448 31.4 252.6 251 448 512 448s480.6-195.4 512-448c-31.4-252.6-251-448-512-448zM768.2 734.6c-71.4 62.8-162.8 97.4-257.6 97.4s-186.2-34.6-257.6-97.4c-66.6-58.6-110.6-137.2-125-222.6 0 0 0-0.2 0-0.2 76.8-154 220.8-257.6 384-257.6s307.2 103.8 384 257.6c0 0 0 0.2 0 0.2-14.4 85.4-61.2 164-127.8 222.6z",
+						"M512 288c-123.8 0-224 100.2-224 224s100.2 224 224 224 224-100.2 224-224-100.2-224-224-224z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
 						}
 					],
 					"isMulticolor": false,
@@ -738,7 +776,8 @@
 					],
 					"colorPermutations": {
 						"125525525516161751": [
-							0
+							1,
+							1
 						]
 					}
 				},
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
@@ -92,6 +92,7 @@
 <glyph unicode="&#xe612;" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
 <glyph unicode="&#xe613;" glyph-name="icon-collapse-pane-left" d="M256 960h-256v-1024h256c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM512 640l512-320v640z" />
 <glyph unicode="&#xe614;" glyph-name="icon-collapse-pane-right" d="M768 960h256v-1024h-256c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192zM512 640l-512-320v640z" />
-<glyph unicode="&#xe615;" glyph-name="icon-crosshair" d="M514 958c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM860.2 510h-282.2v282.2c69.6-12.8 133.8-46.2 185-97.4 51-51 84.4-115.2 97.2-184.8zM450 792.2v-282.2h-282.2c12.8 69.6 46.2 133.8 97.4 185 51 51 115.2 84.4 184.8 97.2zM167.8 382h282.2v-282.2c-69.6 12.8-133.8 46.2-185 97.4-51 51-84.4 115.2-97.2 184.8zM578 99.8v282.2h282.2c-12.8-69.6-46.2-133.8-97.4-185-51-51-115.2-84.4-184.8-97.2z" />
+<glyph unicode="&#xe615;" glyph-name="icon-eye-open" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224z" />
+<glyph unicode="&#xe616;" glyph-name="icon-eye-open-no-gleam" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224zM576 416c-53 0-96 43-96 96s43 96 96 96 96-43 96-96c0-53-43-96-96-96z" />
 <glyph unicode="&#xe642;" 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" />
 </font></defs></svg>
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@@ -0,0 +1,147 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/********************************************* COLUMN LAYOUTS STYLES */
+@mixin cols($totalCols, $span) {
+    $cw: 100% / $totalCols;
+    min-width: (500px / $totalCols) * $span;
+    @if ($totalCols != $span) {
+        width: ($cw * $span) - $ueColMargin;
+    } @else {
+        width: $cw;
+    }
+}
+
+.cols {
+    @include clearfix;
+    .col {
+        @include box-sizing(border-box);
+        @include clearfix;
+        float: left;
+        margin-left: $ueColMargin;
+        padding-left: $interiorMargin;
+        position: relative;
+        &:first-child {
+            margin-left: 0;
+            padding-left: 0;
+        }
+    }
+    &.cols-2 {
+        $nc: 2;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+    }
+    &.cols-2-ff {
+        // 2 columns, first column is fixed, second is fluid
+        .col-100px {
+            width: 100px;
+        }
+    }
+
+    &.cols-6 {
+        $nc: 6;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+    }
+    &.cols-16 {
+        $nc: 16;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+        .col-2 {
+            @include cols($nc, 2);
+        }
+        .col-7 {
+            @include cols($nc, 7);
+        }
+    }
+    &.cols-32 {
+        $nc: 32;
+        .col-2 {
+            @include cols($nc, 2);
+        }
+        .col-15 {
+            @include cols($nc, 15);
+        }
+    }
+    .l-row {
+        @include clearfix;
+        padding: $interiorMargin 0;
+    }
+}
+
+/********************************************* FLEX STYLES */
+.l-flex-row,
+.l-flex-col {
+    @include display-flex;
+    @include flex-wrap(nowrap);
+    .flex-elem {
+        min-height: 0; // Needed to allow element to shrink within parent
+        position: relative;
+        &:not(.grows) {
+            @include flex(0 0 auto);
+            &.flex-can-shrink {
+                @include flex(0 1 auto);
+            }
+        }
+        &.grows {
+            @include flex(1 1 auto);
+        }
+    }
+    .flex-container {
+        // Apply to wrapping elements, mct-includes, etc.
+        @include display-flex;
+        @include flex-wrap(nowrap);
+        @include flex(1 1 auto);
+        min-height:0;
+    }
+}
+
+.l-flex-row {
+    @include flex-direction(row);
+    &.flex-elem { @include flex(1 1 auto); }
+    .flex-elem {
+        height: inherit;
+        line-height: inherit;
+        min-width: 0;
+    }
+    .flex-container { @include flex-direction(row); }
+}
+
+.l-flex-col {
+    @include flex-direction(column);
+    .flex-elem {
+        min-height: 0;
+        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
+    }
+    .flex-container { @include flex-direction(column); }
+}
+
+.flex-fixed {
+    @include flex(0 0 auto);
+}
+
+.flex-justify-end {
+    @include justify-content(flex-end);
+}
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -35,24 +35,32 @@ $ltGamma: 20%;
 $btnFontSizeToH: 0.45;

 /************************** LAYOUT */
-$ueTopBarH: 24px; // Change when breadcrumb is enabled
+$ueTopBarH: 24px;
 $ueTopBarEditH: 30px;
 $ueTopBarBtnH: 35px;
 $ueFooterH: 25px;
 $ueColMargin: 1.5%;
 $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
-$ueBrowseLeftPaneTreeW: 25%;
-$ueBrowseRightPaneInspectW: 20%;
-$ueCollapsedPaneEdgeM: 20px;
+$ueCollapsedPaneEdgeM: 22px;
 $uePaneMiniTabH: $ueTopBarH;
 $uePaneMiniTabW: 9px;
+$uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 $ueTimeControlH: (33px, 20px, 20px);
+// Panes
+$ueBrowseLeftPaneTreeMinW: 150px;
+$ueBrowseLeftPaneTreeMaxW: 35%;
+$ueBrowseLeftPaneTreeW: 25%;
+$ueBrowseRightPaneInspectMinW: 200px;
+$ueBrowseRightPaneInspectMaxW: 35%;
+$ueBrowseRightPaneInspectW: 20%;
+$ueDesktopMinW: 600px;
+
 // Overlay
-$ovrTopBarH: 60px;
-$ovrFooterH: 30px;
+$ovrTopBarH: 45px;
+$ovrFooterH: 24px;
 $overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
--- a/platform/commonUI/general/res/sass/_effects.scss
+++ b/platform/commonUI/general/res/sass/_effects.scss
@@ -66,6 +66,19 @@ a.disabled {
 	@include animation-timing-function(ease-in-out);
 }

+@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s) {
+	@include keyframes(pulseBorder) {
+		0%   { border-color: transparent; }
+		100% { border-color: $c; }
+	}
+	@include animation-name(pulseBorder);
+	@include animation-duration($dur);
+	@include animation-direction(alternate);
+	@include animation-iteration-count($iteration);
+	@include animation-timing-function(ease);
+    @include animation-delay($delay);
+}
+
 .pulse {
 	@include pulse(750ms);
 }
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -121,7 +121,12 @@ mct-container {
 	text-align: center;
 }

-.scrolling {
+.ellipsis {
+    @include ellipsize();
+}
+
+.scrolling,
+.scroll {
 	overflow: auto;
 }

@@ -142,6 +147,16 @@ mct-container {
 	display: none !important;
 }

+.off {
+    visibility: hidden;
+    opacity: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    margin: 0 !important;
+}
+
 .sep {
 	color: rgba(#fff, 0.2);
 }
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@@ -43,6 +43,11 @@
            vertical-align: bottom;
        }
    }
+    
+    ul {
+        @include box-sizing(border-box);
+        padding-right: $interiorMargin;
+    }

    ul li,
    em {
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -21,6 +21,7 @@
 *****************************************************************************/
@import "effects";
@import "global";
+@import "archetypes";
@import "about";
@import "text";
@import "icons";
@@ -29,7 +30,6 @@
@import "helpers/bubbles";
@import "helpers/splitter";
@import "helpers/wait-spinner";
-@import "messages";
@import "inspector";

 /********************************* CONTROLS */
@@ -39,6 +39,7 @@
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
+@import "controls/messages";
@import "controls/time-controller";
@import "mobile/controls/menus";

@@ -62,7 +63,6 @@
@import "mobile/tree";
@import "user-environ/frame";
@import "user-environ/top-bar";
-@import "user-environ/bottom-bar";
@import "user-environ/tool-bar";

 /********************************* VIEWS */
--- a/platform/commonUI/general/res/sass/_messages.scss
+++ b/platform/commonUI/general/res/sass/_messages.scss
@@ -1,12 +0,0 @@
-/* Styles for messages */
-
-.message {
-	&.block {
-		@include border-radius($basicCr);
-		padding: $interiorMarginLg;
-	}
-	&.error {
-		background-color: rgba($colorAlert,0.3);
-		color: lighten($colorAlert, 20%);
-	}
-}
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -64,6 +64,12 @@
    }
 }

+@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
+    @include transition-property(height, width, top, right, bottom, left, opacity);
+    @include transition-duration($t);
+    @include transition-timing-function($tf);
+}
+
@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
    @include transition-property(height, bottom, top);
    @include transition-duration($dur);
@@ -99,7 +105,6 @@
 }

@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-    //$size: $size*2;
    width: 0;
    height: 0;
    $slopedB: $size/$ratio solid transparent;
@@ -134,6 +139,24 @@
    background-size: $d $d;
 }

+@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
+    @include background-image(linear-gradient(-90deg,
+        rgba($c, $a) 0%, rgba($c, $a) 50%,
+        transparent 50%, transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
+}
+
+@mixin bgVertFuzzyStripes($c: yellow, $a: 0.1, $d: 40px) {
+    @include background-image(linear-gradient(-90deg,
+        rgba($c, $a) 0%, transparent 50%,
+        transparent 50%, rgba($c, $a) 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
+}
+
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
    $deg: 90deg;
    @if ($repeatDir != 'x') {
@@ -409,4 +432,4 @@
@mixin s-stale($a: 0.5) {
    color: rgba($colorTelemFresh, $a) !important;
    font-style: italic;
-}
+}
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -35,6 +35,7 @@ $pad: $interiorMargin * $baseRatio;
    @include box-sizing(border-box);
    padding: 0 $pad;
    font-size: 0.7rem;
+    vertical-align: top;

    .icon {
        font-size: 0.8rem;
@@ -70,6 +71,18 @@ $pad: $interiorMargin * $baseRatio;
    &.pause-play {

    }
+    &.t-save:before {
+        content:'\e612';
+        font-family: symbolsfont;
+        margin-right: $interiorMarginSm;
+    }
+    &.t-cancel {
+        .title-label { display: none; }
+        &:before {
+            content:'\78';
+            font-family: symbolsfont;
+        }
+    }

    &.pause-play {
        .icon:before {
@@ -225,6 +238,11 @@ $pad: $interiorMargin * $baseRatio;
        overflow: hidden;
        word-break: break-all;

+        &.collapsed {
+            $d: $uePaneMiniTabCollapsedW;
+            width: $d; font-size: $d;
+        }
+
        &:before,
        &:after {
            position: absolute;
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -19,460 +19,490 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/*.control {
-	// UNUSED?
-	&.view-control {
-		.icon {
-			display: inline-block;
-			margin: -1px 5px 1px 2px;
-			vertical-align: middle;
-			&.triangle-down {
-				margin: 2px 2px -2px 0px;
-			}
-		}
-
-		.label {
-			display: inline-block;
-			font-size: 11px;
-			vertical-align: middle;
-		}
-
-		.toggle {
-			@include border-radius(3px);
-			display: inline-block;
-			padding: 1px 6px 4px 4px;
-			&:hover {
-				background: rgba(white, 0.1);
-			}
-		}
-	}
-}*/

 .accordion {
-	$accordionHeadH: 18px;
-	margin-top: $interiorMargin;
-	&:first-child {
-		margin-top: 0;
-	}
-	.accordion-head {
-		$op: 0.2;
-		@include border-radius($basicCr * 0.75);
-		@include box-sizing("border-box");
-		background: rgba($colorBodyFg, $op);
-		cursor: pointer;
-		font-size: 0.75em;
-		line-height: $accordionHeadH;
-		margin-bottom: $interiorMargin;
-		padding: 0 $interiorMargin;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: auto;
-		left: 0;
-		width: auto;
-		height: $accordionHeadH;
-		text-transform: uppercase;
-		&:hover {
-			background: rgba($colorBodyFg, $op * 2);
-		}
-		&:after {
-			content: "^";
-			display: block;
-			font-family: 'symbolsfont';
-			font-size: 0.9em;
-			position: absolute;
-			right: $interiorMargin;
-			text-transform: none;
-			top: 0;
-		}
-		&:not(.expanded):after {
-			content: "v";
-		}
-	}
-	.accordion-contents {
-		position: absolute;
-		top: $accordionHeadH + $interiorMargin;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		overflow-y: auto;
-		overflow-x: hidden;
-	}
+    $accordionHeadH: 18px;
+    margin-top: $interiorMargin;
+    &:first-child {
+        margin-top: 0;
+    }
+    .accordion-head {
+        $op: 0.2;
+        @include border-radius($basicCr * 0.75);
+        @include box-sizing("border-box");
+        background: rgba($colorBodyFg, $op);
+        cursor: pointer;
+        font-size: 0.75em;
+        line-height: $accordionHeadH;
+        margin-bottom: $interiorMargin;
+        padding: 0 $interiorMargin;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: auto;
+        left: 0;
+        width: auto;
+        height: $accordionHeadH;
+        text-transform: uppercase;
+        &:hover {
+            background: rgba($colorBodyFg, $op * 2);
+        }
+        &:after {
+            content: "^";
+            display: block;
+            font-family: 'symbolsfont';
+            font-size: 0.9em;
+            position: absolute;
+            right: $interiorMargin;
+            text-transform: none;
+            top: 0;
+        }
+        &:not(.expanded):after {
+            content: "v";
+        }
+    }
+    .accordion-contents {
+        position: absolute;
+        top: $accordionHeadH + $interiorMargin;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 }

 .l-composite-control {
-	vertical-align: middle;
-	&.l-checkbox {
-		.composite-control-label {
-			line-height: 18px;
-		}
-	}
+    vertical-align: middle;
+    &.l-checkbox {
+        .composite-control-label {
+            line-height: 18px;
+        }
+    }
 }

 .l-control-group {
-	// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
-	//	@include test();
-	@include box-sizing(border-box);
-	border-left: 1px solid $colorInteriorBorder;
-	display: inline-block;
-	padding: 0 $interiorMargin;
-	position: relative;
-	&:first-child {
-		border-left: none;
-		padding-left: 0;
-	}
+    // Buttons that have a conceptual grouping - internal space between, and a divider between groups.
+    //    @include test();
+    @include box-sizing(border-box);
+    border-left: 1px solid $colorInteriorBorder;
+    display: inline-block;
+    padding: 0 $interiorMargin;
+    position: relative;
+    &:first-child {
+        border-left: none;
+        padding-left: 0;
+    }
 }

 .l-local-controls {
-	// Control shown when hovering over an object, like plots and imagery
-	// Default position is upper right
-	$p: $interiorMargin;
-	position: absolute;
-	top: $p;
-	right: $p;
-	z-index: 5;
+    // Control shown when hovering over an object, like plots and imagery
+    // Default position is upper right
+    $p: $interiorMargin;
+    position: absolute;
+    top: $p;
+    right: $p;
+    z-index: 5;
 }

 .s-local-controls {
-	font-size: 0.7rem;
+    font-size: 0.7rem;
 }

 label.checkbox.custom {
-	$bg: pullForward($colorBodyBg, 10%);
-	$d: $formRowCtrlsH;
-	cursor: pointer;
-	display: inline-block;
-	line-height: $d;
-	margin-right: $interiorMargin * 4;
-	padding-left: $d + $interiorMargin;
-	position: relative;
-	vertical-align: middle; // was top
-	em {
-		color: $colorBodyFg;
-		display: inline-block;
-		height: $d;
-		min-width: $d;
-		&:before {
-			@include border-radius($basicCr * .75);
-			background: $bg;
-			//border-bottom: 1px solid lighten($bg, 10%);
-			@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
-			box-sizing: border-box;
-			content: " ";
-			font-family: 'symbolsfont';
-			font-size: 0.8em;
-			display: inline-block;
-			margin-right: $interiorMargin;
-			height: $d;
-			width: $d;
-			left: 0;
-			top: 0;
-			position: absolute;
-			text-align: center;
-		}
-	}
-	&.no-text {
-		overflow: hidden;
-		margin-right: 0;
-		padding-left: 0;
-		height: $d;
-		width: $d;
-		em {
-			overflow: hidden;
-		}
-	}
-	input {
-		display: none;
-		&:checked ~ em:before {
-			background: $colorCheck;
-			color: lighten($colorCheck, 50%);
-			content: "2";
-		}
-	}
+    $bg: pullForward($colorBodyBg, 10%);
+    $d: $formRowCtrlsH;
+    cursor: pointer;
+    display: inline-block;
+    line-height: $d;
+    margin-right: $interiorMargin * 4;
+    padding-left: $d + $interiorMargin;
+    position: relative;
+    vertical-align: middle; // was top
+    em {
+        color: $colorBodyFg;
+        display: inline-block;
+        height: $d;
+        min-width: $d;
+        &:before {
+            @include border-radius($basicCr * .75);
+            background: $bg;
+            @include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
+            box-sizing: border-box;
+            content: " ";
+            font-family: 'symbolsfont';
+            font-size: 0.8em;
+            display: inline-block;
+            margin-right: $interiorMargin;
+            height: $d;
+            width: $d;
+            left: 0;
+            top: 0;
+            position: absolute;
+            text-align: center;
+        }
+    }
+    &.no-text {
+        overflow: hidden;
+        margin-right: 0;
+        padding-left: 0;
+        height: $d;
+        width: $d;
+        em {
+            overflow: hidden;
+        }
+    }
+    input {
+        display: none;
+        &:checked ~ em:before {
+            background: $colorCheck;
+            color: lighten($colorCheck, 50%);
+            content: "2";
+        }
+    }
 }

 .input-labeled {
-	margin-left: $interiorMargin;
-	label {
-		display: inline-block;
-		margin-right: $interiorMarginSm;
-	}
-	&.inline {
-		display: inline-block;
-	}
-	&:first-child {
-		margin-left: 0;
-	}
+    margin-left: $interiorMargin;
+    label {
+        display: inline-block;
+        margin-right: $interiorMarginSm;
+    }
+    &.inline {
+        display: inline-block;
+    }
+    &:first-child {
+        margin-left: 0;
+    }
 }

 .s-menu-btn label.checkbox.custom {
-	margin-left: 5px;
+    margin-left: 5px;
 }

 .item .checkbox {
-	&.checked label {
-		@include box-shadow(none);
-		border-bottom: none;
-	}
+    &.checked label {
+        @include box-shadow(none);
+        border-bottom: none;
+    }
 }

 .context-available {
-	$c: $colorKey;
-	color: $c;
-	&:hover {
-		color: lighten($c, 10%);
-	}
+    $c: $colorKey;
+    color: $c;
+    &:hover {
+        color: lighten($c, 10%);
+    }
 }

 .view-switcher {
-	@include trans-prop-nice-fade($controlFadeMs);
+    @include trans-prop-nice-fade($controlFadeMs);
 }

 /******************************************************** OBJECT-HEADER */
 .object-header {
-	//@include test();
-	font-size: 1em;
+    font-size: 1em;

-	//> .title-label,
-	//> .type-icon,
-	//> .context-available {
-	//	//@include tmpBorder(#6666ff);
-	//	//vertical-align: middle;
-	//}
+    > .type-icon {
+        color: $colorObjHdrIc;
+        font-size: 120%;
+        float: left;
+        margin-right: $interiorMargin;
+    }

-	> .type-icon {
-		color: $colorObjHdrIc;
-		font-size: 120%;
-		float: left;
-		margin-right: $interiorMargin;
-	}
+    .l-elem-wrapper {
+        mct-representation {
+            // Holds the context-available item
+            // Must have min-width to make flex work properly
+            // in Safari
+            min-width: 0.7em;
+        }
+    }

-	.l-elem-wrapper {
-		//@include test(#66f, 0.2);
-        @include justify-content(flex-start);
-		mct-representation {
-			// Holds the context-available item
-			// Must have min-width to make flex work properly
-			// in Safari
-			min-width: 0.7em;
-		}
-	}
+    .action {
+        margin-right: $interiorMargin;
+    }

-	.action {
-		margin-right: $interiorMargin;
-	}
+    .title-label {
+        color: $colorObjHdrTxt;
+        @include ellipsize();
+        @include webkitProp(flex, '0 1 auto');
+        padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+    }

-	.title-label {
-		//@include test(green, 0.9);
-		color: $colorObjHdrTxt;
-		@include ellipsize();
-		//color: pushBack($colorBodyFg, 40%);
-		@include webkitProp(flex, '0 1 auto');
-		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
-		//position: relative;
-	}
+    .context-available {
+        font-size: 0.7em;
+        @include webkitProp(flex, '0 0 1');
+    }

-	.context-available {
-		font-size: 0.7em;
-		@include webkitProp(flex, '0 0 1');
-		//margin-right: $interiorMargin;
-	}
+    @include desktop {
+        .context-available {
+            @include trans-prop-nice(opacity, 0.25s);
+            opacity: 0;
+        }
+        &:hover {
+            .context-available {
+                opacity: 1;
+            }
+        }
+    }
+}

-	@include desktop {
-		.context-available {
-			@include trans-prop-nice(opacity, 0.25s);
-			opacity: 0;
-		}
-		&:hover {
-			.context-available {
-				opacity: 1;
-			}
-		}
-	}
+/******************************************************** PROGRESS BAR */
+@include keyframes(progress) {
+    100% { background-position: $progressBarStripeW center; }
+}
+
+@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) {
+    @include background-image(linear-gradient(-90deg,
+        rgba($c, $a) 0%, transparent 50%,
+        transparent 50%, rgba($c, $a) 100%
+    ));
+    background-position: 0 center;
+    background-repeat: repeat-x;
+    background-size: $d 40%;
+}
+
+.l-progress-bar {
+    // Assume will be determinate by default
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+
+    .progress-amt-holder {
+        @include absPosDefault(1px);
+    }
+    .progress-amt,
+    .progress-amt:before,
+    .progress-amt:after {
+        @include absPosDefault();
+        display: block;
+        content: '';
+    }
+
+    .progress-amt {
+        right: auto; // Allow inline width to control }
+    }
+
+    &.indeterminate {
+        .progress-amt {
+            width: 100% !important;
+        }
+    }
+}
+
+.s-progress-bar {
+    @include border-radius($basicCr);
+    @include boxIncised(0.3, 4px);
+    background: $colorProgressBarOuter;
+    .progress-amt {
+        @include border-radius($basicCr);
+        @include boxShdw();
+        @include border-radius($basicCr - 1);
+        @include trans-prop-nice(width);
+        &:before {
+            background-color: $colorProgressBarAmt;
+        }
+        &:after {
+            // Sheen
+            @include background-image(linear-gradient(
+                    transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
+            ));
+        }
+    }
+
+    &:not(.indeterminate) {
+        .progress-amt:before {
+            // More subtle anim for determinate progress
+            @include animation(progress .4s linear infinite);
+            @include bgProgressAnim(#fff, 0.1, $progressBarStripeW);
+        }
+    }
+
+    &.indeterminate .progress-amt {
+        &:before {
+            // More visible std diag stripe anim for indeterminate progress
+            @include animation(progress .6s linear infinite);
+            @include bgDiagonalStripes(#fff, 0.2, $progressBarStripeW);
+        }
+        &:after { display: none; }
+    }
 }

 /******************************************************** SLIDERS */

 .slider {
-	$knobH: 100%; //14px;
-	.slot {
-		//		@include border-radius($basicCr * .75);
-		//@include sliderTrack();
-		width: auto;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-	.knob {
-		@include trans-prop-nice-fade(.25s);
-		background-color: $sliderColorKnob;
-		&:hover {
-			background-color: $sliderColorKnobHov;
-		}
-		position: absolute;
-		height: $knobH;
-		width: $sliderKnobW;
-		top: 0;
-		auto: 0;
-		bottom: auto;
-		left: auto;
-	}
-	.knob-l {
-		@include border-left-radius($sliderKnobW);
-		cursor: w-resize;
-	}
-	.knob-r {
-		@include border-right-radius($sliderKnobW);
-		cursor: e-resize;
-	}
-	.range {
-		@include trans-prop-nice-fade(.25s);
-		background-color: $sliderColorRange;
-		cursor: ew-resize;
-		position: absolute;
-		top: 0; //$tbOffset;
-		right: auto;
-		bottom: 0;
-		left: auto;
-		height: auto;
-		width: auto;
-		&:hover {
-			background-color: $sliderColorRangeHov;
-		}
-	}
+    $knobH: 100%; //14px;
+    .slot {
+        width: auto;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+    .knob {
+        @include trans-prop-nice-fade(.25s);
+        background-color: $sliderColorKnob;
+        &:hover {
+            background-color: $sliderColorKnobHov;
+        }
+        position: absolute;
+        height: $knobH;
+        width: $sliderKnobW;
+        top: 0;
+        auto: 0;
+        bottom: auto;
+        left: auto;
+    }
+    .knob-l {
+        @include border-left-radius($sliderKnobW);
+        cursor: w-resize;
+    }
+    .knob-r {
+        @include border-right-radius($sliderKnobW);
+        cursor: e-resize;
+    }
+    .range {
+        @include trans-prop-nice-fade(.25s);
+        background-color: $sliderColorRange;
+        cursor: ew-resize;
+        position: absolute;
+        top: 0; //$tbOffset;
+        right: auto;
+        bottom: 0;
+        left: auto;
+        height: auto;
+        width: auto;
+        &:hover {
+            background-color: $sliderColorRangeHov;
+        }
+    }
 }

 /******************************************************** DATETIME PICKER */
 .l-datetime-picker {
-	$r1H: 15px;
-	@include user-select(none);
-	font-size: 0.8rem;
-	padding: $interiorMarginLg !important;
-	width: 230px;
-	.l-month-year-pager {
-		$pagerW: 20px;
-		//@include test();
-		//font-size: 0.8rem;
-		height: $r1H;
-		margin-bottom: $interiorMargin;
-		position: relative;
-		.pager,
-		.val {
-			//@include test(red);
-			@extend .abs;
-		}
-		.pager {
-			width: $pagerW;
-			@extend .ui-symbol;
-			&.prev {
-				right: auto;
-				&:before {
-					content: "\3c";
-				}
-			}
-			&.next {
-				left: auto;
-				text-align: right;
-				&:before {
-					content: "\3e";
-				}
-			}
-		}
-		.val {
-			text-align: center;
-			left: $pagerW + $interiorMargin;
-			right: $pagerW + $interiorMargin;
-		}
-	}
-	.l-calendar,
-	.l-time-selects {
-		border-top: 1px solid $colorInteriorBorder
-	}
-	.l-time-selects {
-		line-height: $formInputH;
-	}
+    $r1H: 15px;
+    @include user-select(none);
+    font-size: 0.8rem;
+    padding: $interiorMarginLg !important;
+    width: 230px;
+    .l-month-year-pager {
+        $pagerW: 20px;
+        height: $r1H;
+        margin-bottom: $interiorMargin;
+        position: relative;
+        .pager,
+        .val {
+            @extend .abs;
+        }
+        .pager {
+            width: $pagerW;
+            @extend .ui-symbol;
+            &.prev {
+                right: auto;
+                &:before {
+                    content: "\3c";
+                }
+            }
+            &.next {
+                left: auto;
+                text-align: right;
+                &:before {
+                    content: "\3e";
+                }
+            }
+        }
+        .val {
+            text-align: center;
+            left: $pagerW + $interiorMargin;
+            right: $pagerW + $interiorMargin;
+        }
+    }
+    .l-calendar,
+    .l-time-selects {
+        border-top: 1px solid $colorInteriorBorder
+    }
+    .l-time-selects {
+        line-height: $formInputH;
+    }
 }

 /******************************************************** CALENDAR */
 .l-calendar {
-	$colorMuted: pushBack($colorMenuFg, 30%);
-	ul.l-cal-row {
-		@include display-flex;
-		@include flex-flow(row nowrap);
-		margin-top: 1px;
-		&:first-child {
-			margin-top: 0;
-		}
-		li {
-			@include flex(1 0);
-			//@include test();
-			margin-left: 1px;
-			padding: $interiorMargin;
-			text-align: center;
-			&:first-child {
-				margin-left: 0;
-			}
-		}
-		&.l-header li {
-			color: $colorMuted;
-		}
-		&.l-body li {
-			@include trans-prop-nice(background-color, .25s);
-			cursor: pointer;
-			&.in-month {
-				background-color: $colorCalCellInMonthBg;
-			}
-			.sub {
-				color: $colorMuted;
-				font-size: 0.8em;
-			}
-			&.selected {
-				background: $colorCalCellSelectedBg;
-				color: $colorCalCellSelectedFg;
-				.sub {
-					color: inherit;
-				}
-			}
-			&:hover {
-				background-color: $colorCalCellHovBg;
-				color: $colorCalCellHovFg;
-				.sub {
-					color: inherit;
-				}
-			}
-		}
-	}
+    $colorMuted: pushBack($colorMenuFg, 30%);
+    ul.l-cal-row {
+        @include display-flex;
+        @include flex-flow(row nowrap);
+        margin-top: 1px;
+        &:first-child {
+            margin-top: 0;
+        }
+        li {
+            @include flex(1 0);
+            margin-left: 1px;
+            padding: $interiorMargin;
+            text-align: center;
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+        &.l-header li {
+            color: $colorMuted;
+        }
+        &.l-body li {
+            @include trans-prop-nice(background-color, .25s);
+            cursor: pointer;
+            &.in-month {
+                background-color: $colorCalCellInMonthBg;
+            }
+            .sub {
+                color: $colorMuted;
+                font-size: 0.8em;
+            }
+            &.selected {
+                background: $colorCalCellSelectedBg;
+                color: $colorCalCellSelectedFg;
+                .sub {
+                    color: inherit;
+                }
+            }
+            &:hover {
+                background-color: $colorCalCellHovBg;
+                color: $colorCalCellHovFg;
+                .sub {
+                    color: inherit;
+                }
+            }
+        }
+    }
 }

 /******************************************************** BROWSER ELEMENTS */

@include desktop {
-	::-webkit-scrollbar {
-		@include border-radius(2px);
-		@include box-sizing(border-box);
-		@include box-shadow(inset $scrollbarTrackShdw);
-		background-color: $scrollbarTrackColorBg;
-		height: $scrollbarTrackSize;
-		width: $scrollbarTrackSize;
-	}
+    ::-webkit-scrollbar {
+        @include border-radius(2px);
+        @include box-sizing(border-box);
+        @include box-shadow(inset $scrollbarTrackShdw);
+        background-color: $scrollbarTrackColorBg;
+        height: $scrollbarTrackSize;
+        width: $scrollbarTrackSize;
+    }

-	::-webkit-scrollbar-thumb {
-		$bg: $scrollbarThumbColor;
-		$hc: $scrollbarThumbColorHov;
-		$gr: 5%;
-		@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
-		@include border-radius(2px);
-		@include box-sizing(border-box);
-		//@include boxShdwSubtle();
-		//border-top: 1px solid lighten($bg, 20%);
-		&:hover {
-			@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
-		}
-	}
+    ::-webkit-scrollbar-thumb {
+        $bg: $scrollbarThumbColor;
+        $hc: $scrollbarThumbColorHov;
+        $gr: 5%;
+        @include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
+        @include border-radius(2px);
+        @include box-sizing(border-box);
+        &:hover {
+            @include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
+        }
+    }

-	::-webkit-scrollbar-corner {
-		background: $scrollbarTrackColorBg;
-	}
-}
+    ::-webkit-scrollbar-corner {
+        background: $scrollbarTrackColorBg;
+    }
+}
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -0,0 +1,306 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+@mixin statusBannerColors($bg, $fg: $colorStatusFg) {
+	$bgPb: 30%;
+	$bgPbD: 10%;
+	background-color: darken($bg, $bgPb);
+	color: $fg;
+	&:hover {
+		background-color: darken($bg, $bgPb - $bgPbD);
+	}
+	.s-action {
+		background-color: darken($bg, $bgPb + $bgPbD);
+		&:hover {
+			background-color: darken($bg, $bgPb);
+		}
+	}
+}
+
+.status.block {
+	color: $colorStatusDefault;
+	cursor: default;
+	display: inline-block;
+	margin-right: $interiorMargin;
+	.status-indicator,
+	.label,
+	.count {
+		//@include test(#00ff00);
+		display: inline-block;
+		vertical-align: top;
+	}
+	.status-indicator {
+		margin-right: $interiorMarginSm;
+	}
+	&.ok .status-indicator,
+    &.info .status-indicator {
+		color: $colorStatusInfo;
+	}
+    &.alert .status-indicator,
+	&.warning .status-indicator,
+	&.caution .status-indicator {
+		color: $colorStatusAlert;
+	}
+	&.error .status-indicator {
+		color: $colorStatusError;
+	}
+	.label {
+		// Max-width silliness is necessary for width transition
+		@include trans-prop-nice(max-width, .25s);
+		overflow: hidden;
+		max-width: 0px;
+	}
+	.count {
+		@include trans-prop-nice(opacity, .25s);
+		font-weight: bold;
+		opacity: 1;
+	}
+	&:hover {
+		.label {
+			max-width: 450px;
+			width: auto;
+		}
+		.count {
+			opacity: 0;
+		}
+	}
+}
+
+/* Styles for messages and message banners */
+.message {
+	&.block {
+		@include border-radius($basicCr);
+		padding: $interiorMarginLg;
+	}
+	&.error {
+		background-color: rgba($colorAlert,0.3);
+		color: lighten($colorAlert, 20%);
+	}
+}
+
+.l-message-banner {
+	$m: $interiorMarginSm;
+	$lh: $ueFooterH - ($m*2) - 1;
+	@include box-sizing(border-box);
+	@include ellipsize();
+	@include display-flex;
+	@include flex-direction(row);
+	@include align-items(center);
+	position: absolute;
+	top: $m; right: auto; bottom: $m; left: 50%;
+	height: auto; width: auto;
+	line-height: $lh;
+	max-width: 300px;
+	padding: 0 $interiorMargin 0 $interiorMargin;
+	@include transform(translateX(-50%));
+
+	&.minimized {
+        @include transition-property(left, opacity);
+        @include transition-duration(0.3s);
+        @include transition-timing-function(ease-in-out);
+		left: 0;
+        opacity: 0;
+	}
+
+    &.new {
+        left: 50%;
+        opacity: 1;
+        &:not(.info) {
+            @include pulse(100ms, 10);
+        }
+    }
+
+	.banner-elem {
+		@include flex(0 1 auto);
+		margin-left: $interiorMargin;
+	}
+	a {
+		display: inline-block;
+	}
+	.l-action {
+		line-height: $lh - 3;
+		padding: 0 $interiorMargin;
+	}
+    .close {
+		//@include test(red, 0.7);
+		cursor: pointer;
+        font-size: 7px;
+		width: 8px;
+    }
+	.l-progress-bar {
+		$h: $lh - 10;
+		height: $h;
+		line-height: $h;
+		width: 100px;
+	}
+    .progress-info { display: none; }
+	z-index: 10;
+}
+
+.s-message-banner {
+    //@include transition-property(left, opacity);
+    //@include transition-duration(0.35s);
+    //@include transition-timing-function(ease-in-out);
+}
+
+.s-message-banner {
+	@include border-radius($controlCr);
+	@include statusBannerColors($colorStatusDefault, $colorStatusFg);
+	cursor: pointer;
+	a { color: inherit; }
+	.s-action {
+		@include border-radius($basicCr);
+        @include trans-prop-nice(background-color);
+	}
+	.close {
+		opacity: 0.5;
+		&:hover {
+			opacity: 1;
+		}
+	}
+	&.ok,
+    &.info {
+		@include statusBannerColors($colorStatusInfo);
+	}
+	&.caution,
+    &.warning,
+    &.alert {
+		@include statusBannerColors($colorStatusAlert);
+	}
+    &.error {
+        @include statusBannerColors($colorStatusError);
+    }
+}
+
+@mixin messageBlock($iconW: 32px) {
+    .type-icon.message-type {
+        @include txtShdw($shdwStatusIc);
+        &:before { content:"\e608"; }
+        color: $colorStatusDefault;
+        font-size: $iconW;
+        padding: 1px;
+        width: $iconW + 2;
+    }
+
+    .message-severity-info .type-icon.message-type {
+        &:before { content:"\e608"; }
+        color: $colorStatusInfo;
+    }
+    .message-severity-alert .type-icon.message-type {
+        &:before { content:"\e610"; }
+        color: $colorStatusAlert;
+    }
+    .message-severity-error .type-icon.message-type {
+        &:before { content:"\21"; }
+        color: $colorStatusError;
+    }
+}
+/* Paths:
+    t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message >
+        message-type > (icon)
+        message-contents >
+        top-bar >
+            title
+            hint
+        editor >
+            (if displaying list of messages)
+            ul > li > l-message >
+                ... same as above
+        bottom-bar
+*/
+
+.l-message {
+    @include display-flex;
+    @include flex-direction(row);
+    @include align-items(stretch);
+    .type-icon.message-type {
+        //@include test(red);
+        @include flex(0 1 auto);
+        position: relative;
+    }
+    .message-contents {
+        //@include test(blue);
+        @include flex(1 1 auto);
+        margin-left: $overlayMargin;
+        position: relative;
+
+        .top-bar,
+        .message-body {
+            margin-bottom: $interiorMarginLg * 2;
+        }
+    }
+}
+
+
+// Message as singleton
+.t-message-single {
+    @include messageBlock(80px);
+
+    @include desktop {
+        .l-message,
+        .bottom-bar {
+            @include absPosDefault();
+        }
+
+        .bottom-bar {
+            top: auto;
+            height: $ovrFooterH;
+        }
+    }
+}
+
+// Messages in list
+.t-message-list {
+    @include messageBlock(32px);
+
+    .message-contents {
+        .l-message {
+            //border-bottom: 1px solid pullForward($colorOvrBg, 20%);
+            @include border-radius($controlCr);
+            background: rgba($colorOvrFg, 0.1);
+            margin-bottom: $interiorMargin;
+            padding: $interiorMarginLg;
+
+            .message-contents,
+            .bottom-bar {
+                //@include test(green);
+                position: relative;
+            }
+
+            .message-contents {
+                font-size: 0.9em;
+                margin-left: $interiorMarginLg;
+                .message-action { color: pushBack($colorOvrFg, 20%); }
+                .bottom-bar { text-align: left; }
+            }
+
+            .top-bar,
+            .message-body {
+                margin-bottom: $interiorMarginLg;
+            }
+        }
+    }
+
+    @include desktop {
+        .message-contents .l-message { margin-right: $interiorMarginLg; }
+    }
+}
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -6,10 +6,6 @@
 	}
 }

-.l-time-controller-visible {
-
-}
-
 mct-include.l-time-controller {
 	$minW: 500px;
 	$knobHOffset: 0px;
@@ -22,10 +18,10 @@ mct-include.l-time-controller {
 	$r2H: nth($ueTimeControlH,2);
 	$r3H: nth($ueTimeControlH,3);

-    @include absPosDefault();
+    //@include absPosDefault();
    //@include test();
    display: block;
-    top: auto;
+    //top: auto;
 	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
    min-width: $minW;
    font-size: 0.8rem;
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -29,7 +29,7 @@
    //@include test(red);
    display: block;
    position: absolute;
-    z-index: 1;
+    z-index: 3;
    &:after {
        // The handle
        content:"";
@@ -43,7 +43,6 @@
        }
    }
    &:active {
-        //@include test();
        &:after {
            background-color: $colorSplitterActive !important;
        }
@@ -122,11 +121,3 @@
        }
    }
 }
-
-/*.browse-area .splitter {
-	top: 0; //$ueTopBarH + $interiorMarginLg;
-}
-
-.edit-area .splitter {
-	top: 0;
-}*/
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -20,10 +20,12 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

+/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
+
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
-$mobileOverlayMargin: 10px;
+$mobileOverlayMargin: 20px;
 $phoneItemH: floor($ueBrowseGridItemLg/4);
 $tabletItemH: floor($ueBrowseGridItemLg/3);

--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -36,16 +36,23 @@
        //@include test();
        @include slMenuTransitions;
        margin-left: 0 !important;
-        #content-area {
+        .holder-object-and-inspector {
            @include slMenuTransitions;
+            left: $bodyMargin;
+            right: $bodyMargin;
            opacity: 1;
        }
    }

-    .holder.holder-create-and-search {
-        right: $bodyMargin !important;
+    .create-btn-holder {
+        // Hide the create button by default in mobile;
+        // This can be overridden by the examples/mobile bundle
+        display: none;
    }

+    .holder.holder-treeview-elements {
+        right: $bodyMargin !important;
+    }

 // When the tree is hidden, these are the
    // classes used for the left menu and the
@@ -55,10 +62,6 @@
        // is hidden.
        .pane.left.treeview {
            @include trans-prop-nice(opacity, 150ms);
-            //right: 100% !important;
-            //width: auto !important;
-            //overflow-y: hidden;
-            //overflow-x: hidden;
            opacity: 0 !important;
        }
        .pane.right.items {
@@ -72,7 +75,6 @@
        // causing cut/copy/paste menu to
        // not appear. Should me moved in
        // future to properly work
-        //@include user-select(none);

        // Sets the left tree menu when the tree is shown.
        .pane.left.treeview {
@@ -100,7 +102,6 @@
    }

    .object-browse-bar {
-        //@include test();
        left: 45px !important;
        .context-available {
            opacity: 1 !important;
@@ -148,7 +149,7 @@
        .pane.right.items {
            left: 0 !important;
            @include transform(translateX($proporMenuOnly));
-            #content-area {
+            .holder-object-and-inspector {
                opacity: 0;
            }
        }
@@ -159,4 +160,4 @@
    .desktop-hide {
        display: none;
    }
-}
+}
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -20,6 +20,8 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

+/* REQUIRES /platform/commonUI/general/res/sass/mobile/_constants.scss */
+
 // Phones in any orientation
@mixin phone {
    @media #{$phonePortrait},
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -22,21 +22,19 @@

 // Override the Create menu for mobile
@include phoneandtablet {
-    .menu-element {
-        .super-menu {
-            $d: 250px;
-            width: $d;
-            height: $d;
+    .super-menu {
+        $d: 250px;
+        width: $d;
+        height: $d;

-            .pane {
-                &.left {
-                    border-right: none;
-                    padding-right: 0;
-                    width: 100%;
-                }
-                &.right {
-                    display: none;
-                }
+        .pane {
+            &.left {
+                border-right: none;
+                padding-right: 0;
+                width: 100%;
+            }
+            &.right {
+                display: none;
            }
        }
    }
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -1,16 +1,12 @@
@include phoneandtablet {
    .overlay {
-        $m: 0;
        .clk-icon.close {
            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
        }

        > .holder {
-            @include border-radius($m);
-            top: $m;
-            right: $m;
-            bottom: $m;
-            left: $m;
+            height: 90%; width: 90%;
+
            > .contents {
                top: $mobileOverlayMargin;
                right: $mobileOverlayMargin;
@@ -22,35 +18,64 @@
                        margin-right: 1.2em;
                    }
                }
-
-                .form.editor {
-                    border: none;
-
-                    .contents {
-                        top: 0;
-                        right: 0;
-                        bottom: 0;
-                        left: 0;
-                    }
-                }
            }
        }
    }
 }

@include phone {
-    .overlay > .holder > .contents .form.editor .contents .form-row {
-        > .label,
-        > .controls {
-            //@include test(blue);
-            display: block;
-            float: none;
-            width: 100%;
+    .overlay > .holder {
+        //@include test(orange); // This works!
+        $m: 0;
+        @include 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 {
+            > .label,
+            > .controls {
+                //@include test(blue);
+                display: block;
+                float: none;
+                width: 100%;
+            }
+            > .label {
+                &:after {
+                    float: none;
+                }
+            }
+        }
+        
+        .contents {
+            .abs.top-bar,
+            .abs.editor,
+            .abs.message-body,
+            .abs.bottom-bar {
+                //@include test(orange);
+                top: auto; right: auto; bottom: auto; left: auto;
+                height: auto; width: auto;
+                margin-bottom: $interiorMarginLg * 2;
+                position: relative;
+            }
+        }
+    }
+    .t-dialog-sm .overlay > .holder {
+        //@include test(blue);
+        height: auto; max-height: 100%;
+    }
+}
+
+@include phonePortrait {
+    .overlay > .holder {
+        .contents .bottom-bar {
+            text-align: center;
        }
-	    > .label {
-		    &:after {
-			    float: none;
-		    }
-	    }
    }
 }
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -20,79 +20,124 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .overlay {
-	.blocker {
-		background: $colorOvrBlocker;
-		z-index: 100;
-	}
+    font-size: 90%;
+    .blocker {
+        background: $colorOvrBlocker;
+        z-index: 100;
+    }
    .clk-icon.close {
        font-size: 0.8rem;
        position: absolute;
-        top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
-	    z-index: 100;
+        top: $interiorMarginLg;
+        right: $interiorMarginLg;
+        bottom: auto;
+        left: auto;
+        z-index: 100;
    }
-	>.holder {
-		$i: 15%;
-		@include containerSubtle($colorOvrBg, $colorOvrFg);
-		@include border-radius($basicCr * 3);
-		color: $colorOvrFg;
-		top: $i; right: $i; bottom: $i; left: $i;
-		z-index: 101;
-        >.contents {
+    > .holder {
+        //$i: 15%;
+        @include containerSubtle($colorOvrBg, $colorOvrFg);
+        @include 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;
+        max-height: 800px;
+        min-width: 600px;
+        max-width: 1000px;
+        z-index: 101;
+        > .contents {
            $m: $overlayMargin;
-            top: $m; right: $m; bottom: $m; left: $m;
+            top: $m;
+            right: $m;
+            bottom: $m;
+            left: $m;
+
+            //.top-bar,
+            //.editor,
+            //.bottom-bar {
+            //    @include absPosDefault();
+            //}
        }
-	}
-    .title {
-	    @include ellipsize();
-        font-size: 1.2em;
-	    margin-bottom: $interiorMargin;
    }
-    
-    .top-bar {
+
+    .title {
+        @include ellipsize();
+        font-size: 1.2em;
+        line-height: 120%;
+        margin-bottom: $interiorMargin;
+    }
+
+    .hint {
+        color: pushBack($colorOvrFg, 20%);
+    }
+
+    .abs.top-bar {
        height: $ovrTopBarH;
    }
-    
-    .editor {
-        top: $ovrTopBarH + ($interiorMargin * 2);
-        bottom: $ovrFooterH + $interiorMargin * 2;
-        left: 0; right: 0;
-    }
-    
-    .bottom-bar {
-        top: auto; right: 0; bottom: 0; left: 0;
-	    overflow: visible;
-        //font-size: 1em;
-        height: $ovrFooterH;
-        text-align: right;
-        .s-btn {
-	        $bg: $colorOvrBtnBg;
-	        &:not(.major) {
-	            @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
-	        }
-	        font-size: 95%;
-	        height: $ovrFooterH;
-	        line-height: $ovrFooterH;
-            margin-left: $interiorMargin;
-	        padding: 0 $interiorMargin * 3;
-	        //&.major {
-		     //   @extend .s-btn.major;
-		     //   &:hover {
-			 //       @extend .s-btn.major:hover;
-		     //   }
-	        //}
+
+    .abs.editor,
+    .abs.message-body {
+        top: $ovrTopBarH + $interiorMarginLg;
+        bottom: $ovrFooterH + $interiorMarginLg;
+        left: 0;
+        right: 0;
+        overflow: auto;
+        .field.l-med {
+            input[type='text'] {
+                width: 100%;
+            }
        }
    }
-    .contents.l-dialog {
-	    $myM: $interiorMargin;
-	    top: $myM;
-	    right: $myM;
-	    bottom: $myM;
-	    left: $myM;
-        overflow: auto;
-	    .field.l-med {
-		    input[type='text'] {
-			    width: 100%;
-		    }
-	    }
+
+    .bottom-bar {
+        text-align: right;
+        .s-btn {
+            $bg: $colorOvrBtnBg;
+            &:not(.major) {
+                @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
+            }
+            font-size: 95%;
+            height: $ovrFooterH;
+            line-height: $ovrFooterH;
+            margin-left: $interiorMargin;
+            padding: 0 $interiorMargin * 3;
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+
    }
+
+    .abs.bottom-bar {
+        top: auto;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: visible;
+        //font-size: 1em;
+        height: $ovrFooterH;
+    }
+
+    .l-progress-bar {
+        $h: $progressBarHOverlay;
+        display: block;
+        height: $h;
+        line-height: $h;
+        margin: .5em 0;
+        width: 100%;
+    }
+}
+
+.t-dialog-sm .overlay > .holder {
+    // Used for blocker and in-progress dialogs, modal alerts, etc.
+    //@include test(red);
+    $h: 225px;
+    min-height: $h;
+    height: $h;
 }
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -20,30 +20,22 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

-.abs.search-holder {
-	//@include test(#990000);
-	height: $treeSearchInputBarH;
-	bottom: 0;
-	&.active {
-		height: auto;
-		bottom: 0;
-	}
-	top: 23px;
-
-	// Align with the top of the divider bar, below create button
-	//margin-top: 10px; // CH comment out
-	z-index:5;
+.clear-icon,
+.menu-icon {
+    cursor: pointer;
+    font-family: symbolsfont;
+    @include trans-prop-nice((opacity, color), 150ms);
 }

-.search {
+.clear-icon {
+    // 'x' in circle icon
+    &:before {
+        content: '\e607';
+    }
+}
+
+.holder-search {
 	$iconWidth: 20px;
-	$leftMargin: 6px;
-	$rightPadding: 5px;
-	@include webkitVal(display, flex);
-	//display: flex;
-	@include webkitProp(flex-direction, column);
-	//flex-direction: column;
-	height: 100%;

 	.search-bar {
 		$textInputHeight: 19px; // This is equal to the default value, 19px
@@ -52,38 +44,25 @@
 		font-size: 0.8em;
 		max-width: 250px;
 		position: relative;
-		width: 100%;
-		.search-input,
-		.search-icon {
-		}
-		
+
 		.search-input {
 			height: $treeSearchInputBarH;
 			line-height: $treeSearchInputBarH;
-			padding-top: 0;
-			padding-bottom: 0;
 		}
 		
-		.search-icon,
+		&:before,
 		.clear-icon,
 		.menu-icon {
-			//@include test(#008800);
 			@include box-sizing(border-box);
 			color: $colorInputIcon;
-			height: $iconD; width: $iconD;
+			height: $iconD;
+            width: $iconD;
 			line-height: $iconD;
 			position: absolute;
 			text-align: center;
 			top: $iconEdgeM;
 		}

-		.clear-icon,
-		.menu-icon {
-			cursor: pointer;
-			@include transition(color, .25s);
-		}
-
-
 		.search-input {
 			position: relative;
 			width: 100%;
@@ -92,31 +71,21 @@

 			// Make work for mct-control textfield
 			input {
-				width: 100%;
+				width: inherit; // was 100%
 			}
 		}

-		.search-icon {
-			//color: $colorItemFg;
-			left: $interiorMarginSm;
-			transition: visibility .15s, opacity .15s, color .2s;
-			pointer-events: none;
-
-			&.content {
-				// Make icon invisible whenever there is text input
-				//visibility: hidden;
-				//opacity: 0;
-			}
-		}
-
-		// Make icon invisible when the text input is focused
-		.search-input:focus + div.search-icon {
-			//visibility: hidden;
-			//opacity: 0;
-		}
+		&:before {
+            // Magnify glass icon
+            content:'\4d';
+            font-family: symbolsfont;
+            left: $interiorMarginSm;
+            @include trans-prop-nice(color, 250ms);
+            pointer-events: none;
+        }

 		// Make icon lighten when hovering over search bar
-		.search-input:hover + div.search-icon {
+		&:hover:before {
 			color: pullForward($colorInputIcon, 10%);
 		}

@@ -124,13 +93,10 @@
 			right: $iconD + $interiorMargin;

 			// Icon is visible only when there is text input
-			visibility: hidden;
+            visibility: hidden;
 			opacity: 0;
-
-			transition: visibility .15s, opacity .15s, color .2s;
-
-			&.content {
-				visibility: visible;
+			&.show {
+                visibility: visible;
 				opacity: 1;
 			}

@@ -140,6 +106,8 @@
 		}

 		.menu-icon {
+            // 'v' invoke menu icon
+            &:before { content: '\76'; }
 			font-size: 0.8em;
 			padding-right: $iconEdgeM;
 			right: $iconEdgeM;
@@ -152,43 +120,19 @@

 		.search-menu-holder {
 			float: right;
-			//margin-top: $textInputHeight - 2px;
-			//left: -50px;
 			left: -20px;
-
-			z-index: 1;
-
+			z-index: 70;
 			transition: visibility .05s, opacity .05s;
-
-			&.off {
-				visibility: hidden;
-				opacity: 0;
-			}
-		}
-
-		// Hovering reveals menu
-		.menu-icon:hover + div.search-menu-holder {
-			visibility: visible;
-		}
-		div.search-menu-holder:hover {
-			visibility: visible;
 		}
 	}

 	.active-filter-display {
-		//order: 2;
 		$s: 0.65em;
 		$p: $interiorMargin;
-		@include border-radius($basicCr);
 		@include box-sizing(border-box);
 		line-height: 130%;
-		padding: $p 0;
 		padding-left: $s * 2.25;
 		font-size: $s;
-		//background-color: rgba(#000, 0.3);
-		//border-radius: $basicCr;
-		margin-top: $interiorMarginSm;
-

 		.clear-filters-icon {
 			color: $colorInputIcon;
@@ -198,43 +142,28 @@
 			left: 1px;
 			cursor: pointer;
 		}
-
-		// Transition looks weird when the results list has none
-		//transition: visibility .2s, opacity .2s;
-
-		&.off {
-			visibility: hidden;
-			opacity: 0;
-			height: 0;
-			margin: 0;
-			padding: 0;
-			border: 0;
-		}
 	}

-	.search-scroll {
-		order: 3;
-		margin-top: 4px;
-
-		// Adjustable scrolling size
-		overflow-y: auto;
-		top: auto;
-		height: auto;
-		max-height: 100%;
-		position: relative;
-
-		.load-icon {
-			position: relative;
-		}
-
+	.search-results {
+        @include trans-prop-nice((opacity, visibility), 250ms);
+        margin-top: $interiorMarginLg; // Always include margin here to fend off the search input
+		padding-right: $interiorMargin;
+        .hint {
+            margin-bottom: $interiorMarginLg;
+            font-size: 0.65em;
+            opacity: 0.6;
+        }
+        &.active {
+            visibility: visible;
+            opacity: 1;
+        }
 		.load-more-button {
-			margin-top: $interiorMargin 0;
-			font-size: 0.8em;
-			position: relative;
-			left: 50%;
-			margin-left: -45px;
-			text-align: center;
-			width: 90px;
+            @include transform(translateX(-50%));
+            display: inline-block;
+			margin-top: $interiorMargin;
+            padding: 0 $interiorMarginLg;
+			font-size: 0.75em;
+			margin-left: 50%;
 			white-space: nowrap;
 		}
 	}
--- a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
@@ -1,72 +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.
- *****************************************************************************/
-.ue-bottom-bar {
-	background: $colorFooterBg;
-	color: lighten($colorBodyBg, 30%);
-	font-size: .7rem;
-	//line-height: $ueFooterH - 4px;
-	//line-height: $ueFooterH;   // New status bar design
-	.status-holder {
-		//@include border-radius($basicCr * 1.75);   // New status bar design
-		@include box-sizing(border-box);
-		//background: $colorFooterBg;
-        //border-bottom: 1px solid lighten($colorBodyBg, 10%);  // New status bar design
-		@include absPosDefault($interiorMargin);
-		@include ellipsize();
-		line-height: $ueFooterH - ($interiorMargin * 2);
-		right: 120px;
-		text-transform: uppercase;
-	}
-	.app-logo {
-		@include box-sizing(border-box);
-		@include absPosDefault($interiorMargin);
-		left: auto;
-		cursor: pointer;
-		//font-size: 0.8em;
-		//line-height: $ueFooterH - 10px;
-		//padding-top: 1px;
-		//text-transform: uppercase;
-		&.logo-openmctweb {
-			background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
-		}
-	}
-}
-
-.status.block {
-	//display: inline-block;
-	display: inline;  // New status bar design. Inline to support ellipsis overflow
-	margin-right: $interiorMarginLg;
-	.status-indicator {
-		//@include border-radius($controlCr * 0.9);
-		//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
-		//@include text-shadow(rgba(black, 0.3) 0 0 2px);
-		display: inline-block;
-		margin-right: $interiorMarginSm;
-		color: $colorKey;
-		&.ok {
-			color: #009900;
-		}
-		&.caution {
-			color: #ffaa00;
-		}
-	}
-}
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -29,11 +29,13 @@
 			border-color: lighten($bc, 10%);
 		}
 	}
-	>.object-header.abs {
-		//@include test(red);
+	.object-top-bar {
 		font-size: 0.75em;
 		height: $ohH;
 		line-height: $ohH;
+        .left {
+            padding-right: $interiorMarginLg;
+        }
 	}
 	>.object-holder.abs {
 		top: $ohH + $interiorMargin;
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -19,23 +19,6 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@mixin cols($totalCols, $span) {
-    $cw: 100% / $totalCols;
-    min-width: (500px / $totalCols) * $span;
-    @if ($totalCols != $span) {
-        width: ($cw * $span) - $ueColMargin;
-    } @else {
-        width: $cw;
-    }
-}
-
-/*.holder-all {
-    $myM: 0; // $interiorMarginSm;
-    top: $myM;
-    right: $myM;
-    bottom: $myM;
-    left: $myM;
-}*/

 .browse-area,
 .edit-area,
@@ -48,7 +31,7 @@
 }

 .contents {
-    $myM: 0; //$interiorMargin;
+    $myM: 0;
    box-sizing: border-box;
    position: absolute;
    top: $myM;
@@ -63,37 +46,6 @@
    }
 }

-.bar {
-    .icon.major {
-        margin-right: $interiorMargin;
-    }
-    &.abs {
-        text-wrap: none;
-        white-space: nowrap;
-        &.left,
-        .left {
-            width: 45%;
-            right: auto;
-        }
-        &.right,
-        .right {
-            width: 45%;
-            left: auto;
-            text-align: right;
-            .icon.major {
-                margin-left: $interiorMargin * 3;
-            }
-        }
-        .l-flex,
-        &.l-flex {
-            .left,
-            .right {
-                width: auto;
-            }
-        }
-    }
-}
-
 .user-environ {
    .browse-area,
    .editor {
@@ -115,6 +67,7 @@
        right: $bodyMargin;
        bottom: $bodyMargin + $ueFooterH;
        .tool-bar {
+            border-bottom: 1px solid $colorInteriorBorder;
            bottom: auto;
            height: $tbH;
            line-height: $btnToolbarH;
@@ -125,101 +78,35 @@
        }
    }

-    .ue-bottom-bar {
-        //@include absPosDefault($bodyMargin);
-        @include absPosDefault(0); // New status bar design
-        top: auto;
-        height: $ueFooterH;
-        .status-holder {
-            //right: $ueAppLogoW + $bodyMargin; New status bar design
-            z-index: 1;
-        }
-        .app-logo {
-            left: auto;
-            width: $ueAppLogoW;
-            z-index: 2;
-        }
-    }
-}
-
-.cols {
-    @include clearfix;
-    .col {
-        @include box-sizing(border-box);
-        @include clearfix;
-        //		background: rgba(#ffcc00, 0.2);
-        float: left;
-        margin-left: $ueColMargin;
-        padding-left: $interiorMargin;
-        position: relative;
-        &:first-child {
-            margin-left: 0;
-            padding-left: 0;
-        }
-    }
-    &.cols-2 {
-        $nc: 2;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-2-ff {
-        // 2 columns, first column is fixed, second is fluid
-        .col-100px {
-            width: 100px;
-        }
-    }
-
-    &.cols-6 {
-        $nc: 6;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-16 {
-        $nc: 16;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-7 {
-            @include cols($nc, 7);
-        }
-    }
-    &.cols-32 {
-        $nc: 32;
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-15 {
-            @include cols($nc, 15);
-        }
-    }
-    .l-row {
-        @include clearfix;
-        padding: $interiorMargin 0;
-    }
-}
-
-.browse-mode {
-    .split-layout {
-        .split-pane-component.pane {
-            //@include test(green);
-            &.treeview.left {
-                min-width: 150px;
-                max-width: 800px;
-                width: $ueBrowseLeftPaneTreeW;
-            }
-            &.t-inspect.right {
-                min-width: 200px;
-                max-width: 600px;
-                //padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
-                width: $ueBrowseRightPaneInspectW;
-            }
-        }
-    }
+	// from _bottom-bar.scss
+	.ue-bottom-bar {
+		@include absPosDefault(0);// New status bar design
+		top: auto;
+		height: $ueFooterH;
+		line-height: $ueFooterH - ($interiorMargin * 2);
+		background: $colorFooterBg;
+		color: lighten($colorBodyBg, 30%);
+		font-size: .7rem;
+		.status-holder {
+			@include box-sizing(border-box);
+			@include absPosDefault($interiorMargin);
+			@include ellipsize();
+			right: 120px;
+			text-transform: uppercase;
+			z-index: 1;
+		}
+		.app-logo {
+			@include box-sizing(border-box);
+			@include absPosDefault($interiorMargin);
+			cursor: pointer;
+			left: auto;
+			width: $ueAppLogoW;
+			z-index: 2;
+			&.logo-openmctweb {
+				background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
+			}
+		}
+	}
 }

 .edit-mode {
@@ -242,7 +129,6 @@
        text-transform: uppercase;
        height: $ueTopBarH;
        line-height: $ueTopBarH;
-        margin-bottom: $interiorMargin;
    }

    .primary-pane {
@@ -250,30 +136,7 @@
        z-index: 2;
    }

-    &.treeview.left {
-        //.create-btn-holder {
-        //    //bottom: auto;
-        //    //top: 0;
-        //    height: $ueTopBarH;
-        //    .wrapper.menu-element {
-        //        position: absolute;
-        //        bottom: $interiorMargin;
-        //    }
-        //}
-        .holder-create-and-search{
-
-        }
-        .search-holder {
-            top: $ueTopBarH + $interiorMarginLg;
-        }
-        .tree-holder {
-            overflow: auto;
-            top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
-        }
-    }
-
    .mini-tab-icon.toggle-pane {
-        //@include test(blue, 0.3);
        z-index: 5;
        @include desktop {
            $d: $uePaneMiniTabH;
@@ -318,7 +181,6 @@
            }
        }
    }
-
    &.items {
        .object-browse-bar {
            .left.abs,
@@ -330,32 +192,8 @@
 }

 .split-layout {
-    &.horizontal {
-        // Slides up and down
-        > .pane {
-            //			@include test();
-            margin-top: $interiorMargin;
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-    }
-   /* &.vertical {
-        // Slides left and right
-        > .pane.left {
-            > .holder {
-                left: $bodyMargin;
-            }
-        }
-        > .pane.right {
-            > .holder {
-                right: $bodyMargin;
-            }
-        }
-    }*/
-
    // Specific elements margins
-    .holder.holder-create-and-search {
+    .holder.holder-treeview-elements {
        top: $bodyMargin;
        right: 0;
        bottom: $bodyMargin;
@@ -376,24 +214,52 @@
            bottom: $bodyMargin;
            left: $bodyMargin;
            right: $bodyMargin;
-
        }
    }
 }

 .object-holder {
-    overflow: hidden; // Contained objects need to handle their own overflow now
+    @include absPosDefault(0, auto);
    top: $ueTopBarH + $interiorMarginLg;
-    > ng-include {
-        @include absPosDefault(0, auto);
+}
+
+.l-object-wrapper {
+    @extend .abs;
+    //top: $ueTopBarH + $interiorMarginLg;
+
+    .object-holder-main {
+        @extend .abs;
    }
-    &.l-controls-visible {
-        &.l-time-controller-visible {
-            bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
+
+    &.active {
+        @include pulseBorder($colorKey, 150ms, 8, 0.5s);
+        @include border-radius($controlCr);
+        border-color: $colorKey;
+        border-width: 2px;
+        border-style: dotted;
+        .l-object-wrapper-inner {
+            @include absPosDefault(3px, hidden);
        }
    }
 }

+.l-object-wrapper-inner {
+    @include trans-prop-nice-resize(0.25s);
+}
+
+.l-edit-controls {
+    @include trans-prop-nice-resize(0.25s);
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    &.active {
+        border-bottom: 1px solid $colorInteriorBorder;
+        height: $ueEditToolBarH + $interiorMargin;
+        line-height: $ueEditToolBarH;
+        opacity: 1;
+    }
+}
+
 .object-browse-bar .s-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .s-menu-btn,
@@ -412,76 +278,44 @@
    }
 }

+/***************************************************** OBJECT BROWSE BAR */
 .object-browse-bar {
-    //@include test(blue);
-    @include absPosDefault(0, visible);
+    // Converting to use flexbox layout
+    //@include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
    @include box-sizing(border-box);
    height: $ueTopBarH;
    line-height: $ueTopBarH;
    white-space: nowrap;

    .left {
-        padding-right: $interiorMarginLg * 2;
+        padding-right: $interiorMarginLg;
        .l-back {
-            display: inline-block;
-            float: left;
            margin-right: $interiorMarginLg;
        }
    }
 }

-.l-flex {
-    @include webkitVal('display', 'flex');
-    @include webkitProp('flex-flow', 'row nowrap');
-    .left {
-        //@include test(red);
-        @include webkitProp(flex, '1 1 0');
-        padding-right: $interiorMarginLg;
-    }
-}
-
 // When the tree is hidden, these are the
 // classes used for the left menu and the
 // right representation.
 .pane-tree-hidden {
    // Sets the left tree menu when the tree is hidden.
-    //.pane.left.treeview,
    .tree-holder,
    .splitter-treeview,
-    .holder-create-and-search {
+    .holder-treeview-elements {
        opacity: 0;
    }
-    /*.holder-create-and-search {
-        @include trans-prop-nice((top, left), 250ms);
-        top: $ueTopBarH + $interiorMargin;
-        left: -1 * $bodyMargin !important;
-        .create-btn {
-            @include border-left-radius(0);
-            @include trans-prop-nice((width), 250ms);
-            width: $uePaneMiniTabW !important;
-            text-align: center !important;
-            padding: 0;
-            .title-label,
-            &:after {
-                display: none;
-            }
-            &:before {
-                font-size: 9px;
-            }
-        }
-    }*/
 }

 .pane-tree-showing {
    // Sets the left tree menu when the tree is shown.
-    //.pane.left.treeview,
    .tree-holder,
    .splitter-treeview {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
        opacity: 1;
    }

-    .holder-create-and-search {
+    .holder-treeview-elements {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
    }
 }
@@ -495,8 +329,12 @@
        }
    }
 }
+
 .pane-inspect-hidden {
    .l-object-and-inspector {
+        .t-inspect {
+            z-index: 1 !important; // Move down so that primary pane elements are clickable
+        }
        .l-inspect,
        .splitter-inspect {
            opacity: 0;
@@ -505,6 +343,24 @@
 }

@include desktop {
+    .holder-all {
+        min-width: $ueDesktopMinW;
+    }
+    .split-layout {
+        .split-pane-component.pane {
+            &.treeview.left {
+                min-width: $ueBrowseLeftPaneTreeMinW;
+                max-width: $ueBrowseLeftPaneTreeMaxW;
+                width: $ueBrowseLeftPaneTreeW;
+            }
+            &.t-inspect.right {
+                min-width: $ueBrowseRightPaneInspectMinW;
+                max-width: $ueBrowseRightPaneInspectMaxW;
+                width: $ueBrowseRightPaneInspectW;
+                z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
+            }
+        }
+    }
    .pane.treeview.left .tree-holder {
        padding-right: $interiorMargin;
    }
@@ -514,8 +370,10 @@
    .pane-inspect-hidden .l-object-and-inspector {
        .pane.left { right: $ueCollapsedPaneEdgeM !important; }
    }
-
    .pane:not(.resizing) {
        @include trans-prop-nice-resize-w(250ms);
    }
-}
+    .pane.primary-pane .object-browse-bar {
+        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
+    }
+}
--- a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss
@@ -20,7 +20,6 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .tool-bar {
-	border-bottom: 1px solid $colorInteriorBorder;
 	.l-control-group {
 		height: $btnToolbarH;
 	}
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -26,5 +26,6 @@
                     key="indicator.template">
        </mct-include>
    </div>
+    <mct-include key="'message-banner'"></mct-include>
    <mct-include key="'about-logo'"></mct-include>
 </div>
--- a/platform/commonUI/general/res/templates/controls/datetime-field.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-field.html
@@ -0,0 +1,20 @@
+<span class="s-btn"
+      ng-controller="DateTimeFieldController">
+    <input type="text"
+           ng-model="textValue"
+           ng-class="{ error: textInvalid }">
+    </input>
+    <a class="ui-symbol icon icon-calendar"
+       ng-if="structure.format === 'utc' || !structure.format"
+       ng-click="pickerActive = !pickerActive">
+    </a>
+    <mct-popup ng-if="pickerActive">
+        <div mct-click-elsewhere="pickerActive = false">
+            <mct-control key="'datetime-picker'"
+                         ng-model="ngModel"
+                         field="field"
+                         options="{ hours: true }">
+            </mct-control>
+        </div>
+    </mct-popup>
+</span>
--- a/platform/commonUI/general/res/templates/controls/time-controller.html
+++ b/platform/commonUI/general/res/templates/controls/time-controller.html
@@ -22,47 +22,24 @@
 <div ng-controller="TimeRangeController">
    <div class="l-time-range-inputs-holder">
        <span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
-        <span class="l-time-range-input" ng-controller="ToggleController as t1">
-            <!--<span class="lbl">Start</span>-->
-            <span class="s-btn time-range-start">
-                <input type="text"
-                       ng-model="boundsModel.start"
-                       ng-class="{ error: !boundsModel.startValid }">
-                </input>
-                <a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()"></a>
-                <mct-popup ng-if="t1.isActive()">
-                    <div mct-click-elsewhere="t1.setState(false)">
-                        <mct-control key="'datetime-picker'"
-                                     ng-model="ngModel.outer"
-                                     field="'start'"
-                                     options="{ hours: true }">
-                        </mct-control>
-                    </div>
-                </mct-popup>
-            </span>
+        <span class="l-time-range-input">
+            <mct-control key="'datetime-field'"
+                         structure="{ format: parameters.format }"
+                         ng-model="ngModel.outer"
+                         field="'start'"
+                         class="time-range-start">
+            </mct-control>
        </span>

        <span class="l-time-range-inputs-elem lbl">to</span>

        <span class="l-time-range-input" ng-controller="ToggleController as t2">
-            <!--<span class="lbl">End</span>-->
-            <span class="s-btn l-time-range-input">
-                <input type="text"
-                       ng-model="boundsModel.end"
-                       ng-class="{ error: !boundsModel.endValid }">
-                </input>
-                <a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()">
-                </a>
-                <mct-popup ng-if="t2.isActive()">
-                    <div mct-click-elsewhere="t2.setState(false)">
-                        <mct-control key="'datetime-picker'"
-                                     ng-model="ngModel.outer"
-                                     field="'end'"
-                                     options="{ hours: true }">
-                        </mct-control>
-                    </div>
-                </mct-popup>
-            </span>&nbsp;
+            <mct-control key="'datetime-field'"
+                         structure="{ format: parameters.format }"
+                         ng-model="ngModel.outer"
+                         field="'end'"
+                         class="time-range-end">
+            </mct-control>&nbsp;
        </span>
    </div>

@@ -97,7 +74,7 @@
    <div class="l-time-range-ticks-holder">
        <div class="l-time-range-ticks">
            <div
-                ng-repeat="tick in ticks"
+                ng-repeat="tick in ticks track by $index"
                ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
                class="tick tick-x"
                >
--- a/platform/commonUI/general/res/templates/indicator.html
+++ b/platform/commonUI/general/res/templates/indicator.html
@@ -19,20 +19,21 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
+<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
+<!--<div ng-init="reps = [1,2,3]"></div>-->
 <div class='status block'
-     title="{{ngModel.getDescription()}}"
-     ng-click='ngModel.configure()'
-     ng-class='ngModel.getClass()'
-     ng-show="ngModel.getText().length > 0">
-    <span class="ui-symbol status-indicator"
-          ng-class='ngModel.getGlyphClass()'>
-        {{ngModel.getGlyph()}}
-    </span>
-    <span class="label"
-          ng-class='ngModel.getTextClass()'>
-        {{ngModel.getText()}}
-    </span>
-	<a href=''
+	 title="{{ngModel.getDescription()}}"
+	 ng-click='ngModel.configure()'
+	 ng-class='ngModel.getGlyphClass()'
+	 ng-show="ngModel.getText().length > 0">
+	<span class="ui-symbol status-indicator">
+		{{ngModel.getGlyph()}}
+	</span><span class="label"
+		  ng-class='ngModel.getTextClass()'>
+		{{ngModel.getText()}}
+	</span><span class="count">
+		<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
+	</span><a href=''
 	   class="ui-symbol"
 	   ng-if="ngModel.configure">
 		G
--- a/platform/commonUI/general/res/templates/message-banner.html
+++ b/platform/commonUI/general/res/templates/message-banner.html
@@ -0,0 +1,21 @@
+<div ng-controller="BannerController" ng-show="active.notification"
+     class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
+     'minimized': active.notification.model.minimized,
+     'new': !active.notification.model.minimized}"
+     ng-click="maximize(active.notification)">
+    <span class="banner-elem label">
+        {{active.notification.model.title}}
+    </span>
+    <span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
+        <mct-include key="'progress-bar'" class="banner-elem"
+                     ng-model="active.notification.model">
+        </mct-include>
+    </span>
+    <a ng-hide="active.notification.model.primaryOption === undefined"
+       class="banner-elem l-action s-action"
+       ng-click="action(active.notification.model.primaryOption.callback, $event)">
+        {{active.notification.model.primaryOption.label}}
+    </a>
+    <a class="banner-elem ui-symbol close" ng-click="dismiss(active.notification, $event)">
+        &#x78;</a>
+</div>
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ b/platform/commonUI/general/res/templates/object-inspector.html
@@ -20,9 +20,9 @@
 at runtime from the About dialog for additional information.
 -->
 <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
-    <div class="abs holder holder-inspector-elements">
-    <div class="pane-header">Inspection</div>
-    <ul>
+    <div class="abs holder holder-inspector-elements l-flex-col">
+    <div class="pane-header flex-elem">Inspection</div>
+    <ul class="flex-elem grows vscroll">
        <li>
            <em>Properties</em>
            <div class="inspector-properties"
--- a/platform/commonUI/general/res/templates/progress-bar.html
+++ b/platform/commonUI/general/res/templates/progress-bar.html
@@ -0,0 +1,10 @@
+<span class="l-progress-bar s-progress-bar"
+      ng-class="{ indeterminate:ngModel.unknownProgress }">
+    <span class="progress-amt-holder">
+        <span class="progress-amt" style="width: {{ngModel.progress}}%"></span>
+    </span>
+</span>
+<div class="progress-info hint" ng-hide="ngModel.progressText === undefined">
+    <span class="progress-amt-text" ng-show="ngModel.progress > 0">{{ngModel.progress}}% complete. </span>
+    {{ngModel.progressText}}
+</div>
--- a/platform/commonUI/general/src/StyleSheetLoader.js
+++ b/platform/commonUI/general/src/StyleSheetLoader.js
@@ -38,8 +38,9 @@ define(
         * @constructor
         * @param {object[]} stylesheets stylesheet extension definitions
         * @param $document Angular's jqLite-wrapped document element
+         * @param {string} activeTheme the theme in use
         */
-        function StyleSheetLoader(stylesheets, $document) {
+        function StyleSheetLoader(stylesheets, $document, activeTheme) {
            var head = $document.find('head'),
                document = $document[0];

@@ -62,8 +63,15 @@ define(
                head.append(link);
            }

+            // Stylesheets which specify themes should only be applied
+            // when that theme has been declared.
+            function matchesTheme(stylesheet) {
+                return stylesheet.theme === undefined ||
+                    stylesheet.theme === activeTheme;
+            }
+
            // Add all stylesheets from extensions
-            stylesheets.forEach(addStyleSheet);
+            stylesheets.filter(matchesTheme).forEach(addStyleSheet);
        }

        return StyleSheetLoader;
--- a/platform/commonUI/general/src/controllers/BannerController.js
+++ b/platform/commonUI/general/src/controllers/BannerController.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * A controller for banner notifications. Banner notifications are a
+         * non-blocking way of drawing the user's attention to an event such
+         * as system errors, or the progress or successful completion of an
+         * ongoing task. This controller provides scoped functions for
+         * dismissing and 'maximizing' notifications. See {@link NotificationService}
+         * for more details on Notifications.
+         *
+         * @param $scope
+         * @param notificationService
+         * @param dialogService
+         * @constructor
+         */
+        function BannerController($scope, notificationService, dialogService) {
+            $scope.active = notificationService.active;
+
+            $scope.action = function (action, $event){
+                /*
+                 Prevents default 'maximize' behaviour when clicking on
+                  notification button
+                 */
+                $event.stopPropagation();
+                return action();
+            };
+            $scope.dismiss = function(notification, $event) {
+                $event.stopPropagation();
+                notification.dismissOrMinimize();
+            };
+            $scope.maximize = function(notification) {
+                if (notification.model.severity !== "info"){
+
+                    notification.model.cancel = function(){
+                        dialogService.dismiss();
+                    };
+                    dialogService.showBlockingMessage(notification.model);
+                }
+            };
+        }
+        return BannerController;
+    });
--- a/platform/commonUI/general/src/controllers/DateTimeFieldController.js
+++ b/platform/commonUI/general/src/controllers/DateTimeFieldController.js
@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+        /**
+         * Controller to support the date-time entry field.
+         *
+         * Accepts a `format` property in the `structure` attribute
+         * which allows a date/time to be specified via its symbolic
+         * key (as will be used to look up said format from the
+         * `formatService`.)
+         *
+         * {@see FormatService}
+         * @constructor
+         * @memberof platform/commonUI/general
+         * @param $scope the Angular scope for this controller
+         * @param {FormatService} formatService the service to user to format
+         *        domain values
+         * @param {string} defaultFormat the format to request when no
+         *        format has been otherwise specified
+         */
+        function DateTimeFieldController($scope, formatService, defaultFormat) {
+            var formatter = formatService.getFormat(defaultFormat);
+
+            function updateFromModel(value) {
+                // Only reformat if the value is different from user
+                // input (to avoid reformatting valid input while typing.)
+                if (!formatter.validate($scope.textValue) ||
+                        formatter.parse($scope.textValue) !== value) {
+                    $scope.textValue = formatter.format(value);
+                    $scope.textInvalid = false;
+                }
+            }
+
+            function updateFromView(textValue) {
+                $scope.textInvalid = !formatter.validate(textValue);
+                if (!$scope.textInvalid) {
+                    $scope.ngModel[$scope.field] =
+                        formatter.parse(textValue);
+                }
+            }
+
+            function setFormat(format) {
+                formatter = formatService.getFormat(format || defaultFormat);
+                updateFromModel($scope.ngModel[$scope.field]);
+            }
+
+            $scope.$watch('structure.format', setFormat);
+            $scope.$watch('ngModel[field]', updateFromModel);
+            $scope.$watch('textValue', updateFromView);
+        }
+
+        return DateTimeFieldController;
+    }
+);
--- a/platform/commonUI/general/src/controllers/TimeRangeController.js
+++ b/platform/commonUI/general/src/controllers/TimeRangeController.js
@@ -26,33 +26,32 @@ define(
    function (moment) {
        "use strict";

-        var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
-            TICK_SPACING_PX = 150;
+        var TICK_SPACING_PX = 150;
+

        /**
+         * Controller used by the `time-controller` template.
         * @memberof platform/commonUI/general
         * @constructor
+         * @param $scope the Angular scope for this controller
+         * @param {FormatService} formatService the service to user to format
+         *        domain values
+         * @param {string} defaultFormat the format to request when no
+         *        format has been otherwise specified
+         * @param {Function} now a function to return current system time
         */
-        function TimeConductorController($scope, now) {
+        function TimeRangeController($scope, formatService, defaultFormat, now) {
            var tickCount = 2,
                innerMinimumSpan = 1000, // 1 second
                outerMinimumSpan = 1000 * 60 * 60, // 1 hour
-                initialDragValue;
+                initialDragValue,
+                formatter = formatService.getFormat(defaultFormat);

            function formatTimestamp(ts) {
-                return moment.utc(ts).format(DATE_FORMAT);
+                return formatter.format(ts);
            }

-            function parseTimestamp(text) {
-                var m = moment.utc(text, DATE_FORMAT);
-                if (m.isValid()) {
-                    return m.valueOf();
-                } else {
-                    throw new Error("Could not parse " + text);
-                }
-            }
-
-            // From 0.0-1.0 to "0%"-"1%"
+            // From 0.0-1.0 to "0%"-"100%"
            function toPercent(p) {
                return (100 * p) + "%";
            }
@@ -101,41 +100,15 @@ define(
                return { start: bounds.start, end: bounds.end };
            }

-            function updateBoundsTextForProperty(ngModel, property) {
-                try {
-                    if (!$scope.boundsModel[property] ||
-                            parseTimestamp($scope.boundsModel[property]) !==
-                                ngModel.outer[property]) {
-                        $scope.boundsModel[property] =
-                            formatTimestamp(ngModel.outer[property]);
-                    }
-                } catch (e) {
-                    // User-entered text is invalid, so leave it be
-                    // until they fix it.
-                }
-            }
-
-            function updateBoundsText(ngModel) {
-                updateBoundsTextForProperty(ngModel, 'start');
-                updateBoundsTextForProperty(ngModel, 'end');
-            }
-
            function updateViewFromModel(ngModel) {
-                var t = now();
-
                ngModel = ngModel || {};
                ngModel.outer = ngModel.outer || defaultBounds();
                ngModel.inner = ngModel.inner || copyBounds(ngModel.outer);

-                // First, dates for the date pickers for outer bounds
-                updateBoundsText(ngModel);
-
-                // Then various updates for the inner span
-                updateViewForInnerSpanFromModel(ngModel);
-
                // Stick it back is scope (in case we just set defaults)
                $scope.ngModel = ngModel;

+                updateViewForInnerSpanFromModel(ngModel);
                updateTicks();
            }

@@ -155,7 +128,8 @@ define(
            }

            function toMillis(pixels) {
-                var span = $scope.ngModel.outer.end - $scope.ngModel.outer.start;
+                var span =
+                    $scope.ngModel.outer.end - $scope.ngModel.outer.start;
                return (pixels / $scope.spanWidth) * span;
            }

@@ -243,36 +217,10 @@ define(
                updateTicks();
            }

-            function updateStartFromText(value) {
-                try {
-                    updateOuterStart(parseTimestamp(value));
-                    updateBoundsTextForProperty($scope.ngModel, 'end');
-                    $scope.boundsModel.startValid = true;
-                } catch (e) {
-                    $scope.boundsModel.startValid = false;
-                    return;
-                }
-            }
-
-            function updateEndFromText(value) {
-                try {
-                    updateOuterEnd(parseTimestamp(value));
-                    updateBoundsTextForProperty($scope.ngModel, 'start');
-                    $scope.boundsModel.endValid = true;
-                } catch (e) {
-                    $scope.boundsModel.endValid = false;
-                    return;
-                }
-            }
-
-            function updateStartFromPicker(value) {
-                updateOuterStart(value);
-                updateBoundsText($scope.ngModel);
-            }
-
-            function updateEndFromPicker(value) {
-                updateOuterEnd(value);
-                updateBoundsText($scope.ngModel);
+            function updateFormat(key) {
+                formatter = formatService.getFormat(key || defaultFormat);
+                updateViewForInnerSpanFromModel($scope.ngModel);
+                updateTicks();
            }

            $scope.startLeftDrag = startLeftDrag;
@@ -282,21 +230,18 @@ define(
            $scope.rightDrag = rightDrag;
            $scope.middleDrag = middleDrag;

-            $scope.state = false;
            $scope.ticks = [];
-            $scope.boundsModel = {};

            // Initialize scope to defaults
            updateViewFromModel($scope.ngModel);

            $scope.$watchCollection("ngModel", updateViewFromModel);
            $scope.$watch("spanWidth", updateSpanWidth);
-            $scope.$watch("ngModel.outer.start", updateStartFromPicker);
-            $scope.$watch("ngModel.outer.end", updateEndFromPicker);
-            $scope.$watch("boundsModel.start", updateStartFromText);
-            $scope.$watch("boundsModel.end", updateEndFromText);
+            $scope.$watch("ngModel.outer.start", updateOuterStart);
+            $scope.$watch("ngModel.outer.end", updateOuterEnd);
+            $scope.$watch("parameters.format", updateFormat);
        }

-        return TimeConductorController;
+        return TimeRangeController;
    }
 );
--- a/Show More
+++ b/Show More