Fixed failing dialogservice test case

[Frontend] Banner message animations; class renaming
open #163 open #170 Added transition animations to message banners; Renamed $colorStatus* class names to map more closely to severity constants;
2015-10-14 14:18:36 -07:00 · 2015-10-13 17:12:23 -07:00 · 2015-10-08 19:10:26 -07:00 · 2015-10-08 13:09:41 -07:00 · 2015-10-08 09:37:43 -07:00 · 2015-10-07 21:32:34 -07:00
224 changed files with 5422 additions and 20553 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-web: node app.js --port $PORT
+web: node app.js --port $PORT --include example/localstorage
--- a/README.md
+++ b/README.md
@@ -103,21 +103,6 @@ This build will:

 Run as `mvn clean install`.

-### Building Documentation
-
-Open MCT Web's documentation is generated by an
-[npm](https://www.npmjs.com/)-based build:
-
-* `npm install` _(only needs to run once)_
-* `npm run docs`
-
-Documentation will be generated in `target/docs`. Note that diagram
-generation is dependent on having [Cairo](http://cairographics.org/download/)
-installed; see
-[node-canvas](https://github.com/Automattic/node-canvas#installation)'s
-documentation for help with installation.
-
-
 # Glossary

 Certain terms are used throughout Open MCT Web with consistent meanings
--- a/bundles.json
+++ b/bundles.json
@@ -6,12 +6,10 @@
    "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",
@@ -31,5 +29,7 @@

    "example/imagery",
    "example/eventGenerator",
-    "example/generator"
+    "example/generator",
+
+    "testing/dialogTest"
 ]
--- a/docs/gendocs.js
+++ b/docs/gendocs.js
@@ -30,8 +30,7 @@
 var CONSTANTS = {
        DIAGRAM_WIDTH: 800,
        DIAGRAM_HEIGHT: 500
-    },
-    TOC_HEAD = "# Table of Contents";
+    };

 GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be defined
 (function () {
@@ -45,7 +44,6 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
        split = require("split"),
        stream = require("stream"),
        nomnoml = require('nomnoml'),
-        toc = require("markdown-toc"),
        Canvas = require('canvas'),
        options = require("minimist")(process.argv.slice(2));

@@ -112,9 +110,6 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
            done();
        };
        transform._flush = function (done) {
-            // Prepend table of contents
-            markdown =
-                [ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
            this.push("<html><body>\n");
            this.push(marked(markdown));
            this.push("\n</body></html>\n");
@@ -138,8 +133,8 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
        customRenderer.link = function (href, title, text) {
            // ...but only if they look like relative paths
            return (href || "").indexOf(":") === -1 && href[0] !== "/" ?
-                    renderer.link(href.replace(/\.md/, ".html"), title, text) :
-                    renderer.link.apply(renderer, arguments);
+                renderer.link(href.replace(/\.md/, ".html"), title, text) :
+                renderer.link.apply(renderer, arguments);
        };
        return customRenderer;
    }
@@ -184,17 +179,13 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
    glob(options['in'] + "/**/*.@(html|css|png)", {}, function (err, files) {
        files.forEach(function (file) {
            var destination = file.replace(options['in'], options.out),
-                destPath = path.dirname(destination),
-                streamOptions = {};
-            if (file.match(/png$/)){
-                streamOptions.encoding = null;
-            } else {
-                streamOptions.encoding = 'utf8';
-            }
-            
+                destPath = path.dirname(destination);
+
            mkdirp(destPath, function (err) {
-                fs.createReadStream(file, streamOptions)
-                    .pipe(fs.createWriteStream(destination, streamOptions));
+                fs.createReadStream(file, { encoding: 'utf8' })
+                    .pipe(fs.createWriteStream(destination, {
+                        encoding: 'utf8'
+                    }));
            });
        });
    });
--- a/docs/src/architecture/Platform.md
+++ b/docs/src/architecture/Platform.md
@@ -35,26 +35,16 @@ in __any of these tiers__.
 * _DOM_: The rendered HTML document, composed from HTML templates which
  have been processed by AngularJS and will be updated by AngularJS
  to reflect changes from the presentation layer. User interactions
-  are initiated from here and invoke behavior in the presentation layer. HTML 
-  templates are written in Angular’s template syntax; see the [Angular documentation on templates](https://docs.angularjs.org/guide/templates). 
-  These describe the page as actually seen by the user. Conceptually, 
-  stylesheets (controlling the lookandfeel of the rendered templates) belong 
-  in this grouping as well. 
+  are initiated from here and invoke behavior in the presentation layer.
 * [_Presentation layer_](#presentation-layer): The presentation layer
  is responsible for updating (and providing information to update)
  the displayed state of the application. The presentation layer consists
  primarily of _controllers_ and _directives_. The presentation layer is
  concerned with inspecting the information model and preparing it for
  display.
-* [_Information model_](#information-model): Provides a common (within Open MCT 
-  Web) set of interfaces for dealing with “things”  domain objects  within the 
-  system. Userfacing concerns in a Open MCT Web application are expressed as 
-  domain objects; examples include folders (used to organize other domain 
-  objects), layouts (used to build displays), or telemetry points (used as 
-  handles for streams of remote measurements.) These domain objects expose a 
-  common set of interfaces to allow reusable user interfaces to be built in the 
-  presentation and template tiers; the specifics of these behaviors are then 
-  mapped to interactions with underlying services. 
+* [_Information model_](#information-model): The information model
+  describes the state and behavior of the objects with which the user
+  interacts.
 * [_Service infrastructure_](#service-infrastructure): The service
  infrastructure is responsible for providing the underlying general
  functionality needed to support the information model. This includes
@@ -62,9 +52,7 @@ in __any of these tiers__.
  back-end.
 * _Back-end_: The back-end is out of the scope of Open MCT Web, except
  for the interfaces which are utilized by adapters participating in the
-  service infrastructure. Includes the underlying persistence stores, telemetry 
-  streams, and so forth which the Open MCT Web client is being used to interact 
-  with.
+  service infrastructure.

 ## Application Start-up

--- a/docs/src/guide/index.md
+++ b/docs/src/guide/index.md
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -29,9 +29,8 @@
    Sections:
    <ul>
        <li><a href="api/">API</a></li>
-        <li><a href="architecture/">Architecture Overview</a></li>
        <li><a href="guide/">Developer Guide</a></li>
-        <li><a href="tutorials/">Tutorials</a></li>
+        <li><a href="architecture/">Architecture Overview</a></li>
    </ul>
 </body>
 </html>
--- a/docs/src/tutorials/images/add-task.png
+++ b/docs/src/tutorials/images/add-task.png
--- a/docs/src/tutorials/images/bar-plot-2.png
+++ b/docs/src/tutorials/images/bar-plot-2.png
--- a/docs/src/tutorials/images/bar-plot-3.png
+++ b/docs/src/tutorials/images/bar-plot-3.png
--- a/docs/src/tutorials/images/bar-plot-4.png
+++ b/docs/src/tutorials/images/bar-plot-4.png
--- a/docs/src/tutorials/images/bar-plot.png
+++ b/docs/src/tutorials/images/bar-plot.png
--- a/docs/src/tutorials/images/chrome.png
+++ b/docs/src/tutorials/images/chrome.png
--- a/docs/src/tutorials/images/remove-task.png
+++ b/docs/src/tutorials/images/remove-task.png
--- a/docs/src/tutorials/images/telemetry-1.png
+++ b/docs/src/tutorials/images/telemetry-1.png
--- a/docs/src/tutorials/images/telemetry-2.png
+++ b/docs/src/tutorials/images/telemetry-2.png
--- a/docs/src/tutorials/images/telemetry-3.png
+++ b/docs/src/tutorials/images/telemetry-3.png
--- a/docs/src/tutorials/images/todo-edit.png
+++ b/docs/src/tutorials/images/todo-edit.png
--- a/docs/src/tutorials/images/todo-list.png
+++ b/docs/src/tutorials/images/todo-list.png
--- a/docs/src/tutorials/images/todo-restyled.png
+++ b/docs/src/tutorials/images/todo-restyled.png
--- a/docs/src/tutorials/images/todo-selection.png
+++ b/docs/src/tutorials/images/todo-selection.png
--- a/docs/src/tutorials/images/todo.png
+++ b/docs/src/tutorials/images/todo.png
--- a/docs/src/tutorials/index.md
+++ b/docs/src/tutorials/index.md
--- a/example/generator/bundle.json
+++ b/example/generator/bundle.json
@@ -16,23 +16,6 @@
                "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",
@@ -51,15 +34,6 @@
                        {
                            "key": "time",
                            "name": "Time"
-                        },
-                        {
-                            "key": "yesterday",
-                            "name": "Yesterday"
-                        },
-                        {
-                            "key": "delta",
-                            "name": "Delta",
-                            "format": "example.delta"
                        }
                    ],
                    "ranges": [
@@ -87,4 +61,4 @@
            }
        ]
    }
-}
+}
--- a/example/generator/src/SinewaveDeltaFormat.js
+++ b/example/generator/src/SinewaveDeltaFormat.js
@@ -1,68 +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.
- *****************************************************************************/
-/*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/SinewaveLimitCapability.js
+++ b/example/generator/src/SinewaveLimitCapability.js
@@ -30,25 +30,25 @@ define(
            YELLOW = 0.5,
            LIMITS = {
                rh: {
-                    cssClass: "s-limit-upr s-limit-red",
+                    cssClass: "s-limit-upr-red",
                    low: RED,
                    high: Number.POSITIVE_INFINITY,
                    name: "Red High"
                },
                rl: {
-                    cssClass: "s-limit-lwr s-limit-red",
+                    cssClass: "s-limit-lwr-red",
                    high: -RED,
                    low: Number.NEGATIVE_INFINITY,
                    name: "Red Low"
                },
                yh: {
-                    cssClass: "s-limit-upr s-limit-yellow",
+                    cssClass: "s-limit-upr-yellow",
                    low: YELLOW,
                    high: RED,
                    name: "Yellow High"
                },
                yl: {
-                    cssClass: "s-limit-lwr s-limit-yellow",
+                    cssClass: "s-limit-lwr-yellow",
                    low: -RED,
                    high: -YELLOW,
                    name: "Yellow Low"
--- a/example/notifications/src/NotificationLaunchIndicator.js
+++ b/example/notifications/src/NotificationLaunchIndicator.js
@@ -19,32 +19,45 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/*global define,window*/
+/*global define,Promise*/

+/**
+ * Module defining SinewaveTelemetry. Created by vwoeltje on 11/12/14.
+ */
 define(
    [],
    function () {
        "use strict";

-        function NotificationLaunchIndicator() {
+        var firstObservedTime = Date.now();

+        /**
+         *
+         * @constructor
+         */
+        function SinewaveTelemetry(request) {
+            var latestObservedTime = Date.now(),
+                count = Math.floor((latestObservedTime - firstObservedTime) / 1000),
+                period = request.period || 30,
+                generatorData = {};
+
+            generatorData.getPointCount = function () {
+                return count;
+            };
+
+            generatorData.getDomainValue = function (i, domain) {
+                return i * 1000 +
+                        (domain !== 'delta' ? firstObservedTime : 0);
+            };
+
+            generatorData.getRangeValue = function (i, range) {
+                range = range || "sin";
+                return Math[range](i * Math.PI * 2 / period);
+            };
+
+            return generatorData;
        }

-        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;
+        return SinewaveTelemetry;
    }
-);
+);
--- a/example/generator/src/SinewaveTelemetryProvider.js
+++ b/example/generator/src/SinewaveTelemetryProvider.js
@@ -25,8 +25,8 @@
 * Module defining SinewaveTelemetryProvider. Created by vwoeltje on 11/12/14.
 */
 define(
-    ["./SinewaveTelemetrySeries"],
-    function (SinewaveTelemetrySeries) {
+    ["./SinewaveTelemetry"],
+    function (SinewaveTelemetry) {
        "use strict";

        /**
@@ -45,7 +45,7 @@ define(
            function generateData(request) {
                return {
                    key: request.key,
-                    telemetry: new SinewaveTelemetrySeries(request)
+                    telemetry: new SinewaveTelemetry(request)
                };
            }

@@ -112,4 +112,4 @@ define(

        return SinewaveTelemetryProvider;
    }
-);
+);
--- a/example/generator/src/SinewaveTelemetrySeries.js
+++ b/example/generator/src/SinewaveTelemetrySeries.js
@@ -1,78 +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.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining SinewaveTelemetry. Created by vwoeltje on 11/12/14.
- */
-define(
-    ['./SinewaveConstants'],
-    function (SinewaveConstants) {
-        "use strict";
-
-        var ONE_DAY = 60 * 60 * 24,
-            firstObservedTime = Math.floor(SinewaveConstants.START_TIME / 1000);
-
-        /**
-         *
-         * @constructor
-         */
-        function SinewaveTelemetrySeries(request) {
-            var timeOffset = (request.domain === 'yesterday') ? ONE_DAY : 0,
-                latestTime = Math.floor(Date.now() / 1000) - timeOffset,
-                firstTime = firstObservedTime - timeOffset,
-                endTime = (request.end !== undefined) ?
-                        Math.floor(request.end / 1000) : latestTime,
-                count = Math.min(endTime, latestTime) - firstTime,
-                period = +request.period || 30,
-                generatorData = {},
-                requestStart = (request.start === undefined) ? firstTime :
-                        Math.max(Math.floor(request.start / 1000), firstTime),
-                offset = requestStart - firstTime;
-
-            if (request.size !== undefined) {
-                offset = Math.max(offset, count - request.size);
-            }
-
-            generatorData.getPointCount = function () {
-                return count - offset;
-            };
-
-            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);
-            };
-
-            generatorData.getRangeValue = function (i, range) {
-                range = range || "sin";
-                return Math[range]((i + offset) * Math.PI * 2 / period);
-            };
-
-            return generatorData;
-        }
-
-        return SinewaveTelemetrySeries;
-    }
-);
--- a/example/notifications/bundle.json
+++ b/example/notifications/bundle.json
@@ -1,47 +0,0 @@
-{
-    "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/notification-launch.html
+++ b/example/notifications/res/notification-launch.html
@@ -1,10 +0,0 @@
-<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/NotificationLaunchController.js
+++ b/example/notifications/src/NotificationLaunchController.js
@@ -1,172 +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.
- *****************************************************************************/
-/*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/profiling/bundle.json
+++ b/example/profiling/bundle.json
@@ -4,11 +4,7 @@
            {
                "implementation": "WatchIndicator.js",
                "depends": ["$interval", "$rootScope"]
-            },
-            {
-                "implementation": "DigestIndicator.js",
-                "depends": ["$interval", "$rootScope"]
            }
        ]
    }
-}
+}
--- a/example/profiling/src/DigestIndicator.js
+++ b/example/profiling/src/DigestIndicator.js
@@ -1,77 +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.
- *****************************************************************************/
-/*global define*/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * Displays the number of digests that have occurred since the
-         * indicator was first instantiated.
-         * @constructor
-         * @param $interval Angular's $interval
-         * @implements {Indicator}
-         */
-        function DigestIndicator($interval, $rootScope) {
-            var digests = 0,
-                displayed = 0,
-                start = Date.now();
-
-            function update() {
-                var secs = (Date.now() - start) / 1000;
-                displayed = Math.round(digests / secs);
-            }
-
-            function increment() {
-                digests += 1;
-            }
-
-            $rootScope.$watch(increment);
-
-            // Update state every second
-            $interval(update, 1000);
-
-            // Provide initial state, too
-            update();
-
-            return {
-                getGlyph: function () {
-                    return ".";
-                },
-                getGlyphClass: function () {
-                    return undefined;
-                },
-                getText: function () {
-                    return displayed + " digests/sec";
-                },
-                getDescription: function () {
-                    return "";
-                }
-            };
-        }
-
-        return DigestIndicator;
-
-    }
-);
--- a/package.json
+++ b/package.json
@@ -22,8 +22,7 @@
    "split": "^1.0.0",
    "mkdirp": "^0.5.1",
    "nomnoml": "^0.0.3",
-    "canvas": "^1.2.7",
-    "markdown-toc": "^0.11.7"
+    "canvas": "^1.2.7"
  },
  "scripts": {
    "start": "node app.js",
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -1,9 +1,4 @@
 {
-    "configuration": {
-        "paths": {
-            "uuid": "uuid"
-        }
-    },
    "extensions": {
        "routes": [
            {
@@ -31,10 +26,10 @@
                ]
            },
            {
-                "key": "PaneController",
-                "implementation": "PaneController.js",
+                "key": "BrowseTreeController",
+                "implementation": "BrowseTreeController.js",
                "priority": "preferred",
-                "depends": [ "$scope", "agentService","$window" ]
+                "depends": [ "$scope", "agentService" ]
            },
            {
                "key": "BrowseObjectController",
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -41,8 +41,10 @@
            </mct-representation>
        </div>
    </div>
-    <mct-representation key="representation.selected.key"
-                        mct-object="representation.selected.key && domainObject"
-                        class="abs object-holder">
-    </mct-representation>
+
+    <div class='object-holder abs vscroll'>
+        <mct-representation key="representation.selected.key"
+                            mct-object="representation.selected.key && domainObject">
+        </mct-representation>
+    </div>
 </span>
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -22,27 +22,20 @@

 <div class="abs holder-all browse-mode" ng-controller="BrowseController">
    <mct-include key="'topbar-browse'"></mct-include>
-    <div class="abs holder holder-main browse-area s-browse-area browse-wrapper"
-         ng-controller="PaneController as modelPaneTree"
-         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'">
-        <mct-split-pane class='abs contents'
-                        anchor='left'>
+    <div class="holder browse-area s-browse-area abs browse-wrapper"
+         ng-controller="BrowseTreeController as tree"
+         ng-class="tree.visible() ? 'browse-showtree' : 'browse-hidetree'">
+        <mct-split-pane class='contents abs' 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">
-                    <mct-representation key="'create-button'"
-                                        mct-object="navigatedObject"
-                                        mct-device="desktop">
+                <div class="holder abs l-mobile">
+                    <mct-representation key="'create-button'" mct-object="navigatedObject">
                    </mct-representation>
                    <div class='holder search-holder abs'
                         ng-class="{active: treeModel.search}">
-                        <mct-include key="'search'"
+                        <mct-representation key="'search'"
+                                     mct-object="domainObject"
                                     ng-model="treeModel">
-                        </mct-include>
+                        </mct-representation>
                    </div>
                    <div class='tree-holder abs mobile-tree-holder'
                         ng-hide="treeModel.search">
@@ -55,40 +48,17 @@
                </div>
            </div>

-            <mct-splitter class="splitter-treeview mobile-hide"></mct-splitter>
+            <mct-splitter class="mobile-hide"></mct-splitter>

-            <div class='split-pane-component items pane primary-pane right'>
-                <a class="mini-tab-icon anchor-left toggle-pane toggle-tree"
-                   title="{{ modelPaneTree.visible()? 'Hide' : 'Show' }} this pane"
-                   ng-click="modelPaneTree.toggle()"
-                   ng-class="{ collapsed : !modelPaneTree.visible() }"></a>
-
-                <div class='holder holder-object-and-inspector abs l-mobile' id='content-area'
-                     ng-controller="PaneController as modelPaneInspect"
-                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
-
-                    <mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
-                        <div class='split-pane-component t-object pane primary-pane left'>
-                            <mct-representation mct-object="navigatedObject"
-                                                key="'browse-object'"
-                                                class="abs holder holder-object">
-                            </mct-representation>
-                        </div>
-
-                        <mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
-
-                        <div class="split-pane-component t-inspect pane right mobile-hide">
-                            <mct-representation key="'object-inspector'"
-                                                mct-object="domainObject"
-                                                ng-model="treeModel">
-                            </mct-representation>
-                            <a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect"
-                               title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
-                               ng-click="modelPaneInspect.toggle()"
-                               ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
-                        </div>
-                    </mct-split-pane>
+            <div class='split-pane-component items pane right-repr'>
+                <div class='holder abs l-mobile' id='content-area'>
+                    <mct-representation mct-object="navigatedObject"
+                                        key="'browse-object'">
+                    </mct-representation>
                </div>
+                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
+                     mct-device="mobile"
+                     ng-click="tree.toggle()">m</div>
            </div>
        </mct-split-pane>
    </div>
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -19,7 +19,7 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class='object-header'>
+<div class='object-header object-header-mobile'>
    <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">
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -19,12 +19,13 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<span ng-controller="ClickAwayController as createController">
-    <div class="s-menu-btn major create-btn" ng-click="createController.toggle()">
+<div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
+    <div class="s-menu major create-btn" ng-click="createController.toggle()">
+		<span class="ui-symbol icon type-icon">&#x2b;</span>
 		<span class="title-label">Create</span>
    </div>
    <div class="menu super-menu" ng-show="createController.isActive()">
        <mct-representation mct-object="domainObject" key="'create-menu'">
        </mct-representation>
    </div>
-</span>
+</div>
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -26,8 +26,14 @@
            <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
            <mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
        </div>
-        <div class='item-main abs lg'>
-            <span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">{{type.getGlyph()}}</span>
+        <div class='item-main abs'>
+            <div class='ui-symbol icon lg item-type'>
+                {{type.getGlyph()}}
+                <span
+                    class="ui-symbol l-icon-link" title="This object is a link"
+                    ng-show="location.isLink()"
+                    ></span>
+            </div>
            <div class='ui-symbol abs item-open'>}</div>
        </div>
        <div class='bottom-bar bar abs'>
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -153,6 +153,7 @@ define(
            $scope.$on("$destroy", function () {
                navigationService.removeListener(setNavigation);
            });
+
        }

        return BrowseController;
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -33,12 +33,10 @@ define(
         * @constructor
         * @memberof platform/commonUI/browse
         */
-        function PaneController($scope, agentService, $window) {
+        function BrowseTreeController($scope, agentService) {
            var self = this;
            this.agentService = agentService;
-
-            // Fast and cheap: if this has been opened in a new window, hide panes by default
-            this.state = !$window.opener;
+            this.state = true;

            /**
             * Callback to invoke when any selection occurs in the tree.
@@ -46,7 +44,7 @@ define(
             * to the tree representation.
             *
             * @property {Function} callback
-             * @memberof platform/commonUI/browse.PaneController#
+             * @memberof platform/commonUI/browse.BrowseTreeController#
             */
            this.callback = function () {
                // Note that, since this is a callback to pass, this is not
@@ -61,20 +59,20 @@ define(
        }

        /**
-         * Toggle the visibility of the pane.
+         * Toggle the visibility of the tree.
         */
-        PaneController.prototype.toggle = function () {
+        BrowseTreeController.prototype.toggle = function () {
            this.state = !this.state;
        };

        /**
-         * Get the desired visibility state of the pane.
+         * Get the desired visibility state of the tree.
         * @returns {boolean} true when visible
         */
-        PaneController.prototype.visible = function () {
+        BrowseTreeController.prototype.visible = function () {
            return this.state;
        };

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

--- a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -22,24 +22,22 @@
 /*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/

 define(
-    ["../src/PaneController"],
-    function (PaneController) {
+    ["../src/BrowseTreeController"],
+    function (BrowseTreeController) {
        'use strict';

-        describe("The PaneController", function () {
+        describe("The BrowseTreeController", function () {
            var mockScope,
                mockAgentService,
                mockDomainObjects,
-                mockWindow,
                controller;

            // We want to reinstantiate for each test case
            // because device state can influence constructor-time behavior
            function instantiateController() {
-                return new PaneController(
+                return new BrowseTreeController(
                    mockScope,
-                    mockAgentService,
-                    mockWindow
+                    mockAgentService
                );
            }

@@ -60,7 +58,6 @@ define(
                    "agentService",
                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
                );
-                mockWindow = jasmine.createSpyObj("$window", ["open"]);
            });

            it("is initially visible", function () {
--- a/platform/commonUI/browse/test/suite.json
+++ b/platform/commonUI/browse/test/suite.json
@@ -1,7 +1,7 @@
 [
    "BrowseController",
    "BrowseObjectController",
-    "PaneController",
+    "BrowseTreeController",
    "MenuArrowController",
    "creation/CreateAction",
    "creation/CreateActionProvider",
--- a/platform/commonUI/dialog/bundle.json
+++ b/platform/commonUI/dialog/bundle.json
@@ -1,5 +1,16 @@
 {
    "extensions": {
+        "constants": [
+            {
+                "key": "messageSeverity",
+                "value": {
+                    "ALERT": "alert",
+                    "ERROR": "error",
+                    "INFO": "info",
+                    "SUCCESS": "success"
+                }
+            }
+        ],
        "services": [
            {
                "key": "dialogService",
--- a/platform/commonUI/dialog/res/templates/message.html
+++ b/platform/commonUI/dialog/res/templates/message.html
@@ -1,32 +1,24 @@
-<div class="l-message"
-     ng-class="'message-severity-' + ngModel.severity">
+<div class="l-message message-severity-{{ngModel.dialog.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 class="title">{{ngModel.dialog.title}}</div>
+            <div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div>
        </div>
        <div class="message-body">
            <div class="message-action">
-                {{ngModel.actionText}}
+                {{ngModel.dialog.actionText}} message-severity-{{ngModel.dialog.severity}}
            </div>
            <mct-include key="'progress-bar'"
                         ng-model="ngModel"
-                         ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
+                         ng-hide="ngModel.dialog.progress === undefined"></mct-include>
        </div>
        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
+            <a ng-repeat="dialogAction in ngModel.dialog.actions"
               class="s-btn major"
-               ng-click="dialogOption.callback()">
-                {{dialogOption.label}}
+               ng-click="dialogAction.action()">
+                {{dialogAction.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-message-list.html
+++ b/platform/commonUI/dialog/res/templates/overlay-message-list.html
@@ -6,7 +6,13 @@
            </div>
        </div>
        <div class="abs message-body">
-            <mct-include ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'" key="'message'" ng-model="msg"></mct-include>
+            <mct-include ng-repeat="msg in ngModel.dialog.messages" key="'message'" ng-model="msg.ngModel"></mct-include>
+<!--            <ul>
+                <li ng-repeat="msg in ngModel.dialog.messages">
+                    &lt;!&ndash;Message: {{msg.title}}&ndash;&gt;
+
+                </li>
+            </ul>-->
        </div>
        <div class="abs bottom-bar">
            <a ng-repeat="dialogAction in ngModel.dialog.actions"
--- 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, typeClass) {
+        DialogService.prototype.getDialogResponse = function (key, model, resultGetter) {
            // We will return this result as a promise, because user
            // input is asynchronous.
            var deferred = this.$q.defer(),
@@ -90,7 +90,7 @@ define(
                this.overlay = this.overlayService.createOverlay(
                    key,
                    model,
-                    typeClass || "t-dialog"
+                    "t-dialog"
                );

                // Track that a dialog is already visible, to
@@ -174,11 +174,26 @@ define(
            }
        };

+        /**
+         * dialogModel: {
+         *     severity: string "error" | "info" | "alert",
+         *     title: string,
+         *     hint: string,
+         *     actionText: string,
+         *     progress: int,
+         *     progressText: string,
+         *     unknownProgress: boolean,
+         *     actions: [{
+         *         label: String,
+         *         action: function
+         *     }]
+         */
+
        /**
         * A user action that can be performed from a blocking dialog. These
         * actions will be rendered as buttons within a blocking dialog.
         *
-         * @typedef DialogOption
+         * @typedef DialogAction
         * @property {string} label a label to be displayed as the button
         * text for this action
         * @property {function} action a function to be called when the
@@ -187,14 +202,12 @@ define(

        /**
         * 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
+         * showBlockingMessage method
         *
         * @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} title the title to use for the dialog
         * @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.
@@ -207,13 +220,8 @@ define(
         * 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.
+         * @property {DialogAction[]} actions a list of actions that will
+         * be added to the dialog as buttons. These buttons are
         */

        /**
@@ -232,16 +240,49 @@ define(
                // will handle actual insertion into the DOM
                this.overlay = this.overlayService.createOverlay(
                    "overlay-blocking-message",
-                    dialogModel,
+                    { dialog: dialogModel },
                    "t-dialog-sm"
                );
-                // Track that a dialog is already visible, to
-                // avoid spawning multiple dialogs at once.
                this.dialogVisible = true;
                return true;
            } else {
+                //Could not show a dialog, so return indication of this to
+                //client code.
                return false;
            }
+
+        };
+
+        DialogService.prototype.showMessageList = function(dialogModel) {
+            var self = this;
+
+            // Cancel function; this will be passed in to the
+            // overlay-dialog template and associated with a
+            // Cancel or X button click
+            function cancel() {
+                //deferred.reject(); // Not sure what this does
+                self.dismiss();
+            }
+
+            if (this.canShowDialog(dialogModel)) {
+                // Add the overlay using the OverlayService, which
+                // will handle actual insertion into the DOM
+                this.overlay = this.overlayService.createOverlay(
+                    "overlay-message-list",
+                    {
+                        dialog: dialogModel,
+                        cancel: cancel
+                    },
+                    "t-dialog"
+                );
+                this.dialogVisible = true;
+                return true;
+            } else {
+                //Could not show a dialog, so return indication of this to
+                //client code.
+                return false;
+            }
+
        };

        return DialogService;
--- a/platform/commonUI/dialog/src/OverlayService.js
+++ b/platform/commonUI/dialog/src/OverlayService.js
@@ -71,9 +71,6 @@ 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, typeClass) {
            // Create a new scope for this overlay
@@ -90,10 +87,13 @@ define(
            // If no model is supplied, just fill in a default "cancel"
            overlayModel = overlayModel || { cancel: dismiss };

+            // If no typeClass is specified, set to default "t-dialog"
+            typeClass = typeClass || 't-dialog';
+
            // Populate the scope; will be passed directly to the template
            scope.overlay = overlayModel;
            scope.key = key;
-            scope.typeClass = typeClass || 't-dialog';
+            scope.typeClass = typeClass;

            // 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
@@ -121,17 +121,6 @@ define(
                );
            });

-            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/res/templates/edit-object.html
+++ b/platform/commonUI/edit/res/templates/edit-object.html
@@ -30,11 +30,12 @@
                         structure="toolbar.structure"
                         ng-model="toolbar.state">
            </mct-toolbar>
-            <mct-representation key="representation.selected.key"
-                                toolbar="toolbar"
-                                mct-object="representation.selected.key && domainObject"
-                                class="holder abs object-holder work-area">
-            </mct-representation>
+            <div class='holder abs object-holder work-area'>
+                <mct-representation key="representation.selected.key"
+                                    toolbar="toolbar"
+                                    mct-object="representation.selected.key && domainObject">
+                </mct-representation>
+            </div>
        </div>
        <mct-splitter></mct-splitter>
        <div
--- a/platform/commonUI/formats/bundle.json
+++ b/platform/commonUI/formats/bundle.json
@@ -1,26 +0,0 @@
-{
-    "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
@@ -1,114 +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.
- *****************************************************************************/
-/*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
@@ -1,63 +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.
- *****************************************************************************/
-/*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
@@ -1,68 +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.
- *****************************************************************************/
-/*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
@@ -1,56 +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.
- *****************************************************************************/
-/*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
@@ -1,4 +0,0 @@
-[
-    "FormatProvider",
-    "UTCTimeFormat"
-]
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -8,11 +8,6 @@
                "key": "urlService",
                "implementation": "services/UrlService.js",
                "depends": [ "$location" ]
-            },
-            {
-                "key": "popupService",
-                "implementation": "services/PopupService.js",
-                "depends": [ "$document", "$window" ]
            }
        ],
        "runs": [
@@ -58,21 +53,6 @@
            }
        ],
        "controllers": [
-            {
-                "key": "TimeRangeController",
-                "implementation": "controllers/TimeRangeController.js",
-                "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",
@@ -120,16 +100,6 @@
                "key": "SelectorController",
                "implementation": "controllers/SelectorController.js",
                "depends": [ "objectService", "$scope" ]
-            },
-            {
-                "key": "ObjectInspectorController",
-                "implementation": "controllers/ObjectInspectorController.js",
-                "depends": [ "$scope", "objectService" ]
-            },
-            {
-                "key": "BannerController",
-                "implementation": "controllers/BannerController.js",
-                "depends": ["$scope", "notificationService", "dialogService"]
            }
        ],
        "directives": [
@@ -143,21 +113,11 @@
                "implementation": "directives/MCTDrag.js",
                "depends": [ "$document" ]
            },
-            {
-                "key": "mctClickElsewhere",
-                "implementation": "directives/MCTClickElsewhere.js",
-                "depends": [ "$document" ]
-            },
            {
                "key": "mctResize",
                "implementation": "directives/MCTResize.js",
                "depends": [ "$timeout" ]
            },
-            {
-                "key": "mctPopup",
-                "implementation": "directives/MCTPopup.js",
-                "depends": [ "$compile", "popupService" ]
-            },
            {
                "key": "mctScrollX",
                "implementation": "directives/MCTScroll.js",
@@ -255,24 +215,12 @@
                "key": "switcher",
                "templateUrl": "templates/controls/switcher.html",
                "uses": [ "view" ]
-            },
-            {
-                "key": "object-inspector",
-                "templateUrl": "templates/object-inspector.html"
            }
        ],
        "controls": [
            {
                "key": "selector",
                "templateUrl": "templates/controls/selector.html"
-            },
-            {
-                "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,59 +1,19 @@
 {
 	"metadata": {
-		"name": "WTD Symbols",
-		"lastOpened": 1446490786311,
-		"created": 1446489891263
+		"name": "WTD Symbols v2.3",
+		"lastOpened": 1444267493342,
+		"created": 1444266013303
 	},
 	"iconSets": [
 		{
 			"selection": [
-				{
-					"order": 113,
-					"id": 92,
-					"prevSize": 32,
-					"code": 58901,
-					"name": "icon-crosshair",
-					"tempChar": ""
-				},
-				{
-					"order": 110,
-					"id": 91,
-					"prevSize": 32,
-					"code": 58899,
-					"name": "icon-collapse-pane-left",
-					"tempChar": ""
-				},
-				{
-					"order": 111,
-					"id": 90,
-					"prevSize": 32,
-					"code": 58900,
-					"name": "icon-collapse-pane-right",
-					"tempChar": ""
-				},
-				{
-					"order": 109,
-					"id": 89,
-					"prevSize": 32,
-					"code": 58898,
-					"name": "icon-save",
-					"tempChar": ""
-				},
-				{
-					"order": 108,
-					"id": 88,
-					"prevSize": 32,
-					"code": 58897,
-					"name": "icon-dataset",
-					"tempChar": ""
-				},
 				{
 					"order": 90,
 					"id": 87,
 					"prevSize": 32,
 					"code": 58896,
 					"name": "icon-bell",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 91,
@@ -61,7 +21,7 @@
 					"prevSize": 32,
 					"code": 58889,
 					"name": "icon-hourglass",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 92,
@@ -74,7 +34,7 @@
 						58890
 					],
 					"name": "icon-info-v15",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 93,
@@ -82,7 +42,7 @@
 					"prevSize": 32,
 					"code": 58887,
 					"name": "icon-x-in-circle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 94,
@@ -90,7 +50,7 @@
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 95,
@@ -98,7 +58,7 @@
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 96,
@@ -106,7 +66,7 @@
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 97,
@@ -114,7 +74,7 @@
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 98,
@@ -122,7 +82,7 @@
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 99,
@@ -130,7 +90,7 @@
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 100,
@@ -138,7 +98,7 @@
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 101,
@@ -146,7 +106,7 @@
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 102,
@@ -154,7 +114,7 @@
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 103,
@@ -162,7 +122,7 @@
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 104,
@@ -170,7 +130,7 @@
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 105,
@@ -178,7 +138,7 @@
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 106,
@@ -186,7 +146,7 @@
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -194,7 +154,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -202,7 +162,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -210,7 +170,7 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 87,
@@ -218,7 +178,7 @@
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -226,7 +186,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -234,7 +194,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -242,7 +202,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -250,7 +210,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -258,7 +218,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -266,7 +226,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -274,7 +234,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -282,7 +242,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -290,7 +250,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -298,7 +258,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -306,7 +266,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -314,7 +274,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -322,7 +282,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -330,7 +290,7 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
@@ -338,7 +298,7 @@
 					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -346,7 +306,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -354,7 +314,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -362,7 +322,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -370,7 +330,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -378,7 +338,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -386,7 +346,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -394,7 +354,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -402,7 +362,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -410,7 +370,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -418,7 +378,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -426,7 +386,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -434,7 +394,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -442,7 +402,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -450,7 +410,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -458,7 +418,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -466,7 +426,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -474,7 +434,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -482,7 +442,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -490,7 +450,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -498,7 +458,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -506,7 +466,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -514,7 +474,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -522,7 +482,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -530,7 +490,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -538,7 +498,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -546,7 +506,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -554,7 +514,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -562,7 +522,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -570,7 +530,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -578,7 +538,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -586,7 +546,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -594,7 +554,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -602,7 +562,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -610,7 +570,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -618,7 +578,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -626,7 +586,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -634,7 +594,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -642,7 +602,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -650,7 +610,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -658,7 +618,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -666,7 +626,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -674,7 +634,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -682,7 +642,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -690,7 +650,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -698,7 +658,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -706,7 +666,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -721,121 +681,6 @@
 			"height": 1024,
 			"prevSize": 32,
 			"icons": [
-				{
-					"id": 92,
-					"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"
-					],
-					"attrs": [
-						{
-							"fill": "rgb(0, 0, 0)"
-						}
-					],
-					"isMulticolor": false,
-					"grid": 0,
-					"tags": [
-						"icon-crosshair"
-					],
-					"colorPermutations": {
-						"125525525516161751": [
-							0
-						]
-					}
-				},
-				{
-					"id": 91,
-					"paths": [
-						"M256 0h-256v1024h256c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192z",
-						"M512 320l512 320v-640z"
-					],
-					"attrs": [
-						{
-							"fill": "rgb(0, 0, 0)"
-						},
-						{
-							"fill": "rgb(0, 0, 0)"
-						}
-					],
-					"isMulticolor": false,
-					"grid": 0,
-					"tags": [
-						"icon-collapse-pane-left"
-					],
-					"colorPermutations": {
-						"125525525516161751": [
-							0,
-							0
-						]
-					}
-				},
-				{
-					"id": 90,
-					"paths": [
-						"M768 0h256v1024h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192z",
-						"M512 320l-512 320v-640z"
-					],
-					"attrs": [
-						{
-							"fill": "rgb(0, 0, 0)"
-						},
-						{
-							"fill": "rgb(0, 0, 0)"
-						}
-					],
-					"isMulticolor": false,
-					"grid": 0,
-					"tags": [
-						"icon-collapse-pane-right"
-					],
-					"colorPermutations": {
-						"125525525516161751": [
-							0,
-							0
-						]
-					}
-				},
-				{
-					"id": 89,
-					"paths": [
-						"M192.2 576c-0.2 0-0.2 0 0 0l-0.2 448h640v-447.8c0 0 0 0-0.2-0.2h-639.6z",
-						"M978.8 210.8l-165.4-165.4c-25-25-74.2-45.4-109.4-45.4h-576c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128v-448c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64v448c70.4 0 128-57.6 128-128v-576c0-35.2-20.4-84.4-45.2-109.2zM704 256c0 35.2-28.8 64-64 64h-448c-35.2 0-64-28.8-64-64v-192h320v192h128v-192h128v192z"
-					],
-					"attrs": [
-						{
-							"fill": "rgb(0, 0, 0)"
-						},
-						{
-							"fill": "rgb(0, 0, 0)"
-						}
-					],
-					"isMulticolor": false,
-					"grid": 0,
-					"tags": [
-						"icon-save-v2"
-					],
-					"colorPermutations": {
-						"125525525516161751": [
-							0,
-							0
-						]
-					}
-				},
-				{
-					"id": 88,
-					"paths": [
-						"M896 192h-320c-16.4-16.4-96.8-96.8-109.2-109.2l-37.4-37.4c-25-25-74.2-45.4-109.4-45.4h-256c-35.2 0-64 28.8-64 64v384c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v-128c0-70.4-57.6-128-128-128z",
-						"M896 448h-768c-70.4 0-128 57.6-128 128v320c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-320c0-70.4-57.6-128-128-128zM320 896h-128v-320h128v320zM576 896h-128v-320h128v320zM832 896h-128v-320h128v320z"
-					],
-					"attrs": [],
-					"isMulticolor": false,
-					"grid": 0,
-					"tags": [
-						"icon-dataset"
-					],
-					"colorPermutations": {
-						"125525525516161751": []
-					}
-				},
 				{
 					"id": 87,
 					"paths": [
--- 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
@@ -88,10 +88,5 @@
 <glyph unicode="&#xe609;" glyph-name="icon-hourglass" d="M1024 960h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 576c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 448c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
 <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe610;" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
-<glyph unicode="&#xe611;" glyph-name="icon-dataset" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 64h-128v320h128v-320zM576 64h-128v320h128v-320zM832 64h-128v320h128v-320z" />
-<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="&#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/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -42,14 +42,9 @@ $ueFooterH: 25px;
 $ueColMargin: 1.5%;
 $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
-$ueBrowseLeftPaneTreeW: 25%;
-$ueBrowseRightPaneInspectW: 20%;
-$ueCollapsedPaneEdgeM: 20px;
-$uePaneMiniTabH: $ueTopBarH;
-$uePaneMiniTabW: 9px;
+$ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (33px, 20px, 20px);
 // Overlay
 $ovrTopBarH: 45px;
 $ovrFooterH: 24px;
@@ -61,8 +56,7 @@ $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;
 // Tree
 $treeVCW: 10px;
-$treeTypeIconH: 1.4em; // was 16px
-$treeTypeIconHPx: 16px;
+$treeTypeIconH: 16px;
 $treeTypeIconW: 20px;
 $treeContextTriggerW: 20px;
 // Tabular
@@ -111,8 +105,3 @@ $dirImgs: $dirCommonRes + 'images/';

 /************************** TIMINGS */
 $controlFadeMs: 100ms;
-
-/************************** LIMITS */
-$glyphLimit: '\e603';
-$glyphLimitUpr: '\0000eb';
-$glyphLimitLwr: '\0000ee';
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -34,13 +34,17 @@
 	font-style: normal;
 }

+.ui-symbol {
+	font-family: 'symbolsfont';
+}
+
 /************************** HTML ENTITIES */
 a {
-	color: $colorA;
+	color: #ccc;
 	cursor: pointer;
 	text-decoration: none;
 	&:hover {
-		color: $colorAHov;
+		color: #fff;
 	}
 }

@@ -51,7 +55,7 @@ body, html {
 	color: $colorBodyFg;
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-size: 100%;
-	font-weight: 200;
+	//font-weight: 500;
 	height: 100%;
 	width: 100%;
 	overflow: hidden;
@@ -121,14 +125,6 @@ mct-container {
 	text-align: center;
 }

-.scrolling {
-	overflow: auto;
-}
-
-.vscroll {
-	overflow-y: auto;
-}
-
 .no-margin {
 	margin: 0;
 }
--- a/platform/commonUI/general/res/sass/_hide-non-functional.scss
+++ b/platform/commonUI/general/res/sass/_hide-non-functional.scss
@@ -19,8 +19,18 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/*global define,Promise*/
+// Styles to temporarily hide non-functional elements

-define({
-    START_TIME: Date.now() - 24 * 60 * 60 * 1000 // Now minus a day.
-});
+/******************************** BROWSE */
+.browse-mode {
+	.browse {
+		&.top-bar {
+			display: none;
+		}
+	}
+
+	.browse-area.holder {
+		// When .browse.top-bar is hidden, set the top of the browse-area holder
+		top: $bodyMargin;
+	}
+}
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -29,14 +29,8 @@
 }

 .ui-symbol {
-    font-family: 'symbolsfont';
-	&.type-icon {
-		color: $colorObjHdrIc;
-	}
 	&.icon {
 		color: $colorKey;
-        //position: relative;
-        font-size: inherit;
 		&.alert {
 			color: $colorAlert;
 			&:hover {
@@ -47,9 +41,6 @@
 			font-size: 1.65em;
 		}
 	}
-	&.icon-calendar:after {
-		content: "\e605";
-	}
 }

 .bar .ui-symbol {
@@ -61,7 +52,7 @@
 	display: inline-block;
 }

-.s-menu-btn .invoke-menu,
+.s-menu .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }
@@ -72,32 +63,18 @@
 	position: absolute;
 }

+//.tree-item .type-icon {
+//	font-size: 16px; // 16px is crisp size
+//}
+
+.l-icon-link:before {
+	content: "\f4";
+}
+
 .l-icon-alert {
 	display: none !important; // Remove this when alerts are enabled
 	&:before {
 		color: $colorAlert;
 		content: "!";
 	}
-}
-
-// NEW!!
-.t-item-icon {
-	// Used in grid-item.html, tree-item, inspector location, more?
-	@extend .ui-symbol;
-    @extend .icon;
-    display: inline-block;
-    line-height: normal; // This is Ok for the symbolsfont
-    position: relative;
-    &.l-icon-link {
-        &:before {
-            color: $colorIconLink;
-            content: "\f4";
-            height: auto; width: auto;
-            position: absolute;
-            left: 0; top: 0; right: 0; bottom: 10%;
-            @include transform-origin(bottom, left);
-            @include transform(scale(0.3));
-            z-index: 2;
-        }
-    }
 }
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@@ -1,107 +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.
- *****************************************************************************/
-/* Styles for the Inspector pane */
-
-.l-inspect,
-.l-inspect table tr td {
-    font-size: 0.7rem;
-}
-
-.l-inspect {
-    @extend .abs;
-    background: $colorInspectorBg;
-    color: $colorInspectorFg;
-    line-height: 140%;
-    .pane-header {
-        color: pushBack($colorInspectorFg, 20%);
-        font-size: 0.8rem;
-        &:before {
-            color: pushBack($colorInspectorFg, 10%);
-            content:'\e615'; // e615 Crosshair symbol
-            display: inline;
-            font-family: symbolsfont;
-            margin-right: $interiorMargin;
-            vertical-align: bottom;
-        }
-    }
-
-    ul li,
-    em {
-        display: block;
-        position: relative;
-    }
-
-    ul li {
-        margin-bottom: $interiorMarginLg;
-    }
-    
-    em {
-        @include border-radius($basicCr);
-        background-color: $colorInspectorSectionHeaderBg;
-        color: $colorInspectorSectionHeaderFg;
-        margin-bottom: $interiorMargin;
-        padding: $formTBPad $formLRPad;
-        text-transform: uppercase;
-    }
-
-    .inspector-properties {
-        &:not(.first) {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
-        padding: $interiorMarginSm 0;
-        .label {
-            color: $colorInspectorPropName;
-            text-transform: uppercase;
-        }
-        .value {
-            color: $colorInspectorPropVal;
-            word-break: break-all;
-        }
-    }
-
-    .inspector-location {
-        //line-height: 180%;
-        .location-item {
-            cursor: pointer;
-            display: inline-block;
-            position: relative;
-            padding: 2px 4px;
-            &:hover {
-                background: $colorItemTreeHoverBg;
-                color: $colorItemTreeHoverFg;
-                .icon {
-                    color: $colorItemTreeIconHover;
-                }
-            }
-        }
-        &:not(.last) .t-object-label .t-title-label:after {
-            color: pushBack($colorInspectorFg, 15%);
-            content: '\3e';
-            display: inline-block;
-            font-family: symbolsfont;
-            font-size: 8px;
-            line-height: inherit;
-            margin-left: $interiorMarginSm;
-            width: 4px;
-        }
-    }
-}
--- a/platform/commonUI/general/res/sass/_limits.scss
+++ b/platform/commonUI/general/res/sass/_limits.scss
@@ -1,39 +1,26 @@
-@mixin limitGlyph($iconColor, $glyph: $glyphLimit) {
-    &:before {
-        color: $iconColor;
-        content: $glyph;
-        font-family: symbolsfont;
-        font-size: 0.8em;
-        display: inline;
-        margin-right: $interiorMarginSm;
-    }
-
+@mixin limit($bg, $ic, $glyph) {
+	background: $bg !important;
+	//color: $fg !important;
+	&:before {
+		//@include pulse(1000ms);
+		color: $ic;
+		content: $glyph;
+	}
 }

-.s-limit-red { background: $colorLimitRedBg !important; }
-.s-limit-yellow { background: $colorLimitYellowBg !important; }
-
-// Handle limit when applied to a tr
-tr[class*="s-limit"] {
-    &.s-limit-red td:first-child {
-        @include limitGlyph($colorLimitRedIc);
-    }
-    &.s-limit-yellow td:first-child {
-        @include limitGlyph($colorLimitYellowIc);
-    }
-    &.s-limit-upr td:first-child:before { content:$glyphLimitUpr; }
-    &.s-limit-lwr td:first-child:before { content:$glyphLimitLwr; }
+[class*="s-limit"] {
+	//white-space: nowrap;
+	&:before {
+		display: inline-block;
+		font-family: symbolsfont;
+		font-size: 0.75em;
+		font-style: normal !important;
+		margin-right: $interiorMarginSm;
+		vertical-align: middle;
+	}
 }

-// Handle limit when applied directly to a non-tr element
-// Assume this is applied to the element that displays the limit value
-:not(tr)[class*="s-limit"] {
-    &.s-limit-red {
-        @include limitGlyph($colorLimitRedIc);
-    }
-    &.s-limit-yellow {
-        @include limitGlyph($colorLimitYellowIc);
-    }
-    &.s-limit-upr:before { content:$glyphLimitUpr; }
-    &.s-limit-lwr:before { content:$glyphLimitLwr; }
-}
+.s-limit-upr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000eb"); };
+.s-limit-upr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ed"); };
+.s-limit-lwr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ec"); };
+.s-limit-lwr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000ee"); };
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -29,7 +29,7 @@
@import "helpers/bubbles";
@import "helpers/splitter";
@import "helpers/wait-spinner";
-@import "inspector";
+@import "properties";

 /********************************* CONTROLS */
@import "controls/breadcrumb";
@@ -69,6 +69,7 @@
@import "lists/tabular";
@import "plots/plots-main";
@import "iframe";
+@import "hide-non-functional";
@import "views";
@import "items/item";
@import "mobile/item";
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -41,41 +41,36 @@
    width: $d;
 }

-@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
-    // Multiple $props must be in parans like this: (left, right)
-    @if $dur == 0 {
+@mixin trans-prop-nice($props, $t: 500ms) {
+    @if $t == 0 {
        @include transition-property(none);
    } @else {
        @include transition-property($props);
-        @include transition-duration($dur);
+        @include transition-duration($t);
        @include transition-timing-function(ease-in-out);
-        @include transition-delay($delay);
    }
 }

-@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
-    @if $dur == 0 {
+@mixin trans-prop-nice-fade($t: 0.5s) {
+    @if $t == 0 {
        @include transition-property(none);
    } @else {
-        @include transition-property(opacity, background-color, border-color, color);
-        @include transition-duration($dur);
+        @include transition-property(visibility, opacity, background-color, border-color);
+        @include transition-duration($t);
        @include transition-timing-function(ease-in-out);
-        @include transition-delay($delay);
    }
 }

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

-@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
+@mixin trans-prop-nice-resize-w($t: 0.5s) {
    @include transition-property(width, left, right);
-    @include transition-duration($dur);
+    @include transition-duration($t);
    @include transition-timing-function(ease-in-out);
-    @include transition-delay($delay);
 }

@mixin triangle-right($size, $color) {
@@ -178,28 +173,31 @@
 }

@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-    //&:before {
-    //@include trans-prop-nice("border-color", 25ms);
-    content: '';
-    display: block;
-    //height: auto;
-    pointer-events: none;
-    position: absolute;
-    z-index: 2;
+    &:before {
+        @include trans-prop-nice("border-color", 0.75s);
+        content: '';
+        display: block;
+        height: auto;
+        pointer-events: none;
+        position: absolute;
+        z-index: 2;

-    @if $direction == "horizontal" {
-        border-top: $w $style darken($b, 15%);
-        top: 2px;
-        left: 5px;
-        right: 5px;
-        height: 1px;
+        @if $direction == "horizontal" {
+            border-top: $w $style darken($b, 15%);
+            top: 2px;
+            left: 5px;
+            right: 5px;

-    } @else if $direction == "vertical" {
-        border-left: $w $style darken($b, 15%);
-        left: 2px;
-        bottom: 5px;
-        top: 5px;
-        width: 1px;
+        } @else if $direction == "vertical" {
+            border-left: $w $style darken($b, 15%);
+            left: 2px;
+            bottom: 5px;
+            top: 5px;
+        }
+    }
+    &:not(.disabled):hover:before {
+        @include trans-prop-nice("border-color", 25ms);
+        border-color: $colorGrippyInteriorHover;
    }
 }

@@ -275,12 +273,6 @@
 	@return percentage($d);
 }

-@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
-    // Space to either side of the handle
-    @return ($splitterD - $splitterHandleD) * 0.5;
-}
-
-
 /*********************************************** CONTROLS, FORM ELEMENTS */

@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
@@ -372,7 +364,9 @@
    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
    //position: relative;
    top: 50%;
-    @include transform(translateY(-50%));
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
 }

@mixin verticalCenterBlock($holderH, $itemH) {
@@ -397,8 +391,22 @@
    overflow-y: $showBar;
 }

+@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
+    display: block;
+    position: absolute;
+    -webkit-animation: rotation .6s infinite linear;
+    -moz-animation: rotation .6s infinite linear;
+    -o-animation: rotation .6s infinite linear;
+    animation: rotation .6s infinite linear;
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: $b;
+    border-radius: 100%;
+}
+
@mixin test($c: #ffcc00, $a: 0.2) {
-    background-color: rgba($c, $a) !important;
+    background-color: rgba($c, $a);
 }

@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
--- a/platform/commonUI/notification/src/NotificationIndicator.js
+++ b/platform/commonUI/notification/src/NotificationIndicator.js
@@ -19,17 +19,17 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/*global define,window*/
+/* Classes to be used for lists of properties and values */

-define(
-    [],
-    function () {
-        "use strict";
-
-        function NotificationIndicator() {}
-
-        NotificationIndicator.template = 'notificationIndicatorTemplate';
-
-        return NotificationIndicator;
+.properties {
+    .s-row {
+        border-top: 1px solid $colorInteriorBorder;
+        font-size: 0.8em;
+        &:first-child {
+            border: none;
+        }
+        .s-value {
+            color: #fff;
+        }
    }
-);
+}
--- a/platform/commonUI/general/res/sass/_views.scss
+++ b/platform/commonUI/general/res/sass/_views.scss
@@ -10,6 +10,9 @@
 	&.fixed {
 		font-size: 0.8em;
 	}
+	&.scrolling {
+		overflow: auto;
+	}
 	.controls,
 	label,
 	.inline-block {
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -22,17 +22,13 @@
 $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;

-.s-btn,
-.s-icon-btn {
+.s-btn {
+    @include box-sizing(border-box);
    @include user-select(none);
    cursor: pointer;
    text-decoration: none;
    height: $btnStdH;
    line-height: $btnStdH;
-}
-
-.s-btn {
-    @include box-sizing(border-box);
    padding: 0 $pad;
    font-size: 0.7rem;

@@ -93,155 +89,6 @@ $pad: $interiorMargin * $baseRatio;
    }
 }

-.s-icon-btn {
-    @extend .ui-symbol;
-    color: $colorBtnIcon;
-    &:hover {
-        color: lighten($colorBtnIcon, $ltGamma);
-    }
-}
-
-.mini-tab {
-    // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    //@extend .ui-symbol;
-    @include desktop {
-        //@include test(green);
-        $iconH: $uePaneMiniTabH;
-        $iconW: $uePaneMiniTabW;
-        $iconInnerLR: 0;
-        $arwD: 9px;
-        $arwOffsetX: 0px;
-        $arwAnimOffsetX: 2px + $iconInnerLR;
-        $cBg: pullForward($colorBodyBg, 15%);
-        $cFg: $cBg;
-
-
-        @include border-radius($basicCr);
-        //@include boxShdw($shdwBtns);
-        @include box-sizing(border-box);
-        @include trans-prop-nice((color, background-color), 100ms);
-        color: $cFg;
-        cursor: pointer;
-        font-family: symbolsfont;
-        font-size: $arwD;
-        display: block;
-        position: absolute;
-        line-height: $iconH;
-        height: $iconH; width: $iconW;
-        text-align: center;
-
-        &:hover {
-            //background-color: $cBg;
-            color: $colorKey; //pullForward($cFg, $ltGamma);
-        }
-
-        &.collapsed {
-            // State when the pane this element controls has been collapsed
-            @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
-            &:before { opacity: 0; }
-            &:after { opacity: 1; }
-            &:hover {
-                &:before { opacity: 1; }
-                &:after { opacity: 0; }
-            }
-
-        }
-
-        &:before,
-        &:after {
-            //@include test();
-            @include trans-prop-nice((left, right, opacity), 250ms);
-            display: block;
-            height: 100%;
-            position: absolute;
-        }
-
-        &:before {
-            // Always the arrow icon
-            //@include test(green);
-            //font-size: $arwD;
-            width: $arwD;
-        }
-        &:after {
-            // Always icon; content is set in _layout.scss
-            width: 100%;
-            text-align: center;
-            opacity: 0;
-        }
-
-        &.anchor-left {
-            // |<
-            text-align: right;
-            &:before {
-                content:'\3c'; // Collapse left icon e613
-                right: $iconInnerLR;
-            }
-            //&:hover:before { right: $arwAnimOffsetX; }
-            &.collapsed {
-                @include border-left-radius(0);
-                text-align: left;
-                &:before {
-                    content:'\3e';
-                    left: $iconInnerLR;
-                }
-                &:hover:before { left: $arwAnimOffsetX; }
-            }
-        }
-        &.anchor-right {
-            // >|
-            text-align: left;
-            &:before {
-                content:'\3e'; // Collapse right icon e614
-                left: $iconInnerLR;
-            }
-            //&:hover:before { left: $arwAnimOffsetX; }
-            &.collapsed {
-                @include border-right-radius(0);
-                &:before {
-                    text-align: right;
-                    content:'\3c';
-                    right: $iconInnerLR;
-                }
-                &:hover:before { right: $arwAnimOffsetX; }
-            }
-        }
-    }
-}
-
-.mini-tab-icon {
-    // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    //@extend .ui-symbol;
-    @include desktop {
-        $d: $uePaneMiniTabW;
-        //@include trans-prop-nice(transform, 150ms);
-        color: pullForward($colorBodyBg, 15%);
-        cursor: pointer;
-        display: block;
-        font-family: symbolsfont;
-        font-size: $d;
-        position: absolute;
-        height: $d; width: $d;
-        line-height: $d;
-        overflow: hidden;
-        word-break: break-all;
-
-        &:before,
-        &:after {
-            position: absolute;
-            display: inherit;
-        }
-
-        &:before {
-            content: '\78'; // X icon
-        }
-
-        &:hover {
-            color: $colorKey;
-            //@include transform(scale(1.2));
-        }
-    }
-}
-
 .l-btn-set {
    // Buttons that have a very tight conceptual grouping - no internal space between them.
    // Structure: .btn-set > mct-representation class=first|last > .s-btn
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -177,7 +177,7 @@ label.checkbox.custom {
 	}
 }

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

@@ -221,7 +221,7 @@ label.checkbox.custom {

 	.l-elem-wrapper {
 		//@include test(#66f, 0.2);
-        @include justify-content(flex-start);
+		@include webkitProp(justify-content, flex-start);
 		mct-representation {
 			// Holds the context-available item
 			// Must have min-width to make flex work properly
@@ -349,153 +349,49 @@ label.checkbox.custom {

 .slider {
 	$knobH: 100%; //14px;
+	$knobW: 12px;
+	$slotH: 50%;
 	.slot {
 		//		@include border-radius($basicCr * .75);
-		//@include sliderTrack();
+		@include sliderTrack();
+		height: $slotH;
 		width: auto;
 		position: absolute;
-		top: 0;
+		top: ($knobH - $slotH) / 2;
 		right: 0;
-		bottom: 0;
+		bottom: auto;
 		left: 0;
 	}
 	.knob {
-		@include trans-prop-nice-fade(.25s);
-		background-color: $sliderColorKnob;
-		&:hover {
-			background-color: $sliderColorKnobHov;
-		}
+		@include btnSubtle();
+		@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
+		cursor: ew-resize;
 		position: absolute;
 		height: $knobH;
-		width: $sliderKnobW;
+		width: $knobW;
 		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;
+		&:before {
+			top: 1px;
+			bottom: 3px;
+			left: ($knobW / 2) - 1;
+		}
+
 	}
 	.range {
-		@include trans-prop-nice-fade(.25s);
-		background-color: $sliderColorRange;
+		background: rgba($colorKey, 0.6);
 		cursor: ew-resize;
 		position: absolute;
-		top: 0; //$tbOffset;
+		top: 0;
 		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;
-	}
-}
-
-/******************************************************** 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;
-				}
-			}
+			background: rgba($colorKey, 0.7);
 		}
 	}
 }
--- a/platform/commonUI/general/res/sass/controls/_lists.scss
+++ b/platform/commonUI/general/res/sass/controls/_lists.scss
@@ -32,7 +32,7 @@
 .l-tree-item-flat-list {
 	// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
 	.tree-item {
-		.t-object-label {
+		.label {
 			left: $interiorMargin !important;
 		}
 	}
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -20,7 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /******************************************************** MENU BUTTONS */
-.s-menu-btn {
+.s-menu {
 	// Formerly .btn-menu
 	@extend .s-btn;
 	span.l-click-area {
@@ -43,11 +43,6 @@
 	}

 	&.create-btn {
-		&:before {
-			content:'\2b';
-			display: inline;
-			font-family: symbolsfont;
-		}
 		.title-label {
 			font-size: 1rem;
 		}
@@ -67,190 +62,184 @@

 /******************************************************** MENUS THEMSELVES */
 .menu-element {
+	$bg: $colorMenuBg;
+	$fg: $colorMenuFg;
+	$ic: $colorMenuIc;
 	cursor: pointer;
 	position: relative;
-}
-
-.s-menu {
-	@include border-radius($basicCr);
-	@include containerSubtle($colorMenuBg, $colorMenuFg);
-	@include boxShdw($shdwMenu);
-	@include txtShdw($shdwMenuText);
-	padding: $interiorMarginSm 0;
-}
-
-.menu {
-	@extend .s-menu;
-	display: block;
-	position: absolute;
-	z-index: 10;
-	ul {
-		@include menuUlReset();
-		li {
-			@include box-sizing(border-box);
-			border-top: 1px solid pullForward($colorMenuBg, 10%);
-			color: pullForward($colorMenuBg, 60%);
-			line-height: $menuLineH;
-			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-			position: relative;
-			white-space: nowrap;
-			&:first-child {
-				border: none;
+	.menu {
+		@include border-radius($basicCr);
+		@include containerSubtle($bg, $fg);
+		@include boxShdw($shdwMenu);
+		@include txtShdw($shdwMenuText);
+		display: block; // set to block via jQuery
+		padding: $interiorMarginSm 0;
+		position: absolute;
+		z-index: 10;
+		ul {
+			@include menuUlReset();
+			li {
+				@include box-sizing(border-box);
+				border-top: 1px solid lighten($bg, 20%);
+				color: pullForward($bg, 60%);
+				line-height: $menuLineH;
+				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+				position: relative;
+				white-space: nowrap;
+				&:first-child {
+					border: none;
+				}
+				&:hover {
+					background: $colorMenuHovBg;
+					color: $colorMenuHovFg;
+					.icon {
+						color: $colorMenuHovIc;
+					}
+				}
+				.type-icon {
+					left: $interiorMargin * 2;
+				}
 			}
-			&:hover {
-				background: $colorMenuHovBg;
-				color: $colorMenuHovFg;
-				.icon {
-					color: $colorMenuHovIc;
+		}
+	}
+
+	.menu,
+	.context-menu,
+	.super-menu {
+		pointer-events: auto;
+		ul li {
+			//padding-left: 25px;
+			a {
+				color: $fg;
+			}
+			.icon {
+				color: $ic;
+			}
+			.type-icon {
+				left: $interiorMargin;
+			}
+			&:hover .icon {
+				//color: lighten($ic, 5%);
+			}
+		}
+	}
+
+	.checkbox-menu {
+		// Used in search dropdown in tree
+		@extend .context-menu;
+		ul li {
+			padding-left: 50px;
+			.checkbox {
+				$d: 0.7rem;
+				position: absolute;
+				left: $interiorMargin;
+				top: ($menuLineH - $d) / 1.5;
+				em {
+					height: $d;
+					width: $d;
+					&:before {
+						font-size: 7px !important;// $d/2;
+						height: $d;
+						width: $d;
+						line-height: $d;
+					}
 				}
 			}
 			.type-icon {
-				left: $interiorMargin * 2;
+				left: 25px;
 			}
 		}
 	}
-}

-.menu,
-.context-menu,
-.super-menu {
-	pointer-events: auto;
-	ul li {
-		//padding-left: 25px;
-		a {
-			color: $colorMenuFg;
+	.super-menu {
+		$w: 500px;
+		$h: $w - 20;
+		$plw: 50%;
+		$prw: 50%;
+		display: block;
+		width: $w;
+		height: $h;
+		.contents {
+			@include absPosDefault($interiorMargin);
 		}
-		.icon {
-			color: $colorMenuIc;
-		}
-		.type-icon {
-			left: $interiorMargin;
-		}
-		&:hover .icon {
-			//color: lighten($colorMenuIc, 5%);
-		}
-	}
-}
-
-.checkbox-menu {
-	// Used in search dropdown in tree
-	@extend .context-menu;
-	ul li {
-		padding-left: 50px;
-		.checkbox {
-			$d: 0.7rem;
-			position: absolute;
-			left: $interiorMargin;
-			top: ($menuLineH - $d) / 1.5;
-			em {
-				height: $d;
-				width: $d;
-				&:before {
-					font-size: 7px !important;// $d/2;
-					height: $d;
-					width: $d;
-					line-height: $d;
-				}
-			}
-		}
-		.type-icon {
-			left: 25px;
-		}
-	}
-}
-
-.super-menu {
-	$w: 500px;
-	$h: $w - 20;
-	$plw: 50%;
-	$prw: 50%;
-	display: block;
-	width: $w;
-	height: $h;
-	.contents {
-		@include absPosDefault($interiorMargin);
-	}
-	.pane {
-		@include box-sizing(border-box);
-		&.left {
-			//@include test();
-			border-right: 1px solid pullForward($colorMenuBg, 10%);
-			left: 0;
-			padding-right: $interiorMargin;
-			right: auto;
-			width: $plw;
-			overflow-x: hidden;
-			overflow-y: auto;
-			ul {
-				li {
-					@include border-radius($controlCr);
-					padding-left: 30px;
-					border-top: none;
-				}
-			}
-		}
-		&.right {
-			//@include test(red);
-			left: auto;
-			right: 0;
-			padding: $interiorMargin * 5;
-			width: $prw;
-		}
-	}
-	.menu-item-description {
-		.desc-area {
-			&.icon {
-				$h: 150px;
-				color: $colorCreateMenuLgIcon;
-				position: relative;
-				font-size: 8em;
+		.pane {
+			@include box-sizing(border-box);
+			&.left {
+				//@include test();
+				border-right: 1px solid pullForward($colorMenuBg, 10%);
 				left: 0;
-				height: $h;
-				line-height: $h;
-				margin-bottom: $interiorMargin * 5;
-				text-align: center;
+				padding-right: $interiorMargin;
+				right: auto;
+				width: $plw;
+				overflow-x: hidden;
+				overflow-y: auto;
+				ul {
+					li {
+						@include border-radius($controlCr);
+						padding-left: 30px;
+						border-top: none;
+					}
+				}
 			}
-			&.title {
-				color: $colorCreateMenuText;
-				font-size: 1.2em;
-				margin-bottom: 0.5em;
+			&.right {
+				//@include test(red);
+				left: auto;
+				right: 0;
+				padding: $interiorMargin * 5;
+				width: $prw;
 			}
-			&.description {
-				//color: lighten($colorMenuBg, 30%);
-				color: $colorCreateMenuText;
-				font-size: 0.8em;
-				line-height: 1.5em;
+		}
+		.menu-item-description {
+			.desc-area {
+				&.icon {
+					$h: 150px;
+					color: $colorCreateMenuLgIcon;
+					position: relative;
+					font-size: 8em;
+					left: 0;
+					height: $h;
+					line-height: $h;
+					margin-bottom: $interiorMargin * 5;
+					text-align: center;
+				}
+				&.title {
+					color: $colorCreateMenuText;
+					font-size: 1.2em;
+					margin-bottom: 0.5em;
+				}
+				&.description {
+					//color: lighten($bg, 30%);
+					color: $colorCreateMenuText;
+					font-size: 0.8em;
+					line-height: 1.5em;
+				}
 			}
 		}
 	}
-}
-.context-menu {
-	font-size: 0.80rem;
-}
-
-.context-menu-holder,
-.menu-holder {
-	position: absolute;
-	z-index: 70;
-	.context-menu-wrapper {
-		position: absolute;
-		height: 100%;
-		width: 100%;
-	}
-	&.go-left .context-menu,
-	&.go-left .menu {
-		right: 0;
-	}
-	&.go-up .context-menu,
-	&.go-up .menu {
-		bottom: 0;
+	.context-menu {
+		font-size: 0.80rem;
 	}
 }

 .context-menu-holder {
 	pointer-events: none;
+	position: absolute;
 	height: 200px;
 	width: 170px;
+	z-index: 70;
+	.context-menu-wrapper {
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		.context-menu {
+		}
+	}
+	&.go-left .context-menu {
+		right: 0;
+	}
+	&.go-up .context-menu {
+		bottom: 0;
+	}
 }

 .btn-bar.right .menu,
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -1,155 +1,72 @@
-@mixin toiLineHovEffects() {
-	//@include pulse(.25s);
-	&:before,
-	&:after {
-		background-color: $timeControllerToiLineColorHov;
-	}
-}
+.l-time-controller {
+	$inputTxtW: 90px;
+	$knobW: 9px;
+	$r1H: 20px;
+	$r2H: 30px;
+	$r3H: 10px;

-.l-time-controller-visible {
-
-}
-
-mct-include.l-time-controller {
-	$minW: 500px;
-	$knobHOffset: 0px;
-	$knobM: ($sliderKnobW + $knobHOffset) * -1;
-	$rangeValPad: $interiorMargin;
-	$rangeValOffset: $sliderKnobW;
-	//$knobCr: $sliderKnobW;
-	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
-	$r1H: nth($ueTimeControlH,1);
-	$r2H: nth($ueTimeControlH,2);
-	$r3H: nth($ueTimeControlH,3);
-
-    @include absPosDefault();
-    //@include test();
-    display: block;
-    top: auto;
-	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
-    min-width: $minW;
-    font-size: 0.8rem;
+	position: relative;
+	margin: $interiorMarginLg 0;
+	min-width: 400px;

 	.l-time-range-inputs-holder,
 	.l-time-range-slider {
-		//font-size: 0.8em;
+		font-size: 0.8em;
 	}

 	.l-time-range-inputs-holder,
 	.l-time-range-slider-holder,
 	.l-time-range-ticks-holder
 	{
-		//@include test();
-		@include absPosDefault(0, visible);
-		@include box-sizing(border-box);
-		top: auto;
+		margin-bottom: $interiorMargin;
+		position: relative;
 	}
 	.l-time-range-slider,
 	.l-time-range-ticks {
 		//@include test(red, 0.1);
 		@include absPosDefault(0, visible);
-		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
 	}

 	.l-time-range-inputs-holder {
-		//@include test(red);
-		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
-		padding-top: $interiorMargin;
-		border-top: 1px solid $colorInteriorBorder;
-		.type-icon {
-			font-size: 120%;
-			vertical-align: middle;
-		}
-		.l-time-range-input,
-		.l-time-range-inputs-elem {
-			margin-right: $interiorMargin;
-			.lbl {
-				color: $colorPlotLabelFg;
-			}
-			.ui-symbol.icon {
-				font-size: 11px;
-				width: 11px;
-			}
-		}
+		height: $r1H;
+	}
+
+	.l-time-range-slider,
+	.l-time-range-ticks {
+		left: $inputTxtW; right: $inputTxtW;
+
 	}

 	.l-time-range-slider-holder {
-		//@include test(green);
-		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
+		height: $r2H;
 		.range-holder {
 			@include box-shadow(none);
 			background: none;
 			border: none;
-			.range {
-				.toi-line {
-					$myC: $timeControllerToiLineColor;
-					$myW: 8px;
-					@include transform(translateX(50%));
-					position: absolute;
-					//@include test();
-					top: 0; right: 0; bottom: 0px; left: auto;
-					width: $myW;
-					height: auto;
-					z-index: 2;
-					&:before,
-					&:after {
-						background-color: $myC;
-						content: "";
-						position: absolute;
-					}
-					&:before {
-						// Vert line
-						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
-						width: 2px;
-						//top: 0; right: 3px; bottom: 0; left: 3px;
-					}
-					&:after {
-						// Circle element
-						@include border-radius($myW);
-						@include transform(translateY(-50%));
-						top: 50%; right: 0; bottom: auto; left: 0;
-						width: auto;
-						height: $myW;
-					}
-				}
-				&:hover .toi-line {
-					@include toiLineHovEffects;
-				}
-			}
-		}
-		&:not(:active) {
-			//@include test(#ff00cc);
-			.knob,
-			.range {
-				@include transition-property(left, right);
-				@include transition-duration(500ms);
-				@include transition-timing-function(ease-in-out);
-			}
+			height: 75%;
 		}
 	}

 	.l-time-range-ticks-holder {
 		height: $r3H;
 		.l-time-range-ticks {
-			border-top: 1px solid $colorTick;
+			border-top: 1px solid $colorInteriorBorder;
 			.tick {
-				background-color: $colorTick;
+				background-color: $colorInteriorBorder;
 				border:none;
-				height: 5px;
 				width: 1px;
 				margin-left: -1px;
-				position: absolute;
 				&:first-child {
 					margin-left: 0;
 				}
 				.l-time-range-tick-label {
-					@include webkitProp(transform, translateX(-50%));
-					color: $colorPlotLabelFg;
-					display: inline-block;
-					font-size: 0.9em;
+					color: lighten($colorInteriorBorder, 20%);
+					font-size: 0.7em;
 					position: absolute;
-					top: 8px;
-					white-space: nowrap;
+					margin-left: -0.5 * $tickLblW;
+					text-align: center;
+					top: $r3H;
+					width: $tickLblW;
 					z-index: 2;
 				}
 			}
@@ -157,47 +74,31 @@ mct-include.l-time-controller {
 	}

 	.knob {
-		z-index: 2;
+		width: $knobW;
 		.range-value {
-			//@include test($sliderColorRange);
-			@include trans-prop-nice-fade(.25s);
-			padding: 0 $rangeValOffset;
+			$w: 75px;
+			//@include test();
 			position: absolute;
-			height: $r2H;
-			line-height: $r2H;
+			top: 50%;
+			margin-top: -7px; // Label is 13px high
 			white-space: nowrap;
+			width: $w;
 		}
 		&:hover .range-value {
-			color: $sliderColorKnobHov;
+			color: $colorKey;
 		}
 		&.knob-l {
-			//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
-			margin-left: $knobM;
+			margin-left: $knobW / -2;
 			.range-value {
 				text-align: right;
-				right: $rangeValOffset;
+				right: $knobW + $interiorMargin;
 			}
 		}
 		&.knob-r {
-			//@include border-bottom-right-radius($knobCr);
-			margin-right: $knobM;
+			margin-right: $knobW / -2;
 			.range-value {
-				left: $rangeValOffset;
-			}
-			&:hover + .range-holder .range .toi-line {
-				@include toiLineHovEffects;
+				left: $knobW + $interiorMargin;
 			}
 		}
 	}
-}
-
-//.slot.range-holder {
-//	background-color: $sliderColorRangeHolder;
-//}
-
-.s-time-range-val {
-	//@include test();
-	@include border-radius($controlCr);
-	background-color: $colorInputBg;
-	padding: 1px 1px 0 $interiorMargin;
 }
--- a/platform/commonUI/general/res/sass/forms/_datetime.scss
+++ b/platform/commonUI/general/res/sass/forms/_datetime.scss
@@ -19,44 +19,39 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@mixin complexFieldHolder($myW) {
-	width: $myW + $interiorMargin;
-	input[type="text"] {
-		width: $myW;
-	}
-}
-
 .complex.datetime {
 	span {
 		display: inline-block;
 		margin-right: $interiorMargin;
 	}
-
-/*
+	
 	.field-hints,
 	.fields {
 	}
-
 	
 	.field-hints {
-
+		
 	}
-	*/
-
+	
 	.fields {
 		margin-top: $interiorMarginSm 0;
 		padding: $interiorMarginSm 0;
 	}
 	
 	.date {
-		@include complexFieldHolder(80px);
-	}
-
-	.time.md {
-		@include complexFieldHolder(60px);
+		$myW: 80px;
+		width: $myW + $interiorMargin;
+		input {
+			width: $myW;
+		}
+		
 	}
 	
 	.time.sm {
-		@include complexFieldHolder(40px);
+		$myW: 40px;
+		width: $myW + $interiorMargin;
+		input {
+			width: $myW;
+		}
 	}
 }
--- a/platform/commonUI/general/res/sass/forms/_selects.scss
+++ b/platform/commonUI/general/res/sass/forms/_selects.scss
@@ -21,13 +21,10 @@
 *****************************************************************************/
 .select {
 	@include btnSubtle($colorSelectBg);
-    @if $shdwBtns != none {
-	    margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
-    }
+	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
 	padding: 0 $interiorMargin;
    overflow: hidden;
 	position: relative;
-    line-height: $formInputH;
 	select {
 		@include appearance(none);
 		@include box-sizing(border-box);
@@ -43,8 +40,11 @@
 	}
 	&:after {
 		@include contextArrow();
-		pointer-events: none;
 		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
+		//content:"v";
+		//display: block;
+		//font-family: 'symbolsfont';
+		//pointer-events: none;
 		position: absolute;
 		right: $interiorMargin; top: 0;
 	}
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -19,114 +19,68 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-
-.splitter {
-    // Redo the splitter.
-    // New look is a simple line.
-    // Main width is used to provide a good click area, and is always transparent
-    // :after will be a positioned and colored element that is the handle
-
-    //@include test(red);
-    display: block;
-    position: absolute;
-    z-index: 1;
-    &:after {
-        // The handle
-        content:"";
-        pointer-events: none;
-        @include absPosDefault(0);
-        background: $colorSplitterBg;
-        display: block;
-
-        @if $splitterEndCr != 'none' {
-            @include border-radius($splitterEndCr);
-        }
-    }
-    &:active {
-        //@include test();
-        &:after {
-            background-color: $colorSplitterActive !important;
-        }
-    }
-
-    @if $colorSplitterHover != 'none' {
-        &:not(:active) {
-            &:hover {
-                &:after {
-                    background-color: $colorSplitterHover !important;
-                    @include trans-prop-nice(background-color, 150ms);
-                }
-            }
-        }
-    }
-}
-
 .split-layout {
-    $inset: splitterHandleInset($splitterD,$splitterHandleD);
-    &.horizontal {
-        // Slides vertically up and down, splitting the element horizontally
-        overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
-        .pane {
-            left: 0;
-            right: 0;
-            &.top {
-                bottom: auto;
-            }
-            &.bottom {
-                top: auto;
-            }
-        }
-        >.splitter {
-            cursor: row-resize;
-            left: 0;
-            right: 0;
-            height: $splitterD;
-            &:after {
-                top: $inset; bottom: $inset;
-            }
-        }
-    }
+	$b: pullForward($colorBodyBg, $contrastRatioPercent);

-    &.vertical {
-        // Slides horizontally left to right, splitting the element vertically
-        .pane {
-            top: 0;
-            bottom: 0;
-            &.left {
-                right: auto;
-            }
-            &.right {
-                left: auto;
-            }
-        }
-        >.splitter {
-            cursor: col-resize;
-            top: 0;
-            bottom: 0;
-            &:not(.flush-right) {
-                width: $splitterD;
-                &:after {
-                    left: $inset; right: $inset;
-                }
-            }
-            &.flush-right {
-                width: ceil($splitterD / 2);
-                &:after {
-                    background-color: transparent;
-                    left: auto; right: 0; width: $splitterHandleD;
-                }
-                &.edge-shdw {
-                    @include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
-                }
-            }
-        }
-    }
+	.splitter {
+		background-color: $b;
+		@include border-radius($splitterEndCr);
+		@include boxShdw($splitterShdw);
+		overflow: hidden;
+		position: absolute;
+		z-index: 1;
+		//@if $colorSplitterHover != 'none' {
+			&:hover {
+				background-color: $colorSplitterHover;
+			}
+		//}
+	}
+	&.horizontal {
+		// Slides vertically up and down, splitting the element horizontally
+        overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
+		.pane {
+			left: 0;
+			right: 0;
+			&.top {
+				bottom: auto;
+			}
+			&.bottom {
+				top: auto;
+			}
+		}
+		>.splitter {
+			@include controlGrippy($colorSplitterInterior, horizontal);
+			cursor: row-resize;
+			left: 0; right: 0;
+			width: auto;
+			height: $splitterW;
+		}
+	}
+	&.vertical {
+		// Slides horizontally left to right, splitting the element vertically
+		.pane {
+			top: 0;
+			bottom: 0;
+			&.left {
+				right: auto;
+			}
+			&.right {
+				left: auto;
+			}
+		}
+		>.splitter {
+			@include controlGrippy($colorBodyBg, vertical);
+			bottom: 0;
+			cursor: col-resize;
+			width: $splitterW;
+		}
+	}
 }

-/*.browse-area .splitter {
-	top: 0; //$ueTopBarH + $interiorMarginLg;
+.browse-area .splitter {
+	top: $ueTopBarH + $interiorMarginLg;
 }

 .edit-area .splitter {
 	top: 0;
-}*/
+}
--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@@ -19,45 +19,24 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@include keyframes(rotation) {
-    0%   { transform: rotate(0deg); }
-    100% { transform: rotate(359deg); }
+@-webkit-keyframes rotation {
+	from {-webkit-transform: rotate(0deg);}
+	to {-webkit-transform: rotate(359deg);}
 }

-@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
-    @include keyframes(rotateCentered) {
-         0%   { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
-         100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); }
-     }
-    @include animation-name(rotateCentered);
-    @include animation-duration(0.5s);
-    @include animation-iteration-count(infinite);
-    @include animation-timing-function(linear);
-    border-color: rgba($c, 0.25);
-    border-top-color: rgba($c, 1.0);
-    border-style: solid;
-    border-width: 5px;
-    @include border-radius(100%);
-    @include box-sizing(border-box);
-    display: block;
-    position: absolute;
-    height: 0; width: 0;
-    padding: 7%;
-    left: 50%; top: 50%;
+@-moz-keyframes rotation {
+	from {-moz-transform: rotate(0deg);}
+	to {-moz-transform: rotate(359deg);}
 }

-@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
-	display: block;
-	position: absolute;
-	-webkit-animation: rotation .6s infinite linear;
-	-moz-animation: rotation .6s infinite linear;
-	-o-animation: rotation .6s infinite linear;
-	animation: rotation .6s infinite linear;
-	border-color: rgba($c, 0.25);
-	border-top-color: rgba($c, 1.0);
-	border-style: solid;
-	border-width: $b;
-	@include border-radius(100%);
+@-o-keyframes rotation {
+	from {-o-transform: rotate(0deg);}
+	to {-o-transform: rotate(359deg);}
+}
+
+@keyframes rotation {
+	from {transform: rotate(0deg);}
+	to {transform: rotate(359deg);}
 }

 .t-wait-spinner,
@@ -117,28 +96,4 @@
 	margin-top: 0 !important;
 	padding: 0 !important;
 	top: 0; left: 0;
-}
-
-.loading {
-	// Can be applied to any block element with height and width
-    pointer-events: none;
-    &:before,
-    &:after {
-        content: '';
-    }
-	&:before {
-        @include wait-spinner2(5px, $colorLoadingFg);
-        z-index: 10;
-	}
-    &:after {
-        @include absPosDefault();
-        background: $colorLoadingBg;
-        display: block;
-        z-index: 9;
-    }
-    &.tree-item:before {
-        padding: $menuLineH / 4;
-        border-width: 2px;
-    }
-
 }
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -86,16 +86,27 @@
                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
                line-height: $lh;
 	            z-index: 1;
-                .item-type,
-                .t-item-icon {
-                    //@include test();
-                    @include transform(translateX(-50%) translateY(-55%));
-                    position: absolute;
-                    top: 50%; left: 50%;
-                    //height: $iconD; width: $iconD;
+                .item-type {
+                    //@include trans-prop-nice("color", $transTime);
+                    @include absPosDefault($iconMargin, false);
+                    //@include test(red);
+                    //color: $colorItemIc;
+                    text-align: center;
                    font-size: $iconD * 0.95; //6em;
-                    //line-height: normal;
-                    //text-align: center;
+                    line-height: $iconD;
+                    bottom: auto;
+                    height: $iconD;
+                    top: $iconMargin - 10;
+                    .l-icon-link {
+                        color: $colorIconLink;
+                        height: auto;
+                        line-height: 100%;
+                        position: absolute;
+                        font-size: 0.3em;
+                        left: 0px;
+                        bottom: 10px;
+                        z-index: 2;
+                    }
                }
                .item-open {
                    @include trans-prop-nice("opacity", $transTime);
--- a/platform/commonUI/general/res/sass/lists/_tabular.scss
+++ b/platform/commonUI/general/res/sass/lists/_tabular.scss
@@ -40,11 +40,6 @@ table {
 	thead, .thead {
 		border-bottom: 1px solid $colorTabHeaderBorder;
 	}
-
-	&:not(.fixed-header) tr th {
-		background-color: $colorTabHeaderBg;
-	}
-
 	tbody, .tbody {
 		display: table-row-group;
 		tr, .tr {
@@ -69,6 +64,7 @@ table {
 			display: table-cell;
 		}
 		th, .th {
+			background-color: $colorTabHeaderBg;
 			border-left: 1px solid $colorTabHeaderBorder;
 			color: $colorTabHeaderFg;
 			padding: $tabularTdPadLR $tabularTdPadLR;
@@ -147,7 +143,7 @@ table {
 				position: absolute;
 				width: 100%;
 				height: $tabularHeaderH;
-				background-color: $colorTabHeaderBg;
+				background: rgba(#fff, 0.15);
 			}
 		}
 		tbody, .tbody {
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -49,11 +49,18 @@
                    
                }
                .item-main {
-                    .item-type,
-                    .t-item-icon {
+                    .item-type {
+                        //@include test(blue);
                        font-size: $mobileListIconSize;
-                        left: $interiorMarginLg + $interiorMargin;
-                        line-height: normal;
+                        right: auto;
+                        bottom: auto;
+                        left: 0;
+                        line-height: 100%;
+                        text-align: left;
+                        width: $mobileListIconSize;
+                        .l-icon-link {
+                            bottom: 0;
+                        }
                    }
                    .item-open {
                        display: block;
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -32,7 +32,7 @@
        background-color: $colorMobilePaneLeft;
    }

-    .pane.right.items {
+    .pane.right-repr {
        //@include test();
        @include slMenuTransitions;
        margin-left: 0 !important;
@@ -42,66 +42,78 @@
        }
    }

-    .holder.holder-create-and-search {
-        right: $bodyMargin !important;
+    .user-environ .browse-area,
+    .user-environ .edit-area,
+    .user-environ .editor {
+        top: 0; left: 0; right: 0; bottom: $ueFooterH;
    }

+    .holder.l-mobile {
+        top: $bodyMargin !important;
+        right: $bodyMargin !important;
+        bottom: $bodyMargin !important;
+        left: $bodyMargin !important;
+    }

-// When the tree is hidden, these are the
+    // When the tree is hidden, these are the
    // classes used for the left menu and the
    // right representation.
-    .pane-tree-hidden {
+    .browse-hidetree {
+        @include user-select(none);
        // Sets the left tree menu when the tree
        // 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;
+            opacity: 0;
+            right: 100% !important;
+            width: auto !important;
+            overflow-y: hidden;
+            overflow-x: hidden;
        }
-        .pane.right.items {
+        // Sets the right represenation when
+        // the tree is hidden.
+        .pane.right-repr {
            left: 0 !important;
        }
    }
    
-    .pane-tree-showing {
+    .browse-showtree {
        // NOTE: DISABLED SELECTION
        // Selection disabled in both panes
        // causing cut/copy/paste menu to
        // not appear. Should me moved in
        // future to properly work
-        //@include user-select(none);
+        @include user-select(none);

        // Sets the left tree menu when the tree is shown.
        .pane.left.treeview {
-            @include trans-prop-nice(opacity, 250ms, $delay: 250ms);
+            @include trans-prop-nice(opacity, .4s);
            @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
+            opacity: 1;
+            display: block !important;
+            //width: auto !important; // CH CO
            right: auto !important;
            width: $proporMenuWithView !important;
        }
        // Sets the right representation when the tree is shown.
-        .pane.right.items {
+        .pane.right-repr {
            left: $proporMenuWithView !important;
+            //width: auto !important;
+
+            //left: 0 !important;
+            //transform: translateX($proporMenuWithView);
        }
    }

-    .toggle-tree {
-        color: $colorKey !important;
+    .mobile-menu-icon {
        font-size: 110%;
        position: absolute;
        top: $bodyMargin + 2;
        left: $bodyMargin;
-        &:after {
-            content:'m' !important;
-            font-family: symbolsfont;
-        }
    }

    .object-browse-bar {
        //@include test();
-        left: 45px !important;
+        left: 30px !important;
        .context-available {
            opacity: 1 !important;
        }
@@ -141,13 +153,13 @@
 }

@include phonePortrait {
-    .pane-tree-showing {
+    .browse-showtree {
        .pane.left.treeview {
            width: $proporMenuOnly !important;
        }
-        .pane.right.items {
+        .pane.right-repr {
            left: 0 !important;
-            @include transform(translateX($proporMenuOnly));
+	        @include webkitProp(transform, translateX($proporMenuOnly));
            #content-area {
                opacity: 0;
            }
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -37,18 +37,21 @@
 			//@include test(red);
 			position: absolute;
 			font-size: 1.1em;
-			height: $mobileTreeItemH;
-			line-height: inherit;
 			right: 0px;
 			width: $mobileTreeRightArrowW;
 			text-align: center;
 		}

-		.label,
-		.t-object-label {
+		.label {
 			left: 0;
 			right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-			line-height: inherit;
+			line-height: $mobileTreeItemH;
+			//font-size: 1.1em; // CH CO
+			.type-icon {
+				@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
+			}
+			.title-label {
+			}
 		}
 	}
 }
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.gl-plot-label,
 	.l-plot-label {
 		//		@include test(yellow);
-		color: $colorPlotLabelFg;
+		color: lighten($colorBodyFg, 20%);
 		position: absolute;
 		text-align: center;
 //		text-transform: uppercase;
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -214,6 +214,8 @@

 	.search-scroll {
 		order: 3;
+
+		//padding-right: $rightPadding;
 		margin-top: 4px;

 		// Adjustable scrolling size
@@ -225,6 +227,28 @@

 		.load-icon {
 			position: relative;
+			&.loading {
+				pointer-events: none;
+				margin-left: $leftMargin;
+
+				.title-label {
+					// Text styling
+					font-style: italic;
+					font-size: .9em;
+					opacity: 0.5;
+
+					// Text positioning
+					margin-left: $iconWidth + $leftMargin;
+					line-height: 24px;
+				}
+				.wait-spinner {
+					margin-left: $leftMargin;
+				}
+			}
+
+			&:not(.loading) {
+				cursor: pointer;
+			}
 		}

 		.load-more-button {
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -52,6 +52,7 @@ ul.tree {
 		font-size: 0.75em;
 		width: $treeVCW;
 		$runningItemW: $interiorMargin + $treeVCW;
+		// NOTE: [Mobile] Removed Hover on Mobile
 		@include desktop {
 			&:hover {
 				color: $colorItemTreeVCHover !important;
@@ -59,38 +60,30 @@ ul.tree {
 		}
 	}

-	.label,
-	.t-object-label {
+	.label {
 		display: block;
+		//				@include test(orange);
 		@include absPosDefault();
+		//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
 		line-height: $menuLineH;
-
-        .t-item-icon {
-            @include txtShdwSubtle($shdwItemTreeIcon);
-            font-size: $treeTypeIconH;
-            color: $colorItemTreeIcon;
-            position: absolute;
-            left: $interiorMargin;
-            top: 50%;
-            width: $treeTypeIconH;
-            @include transform(translateY(-50%));
-        }
+		//left: $runningItemW;

 		.type-icon {
 			//@include absPosDefault(0, false);
-			$d: $treeTypeIconH;
+			$d: $treeTypeIconH; // 16px is crisp size
 			@include txtShdwSubtle($shdwItemTreeIcon);
-			font-size: $treeTypeIconH;
+			font-size: $d;
 			color: $colorItemTreeIcon;
 			left: $interiorMargin;
 			position: absolute;
-			@include verticalCenterBlock($menuLineHPx, $treeTypeIconHPx);
+			@include verticalCenterBlock($menuLineHPx, $d);
 			line-height: 100%;
-			right: auto; width: $treeTypeIconH;
+			right: auto; width: $d;

 			.icon {
 				&.l-icon-link,
 				&.l-icon-alert {
+					//@include txtShdw($shdwItemTreeIcon);
 					position: absolute;
 					z-index: 2;
 				}
@@ -108,24 +101,37 @@ ul.tree {
 				}
 			}
 		}
-		.title-label,
-        .t-title-label {
+		.title-label {
 			@include absPosDefault();
 			display: block;
 			left: $runningItemW + ($interiorMargin * 3);
+			//right: $treeContextTriggerW + $interiorMargin;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
 	}

+	&.loading {
+		pointer-events: none;
+		.label {
+			opacity: 0.5;
+			.title-label {
+				font-style: italic;
+			}
+		}
+		.wait-spinner {
+			margin-left: 14px;
+		}
+	}
+
 	&.selected {
 		background: $colorItemTreeSelectedBg;
 		color: $colorItemTreeSelectedFg;
 		.view-control {
 			color: $colorItemTreeSelectedVC;
 		}
-		.t-object-label .t-item-icon {
+		.label .type-icon {
 			color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
 		}
 	}
@@ -134,9 +140,12 @@ ul.tree {
 		// NOTE: [Mobile] Removed Hover on Mobile
 		@include desktop {
 			&:hover {
-				background: $colorItemTreeHoverBg;
-				color: $colorItemTreeHoverFg;
-				.t-item-icon {
+				background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
+				color: pullForward($colorBodyFg, 20%);
+				//.context-trigger {
+				//	display: block;
+				//}
+				.icon {
 					color: $colorItemTreeIconHover;
 				}
 			}
@@ -149,6 +158,7 @@ ul.tree {

 	.context-trigger {
 		$h: 0.9rem;
+		//display: none;
 		top: -1px;
 		position: absolute;
 		right: $interiorMarginSm;
@@ -161,7 +171,7 @@ ul.tree {
 }

 .tree-item {
-	.t-object-label {
+	.label {
 		left: $interiorMargin + $treeVCW;
 	}
 }
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -47,7 +47,7 @@
 	}
 	&.frame-template {
 		.s-btn,
-		.s-menu-btn {
+		.s-menu {
 			height: $ohH;
 			line-height: $ohH;
 			padding: 0 $interiorMargin;
@@ -56,7 +56,7 @@
 			}
 		}

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

--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -29,23 +29,23 @@
    }
 }

-/*.holder-all {
-    $myM: 0; // $interiorMarginSm;
-    top: $myM;
-    right: $myM;
-    bottom: $myM;
-    left: $myM;
-}*/
+.holder-all {
+	$myM: 0; // $interiorMarginSm;
+	top: $myM;
+	right: $myM;
+	bottom: $myM;
+	left: $myM;
+}

 .browse-area,
 .edit-area,
 .editor {
-    position: absolute;
+	position: absolute;
 }

-.editor {
-    @include border-radius($basicCr * 1.5);
-}
+//.editor {
+//	@include border-radius($basicCr * 1.5);
+//}

 .contents {
    $myM: 0; //$interiorMargin;
@@ -68,8 +68,8 @@
        margin-right: $interiorMargin;
    }
    &.abs {
-        text-wrap: none;
-        white-space: nowrap;
+	    text-wrap: none;
+	    white-space: nowrap;
        &.left,
        .left {
            width: 45%;
@@ -95,35 +95,35 @@
 }

 .user-environ {
-    .browse-area,
-    .editor {
-        top: 0; left: 0; right: 0; bottom: $ueFooterH;
-    }
+	.browse-area,
+	.edit-area,
+	.editor {
+		top: $bodyMargin + $ueTopBarH + ($interiorMargin);
+		right: $bodyMargin;
+		bottom: $ueFooterH + $bodyMargin;
+		left: $bodyMargin;
+	}

-    .browse-area,
-    .edit-area {
-        > .contents {
-            left: 0;
-            right: 0;
-        }
-    }
+	.browse-area,
+	.edit-area {
+		> .contents {
+			left: 0;
+			right: 0;
+		}
+	}

-    .edit-area {
-        $tbH: $btnToolbarH + $interiorMargin;
-        top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
-        left: $bodyMargin;
-        right: $bodyMargin;
-        bottom: $bodyMargin + $ueFooterH;
-        .tool-bar {
-            bottom: auto;
-            height: $tbH;
-            line-height: $btnToolbarH;
-        }
-        .object-holder.work-area {
-            top: $tbH + $interiorMargin * 2;
-            overflow: auto;
-        }
-    }
+	.edit-area {
+		$tbH: $btnToolbarH + $interiorMargin;
+		top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
+		.tool-bar {
+			bottom: auto;
+			height: $tbH;
+			line-height: $btnToolbarH;
+		}
+		.work-area {
+			top: $tbH + $interiorMargin * 2;
+		}
+	}

 	// from _bottom-bar.scss
 	.ue-bottom-bar {
@@ -221,19 +221,10 @@

 .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;
-            }
+        .split-pane-component.pane.left {
+            min-width: 150px;
+            max-width: 800px;
+            width: $ueBrowseLeftPaneW;
        }
    }
 }
@@ -250,175 +241,89 @@
    }
 }

+
+
 .pane {
-    @include box-sizing(border-box);
    position: absolute;
-
-    .pane-header {
-        text-transform: uppercase;
-        height: $ueTopBarH;
-        line-height: $ueTopBarH;
-        margin-bottom: $interiorMargin;
-    }
-
-    .primary-pane {
-        // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
-        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;
-        }
+	    .create-btn-holder {
+		    bottom: auto; top: 0;
+		    height: $ueTopBarH;
+		    .wrapper.menu-element {
+			    position: absolute;
+			    bottom: $interiorMargin;
+		    }
+	    }
+	    .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;
-            $paneExpandedOffset: $splitterD + $uePaneMiniTabW;
-            top: $bodyMargin;
-            height: $d;
-            line-height: $d;
-            &:after {
-                // Always the icon that shows when the pane is collapsed
-                opacity: 0;
-            }
-            &.collapsed {
-                &:before {
-                    opacity: 0;
-                }
-                &:after {
-                    opacity: 1;
-                }
-            }
-            &.toggle-tree.anchor-left {
-                left: 0;
-                @include transform(translateX(-1 * $paneExpandedOffset));
-                &:after {
-                    content: '\6d'; // Menu 'hamburger' icon
-                }
-                &.collapsed {
-                    left: 0;
-                    @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
-                }
-                &:not(.collapsed):before {
-                    @include trans-prop-nice(opacity, 200ms, 200ms);
-                }
-            }
-            &.toggle-inspect.anchor-right {
-                right: $bodyMargin;
-                &:after {
-                    content: '\e615';  // e615: Crosshair icon; was e608: Info "i" icon
-                }
-                &.collapsed {
-                    right: $interiorMargin;
-                }
-            }
-        }
-    }
-
    &.items {
        .object-browse-bar {
-            .left.abs,
-            .right.abs {
-                top: auto;
-            }
+	        .left.abs,
+	        .right.abs {
+		        top: auto;
+	        }
+            //.left.abs {
+            //    @include tmpBorder(green);
+            //}
+            //.right.abs {
+            //    @include tmpBorder(red);
+            //}
+        }
+        .object-holder {
+            top: $ueTopBarH + $interiorMarginLg;
        }
    }
+	.object-holder {
+		overflow: auto;
+	}
 }

 .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;
-            }
-        }
-    }*/
+	&.horizontal {
+		// Slides up and down
+		>.pane {
+//			@include test();
+			margin-top: $interiorMargin;
+			&:first-child {
+				margin-top: 0;
+			}
+		}
+	}
+	&.vertical {
+		// Slides left and right
+		>.pane {
+//            @include test();
+			margin-left: $interiorMargin;
+			>.holder {
+				left: 0;
+				right: 0;
+			}
+			&:first-child {
+				margin-left: 0;
+				.holder {
+					right: $interiorMarginSm;
+				}
+			}
+		}

-    // Specific elements margins
-    .holder.holder-create-and-search {
-        top: $bodyMargin;
-        right: 0;
-        bottom: $bodyMargin;
-        left: $bodyMargin;
-    }
-
-    .holder.holder-object-and-inspector {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        .holder-object {
-            top: $bodyMargin;
-            bottom: $bodyMargin;
-        }
-        .holder-inspector-elements {
-            top: $bodyMargin;
-            bottom: $bodyMargin;
-            left: $bodyMargin;
-            right: $bodyMargin;
-
-        }
-    }
-}
-
-.object-holder {
-    overflow: hidden; // Contained objects need to handle their own overflow now
-    top: $ueTopBarH + $interiorMarginLg;
-    > ng-include {
-        @include absPosDefault(0, auto);
-    }
-    &.l-controls-visible {
-        &.l-time-controller-visible {
-            bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
-        }
-    }
+	}
 }

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

 .object-browse-bar,
@@ -429,109 +334,33 @@
 }

 .object-browse-bar {
-    //@include test(blue);
-    @include absPosDefault(0, visible);
-    @include box-sizing(border-box);
-    height: $ueTopBarH;
-    line-height: $ueTopBarH;
-    white-space: nowrap;
+	//@include test(blue);
+	@include absPosDefault(0, visible);
+	@include box-sizing(border-box);
+	height: $ueTopBarH;
+	line-height: $ueTopBarH;
+	white-space: nowrap;

-    .left {
-        padding-right: $interiorMarginLg * 2;
-        .l-back {
-            display: inline-block;
-            float: left;
-            margin-right: $interiorMarginLg;
-        }
-    }
+	.left {
+		padding-right: $interiorMarginLg * 2;
+		.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;
-    }
+	@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 {
-        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 {
-        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
-    }
-}
-
-.pane-inspect-showing {
-    .l-object-and-inspector {
-        .l-inspect,
-        .splitter-inspect {
-            @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
-            opacity: 1;
-        }
-    }
-}
-.pane-inspect-hidden {
-    .l-object-and-inspector {
-        .l-inspect,
-        .splitter-inspect {
-            opacity: 0;
-        }
-    }
-}
-
-@include desktop {
-    .pane.treeview.left .tree-holder {
-        padding-right: $interiorMargin;
-    }
-    .pane-tree-hidden {
-        .pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
-    }
-    .pane-inspect-hidden .l-object-and-inspector {
-        .pane.left { right: $ueCollapsedPaneEdgeM !important; }
-    }
-
-    .pane:not(.resizing) {
-        @include trans-prop-nice-resize-w(250ms);
-    }
+.vscroll {
+    overflow-y: auto;
 }
--- a/platform/commonUI/general/res/templates/controls/datetime-field.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-field.html
@@ -1,20 +0,0 @@
-<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/datetime-picker.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-picker.html
@@ -1,66 +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.
-->
-
-<div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
-	<div class="holder">
-		<div class="l-month-year-pager">
-			<a class="pager prev" ng-click="changeMonth(-1)"></a>
-			<span class="val">{{month}} {{year}}</span>
-			<a class="pager next" ng-click="changeMonth(1)"></a>
-		</div>
-		<div class="l-calendar">
-			<ul class="l-cal-row l-header">
-				<li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
-			</ul>
-			<ul class="l-cal-row l-body" ng-repeat="row in table">
-				<li ng-repeat="cell in row"
-					ng-click="select(cell)"
-					ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
-					<div class="prime">{{cell.day}}</div>
-					<div class="sub">{{cell.dayOfYear}}</div>
-				</li>
-			</ul>
-		</div>
-	</div>
-	<div class="l-time-selects complex datetime"
-			ng-show="options">
-		<div class="field-hints">
-			<span class="hint time md"
-				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
-				  ng-if="options[key]">
-				{{nameFor(key)}}
-			</span>
-		</div>
-		<div>
-			<span class="field control time md"
-				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
-				  ng-if="options[key]">
-				<div class='form-control select'>
-					<select size="1"
-							ng-model="time[key]"
-							ng-options="i for i in optionsFor(key)">
-					</select>
-				</div>
-			</span>
-		</div>
-	</div>
-</div>
--- a/platform/commonUI/general/res/templates/controls/switcher.html
+++ b/platform/commonUI/general/res/templates/controls/switcher.html
@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
    <div
-	    class="view-switcher menu-element s-menu-btn"
+	    class="view-switcher menu-element s-menu"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
--- a/platform/commonUI/general/res/templates/controls/time-controller.html
+++ b/platform/commonUI/general/res/templates/controls/time-controller.html
@@ -1,85 +1,69 @@
 <!--
- 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.
+NOTES

- 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.
+Ticks:
+The thinking is to divide whatever the current time span is by 5,
+and assign values accordingly to 5 statically-positioned ticks. So the tick x-position is a static percentage
+of the total width available, and the labels change dynamically. This is consistent
+with our current approach to the time axis of plots.
+I'm keeping the number of ticks low so that when the view portal gets narrow,
+the tick labels won't collide with each other. For extra credit, add/remove ticks as the user resizes the view area.
+Note: this eval needs to be based on the whatever is containing the
+time-controller component, not the whole browser window.
+
+Range indicator and slider knobs:
+The left and right properties used in .slider .range-holder and  the .knobs are
+CSS offsets from the left and right of their respective containers. You
+may want or need to calculate those positions as pure offsets from the start datetime
+(or left, as it were) and set them as left properties. No problem if so, but
+we'll need to tweak the CSS tiny bit to get the center of the knobs to line up
+properly on the range left and right bounds.

- 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.
 -->
-<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">
-            <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>
+<div ng-init="
+notes = 'Temporarily using an array to populate ticks so I can see what I\'m doing';
+ticks = [
+'00:00',
+'00:30',
+'01:00',
+'01:30',
+'02:00'
+];
+"></div>

-        <span class="l-time-range-input" ng-controller="ToggleController as t2">
-            <mct-control key="'datetime-field'"
-                         structure="{ format: parameters.format }"
-                         ng-model="ngModel.outer"
-                         field="'end'"
-                         class="time-range-end">
-            </mct-control>&nbsp;
-        </span>
-    </div>
+<div class="l-time-controller">
+	<div class="l-time-range-inputs-holder">
+		Start: <input type="date" />
+		End: <input type="date" />
+	</div>

-    <div class="l-time-range-slider-holder">
-        <div class="l-time-range-slider">
-            <div class="slider"
-                 mct-resize="spanWidth = bounds.width">
-                <div class="knob knob-l"
-                     mct-drag-down="startLeftDrag()"
-                     mct-drag="leftDrag(delta[0])"
-                     ng-style="{ left: startInnerPct }">
-                    <div class="range-value">{{startInnerText}}</div>
-                </div>
-                <div class="knob knob-r"
-                     mct-drag-down="startRightDrag()"
-                     mct-drag="rightDrag(delta[0])"
-                     ng-style="{ right: endInnerPct }">
-                    <div class="range-value">{{endInnerText}}</div>
-                </div>
-                <div class="slot range-holder">
-                    <div class="range"
-                         mct-drag-down="startMiddleDrag()"
-                         mct-drag="middleDrag(delta[0])"
-                         ng-style="{ left: startInnerPct, right: endInnerPct}">
-                        <div class="toi-line"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+	<div class="l-time-range-slider-holder">
+		<div class="l-time-range-slider">
+			<div class="slider">
+				<div class="slot range-holder">
+					<div class="range" style="left: 0%; right: 30%;"></div>
+				</div>
+				<div class="knob knob-l" style="left: 0%;">
+					<div class="range-value">05/22 14:46</div>
+				</div>
+				<div class="knob knob-r" style="right: 30%;">
+					<div class="range-value">07/22 01:21</div>
+				</div>
+			</div>
+		</div>
+	</div>

-    <div class="l-time-range-ticks-holder">
-        <div class="l-time-range-ticks">
-            <div
-                ng-repeat="tick in ticks track by $index"
-                ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
-                class="tick tick-x"
-                >
-                <span class="l-time-range-tick-label">{{tick}}</span>
-            </div>
-        </div>
-    </div>
-</div>
+	<div class="l-time-range-ticks-holder">
+		<div class="l-time-range-ticks">
+			<div
+				ng-repeat="tick in ticks"
+				ng-style="{ left: $index * 25 + '%' }"
+				class="tick tick-x"
+				>
+				<span class="l-time-range-tick-label">{{tick}}</span>
+			</div>
+		</div>
+	</div>
+</div>
--- a/platform/commonUI/general/res/templates/label.html
+++ b/platform/commonUI/general/res/templates/label.html
@@ -19,7 +19,16 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<span class="t-object-label">
-<span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">{{type.getGlyph()}}</span>
-<span class='t-title-label'>{{model.name}}</span>
+<span class="label s-label">
+    <span class='ui-symbol icon type-icon'>
+        {{type.getGlyph()}}
+        <span
+            class='ui-symbol icon l-icon-link'
+            ng-show="location.isLink()"
+            ></span>
+        <span class='ui-symbol icon l-icon-alert'></span>
+    </span>
+    <span class='title-label'>
+        {{model.name}}
+    </span>
 </span>
--- a/platform/commonUI/general/res/templates/message-banner.html
+++ b/platform/commonUI/general/res/templates/message-banner.html
@@ -1,21 +1,12 @@
-<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)">
+<div class="l-message-banner s-message-banner">
    <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>
+        Objects not saved
+    </span><mct-include key="'progress-bar'"
+                        class="banner-elem"
+                        ng-model="ngModel"
+                        ng-hide-x="ngModel.dialog.progress === undefined"></mct-include><a class="banner-elem l-action s-action">
+    Try Again
+</a><a class="banner-elem ui-symbol close">
+    &#x78;
+</a>
 </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Henry	b0df1e90e5	Fixed failing dialogservice test case	2015-10-14 14:18:36 -07:00
Charles Hacskaylo	0dd7a844b0	[Frontend] Banner message animations; class renaming open #163 open #170 Added transition animations to message banners; Renamed $colorStatus* class names to map more closely to severity constants;	2015-10-13 17:12:23 -07:00
Charles Hacskaylo	954fdd5906	[Frontend] Sanding/positioning and Cancel button added to Messasges dialog open #159 open #170 Added Cancel button to Messages dialog in DialogService.js; Important tweaks to layout of messages to allow bottom-bar to align to bottom in singleton dialog view; Revised status colors in theme's constants files;	2015-10-08 19:10:26 -07:00
Charles Hacskaylo	0e840ae003	[Frontend] Messages major work open #159 open #170 CSS, markup and JS test files initially complete; Templates renamed for consistency; message-type icons styled; Added severity constant "alert"; TO-DO: check refactored CSS against mobile, see what's broken;	2015-10-08 13:09:41 -07:00
Charles Hacskaylo	0ca9e5c952	[Frontend] Message list initially working open #159 open #170 Thank you @akhenry; launchMessages function added to DialogLaunchController.js; New message-list.html template; message.html is now its own include; blocking-message.html renamed to overlay-blocking-message.html;	2015-10-08 09:37:43 -07:00
Charles Hacskaylo	dbcad51325	[Frontend] Tiny mod to dialog-launch.html open #159 open #170	2015-10-07 21:32:34 -07:00
Charles Hacskaylo	8ee93d9603	[Frontend] Tweaks to dialog-launch; added ui-symbols open #159 open #170	2015-10-07 18:26:11 -07:00
Charles Hacskaylo	ac59df9595	[Frontend] Added type-icon to message dialogs open #159 open #170 Percent complete added to progress-bar.html; Refined overlay height;	2015-10-07 17:56:25 -07:00
Charles Hacskaylo	182eff977c	[Frontend] Dialog and overlay layout/positioning mods open #159 open #170 Restructured overlay size and positioning approach for better flexibility; Getting new dialogs and the overlay to play nicely in mobile context;	2015-10-07 16:36:55 -07:00
Charles Hacskaylo	7f529eec68	[Frontend] Mods to OverlayService open #159 open #170 OverlayService can now be passed typeClass, which is added to the CSS class of the overlay's mct-include tag - intent is to allow the overlay to size itself based on the type of content to be displayed;	2015-10-07 12:11:30 -07:00
Charles Hacskaylo	ad4292f1e9	[Frontend] Mods to DialogService model and dialogs open #159 open #170 Properly re-cast model.hint and added model.actionText; Moved progressText into progress-bar.html; Tweaks to dialog styles; Tweaked styles for progress bar; Normalized various dialog templates markup;	2015-10-07 11:45:08 -07:00
Charles Hacskaylo	6840e596a5	[Frontend] Adding progress-bar.html template open #159 open #170	2015-10-07 10:25:47 -07:00
Charles Hacskaylo	30fd8c451e	[Frontend] Progress bar as include; progress dialog open #163 open #170 Progress bar now mct-include; Progress dialog sanded; Dialog launcher modded;	2015-10-06 16:10:27 -07:00
Charles Hacskaylo	2aeebff652	Merging in Andrew's work so far on progress and blocking dialogs open #163 open #170 Squashed commit of the following: commit `ec7edb58ca` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Mon Oct 5 10:39:06 2015 -0700 Rename dialogSeverity to messageServity for reuse with notifications commit `d20abe01dd` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Fri Oct 2 16:40:29 2015 -0700 Fixed docs commit `227da18498` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Fri Oct 2 16:27:41 2015 -0700 Added semicolon commit `22d424f96e` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Fri Oct 2 16:26:29 2015 -0700 Fixed code errors commit `2c77c3647c` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Fri Oct 2 16:24:01 2015 -0700 Initial commit of blocking dialog service with test code to demonstrate usage	2015-10-06 14:41:58 -07:00
Charles Hacskaylo	471a25a625	[Frontend] Progress bar/ message banner markup and styling open #170 Major work on progress bar;	2015-10-06 14:34:53 -07:00
Charles Hacskaylo	d606ee421f	[Frontend] New template for message-banner open #159 open #170 Added markup and beginning of styling; Temporarily added mct-include elem to bottombar.html;	2015-10-02 18:37:01 -07:00
Charles Hacskaylo	926aed72c3	[Frontend] Style and display changes to status block open #159 open #170 Refined structure in status block markup and css; Added status-related color constants to theme scss files;	2015-10-02 17:42:31 -07:00
Charles Hacskaylo	7014808c13	[Frontend] Style and display changes to status block open #159 open #170 Moved classes from _bottom-bar.scss into _layout.scss and new file _messages.scss; Removed _bottom-bar.scss; Revised display behavior of .status.block to show label on hover;	2015-10-02 15:41:02 -07:00