Merge branch 'master' into open671

Conflicts: main.js platform/commonUI/edit/src/policies/EditableMovePolicy.js platform/commonUI/general/src/directives/MCTTree.js platform/commonUI/general/src/ui/ToggleView.js platform/core/src/actions/ActionCapability.js platform/core/test/models/CachingModelDecoratorSpec.js platform/core/test/services/InstantiateSpec.js platform/features/events/bundle.js platform/features/events/src/DomainColumn.js platform/features/events/src/EventListController.js platform/features/events/src/EventListPopulator.js platform/features/events/src/RangeColumn.js platform/features/events/src/directives/MCTDataTable.js platform/features/events/src/policies/MessagesViewPolicy.js platform/features/events/test/DomainColumnSpec.js platform/features/events/test/EventListControllerSpec.js platform/features/events/test/EventListPopulatorSpec.js platform/features/events/test/RangeColumnSpec.js platform/features/events/test/policies/MessagesViewPolicySpec.js platform/features/rtevents/bundle.js platform/features/rtevents/src/DomainColumn.js platform/features/rtevents/src/RTEventListController.js platform/features/rtevents/src/RangeColumn.js platform/features/rtevents/src/directives/MCTRTDataTable.js platform/features/rtevents/src/policies/RTMessagesViewPolicy.js platform/features/rtevents/test/DomainColumnSpec.js platform/features/rtevents/test/RTEventListControllerSpec.js platform/features/rtevents/test/RangeColumnSpec.js platform/features/rtevents/test/policies/RTMessagesViewPolicySpec.js platform/features/rtscrolling/bundle.js platform/features/rtscrolling/src/DomainColumn.js platform/features/rtscrolling/src/NameColumn.js platform/features/rtscrolling/src/RTScrollingListController.js platform/features/rtscrolling/src/RangeColumn.js platform/features/scrolling/src/DomainColumn.js platform/features/scrolling/src/RangeColumn.js platform/features/scrolling/src/ScrollingListController.js platform/features/scrolling/src/ScrollingListPopulator.js platform/features/scrolling/test/DomainColumnSpec.js platform/features/scrolling/test/RangeColumnSpec.js platform/features/scrolling/test/ScrollingListControllerSpec.js platform/features/scrolling/test/ScrollingListPopulatorSpec.js platform/features/table/src/directives/MCTTable.js platform/features/table/test/controllers/TelemetryTableControllerSpec.js platform/representation/src/gestures/DropGesture.js platform/telemetry/src/TelemetryFormatter.js test-main.js
2016-04-08 16:05:04 -07:00
parent 22be6bc860 c591ade479
commit 5e44bfc6c7
179 changed files with 6732 additions and 19586 deletions
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -44,22 +44,7 @@
        </div>
    </div>
    <div class="holder l-flex-col flex-elem grows l-object-wrapper">
-        <div ng-if="isEditable" class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
-            <!-- Toolbar and Save/Cancel buttons -->
-            <div class="l-edit-controls flex-elem l-flex-row flex-align-end">
-                <mct-representation key="'edit-action-buttons'"
-                                    mct-object="domainObject"
-                                    class='flex-elem conclude-editing'>
-                </mct-representation>
-
-            </div>
-            <mct-representation key="representation.selected.key"
-                                mct-object="representation.selected.key && domainObject"
-                                class="abs flex-elem grows object-holder-main scroll"
-                                toolbar="toolbar">
-            </mct-representation>
-        </div>
-        <div ng-if="!isEditable" class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
+        <div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
            <!-- Toolbar and Save/Cancel buttons -->
            <div class="l-edit-controls flex-elem l-flex-row flex-align-end">
                <mct-representation key="'edit-action-buttons'"
--- a/platform/commonUI/browse/res/templates/browse/object-properties.html
+++ b/platform/commonUI/browse/res/templates/browse/object-properties.html
@@ -32,6 +32,7 @@
        </li>
        <li ng-if="contextutalParents.length > 0">
            <em class="t-inspector-part-header" title="The location of this linked object.">Location</em>
+            <div ng-if="primaryParents.length > 0" class="section-header">This Object</div>
            <span class="inspector-location"
                  ng-repeat="parent in contextutalParents"
                  ng-class="{ last:($index + 1) === contextualParents.length }">
@@ -44,7 +45,7 @@
            </span>
        </li>
        <li ng-if="primaryParents.length > 0">
-            <em class="t-inspector-part-header" title="The location of the original object that this was linked from.">Original Location</em>
+            <div class="section-header">Object's Original</div>
            <span class="inspector-location"
                  ng-repeat="parent in primaryParents"
                  ng-class="{ last:($index + 1) === primaryParents.length }">
--- a/platform/commonUI/browse/res/templates/view-object.html
+++ b/platform/commonUI/browse/res/templates/view-object.html
@@ -29,5 +29,5 @@
 -->
 <mct-representation mct-object="domainObject"
                    key="viewObjectTemplate || 'browse-object'"
-                    class="abs holder holder-object">
+                    class="abs holder">
 </mct-representation>
--- a/platform/commonUI/browse/src/creation/AddAction.js
+++ b/platform/commonUI/browse/src/creation/AddAction.js
@@ -91,27 +91,23 @@ define(
                return wizard.populateObjectFromInput(formValue, newObject);
            }

-            function addToParent (populatedObject) {
-                parentObject.getCapability('composition').add(populatedObject);
-                return parentObject.getCapability('persistence').persist().then(function(){
-                    return parentObject;
-                });
+            function persistAndReturn(domainObject) {
+                return domainObject.getCapability('persistence')
+                    .persist()
+                    .then(function () {
+                        return domainObject;
+                    });
            }

-            function save(object) {
-                /*
-                It's necessary to persist the new sub-object in order
-                 that it can be retrieved for composition in the parent.
-                 Future refactoring that allows temporary objects to be
-                 retrieved from object services will make this unnecessary.
-                 */
-                return object.getCapability('editor').save(true);
+            function addToParent (populatedObject) {
+                parentObject.getCapability('composition').add(populatedObject);
+                return persistAndReturn(parentObject);
            }

            return this.dialogService
                .getUserInput(wizard.getFormStructure(false), wizard.getInitialFormValue())
                .then(populateObjectFromInput)
-                .then(save)
+                .then(persistAndReturn)
                .then(addToParent);

        };
--- a/platform/commonUI/edit/bundle.js
+++ b/platform/commonUI/edit/bundle.js
@@ -33,6 +33,8 @@ define([
    "./src/actions/SaveAction",
    "./src/actions/CancelAction",
    "./src/policies/EditActionPolicy",
+    "./src/policies/EditableLinkPolicy",
+    "./src/policies/EditableMovePolicy",
    "./src/policies/EditNavigationPolicy",
    "./src/representers/EditRepresenter",
    "./src/representers/EditToolbarRepresenter",
@@ -55,6 +57,8 @@ define([
    SaveAction,
    CancelAction,
    EditActionPolicy,
+    EditableLinkPolicy,
+    EditableMovePolicy,
    EditNavigationPolicy,
    EditRepresenter,
    EditToolbarRepresenter,
@@ -185,6 +189,14 @@ define([
                    "category": "action",
                    "implementation": EditActionPolicy
                },
+                {
+                    "category": "action",
+                    "implementation": EditableMovePolicy
+                },
+                {
+                    "category": "action",
+                    "implementation": EditableLinkPolicy
+                },
                {
                    "category": "navigation",
                    "message": "There are unsaved changes.",
--- a/platform/commonUI/edit/res/templates/elements.html
+++ b/platform/commonUI/edit/res/templates/elements.html
@@ -19,16 +19,19 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div ng-controller="ElementsController">
+<div ng-controller="ElementsController" class="flex-elem l-flex-col holder grows">
    <mct-include key="'input-filter'"
                 class="flex-elem holder"
                 ng-model="filterBy">
    </mct-include>
-    <div class="current-elements abs" style="height: 100%;">
+    <div class="flex-elem grows vscroll">
        <ul class="tree">
            <li ng-repeat="containedObject in composition | filter:searchText">
                <span class="tree-item">
-                    <mct-representation key="'label'" mct-object="containedObject">
+                    <mct-representation
+                            class="rep-object-label"
+                            key="'label'"
+                            mct-object="containedObject">
                    </mct-representation>
                </span>
            </li>
--- a/platform/commonUI/edit/src/policies/EditableLinkPolicy.js
+++ b/platform/commonUI/edit/src/policies/EditableLinkPolicy.js
@@ -0,0 +1,52 @@
+/*****************************************************************************
+ * 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";
+
+    /**
+     * Policy suppressing links when the linked-to domain object is in
+     * edit mode. Domain objects being edited may not have been persisted,
+     * so creating links to these can result in inconsistent state.
+     *
+     * @memberof platform/commonUI/edit
+     * @constructor
+     * @implements {Policy.<View, DomainObject>}
+     */
+    function EditableLinkPolicy() {
+    }
+
+    EditableLinkPolicy.prototype.allow = function (action, context) {
+        var key = action.getMetadata().key;
+
+        if (key === 'link') {
+            return !((context.selectedObject || context.domainObject)
+                .hasCapability('editor'));
+        }
+
+        // Like all policies, allow by default.
+        return true;
+    };
+
+    return EditableLinkPolicy;
+});
--- a/platform/commonUI/edit/src/policies/EditableMovePolicy.js
+++ b/platform/commonUI/edit/src/policies/EditableMovePolicy.js
@@ -19,33 +19,31 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-.select {
-	@include btnSubtle($colorSelectBg);
-    @if $shdwBtns != none {
-	    margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
+
+define([], function () {
+
+    /**
+     * Policy suppressing move actions among editable and non-editable
+     * domain objects.
+     * @memberof platform/commonUI/edit
+     * @constructor
+     * @implements {Policy.<View, DomainObject>}
+     */
+    function EditableMovePolicy() {
    }
-	padding: 0 $interiorMargin;
-    overflow: hidden;
-	position: relative;
-    line-height: $formInputH;
-	select {
-		@include appearance(none);
-		box-sizing: border-box;
-		background: none;
-		color: $colorSelectFg;
-		cursor: pointer;
-		border: none !important;
-		padding: 4px 25px 2px 0px;
-        width: 130%;
-        option {
-            margin: $interiorMargin 0; // Firefox
+
+    EditableMovePolicy.prototype.allow = function (action, context) {
+        var domainObject = context.domainObject,
+            selectedObject = context.selectedObject,
+            key = action.getMetadata().key;
+
+        if (key === 'move' && domainObject.hasCapability('editor')) {
+            return !!selectedObject && selectedObject.hasCapability('editor');
        }
-	}
-	&:after {
-		@include contextArrow();
-		pointer-events: none;
-		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
-		position: absolute;
-		right: $interiorMargin; top: 0;
-	}
-}
+
+        // Like all policies, allow by default.
+        return true;
+    };
+
+    return EditableMovePolicy;
+});
--- a/platform/commonUI/edit/src/representers/EditRepresenter.js
+++ b/platform/commonUI/edit/src/representers/EditRepresenter.js
@@ -116,8 +116,6 @@ define(
            // Track the represented object
            this.domainObject = representedObject;

-            this.scope.isEditable = representedObject.getCapability('status').get('editing');
-
            // Ensure existing watches are released
            this.destroy();

--- a/platform/commonUI/formats/src/UTCTimeFormat.js
+++ b/platform/commonUI/formats/src/UTCTimeFormat.js
@@ -26,9 +26,10 @@ define([
    moment
 ) {

-    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
+    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss.SSS",
        DATE_FORMATS = [
            DATE_FORMAT,
+            "YYYY-MM-DD HH:mm:ss",
            "YYYY-MM-DD HH:mm",
            "YYYY-MM-DD"
        ];
@@ -46,7 +47,7 @@ define([
    }

    UTCTimeFormat.prototype.format = function (value) {
-        return moment.utc(value).format(DATE_FORMAT);
+        return moment.utc(value).format(DATE_FORMAT) + "Z";
    };

    UTCTimeFormat.prototype.parse = function (text) {
--- a/platform/commonUI/formats/test/UTCTimeFormatSpec.js
+++ b/platform/commonUI/formats/test/UTCTimeFormatSpec.js
@@ -38,6 +38,12 @@ define(
                expect(moment.utc(formatted).valueOf()).toEqual(timestamp);
            });

+            it("displays with millisecond precision", function () {
+                var timestamp = 12345670789,
+                    formatted = format.format(timestamp);
+                expect(moment.utc(formatted).valueOf()).toEqual(timestamp);
+            });
+
            it("validates time inputs", function () {
                expect(format.validate("1977-05-25 11:21:22")).toBe(true);
                expect(format.validate("garbage text")).toBe(false);
--- a/platform/commonUI/general/bundle.js
+++ b/platform/commonUI/general/bundle.js
@@ -48,6 +48,7 @@ define([
    "./src/directives/MCTScroll",
    "./src/directives/MCTSplitPane",
    "./src/directives/MCTSplitter",
+    "./src/directives/MCTTree",
    "text!./res/templates/bottombar.html",
    "text!./res/templates/controls/action-button.html",
    "text!./res/templates/controls/input-filter.html",
@@ -96,6 +97,7 @@ define([
    MCTScroll,
    MCTSplitPane,
    MCTSplitter,
+    MCTTree,
    bottombarTemplate,
    actionButtonTemplate,
    inputFilterTemplate,
@@ -173,10 +175,6 @@ define([
                {
                    "stylesheetUrl": "css/normalize.min.css",
                    "priority": "mandatory"
-                },
-                {
-                    "stylesheetUrl": "css/reset.css",
-                    "priority": "mandatory"
                }
            ],
            "templates": [
@@ -387,6 +385,11 @@ define([
                {
                    "key": "mctSplitter",
                    "implementation": MCTSplitter
+                },
+                {
+                    "key": "mctTree",
+                    "implementation": MCTTree,
+                    "depends": [ '$parse', 'gestureService' ]
                }
            ],
            "constants": [
@@ -514,16 +517,6 @@ define([
                }
            ],
            "licenses": [
-                {
-                    "name": "Modernizr",
-                    "version": "2.6.2",
-                    "description": "Browser/device capability finding",
-                    "author": "Faruk Ateş",
-                    "website": "http://modernizr.com",
-                    "copyright": "Copyright (c) 2009–2015",
-                    "license": "license-mit",
-                    "link": "http://modernizr.com/license/"
-                },
                {
                    "name": "Normalize.css",
                    "version": "1.1.2",
@@ -533,6 +526,16 @@ define([
                    "copyright": "Copyright (c) Nicolas Gallagher and Jonathan Neal",
                    "license": "license-mit",
                    "link": "https://github.com/necolas/normalize.css/blob/v1.1.2/LICENSE.md"
+                },
+                {
+                    "name": "Zepto",
+                    "version": "1.1.6",
+                    "description": "DOM manipulation",
+                    "author": "Thomas Fuchs",
+                    "website": "http://zeptojs.com/",
+                    "copyright": "Copyright (c) 2010-2016 Thomas Fuchs",
+                    "license": "license-mit",
+                    "link": "https://github.com/madrobby/zepto/blob/master/MIT-LICENSE"
                }
            ]
        }
--- 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
--- 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
@@ -80,7 +80,7 @@
 <glyph unicode="&#xe601;" glyph-name="icon-datatable" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 385v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 345.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 70v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
 <glyph unicode="&#xe602;" glyph-name="icon-tabular-scrolling" d="M64 960c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 704v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 576v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 320c35.2 0 64 28.8 64 64v192h-448v-256h384zM512-64l-256 256h512z" />
 <glyph unicode="&#xe603;" glyph-name="icon-alert-triangle" d="M998.208 111.136l-422.702 739.728c-34.928 61.124-92.084 61.124-127.012 0l-422.702-739.728c-34.928-61.126-5.906-111.136 64.494-111.136h843.428c70.4 0 99.422 50.010 64.494 111.136zM512 128c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64c0-35.2-28.8-64-64-64zM627.448 577.242l-38.898-194.486c-6.902-34.516-41.35-62.756-76.55-62.756s-69.648 28.24-76.552 62.758l-38.898 194.486c-6.902 34.516 16.25 62.756 51.45 62.756h128c35.2 0 58.352-28.24 51.448-62.758z" />
-<glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
+<glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
 <glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
 <glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
 <glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
@@ -94,8 +94,11 @@
 <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-eye-open" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224z" />
 <glyph unicode="&#xe616;" glyph-name="icon-eye-open-no-gleam" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224zM576 416c-53 0-96 43-96 96s43 96 96 96 96-43 96-96c0-53-43-96-96-96z" />
-<glyph unicode="&#xe617;" glyph-name="icon-topic" d="M546.4 528.8l32 24c31.6 23.8 91.6 23.8 123.2 0l32-24c10.8-8 22.2-15.2 34.4-21.4v201.2c-38 19.6-82.2 30-128 30-60.4 0-118.2-18.2-162.4-51.4l-32-24c-31.6-23.8-91.6-23.8-123.2 0l-32 24c-10.8 8-22.2 15.2-34.4 21.4v-201.2c38-19.6 82.2-30 128-30 60.4 0 118.2 18.2 162.4 51.4zM640 418.6c-60.4 0-118.2-18.2-162.4-51.4l-32-24c-31.6-23.8-91.6-23.8-123.2 0l-32 24c-10.8 8-22.2 15.2-34.4 21.4v-201.2c38-19.6 82.2-30 128-30 60.4 0 118.2 18.2 162.4 51.4l32 24c31.6 23.8 91.6 23.8 123.2 0l32-24c10.8-8 22.2-15.2 34.4-21.4v201.2c-38 19.6-82.2 30-128 30zM832 960h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM320 128h-127.6c-0.2 0-0.2 0.2-0.4 0.4v639.4c0 0.2 0.2 0.2 0.4 0.4h127.6v191.8h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
-<glyph unicode="&#xe618;" glyph-name="icon-session" d="M923 521.8l-151 100.6c-36 24-103.8 24-139.8 0l-151-100.6c-44.6-29.8-102.6-46.2-163-46.2s-118.4 16.4-163 46.2l-151.4 100.6c-1.8 1.2-3.8 2.4-5.8 3.6v-208c36.6-7.4 70.6-20.8 99-39.8l151-100.6c36-24 103.8-24 139.8 0l151 100.6c44.6 29.8 102.6 46.2 163 46.2s118.4-16.4 163-46.2l151-100.6c1.8-1.2 3.8-2.4 5.8-3.6v208c-36.2 7.2-70.2 20.8-98.6 39.8zM923 137.8l-151 100.6c-36 24-103.8 24-139.8 0l-151-100.6c-44.6-29.8-102.6-46.2-163-46.2s-118.4 16.4-163 46.2l-151.4 100.6c-1.8 1.2-3.8 2.4-5.8 3.6v-112c0-105.6 86.4-192 192-192h640c94.8 0 174.2 69.8 189.4 160.4-35.6 7.4-68.6 20.8-96.4 39.4zM97 762.2l151-100.6c36-24 103.8-24 139.8 0l151 100.6c44.8 29.8 102.6 46.2 163.2 46.2s118.4-16.4 163-46.2l151-100.6c1.8-1.2 3.8-2.4 5.8-3.6v112c0 105.6-86.4 192-192 192h-639.8c-94.8 0-174.2-69.8-189.4-160.4 35.6-7.4 68.6-20.8 96.4-39.4z" />
+<glyph unicode="&#xe617;" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
+<glyph unicode="&#xe618;" glyph-name="icon-session" d="M635.6 435.6c6.6-4.2 13.2-8.6 19.2-13.6l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l135.2 108c0.2 4.8 0.2 9.4 0.2 14.2 0 52.2-7.8 102.4-22.2 149.8l-154.8-123.6c-58.2-46.6-140.2-59.2-211.4-38.4zM248.6 325.8l120.4 96.4c58 46.4 140 59.2 211.2 38.4-6.6 4.2-13.2 8.6-19.2 13.6l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.6c-40-32-91.4-48-143-48-21.6 0-43 2.8-63.8 8.4 0-0.6 0-1.2 0-1.6 5-3.4 10-6.8 14.6-10.6l120.4-96.4c29.8-23.8 83.8-23.8 113.4 0zM120.6 581.8l120.4 96.4c80.2 64.2 205.6 64.2 285.8 0l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l181 144.8c-91.2 140.4-249.6 233.4-429.6 233.4-238.6 0-439.2-163.2-496-384.2 30.8-17.6 77.8-15.6 104.6 6zM689 218l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.4c-40-32-91.4-48-143-48-47.8 0-95.4 13.8-134.2 41.4 85.6-163.6 256.8-275.4 454.2-275.4s368.6 111.8 454.2 275.4c-80.4-57.4-199.8-55.2-277.2 6.6z" />
 <glyph unicode="&#xe619;" glyph-name="icon-bullet" d="M832 208c0-44-36-80-80-80h-480c-44 0-80 36-80 80v480c0 44 36 80 80 80h480c44 0 80-36 80-80v-480z" />
+<glyph unicode="&#xe620;" glyph-name="icon-tabular-realtime" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM448 668l25.060-25.32c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.97 30.338 71.571 49.128 117.56 49.128s87.59-18.79 117.544-49.112l50.456-50.997v-152.2c-24.111 8.83-44.678 22.255-61.542 39.342l-75.518 76.318c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.971-30.343-71.575-49.137-117.568-49.137-20.084 0-39.331 3.584-57.137 10.146l1.145 151.831zM320 0h-192c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192zM320 256h-256v192h256v-192zM320 512h-256v192h256v-192zM640 0h-256v192h256v-192zM448 323.38v174.5c1.88-1.74 3.74-3.5 5.56-5.34l75.5-76.3c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.966 30.333 71.56 49.119 117.542 49.119 43.28 0 82.673-16.644 112.128-43.879l-0.11-174.399c-1.88 1.74-3.74 3.5-5.56 5.34l-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.966-30.333-71.56-49.119-117.542-49.119-43.28 0-82.673 16.644-112.128 43.879zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128z" />
+<glyph unicode="&#xe621;" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
+<glyph unicode="&#xe622;" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
 <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
@@ -98,6 +98,11 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.7em;
+// Wait Spinner Defaults
+$waitSpinnerD: 32px;
+$waitSpinnerTreeD: 20px;
+$waitSpinnerBorderW: 5px;
+$waitSpinnerTreeBorderW: 4px;

 /************************** CONTROLS */
 $controlDisabledOpacity: 0.3;
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -53,7 +53,6 @@ body, html {
 	font-weight: 200;
 	height: 100%;
 	width: 100%;
-	overflow: hidden;
 }

 em {
@@ -85,6 +84,8 @@ p {
 	margin-bottom: $interiorMarginLg;
 }

+ol, ul { padding-left: 0; }
+
 mct-container {
 	display: block;
 }
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@@ -61,9 +61,24 @@
    .l-inspector-part {
        box-sizing: border-box;
        padding-right: $interiorMargin;
-        .form {
+        .tree .form {
            margin-left: $treeVCW + $interiorMarginLg;
-            margin-bottom: $interiorMarginLg;
+        }
+        .section-header {
+            background: none;
+            color: $colorInspectorPropName;
+            border-radius: unset;
+            font-size: inherit;
+            padding: $interiorMarginSm 0;
+        }
+
+        mct-form:not(:last-child) .form {
+            border-bottom: 1px solid $colorInspectorSectionHeaderBg;
+        }
+
+        .form {
+            margin-bottom: $interiorMarginSm;
+            padding-bottom: $interiorMarginLg;
            .form-section {
                margin-bottom: 0;
                &:not(.first) {
@@ -72,7 +87,14 @@
                .form-row {
                    @include align-items(center);
                    border: none;
-                    padding: 0;
+                    padding: $interiorMarginSm 0;
+                    .label {
+                        min-width: 80px;
+                    }
+                    input[type='text'],
+                    input[type='search'] {
+                        width: 100%;
+                    }
                }
            }
        }
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -45,7 +45,6 @@

 /********************************* FORMS */
@import "forms/elems";
-@import "forms/selects";
@import "forms/channel-selector";
@import "forms/datetime";
@import "forms/validation";
--- a/platform/commonUI/general/res/sass/_object-label.scss
+++ b/platform/commonUI/general/res/sass/_object-label.scss
@@ -35,15 +35,15 @@
    }
 }

-mct-representation {
+mct-representation,
+.rep-object-label {
    &.s-status-pending {
        .t-object-label {
            .t-item-icon {
                &:before {
-                    $spinBW: 4px;
-                    @include spinner($spinBW);
+                    @include spinner($waitSpinnerTreeBorderW,  $colorLoadingFg);
                    content: "";
-                    padding: 30%;
+                    height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
                }
                .t-item-icon-glyph {
                    display: none;
@@ -57,7 +57,10 @@ mct-representation {
    }
 }

-.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-    border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
-    border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;
+.selected mct-representation,
+.selected .rep-object-label {
+    .s-status-pending .t-object-label .t-item-icon:before {
+        border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
+        border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;
+    }
 }
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -74,6 +74,12 @@

 .l-composite-control {
    vertical-align: middle;
+    &:not(.l-inline) {
+        margin-bottom: $interiorMargin;
+    }
+    &.l-inline {
+        display: inline-block;
+    }
    &.l-checkbox {
        .composite-control-label {
            line-height: 18px;
@@ -108,12 +114,14 @@
    font-size: 0.7rem;
 }

+/******************************************************** CUSTOM CHECKBOXES */
 label.checkbox.custom,
 label.radio.custom {
    $bg: pullForward($colorBodyBg, 10%);
    $d: $formRowCtrlsH;
    cursor: pointer;
    display: inline-block;
+    line-height: 120%;
    margin-right: $interiorMargin * 4;
    padding-left: $d + $interiorMargin;
    position: relative;
@@ -161,7 +169,40 @@ label.radio.custom {
 label.checkbox.custom input:checked ~ em:before { content: "\32"; }
 label.radio.custom input:checked ~ em:before { content: "\e619"; }

+.s-menu-btn label.checkbox.custom {
+    margin-left: 5px;
+}
+
+.item .checkbox {
+    &.checked label {
+        box-shadow: none;
+        border-bottom: none;
+    }
+}
+
+label.form-control.checkbox {
+    input {
+        margin-right: $interiorMargin;
+        vertical-align: top;
+    }
+}
+
+/******************************************************** INPUTS */
+input[type="text"],
+input[type="search"] {
+    @include nice-input();
+    &.numeric {
+        text-align: right;
+    }
+}
+
+.l-input-lg input[type="text"] {  width: 100% !important; }
+.l-input-med input[type="text"] { width: 200px !important; }
+.l-input-sm input[type="text"] {  width: 50px !important; }
+.l-numeric input[type="text"] { text-align: right; }
+
 .input-labeled {
+    // Used in toolbar
    margin-left: $interiorMargin;
    label {
        display: inline-block;
@@ -175,28 +216,36 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
    }
 }

-.s-menu-btn label.checkbox.custom {
-    margin-left: 5px;
-}
-
-.item .checkbox {
-    &.checked label {
-        box-shadow: none;
-        border-bottom: none;
+/******************************************************** SELECTS */
+.select {
+    @include btnSubtle($colorSelectBg);
+    @if $shdwBtns != none {
+        margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
    }
-}
-
-.context-available,
-.s-icon-btn {
-    $c: $colorKey;
-    color: $c;
-    &:hover {
-        color: lighten($c, 10%);
+    padding: 0 $interiorMargin;
+    overflow: hidden;
+    position: relative;
+    line-height: $formInputH;
+    select {
+        @include appearance(none);
+        box-sizing: border-box;
+        background: none;
+        color: $colorSelectFg;
+        cursor: pointer;
+        border: none !important;
+        padding: 4px 25px 2px 0px;
+        width: 130%;
+        option {
+            margin: $interiorMargin 0; // Firefox
+        }
+    }
+    &:after {
+        @include contextArrow();
+        pointer-events: none;
+        color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
+        position: absolute;
+        right: $interiorMargin; top: 0;
    }
-}
-
-.view-switcher {
-    @include trans-prop-nice-fade($controlFadeMs);
 }

 /******************************************************** OBJECT-HEADER */
@@ -330,7 +379,6 @@ body.desktop .object-header {
 }

 /******************************************************** SLIDERS */
-
 .slider {
    $knobH: 100%;
    .slot {
@@ -424,7 +472,7 @@ body.desktop .object-header {
        border-top: 1px solid $colorInteriorBorder
    }
    .l-time-selects {
-        line-height: $formInputH;
+        line-height: inherit;
    }
 }

@@ -478,11 +526,31 @@ body.desktop .object-header {
    }
 }

-/******************************************************** BROWSER ELEMENTS */
+/******************************************************** TEXTAREA */
+textarea {
+    @include nice-textarea($colorInputBg, $colorInputFg);
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}

+/******************************************************** MISC */
+.context-available,
+.s-icon-btn {
+    $c: $colorKey;
+    color: $c;
+    &:hover {
+        color: lighten($c, 10%);
+    }
+}
+
+.view-switcher {
+    @include trans-prop-nice-fade($controlFadeMs);
+}
+
+/******************************************************** BROWSER ELEMENTS */
 body.desktop {
    ::-webkit-scrollbar {
-        border-radius: 2px;
        box-sizing: border-box;
        box-shadow: inset $scrollbarTrackShdw;
        background-color: $scrollbarTrackColorBg;
@@ -491,15 +559,15 @@ body.desktop {
    }

    ::-webkit-scrollbar-thumb {
-        $bg: $scrollbarThumbColor;
-        $hc: $scrollbarThumbColorHov;
-        $gr: 5%;
-        @include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
-        border-radius: 2px;
        box-sizing: border-box;
-        &:hover {
-            @include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
-        }
+        background: $scrollbarThumbColor;
+        &:hover { background: $scrollbarThumbColorHov; }
+    }
+
+    .overlay ::-webkit-scrollbar-thumb {
+        $lr: 15%;
+        background: $scrollbarThumbColorOverlay;
+        &:hover { background: $scrollbarThumbColorOverlayHov; }
    }

    ::-webkit-scrollbar-corner {
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -51,9 +51,6 @@
 		.title-label {
 			font-size: 1rem;
 		}
-		//&:after {
-		//	color: rgba($colorInvokeMenu, 0.5);
-		//}
 	}

 	.menu {
@@ -113,12 +110,13 @@

 .menu,
 .context-menu,
-.super-menu {
+.super-menu,
+.s-menu-btn .menu {
 	pointer-events: auto;
 	ul li {
-		//padding-left: 25px;
 		a {
 			color: $colorMenuFg;
+            display: block;
 		}
 		.icon {
 			color: $colorMenuIc;
@@ -126,9 +124,6 @@
 		.type-icon {
 			left: $interiorMargin;
 		}
-		&:hover .icon {
-			//color: lighten($colorMenuIc, 5%);
-		}
 	}
 }

@@ -146,7 +141,7 @@
 				height: $d;
 				width: $d;
 				&:before {
-					font-size: 7px !important;// $d/2;
+					font-size: 7px !important;
 					height: $d;
 					width: $d;
 					line-height: $d;
@@ -173,7 +168,6 @@
 	.pane {
 		box-sizing: border-box;
 		&.left {
-			//@include test();
 			border-right: 1px solid pullForward($colorMenuBg, 10%);
 			left: 0;
 			padding-right: $interiorMargin;
@@ -190,7 +184,6 @@
 			}
 		}
 		&.right {
-			//@include test(red);
 			left: auto;
 			right: 0;
 			padding: $interiorMargin * 5;
@@ -216,7 +209,6 @@
 				margin-bottom: 0.5em;
 			}
 			&.description {
-				//color: lighten($colorMenuBg, 30%);
 				color: $colorCreateMenuText;
 				font-size: 0.8em;
 				line-height: 1.5em;
@@ -258,4 +250,4 @@
 	left: auto;
 	right: 0;
 	width: auto;
-}
+}
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -20,13 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .section-header {
-	border-radius: $basicCr;
-	background: $colorFormSectionHeader;
-	$c: lighten($colorBodyFg, 20%);
-	color: $c;
-	font-size: 0.8em;
-	padding: $formTBPad $formLRPad;
-	text-transform: uppercase;
+    text-transform: uppercase;
 }

 .form {
@@ -37,12 +31,20 @@
 		margin-bottom: $interiorMarginLg * 2;
 	}

+    .section-header {
+        border-radius: $basicCr;
+        background: $colorFormSectionHeader;
+        $c: lighten($colorBodyFg, 20%);
+        color: $c;
+        font-size: 0.8em;
+        padding: $formTBPad $formLRPad;
+    }
+
 	.form-row {
 		$m: $interiorMargin;
 		box-sizing: border-box;
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
-		margin-top: $m;
 		padding: $formTBPad 0;
 		position: relative;
 		&.first {
@@ -52,10 +54,7 @@
 		>.label,
 		>.controls {
 			box-sizing: border-box;
-			@include clearfix;
 			font-size: 0.8rem;
-			line-height: $formInputH;
-            min-height: $formInputH;
 		}

 		>.label {
@@ -83,27 +82,12 @@
 					margin-right: 5px;
 				}
 			}
-
-			.l-med input[type="text"] {
-				width: 200px;
-			}
-
-			.l-small input[type="text"] {
-				width: 50px;
-			}
-
-			.l-numeric input[type="text"] {
-				text-align: right;
-			}
-
 			.select {
 				margin-right: $interiorMargin;
 			}
 		}

-		.field-hints {
-			color: darken($colorBodyFg, 20%);
-		}
+		.hint, .field-hints {  color: $colorFieldHint;  }

 		.selector-list {
 			// Used in create overlay to display tree view
@@ -124,25 +108,31 @@
 	}
 }

-.l-controls-first {
-    .form .form-row {
-        margin-top: $interiorMarginSm;
-        >.label,
-        >.controls {
-            line-height: inherit;
-            min-height: inherit;;
-        }
-        >.label {
-            @include flex(1 1 auto);
-            min-width: 0;
-            width: auto;
-            order: 2;
-        }
-        >.controls {
-            @include flex(0 0 auto);
-            margin-right: $interiorMargin;
-            order: 1;
-        }
+.l-controls-first .form .form-row,
+.form .form-row.l-controls-first {
+    >.label,
+    >.controls {
+        line-height: inherit;
+        min-height: inherit;;
+    }
+    >.label {
+        @include flex(1 1 auto);
+        min-width: 0;
+        width: auto;
+        order: 2;
+    }
+    >.controls {
+        @include flex(0 0 auto);
+        margin-right: $interiorMargin;
+        order: 1;
+    }
+}
+
+.l-controls-under.l-flex-row {
+    // Change to use column layout
+    @include flex-direction(column);
+    .flex-elem {
+        margin-bottom: $interiorMarginLg;
    }
 }

@@ -155,13 +145,6 @@
    }
 }

-label.form-control.checkbox {
-	input {
-		margin-right: $interiorMargin;
-		vertical-align: top;
-	}
-}
-
 .hint,
 .s-hint {
 	font-size: 0.9em;
@@ -181,19 +164,4 @@ label.form-control.checkbox {
 		color: lighten($colorFormInvalid, 30%);
 		padding: $interiorMargin;
 	}
-}
-
-input[type="text"],
-input[type="search"] {
-	@include nice-input();
-	&.numeric {
-		text-align: right;
-	}
-}
-
-textarea {
-	@include nice-textarea($colorInputBg, $colorInputFg);
-	position: absolute;
-	height: 100%;
-	width: 100%;
 }
--- a/platform/commonUI/general/res/sass/forms/_validation.scss
+++ b/platform/commonUI/general/res/sass/forms/_validation.scss
@@ -23,9 +23,13 @@
    > .label {
        padding-right: $reqSymbolM; // Keep room for validation element
        &::after {
-	        float: right;
+            position: absolute;
+            right: $interiorMargin;
            font-family: symbolsfont;
            font-size: $reqSymbolFontSize;
+            height: 100%;
+            line-height: 200%;
+
        }
    }
    &.invalid,
--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@@ -28,7 +28,7 @@
    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
 }

-@mixin spinner($b: 5px, $c: $colorKey) {
+@mixin  spinner($b: 5px, $c: $colorKey) {
    @include transform-origin(center);
    @include animation-name(rotation-centered);
    @include animation-duration(0.5s);
@@ -46,10 +46,7 @@
 }

 .wait-spinner {
-	$d: 5%;
-	@include spinner(0.5em, $colorKey);
-	height: auto; width: auto;
-	padding: $d; // Will size object based on parent container WIDTH
+	@include spinner($waitSpinnerBorderW, $colorKey);
 	pointer-events: none;
 	z-index: 2;
 	&.inline {
@@ -60,15 +57,6 @@
 	}
 }

-.treeview .wait-spinner {
-    // Only used in subtree.html, which I don't think this is actually being used
-	$d: 10px;
-	height: $d; width: $d;
-	margin: 0 !important;
-	padding: 0 !important;
-	top: 2px; left: 0;
-}
-
 .loading {
 	// Can be applied to any block element with height and width
    pointer-events: none;
@@ -77,8 +65,8 @@
        content: '';
    }
 	&:before {
-        @include spinner(5px, $colorLoadingFg);
-        padding: 5%;
+        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
+        height: $waitSpinnerD; width: $waitSpinnerD;
        z-index: 10;
 	}
    &:after {
@@ -87,8 +75,22 @@
        display: block;
        z-index: 9;
    }
-    &.tree-item:before {
-        padding: $menuLineH / 4;
-        border-width: 2px;
+    &.tree-item.t-wait-node {
+        $d: $waitSpinnerTreeD;
+        $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2;
+        padding-left: $spinnerL + $d/2 + $interiorMargin;
+        .t-title-label {
+            font-style: italic;
+            opacity: 0.6;
+        }
+        &:before {
+            height: $d;
+            width: $d;
+            border-width: 4px;
+            left: $spinnerL;
+        }
+        &:after {
+            display: none;
+        }
    }
-}
+}
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -35,7 +35,6 @@
        z-index: 100;
    }
    > .holder {
-        //$i: 15%;
        @include containerSubtle($colorOvrBg, $colorOvrFg);
        border-radius: $basicCr * 3;
        color: $colorOvrFg;
@@ -57,15 +56,8 @@
            right: $m;
            bottom: $m;
            left: $m;
-
-            //.top-bar,
-            //.editor,
-            //.bottom-bar {
-            //    @include absPosDefault();
-            //}
        }
    }
-
    .title {
        @include ellipsize();
        font-size: 1.2em;
@@ -73,9 +65,7 @@
        margin-bottom: $interiorMargin;
    }

-    .hint {
-        color: pushBack($colorOvrFg, 20%);
-    }
+    .hint, .field-hints { color: $colorFieldHintOverlay !important;  }

    .abs.top-bar {
        height: $ovrTopBarH;
@@ -88,7 +78,7 @@
        left: 0;
        right: 0;
        overflow: auto;
-        .field.l-med {
+        .field.l-input-med {
            input[type='text'] {
                width: 100%;
            }
@@ -120,7 +110,6 @@
        bottom: 0;
        left: 0;
        overflow: visible;
-        //font-size: 1em;
        height: $ovrFooterH;
    }

@@ -132,11 +121,14 @@
        margin: .5em 0;
        width: 100%;
    }
+
+    .select {
+        box-shadow: $shdwBtnsOverlay;
+    }
 }

 .t-dialog-sm .overlay > .holder {
    // Used for blocker and in-progress dialogs, modal alerts, etc.
-    //@include test(red);
    $h: 225px;
    min-height: $h;
    height: $h;
--- a/platform/commonUI/general/res/sass/startup-base.scss
+++ b/platform/commonUI/general/res/sass/startup-base.scss
@@ -26,6 +26,10 @@
    top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25;
 }

+body, html {
+    overflow: hidden;
+}
+
 .l-splash-holder {
    // Main outer holder.
    @include transition-property(opacity);
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ b/platform/commonUI/general/res/templates/object-inspector.html
@@ -40,7 +40,7 @@
                    <mct-representation
                            key="'edit-elements'"
                            mct-object="domainObject"
-                            class="flex-elem holder grows vscroll current-elements">
+                            class="flex-elem l-flex-col holder grows current-elements">
                    </mct-representation>
                </div>
            </div>
--- a/platform/commonUI/general/res/templates/subtree.html
+++ b/platform/commonUI/general/res/templates/subtree.html
@@ -19,18 +19,6 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<ul class="tree">
-    <li ng-if="!composition">
-        <span class="tree-item">
-            <span class="icon wait-spinner"></span>
-            <span class="title-label">Loading...</span>
-        </span>
-    </li>
-    <li ng-repeat="child in composition">
-        <mct-representation key="'tree-node'"
-                            mct-object="child"
-                            parameters="parameters"
-                            ng-model="ngModel">
-        </mct-representation>
-    </li>
-</ul>
+<mct-tree mct-object="domainObject" mct-model="ngModel.selectedObject">
+</mct-tree>
+
--- a/platform/commonUI/general/res/templates/tree/node.html
+++ b/platform/commonUI/general/res/templates/tree/node.html
@@ -0,0 +1,4 @@
+<span class="tree-item menus-to-left">
+</span>
+<span class="tree-item-subtree">
+</span>
--- a/platform/commonUI/general/res/templates/tree/toggle.html
+++ b/platform/commonUI/general/res/templates/tree/toggle.html
@@ -0,0 +1,2 @@
+<span class='ui-symbol view-control flex-elem'>
+</span>
--- a/platform/commonUI/general/res/templates/tree/tree-label.html
+++ b/platform/commonUI/general/res/templates/tree/tree-label.html
@@ -0,0 +1,8 @@
+<span class="rep-object-label">
+    <div class="t-object-label l-flex-row flex-elem grows">
+        <div class="t-item-icon flex-elem">
+            <div class="t-item-icon-glyph"></div>
+        </div>
+        <div class='t-title-label flex-elem grows'></div>
+    </div>
+</span>
--- a/platform/commonUI/general/res/templates/tree/wait-node.html
+++ b/platform/commonUI/general/res/templates/tree/wait-node.html
@@ -0,0 +1,24 @@
+<!--
+ 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.
+-->
+<li class='tree-item t-wait-node loading'>
+    <span class="t-title-label">Loading...</span>
+</li>
--- a/platform/commonUI/general/src/directives/MCTTree.js
+++ b/platform/commonUI/general/src/directives/MCTTree.js
@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    'angular',
+    '../ui/TreeView'
+], function (angular, TreeView) {
+    function MCTTree($parse, gestureService) {
+        function link(scope, element, attrs) {
+            var treeView = new TreeView(gestureService),
+                expr = $parse(attrs.mctModel),
+                unobserve = treeView.observe(function (domainObject) {
+                    if (domainObject !== expr(scope.$parent)) {
+                        expr.assign(scope.$parent, domainObject);
+                        scope.$apply();
+                    }
+                });
+
+            element.append(angular.element(treeView.elements()));
+
+            scope.$parent.$watch(attrs.mctModel, treeView.value.bind(treeView));
+            scope.$watch('mctObject', treeView.model.bind(treeView));
+            scope.$on('$destroy', unobserve);
+        }
+
+        return {
+            restrict: "E",
+            link: link,
+            scope: { mctObject: "=" }
+        };
+    }
+
+    return MCTTree;
+});
--- a/platform/commonUI/general/src/ui/ToggleView.js
+++ b/platform/commonUI/general/src/ui/ToggleView.js
@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    'zepto',
+    'text!../../res/templates/tree/toggle.html'
+], function ($, toggleTemplate) {
+    function ToggleView(state) {
+        this.expanded = !!state;
+        this.callbacks = [];
+        this.el = $(toggleTemplate);
+        this.el.on('click', function () {
+            this.value(!this.expanded);
+        }.bind(this));
+    }
+
+    ToggleView.prototype.value = function (state) {
+        this.expanded = state;
+
+        if (state) {
+            this.el.addClass('expanded');
+        } else {
+            this.el.removeClass('expanded');
+        }
+
+        this.callbacks.forEach(function (callback) {
+            callback(state);
+        });
+    };
+
+    ToggleView.prototype.observe = function (callback) {
+        this.callbacks.push(callback);
+        return function () {
+            this.callbacks = this.callbacks.filter(function (c) {
+                return c !== callback;
+            });
+        }.bind(this);
+    };
+
+    ToggleView.prototype.elements = function () {
+        return this.el;
+    };
+
+    return ToggleView;
+});
--- a/platform/commonUI/general/src/ui/TreeLabelView.js
+++ b/platform/commonUI/general/src/ui/TreeLabelView.js
@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * 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([
+    'zepto',
+    'text!../../res/templates/tree/tree-label.html'
+], function ($, labelTemplate) {
+    'use strict';
+
+    function TreeLabelView(gestureService) {
+        this.el = $(labelTemplate);
+        this.gestureService = gestureService;
+    }
+
+    function getGlyph(domainObject) {
+        var type = domainObject.getCapability('type');
+        return type.getGlyph();
+    }
+
+    function isLink(domainObject) {
+        var location = domainObject.getCapability('location');
+        return location.isLink();
+    }
+
+    TreeLabelView.prototype.updateView = function (domainObject) {
+        var titleEl = this.el.find('.t-title-label'),
+            glyphEl = this.el.find('.t-item-icon-glyph'),
+            iconEl = this.el.find('.t-item-icon');
+
+        titleEl.text(domainObject ? domainObject.getModel().name : "");
+        glyphEl.text(domainObject ? getGlyph(domainObject) : "");
+
+        if (domainObject && isLink(domainObject)) {
+            iconEl.addClass('l-icon-link');
+        } else {
+            iconEl.removeClass('l-icon-link');
+        }
+    };
+
+    TreeLabelView.prototype.model = function (domainObject) {
+        if (this.unlisten) {
+            this.unlisten();
+            delete this.unlisten;
+        }
+
+        if (this.activeGestures) {
+            this.activeGestures.destroy();
+            delete this.activeGestures;
+        }
+
+        this.updateView(domainObject);
+
+        if (domainObject) {
+            this.unlisten = domainObject.getCapability('mutation')
+                .listen(this.updateView.bind(this, domainObject));
+
+            this.activeGestures = this.gestureService.attachGestures(
+                this.elements(),
+                domainObject,
+                [ 'info', 'menu', 'drag' ]
+            );
+        }
+    };
+
+    TreeLabelView.prototype.elements = function () {
+        return this.el;
+    };
+
+    return TreeLabelView;
+});
--- a/platform/commonUI/general/src/ui/TreeNodeView.js
+++ b/platform/commonUI/general/src/ui/TreeNodeView.js
@@ -0,0 +1,157 @@
+/*****************************************************************************
+ * 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([
+    'zepto',
+    'text!../../res/templates/tree/node.html',
+    './ToggleView',
+    './TreeLabelView'
+], function ($, nodeTemplate, ToggleView, TreeLabelView) {
+    'use strict';
+
+    function TreeNodeView(gestureService, subtreeFactory, selectFn) {
+        this.li = $('<li>');
+
+        this.statusClasses = [];
+
+        this.toggleView = new ToggleView(false);
+        this.toggleView.observe(function (state) {
+            if (state) {
+                if (!this.subtreeView) {
+                    this.subtreeView = subtreeFactory();
+                    this.subtreeView.model(this.activeObject);
+                    this.li.find('.tree-item-subtree').eq(0)
+                        .append($(this.subtreeView.elements()));
+                }
+                $(this.subtreeView.elements()).removeClass('hidden');
+            } else if (this.subtreeView) {
+                $(this.subtreeView.elements()).addClass('hidden');
+            }
+        }.bind(this));
+
+        this.labelView = new TreeLabelView(gestureService);
+
+        $(this.labelView.elements()).on('click', function () {
+            selectFn(this.activeObject);
+        }.bind(this));
+
+        this.li.append($(nodeTemplate));
+        this.li.find('span').eq(0)
+            .append($(this.toggleView.elements()))
+            .append($(this.labelView.elements()));
+
+        this.model(undefined);
+    }
+
+    TreeNodeView.prototype.updateStatusClasses = function (statuses) {
+        this.statusClasses.forEach(function (statusClass) {
+            this.li.removeClass(statusClass);
+        }.bind(this));
+
+        this.statusClasses = statuses.map(function (status) {
+            return 's-status-' + status;
+        });
+
+        this.statusClasses.forEach(function (statusClass) {
+            this.li.addClass(statusClass);
+        }.bind(this));
+    };
+
+    TreeNodeView.prototype.model = function (domainObject) {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+
+        this.activeObject = domainObject;
+
+        if (domainObject && domainObject.hasCapability('composition')) {
+            $(this.toggleView.elements()).addClass('has-children');
+        } else {
+            $(this.toggleView.elements()).removeClass('has-children');
+        }
+
+        if (domainObject && domainObject.hasCapability('status')) {
+            this.unlisten = domainObject.getCapability('status')
+                .listen(this.updateStatusClasses.bind(this));
+            this.updateStatusClasses(
+                domainObject.getCapability('status').list()
+            );
+        }
+
+        this.labelView.model(domainObject);
+        if (this.subtreeView) {
+            this.subtreeView.model(domainObject);
+        }
+    };
+
+    function getIdPath(domainObject) {
+        var context = domainObject && domainObject.getCapability('context');
+
+        function getId(domainObject) {
+            return domainObject.getId();
+        }
+
+        return context ? context.getPath().map(getId) : [];
+    }
+
+    TreeNodeView.prototype.value = function (domainObject) {
+        var activeIdPath = getIdPath(this.activeObject),
+            selectedIdPath = getIdPath(domainObject);
+
+        if (this.onSelectionPath) {
+            this.li.find('.tree-item').eq(0).removeClass('selected');
+            if (this.subtreeView) {
+                this.subtreeView.value(undefined);
+            }
+        }
+
+        this.onSelectionPath =
+            !!domainObject &&
+            !!this.activeObject &&
+            (activeIdPath.length <= selectedIdPath.length) &&
+                activeIdPath.every(function (id, index) {
+                    return selectedIdPath[index] === id;
+                });
+
+        if (this.onSelectionPath) {
+            if (activeIdPath.length === selectedIdPath.length) {
+                this.li.find('.tree-item').eq(0).addClass('selected');
+            } else {
+                // Expand to reveal the selection
+                this.toggleView.value(true);
+                this.subtreeView.value(domainObject);
+            }
+        }
+    };
+
+    /**
+     *
+     * @returns {HTMLElement[]}
+     */
+    TreeNodeView.prototype.elements = function () {
+        return this.li;
+    };
+
+
+    return TreeNodeView;
+});
--- a/platform/commonUI/general/src/ui/TreeView.js
+++ b/platform/commonUI/general/src/ui/TreeView.js
@@ -0,0 +1,141 @@
+/*****************************************************************************
+ * 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([
+    'zepto',
+    './TreeNodeView',
+    'text!../../res/templates/tree/wait-node.html'
+], function ($, TreeNodeView, spinnerTemplate) {
+    'use strict';
+
+    function TreeView(gestureService, selectFn) {
+        this.ul = $('<ul class="tree"></ul>');
+        this.nodeViews = [];
+        this.callbacks = [];
+        this.selectFn = selectFn || this.value.bind(this);
+        this.gestureService = gestureService;
+        this.pending = false;
+    }
+
+    TreeView.prototype.newTreeView = function () {
+        return new TreeView(this.gestureService, this.selectFn);
+    };
+
+    TreeView.prototype.setSize = function (sz) {
+        var nodeView;
+
+        while (this.nodeViews.length < sz) {
+            nodeView = new TreeNodeView(
+                this.gestureService,
+                this.newTreeView.bind(this),
+                this.selectFn
+            );
+            this.nodeViews.push(nodeView);
+            this.ul.append($(nodeView.elements()));
+        }
+
+        while (this.nodeViews.length > sz) {
+            nodeView = this.nodeViews.pop();
+            $(nodeView.elements()).remove();
+        }
+    };
+
+    TreeView.prototype.loadComposition = function () {
+        var self = this,
+            domainObject = this.activeObject;
+
+        function addNode(domainObject, index) {
+            self.nodeViews[index].model(domainObject);
+        }
+
+        function addNodes(domainObjects) {
+            if (self.pending) {
+                self.pending = false;
+                self.nodeViews = [];
+                self.ul.empty();
+            }
+
+            if (domainObject === self.activeObject) {
+                self.setSize(domainObjects.length);
+                domainObjects.forEach(addNode);
+                self.updateNodeViewSelection();
+            }
+        }
+
+        domainObject.useCapability('composition')
+            .then(addNodes);
+    };
+
+    TreeView.prototype.model = function (domainObject) {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+
+        this.activeObject = domainObject;
+        this.ul.empty();
+
+        if (domainObject && domainObject.hasCapability('composition')) {
+            this.pending = true;
+            this.ul.append($(spinnerTemplate));
+            this.unlisten = domainObject.getCapability('mutation')
+                .listen(this.loadComposition.bind(this));
+            this.loadComposition(domainObject);
+        } else {
+            this.setSize(0);
+        }
+    };
+
+    TreeView.prototype.updateNodeViewSelection = function () {
+        this.nodeViews.forEach(function (nodeView) {
+            nodeView.value(this.selectedObject);
+        }.bind(this));
+    };
+
+    TreeView.prototype.value = function (domainObject) {
+        this.selectedObject = domainObject;
+        this.updateNodeViewSelection();
+        this.callbacks.forEach(function (callback) {
+            callback(domainObject);
+        });
+    };
+
+    TreeView.prototype.observe = function (callback) {
+        this.callbacks.push(callback);
+        return function () {
+            this.callbacks = this.callbacks.filter(function (c) {
+                return c !== callback;
+            });
+        }.bind(this);
+    };
+
+    /**
+     *
+     * @returns {HTMLElement[]}
+     */
+    TreeView.prototype.elements = function () {
+        return this.ul;
+    };
+
+
+    return TreeView;
+});
--- a/platform/commonUI/general/test/directives/MCTTreeSpec.js
+++ b/platform/commonUI/general/test/directives/MCTTreeSpec.js
@@ -0,0 +1,95 @@
+/*****************************************************************************
+ * 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,describe,beforeEach,jasmine,it,expect*/
+
+define([
+    '../../src/directives/MCTTree'
+], function (MCTTree) {
+    describe("The mct-tree directive", function () {
+        var mockParse,
+            mockGestureService,
+            mockExpr,
+            mctTree;
+
+        beforeEach(function () {
+            mockGestureService = jasmine.createSpyObj(
+                'gestureService',
+                [ 'attachGestures' ]
+            );
+            mockParse = jasmine.createSpy('$parse');
+            mockExpr = jasmine.createSpy('expr');
+            mockExpr.assign = jasmine.createSpy('assign');
+            mockParse.andReturn(mockExpr);
+
+            mctTree = new MCTTree(mockParse, mockGestureService);
+        });
+
+        it("is applicable as an element", function () {
+            expect(mctTree.restrict).toEqual("E");
+        });
+
+        it("two-way binds to mctObject", function () {
+            expect(mctTree.scope).toEqual({ mctObject: "=" });
+        });
+
+        describe("link", function () {
+            var mockScope,
+                mockElement,
+                testAttrs;
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj('$scope', ['$watch', '$on']);
+                mockElement = jasmine.createSpyObj('element', ['append']);
+                testAttrs = { mctModel: "some-expression" };
+                mockScope.$parent =
+                    jasmine.createSpyObj('$scope', ['$watch', '$on']);
+                mctTree.link(mockScope, mockElement, testAttrs);
+            });
+
+            it("populates the mct-tree element", function () {
+                expect(mockElement.append).toHaveBeenCalled();
+            });
+
+            it("watches for mct-model's expression in the parent", function () {
+                expect(mockScope.$parent.$watch).toHaveBeenCalledWith(
+                    testAttrs.mctModel,
+                    jasmine.any(Function)
+                );
+            });
+
+            it("watches for changes to mct-object", function () {
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "mctObject",
+                    jasmine.any(Function)
+                );
+            });
+
+            it("listens for the $destroy event", function () {
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    "$destroy",
+                    jasmine.any(Function)
+                );
+            });
+        });
+    });
+
+});
--- a/platform/commonUI/general/test/ui/TreeViewSpec.js
+++ b/platform/commonUI/general/test/ui/TreeViewSpec.js
@@ -0,0 +1,313 @@
+/*****************************************************************************
+ * 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,describe,beforeEach,jasmine,it,expect*/
+
+define([
+    '../../src/ui/TreeView',
+    'zepto'
+], function (TreeView, $) {
+    'use strict';
+
+    describe("TreeView", function () {
+        var mockGestureService,
+            mockGestureHandle,
+            mockDomainObject,
+            mockMutation,
+            mockUnlisten,
+            testCapabilities,
+            treeView;
+
+        function makeMockDomainObject(id, model, capabilities) {
+            var mockDomainObject = jasmine.createSpyObj(
+                'domainObject-' + id,
+                [
+                    'getId',
+                    'getModel',
+                    'getCapability',
+                    'hasCapability',
+                    'useCapability'
+                ]
+            );
+            mockDomainObject.getId.andReturn(id);
+            mockDomainObject.getModel.andReturn(model);
+            mockDomainObject.hasCapability.andCallFake(function (c) {
+                return !!(capabilities[c]);
+            });
+            mockDomainObject.getCapability.andCallFake(function (c) {
+                return capabilities[c];
+            });
+            mockDomainObject.useCapability.andCallFake(function (c) {
+                return capabilities[c] && capabilities[c].invoke();
+            });
+            return mockDomainObject;
+        }
+
+        beforeEach(function () {
+            mockGestureService = jasmine.createSpyObj(
+                'gestureService',
+                [ 'attachGestures' ]
+            );
+
+            mockGestureHandle = jasmine.createSpyObj('gestures', ['destroy']);
+
+            mockGestureService.attachGestures.andReturn(mockGestureHandle);
+
+            mockMutation = jasmine.createSpyObj('mutation', ['listen']);
+            mockUnlisten = jasmine.createSpy('unlisten');
+            mockMutation.listen.andReturn(mockUnlisten);
+
+            testCapabilities = { mutation: mockMutation };
+
+            mockDomainObject =
+                makeMockDomainObject('parent', {}, testCapabilities);
+
+            treeView = new TreeView(mockGestureService);
+        });
+
+        describe("elements", function () {
+            var elements;
+
+            beforeEach(function () {
+                elements = treeView.elements();
+            });
+
+            it("is an unordered list", function () {
+                expect(elements[0].tagName.toLowerCase())
+                    .toEqual('ul');
+            });
+        });
+
+        describe("model", function () {
+            var mockComposition;
+
+            function makeGenericCapabilities() {
+                var mockContext =
+                        jasmine.createSpyObj('context', [ 'getPath' ]),
+                    mockType =
+                        jasmine.createSpyObj('type', [ 'getGlyph' ]),
+                    mockLocation =
+                        jasmine.createSpyObj('location', [ 'isLink' ]),
+                    mockMutation =
+                        jasmine.createSpyObj('mutation', [ 'listen' ]),
+                    mockStatus =
+                        jasmine.createSpyObj('status', [ 'listen', 'list' ]);
+
+                mockStatus.list.andReturn([]);
+
+                return {
+                    context: mockContext,
+                    type: mockType,
+                    mutation: mockMutation,
+                    location: mockLocation,
+                    status: mockStatus
+                };
+            }
+
+            function waitForCompositionCallback() {
+                var calledBack = false;
+                testCapabilities.composition.invoke().then(function (c) {
+                    calledBack = true;
+                });
+                waitsFor(function () {
+                    return calledBack;
+                });
+            }
+
+            beforeEach(function () {
+                mockComposition = ['a', 'b', 'c'].map(function (id) {
+                    var testCapabilities = makeGenericCapabilities(),
+                        mockChild =
+                            makeMockDomainObject(id, {}, testCapabilities);
+
+                    testCapabilities.context.getPath
+                        .andReturn([mockDomainObject, mockChild]);
+
+                    return mockChild;
+                });
+
+                testCapabilities.composition =
+                    jasmine.createSpyObj('composition', ['invoke']);
+                testCapabilities.composition.invoke
+                    .andReturn(Promise.resolve(mockComposition));
+
+                treeView.model(mockDomainObject);
+                waitForCompositionCallback();
+            });
+
+            it("adds one node per composition element", function () {
+                expect(treeView.elements()[0].childElementCount)
+                    .toEqual(mockComposition.length);
+            });
+
+            it("listens for mutation", function () {
+                expect(testCapabilities.mutation.listen)
+                    .toHaveBeenCalledWith(jasmine.any(Function));
+            });
+
+            describe("when mutation occurs", function () {
+                beforeEach(function () {
+                    mockComposition.pop();
+                    testCapabilities.mutation.listen
+                        .mostRecentCall.args[0](mockDomainObject.getModel());
+                    waitForCompositionCallback();
+                });
+
+                it("continues to show one node per composition element", function () {
+                    expect(treeView.elements()[0].childElementCount)
+                        .toEqual(mockComposition.length);
+                });
+            });
+
+            describe("when replaced with a non-compositional domain object", function () {
+                beforeEach(function () {
+                    delete testCapabilities.composition;
+                    treeView.model(mockDomainObject);
+                });
+
+                it("stops listening for mutation", function () {
+                    expect(mockUnlisten).toHaveBeenCalled();
+                });
+
+                it("removes all tree nodes", function () {
+                    expect(treeView.elements()[0].childElementCount)
+                        .toEqual(0);
+                });
+            });
+
+            describe("when selection state changes", function () {
+                var selectionIndex = 1;
+
+                beforeEach(function () {
+                    treeView.value(mockComposition[selectionIndex]);
+                });
+
+                it("communicates selection state to an appropriate node", function () {
+                    var selected = $(treeView.elements()[0]).find('.selected');
+                    expect(selected.length).toEqual(1);
+                });
+            });
+
+            describe("when a context-less object is selected", function () {
+                beforeEach(function () {
+                    var testCapabilities = makeGenericCapabilities(),
+                        mockDomainObject =
+                            makeMockDomainObject('xyz', {}, testCapabilities);
+                    delete testCapabilities.context;
+                    treeView.value(mockDomainObject);
+                });
+
+                it("clears all selection state", function () {
+                    var selected = $(treeView.elements()[0]).find('.selected');
+                    expect(selected.length).toEqual(0);
+                });
+            });
+
+            describe("when children contain children", function () {
+                beforeEach(function () {
+                    var newCapabilities = makeGenericCapabilities(),
+                        gcCapabilities = makeGenericCapabilities(),
+                        mockNewChild =
+                            makeMockDomainObject('d', {}, newCapabilities),
+                        mockGrandchild =
+                            makeMockDomainObject('gc', {}, gcCapabilities),
+                        calledBackInner = false;
+
+                    newCapabilities.composition =
+                        jasmine.createSpyObj('composition', [ 'invoke' ]);
+                    newCapabilities.composition.invoke
+                        .andReturn(Promise.resolve([mockGrandchild]));
+                    mockComposition.push(mockNewChild);
+
+                    newCapabilities.context.getPath.andReturn([
+                        mockDomainObject,
+                        mockNewChild
+                    ]);
+                    gcCapabilities.context.getPath.andReturn([
+                        mockDomainObject,
+                        mockNewChild,
+                        mockGrandchild
+                    ]);
+
+                    testCapabilities.mutation.listen
+                        .mostRecentCall.args[0](mockDomainObject);
+                    waitForCompositionCallback();
+                    runs(function () {
+                        // Select the innermost object to force expansion,
+                        // such that we can verify the subtree is present.
+                        treeView.value(mockGrandchild);
+                        newCapabilities.composition.invoke().then(function () {
+                            calledBackInner = true;
+                        });
+                    });
+                    waitsFor(function () {
+                        return calledBackInner;
+                    });
+                });
+
+                it("creates inner trees", function () {
+                    expect($(treeView.elements()[0]).find('ul').length)
+                        .toEqual(1);
+                });
+            });
+
+            describe("when status changes", function () {
+                var testStatuses;
+
+                beforeEach(function () {
+                    var mockStatus = mockComposition[1].getCapability('status');
+
+                    testStatuses = [ 'foo' ];
+
+                    mockStatus.list.andReturn(testStatuses);
+                    mockStatus.listen.mostRecentCall.args[0](testStatuses);
+                });
+
+                it("reflects the status change in the tree", function () {
+                    expect($(treeView.elements()).find('.s-status-foo').length)
+                        .toEqual(1);
+                });
+            });
+        });
+
+        describe("observe", function () {
+            var mockCallback,
+                unobserve;
+
+            beforeEach(function () {
+                mockCallback = jasmine.createSpy('callback');
+                unobserve = treeView.observe(mockCallback);
+            });
+
+            it("notifies listeners when value is changed", function () {
+                treeView.value(mockDomainObject);
+                expect(mockCallback).toHaveBeenCalledWith(mockDomainObject);
+            });
+
+            it("does not notify listeners when deactivated", function () {
+                unobserve();
+                treeView.value(mockDomainObject);
+                expect(mockCallback).not.toHaveBeenCalled();
+            });
+        });
+    });
+
+});
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -83,7 +83,6 @@ define(
                popup.goesUp() ? 'arw-btm' : 'arw-top',
                popup.goesLeft() ? 'arw-right' : 'arw-left'
            ].join(' ');
-            scope.bubbleLayout = 'arw-top arw-left';

            // Create the info bubble, now that we know how to
            // point the arrow...
--- a/platform/commonUI/inspect/test/services/InfoServiceSpec.js
+++ b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
@@ -107,6 +107,35 @@ define(
                );
            });

+            [ false, true ].forEach(function (goesLeft) {
+                [ false, true].forEach(function (goesUp) {
+                    var vertical = goesUp ? "up" : "down",
+                        horizontal = goesLeft ? "left" : "right",
+                        location = [ vertical, horizontal].join('-');
+                    describe("when bubble goes " + location, function () {
+                        var expectedLocation = [
+                                goesUp ? "bottom" : "top",
+                                goesLeft ? "right" : "left"
+                            ].join('-');
+
+                        beforeEach(function () {
+                            mockPopup.goesUp.andReturn(goesUp);
+                            mockPopup.goesDown.andReturn(!goesUp);
+                            mockPopup.goesLeft.andReturn(goesLeft);
+                            mockPopup.goesRight.andReturn(!goesLeft);
+                            service.display('', '', {}, [ 10, 10 ]);
+                        });
+
+                        it("positions the arrow in the " + expectedLocation, function () {
+                            expect(mockScope.bubbleLayout).toEqual([
+                                goesUp ? "arw-btm" : "arw-top",
+                                goesLeft ? "arw-right" : "arw-left"
+                            ].join(' '));
+                        });
+                    });
+                });
+            });
+
        });
    }
 );
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -27,6 +27,7 @@ $colorBtnIcon: $colorKey;
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 $shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.1);
 $sliderColorRange: rgba($sliderColorBase, 0.3);
@@ -76,6 +77,7 @@ $colorInputBg: rgba(#000, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
+$colorFieldHint: pullForward($colorBodyFg, 20%);

 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 3%);
@@ -124,6 +126,7 @@ $colorOvrBg: pullForward($colorBodyBg, 10%);
 $colorOvrFg: pullForward($colorBodyFg, 30%);
 $colorOvrBtnBg: pullForward($colorOvrBg, 20%);
 $colorOvrBtnFg: #fff;
+$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);

 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
@@ -173,6 +176,8 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 $scrollbarThumbColor: lighten($colorBodyBg, 10%);
 $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
+$scrollbarThumbColorOverlay: lighten($colorOvrBg, 10%);
+$scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%);

 // Splitter
 $splitterD: 25px; // splitterD and HandleD should both be odd, or even
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -27,6 +27,7 @@ $colorBtnIcon: #eee;
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
 $shdwBtns: none;
+$shdwBtnsOverlay: none;
 $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.07);
 $sliderColorRange: rgba($sliderColorBase, 0.2);
@@ -76,6 +77,7 @@ $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorFieldHint: pullForward($colorBodyFg, 40%);

 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -124,6 +126,7 @@ $colorOvrBg: $colorBodyBg;
 $colorOvrFg: $colorBodyFg;
 $colorOvrBtnBg: pullForward($colorOvrBg, 40%);
 $colorOvrBtnFg: #fff;
+$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);

 // Items
 $colorItemBg: #ddd;
@@ -170,9 +173,11 @@ $shdwItemTreeIcon: none;
 // Scrollbar
 $scrollbarTrackSize: 10px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
-$scrollbarTrackColorBg: rgba(#000, 0.1);
-$scrollbarThumbColor: darken($colorBodyBg, 50%);//
+$scrollbarTrackColorBg: rgba(#000, 0.2);
+$scrollbarThumbColor: darken($colorBodyBg, 50%);
 $scrollbarThumbColorHov: $colorKey;
+$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
+$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;

 // Splitter
 $splitterD: 24px;