working annotate and new entry contextual

Fixes #2116
- When buttons or links with icons are wrapped,
let the styling set margin and size properly;

API.md

@@ -37,7 +37,7 @@
     - [Time Systems and Bounds](#time-systems-and-bounds)
       - [Defining and Registering Time Systems](#defining-and-registering-time-systems)
       - [Getting and Setting the Active Time System](#getting-and-setting-the-active-time-system)
-    - [Time Bounds](#time-bounds)
+      - [Time Bounds](#time-bounds)
     - [Clocks](#clocks)
       - [Defining and registering clocks](#defining-and-registering-clocks)
       - [Getting and setting active clock](#getting-and-setting-active-clock)
@@ -48,6 +48,10 @@
     - [The Time Conductor](#the-time-conductor)
       - [Time Conductor Configuration](#time-conductor-configuration)
       - [Example conductor configuration](#example-conductor-configuration)
+  - [Indicators](#indicators)
+    - [The URL Status Indicator](#the-url-status-indicator)
+    - [Creating a Simple Indicator](#creating-a-simple-indicator)
+    - [Custom Indicators](#custom-indicators)
   - [Included Plugins](#included-plugins)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -688,7 +692,7 @@ openmct.time.timeSystem(utcTimeSystem, bounds);
 Setting the active time system will trigger a [`'timeSystem'`](#time-events) 
 event.  If you supplied bounds, a [`'bounds'`](#time-events) event will be triggered afterwards with your newly supplied bounds.
 
-### Time Bounds
+#### Time Bounds
 
 The TimeAPI provides a getter/setter for querying and setting time bounds. Time 
 bounds are simply an object with a `start` and an end `end` attribute.
@@ -977,6 +981,72 @@ openmct.install(openmct.plugins.Conductor({
 }));
 ```
 
+## Indicators
+
+Indicators are small widgets that reside at the bottom of the screen and are visible from 
+every screen in Open MCT. They can be used to convey system state using an icon and text.
+Typically an indicator will display an icon (customizable with a CSS class) that will 
+reveal additional information when the mouse cursor is hovered over it.
+
+### The URL Status Indicator
+
+A common use case for indicators is to convey the state of some external system such as a 
+persistence backend or HTTP server. So long as this system is accessible via HTTP request, 
+Open MCT provides a general purpose indicator to show whether the server is available and 
+returing a 2xx status code. The URL Status Indicator is made available as a default plugin. See
+[Included Plugins](#included-plugins) below for details on how to install and configure the 
+URL Status Indicator.
+
+### Creating a Simple Indicator
+
+A simple indicator with an icon and some text can be created and added with minimal code. An indicator 
+of this type exposes functions for customizing the text, icon, and style of the indicator.
+
+eg.
+``` javascript
+var myIndicator = openmct.indicators.simpleIndicator();
+myIndicator.text("Hello World!");
+openmct.indicators.add(myIndicator);
+```
+
+This will create a new indicator and add it to the bottom of the screen in Open MCT.
+By default, the indicator will appear as an information icon. Hovering over the icon will
+reveal the text set via the call to `.text()`. The Indicator object returned by the API 
+call exposes a number of functions for customizing the content and appearance of the indicator:
+
+* `.text([text])`: Gets or sets the text shown when the user hovers over the indicator.
+Accepts an __optional__ `string` argument that, if provided, will be used to set the text. 
+Hovering over the indicator will expand it to its full size, revealing this text alongside 
+the icon. Returns the currently set text as a `string`.
+* `.description([description])`: Gets or sets the indicator's description. Accepts an 
+__optional__ `string` argument that, if provided, will be used to set the text. The description 
+allows for more detail to be provided in a tooltip when the user hovers over the indicator. 
+Returns the currently set text as a `string`.
+* `.iconClass([className])`: Gets or sets the CSS class used to define the icon. Accepts an __optional__ 
+`string` parameter to be used to set the class applied to the indicator. Any of 
+[the built-in glyphs](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home/glyphs?view=styleguide.glyphs) 
+may be used here, or a custom CSS class can be provided. Returns the currently defined CSS 
+class as a `string`.
+* `.statusClass([className])`: Gets or sets the CSS class used to determine status. Accepts an __optional __
+`string` parameter to be used to set a status class applied to the indicator. May be used to apply 
+different colors to indicate status.
+
+### Custom Indicators
+
+A completely custom indicator can be added by simple providing a DOM element to place alongside other indicators.
+
+``` javascript
+    var domNode = document.createElement('div');
+    domNode.innerText = new Date().toString();
+    setInterval(function () {
+        domNode.innerText = new Date().toString();
+    }, 1000);
+
+    openmct.indicators.add({
+        element: domNode
+    });
+```
+
 ## Included Plugins
 
 Open MCT is packaged along with a few general-purpose plugins:
@@ -1000,18 +1070,18 @@ openmct.install(openmct.plugins.CouchDB('http://localhost:9200'))
 * `openmct.plugins.Espresso` and `openmct.plugins.Snow` are two different
   themes (dark and light) available for Open MCT. Note that at least one
   of these themes must be installed for Open MCT to appear correctly.
-* `openmct.plugins.URLIndicatorPlugin` adds an indicator which shows the
+* `openmct.plugins.URLIndicator` adds an indicator which shows the
 availability of a URL with the following options: 
   - `url` : URL to indicate the status of
-  - `cssClass`: Icon to show in the status bar, defaults to `icon-database`, [list of all icons](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home?view=items)
+  - `iconClass`: Icon to show in the status bar, defaults to `icon-database`, [list of all icons](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home?view=items)
   - `interval`: Interval between checking the connection, defaults to `10000`
   - `label` Name showing up as text in the status bar, defaults to url
 ```javascript
-openmct.install(openmct.plugins.URLIndicatorPlugin({
-  url: 'http://google.com',
-  cssClass: 'check',
-  interval: 10000,
-  label: 'Google'
+openmct.install(openmct.plugins.URLIndicator({
+  url: 'http://localhost:8080',
+    iconClass: 'check',
+    interval: 10000,
+    label: 'Localhost'
  })
 );
 ```

example/eventGenerator/bundle.js

@@ -60,8 +60,8 @@ define([
                         "source": "eventGenerator",
                         "domains": [
                             {
-                                "key": "time",
-                                "name": "Time",
+                                "key": "utc",
+                                "name": "Timestamp",
                                 "format": "utc"
                             }
                         ],

example/generator/GeneratorMetadataProvider.js

@@ -30,6 +30,7 @@ define([
                 {
                     key: "sin",
                     name: "Sine",
+                    formatString: '%0.2f',
                     hints: {
                         range: 1
                     }
@@ -37,6 +38,7 @@ define([
                 {
                     key: "cos",
                     name: "Cosine",
+                    formatString: '%0.2f',
                     hints: {
                         range: 2
                     }

example/generator/StateGeneratorProvider.js

@@ -72,7 +72,7 @@ define([
         var data = [];
         while (start <= end && data.length < 5000) {
             data.push(pointForTimestamp(start, duration, domainObject.name));
-            start += 5000;
+            start += duration;
         }
         return Promise.resolve(data);
     };

example/identity/bundle.js

@@ -38,7 +38,8 @@ define([
                     "provides": "identityService",
                     "type": "provider",
                     "depends": [
-                        "dialogService"
+                        "dialogService",
+                        "$q"
                     ]
                 }
             ]

example/identity/src/ExampleIdentityService.js

@@ -55,21 +55,37 @@ define(
          * @implements {IdentityService}
          * @memberof platform/identity
          */
-        function ExampleIdentityProvider(dialogService) {
-            // Handle rejected dialog messages by treating the
-            // current user as undefined.
-            function echo(v) { return v; }
-            function giveUndefined() { return undefined; }
+        function ExampleIdentityProvider(dialogService, $q) {
+            this.dialogService = dialogService;
+            this.$q = $q;
 
-            this.userPromise =
-                dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
-                    .then(echo, giveUndefined);
+            this.returnUser = this.returnUser.bind(this);
+            this.returnUndefined = this.returnUndefined.bind(this);
         }
 
         ExampleIdentityProvider.prototype.getUser = function () {
-            return this.userPromise;
+            if (this.user) {
+                return this.$q.when(this.user);
+            } else {
+                return this.dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
+                    .then(this.returnUser, this.returnUndefined);
+            }
         };
 
+        /**
+         * @private
+         */
+        ExampleIdentityProvider.prototype.returnUser = function (user) {
+            return this.user = user;
+        }
+
+        /**
+         * @private
+         */
+        ExampleIdentityProvider.prototype.returnUndefined = function () {
+            return undefined;
+        }
+
         return ExampleIdentityProvider;
     }
 );

example/notifications/res/dialog-launch.html

@@ -1,9 +1,9 @@
-<span class="status block" ng-controller="DialogLaunchController">
+<span class="h-indicator" ng-controller="DialogLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="status-indicator icon-box-with-arrow"></span><span class="label">
-        <a ng-click="launchProgress(true)">Known</a> |
-        <a ng-click="launchProgress(false)">Unknown</a> |
-        <a ng-click="launchError()">Error</a> |
+    <div class="ls-indicator icon-box-with-arrow s-status-available"><span class="label">
+        <a ng-click="launchProgress(true)">Known</a>
+        <a ng-click="launchProgress(false)">Unknown</a>
+        <a ng-click="launchError()">Error</a>
         <a ng-click="launchInfo()">Info</a>
-    </span><span class="count"></span>
+    </span></div>
 </span>

example/notifications/res/notification-launch.html

@@ -1,9 +1,9 @@
-<span class="status block" ng-controller="NotificationLaunchController">
+<span class="h-indicator" ng-controller="NotificationLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="status-indicator icon-bell"></span><span class="label">
-        <a ng-click="newInfo()">Success</a> |
-        <a ng-click="newError()">Error</a> |
-        <a ng-click="newAlert()">Alert</a> |
+    <div class="ls-indicator icon-bell s-status-available"><span class="label">
+        <a ng-click="newInfo()">Success</a>
+        <a ng-click="newError()">Error</a>
+        <a ng-click="newAlert()">Alert</a>
         <a ng-click="newProgress()">Progress</a>
-    </span><span class="count"></span>
+    </span></div>
 </span>

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

@@ -58,7 +58,10 @@
         position: relative;
     }
 
-    .w-mct-example > div { margin-bottom: $interiorMarginLg; }
+    .w-mct-example {
+        color: #ccc;
+        > div { margin-bottom: $interiorMarginLg; }
+    }
 
     code,
     pre {

example/styleguide/res/templates/controls.html

@@ -149,12 +149,21 @@
         <h2>Local Controls</h2>
         <div class="cols cols1-1">
             <div class="col">
-                <p>Local controls are typically buttons and selects that provide local control to an individual element. Typically, these controls are hidden in order to not block data display until the user hovers their cursor over an element, when the controls are displayed using a transition fade. Mousing out of the element fades the controls from view.</p>
+                <p>Local controls are typically buttons and selects that provide actions in close proximity to a component.</p>
+                <p>These controls can optionally be hidden to reduce clutter until the user hovers their cursor over an enclosing element. To use this approach, apply the class <code>.has-local-controls</code> to the element that should be aware of the hover and ensure that element encloses <code>.h-local-controls</code>.</p>
             </div>
-            <mct-example><div class="plot-display-area" style="height: 100px; padding: 10px; position: relative;">Hover over me
-    <div class="l-local-controls gl-plot-local-controls t-plot-display-controls">
+            <mct-example><div class="plot-display-area" style="padding: 10px; position: relative;">
+                Some content in here
+    <div class="h-local-controls h-local-controls-overlay-content l-btn-set">
         <a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
-        <a class="s-button icon-arrows-out" title="Reset pan/zoom"></a>
+        <a class="s-button icon-reset" title="Reset pan/zoom"></a>
+    </div>
+</div>
+<div class="plot-display-area has-local-controls" style="padding: 10px; position: relative;">
+    Hover here
+    <div class="h-local-controls h-local-controls-overlay-content local-controls-hidden l-btn-set">
+        <a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
+        <a class="s-button icon-reset" title="Reset pan/zoom"></a>
     </div>
 </div></mct-example>
         </div>

example/styleguide/res/templates/status.html

@@ -20,12 +20,12 @@
  at runtime from the About dialog for additional information.
 -->
 <style>
-    .w-mct-example div[class*="s-limit"],
     .w-mct-example div[class*="s-status"],
-    .w-mct-example div[class*="s-unsynced"],
+    .w-mct-example span[class*="s-status"],
+    .w-mct-example div[class*="s-limit"],
     .w-mct-example span[class*="s-limit"] {
-        border-radius: 4px;
-        padding: 3px 7px;
+        border-radius: 3px;
+        padding: 2px 5px;
     }
     .w-mct-example table {
         width: 100%;
@@ -36,65 +36,12 @@
     <h1>Status Indication</h1>
 
     <div class="l-section">
-        <h2>Overview</h2>
-        <p>Many elements in Open MCT need to articulate a dynamic status; Open MCT provides the following styles and conventions to handle this:</p>
-        <ul>
-            <li><strong>Limits</strong>: when telemetry values exceed minimum or maximum values, they can be violating limits. Limit styles include both color and iconography; color is used to indicate severity while icons are used to indicate direction, upper or lower.</li>
-            <li><strong>Status</strong>: Open MCT also provides a number or built-in Status styles allowing telemetry or other displayed information to be visually classified by type. Common uses for these classes are to visually denote event records.</li>
-            <li><strong>Synchronization</strong>: When the system is displaying real-time data, it is very important that displays clearly indicate when they are not doing so, such as when a plot if frozen while panning or zooming. Open MCT provides a style for this.</li>
-        </ul>
-    </div>
-
-    <div class="l-section">
-        <h2>Limits</h2>
+        <h2>Status Classes</h2>
         <div class="cols cols1-1">
             <div class="col">
-                <p>Limit CSS classes can be applied to any block or inline element. Open MCT limit classes set color and optionally an icon, but don't effect other properties. Yellow and red limit classes can be used as is, or allow the application of any custom icon available in Open MCT's glyphs library. &quot;Level&quot; limit classes - upper and lower - always use an icon in addition to a color; Open MCT doesn't support level limits without color.</p>
-                <ul>
-                    <li>Color only</li>
-                    <ul>
-                        <li><code>s-limit-yellow</code>: A yellow limit.</li>
-                        <li><code>s-limit-red</code>: A red limit.</li>
-                    </ul>
-                    <li>Color and icon</li>
-                    <ul>
-                        <li><code>s-limit-yellow-icon</code>: A yellow limit with icon.</li>
-                        <li><code>s-limit-red-icon</code>: A red limit with icon.</li>
-                    </ul>
-                    <li>Upper and lower limit indicators. Must be used with a color limit class to be visible.</li>
-                    <ul>
-                        <li><code>s-limit-upr</code>: Upper limit.
-                        </li>
-                        <li><code>s-limit-lwr</code>: Lower limit.
-                        </li>
-                    </ul>
-                </ul>
-            </div>
-<mct-example><div class="s-limit-yellow">Yellow limit</div>
-<div class="s-limit-red">Red limit</div>
-<div class="s-limit-yellow-icon">Yellow limit with icon</div>
-<div class="s-limit-red-icon">Red limit with icon</div>
-<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
-<div class="s-limit-red s-limit-upr">Upper red limit</div>
-<div class="s-limit-red icon-bell">Red Limit with a custom icon</div>
-<div>Some text with an <span class="s-limit-yellow-icon">inline element</span> showing a yellow limit.</div>
-
-<!-- Limits applied in a table -->
-<table>
-    <tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
-    <tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
-    <tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
-    <tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-bell">0.451</td><td>1.007</td></tr>
-</table>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Status</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Classes here can be applied to elements as needed.</p>
+                <p>Status classes allow any block or inline-block element to be decorated in order to articulate a
+                    status. Provided classes include color-only and color plus icon; custom icons can easily be
+                    employed by using a color-only status class in combination with an <a class="link" href="#/browse/styleguide:home/glyphs?tc.mode=local&tc.timeSystem=utc&tc.startDelta=1800000&tc.endDelta=0&view=styleguide.glyphs">glyph</a>.</p>
                 <ul>
                     <li>Color only</li>
                     <ul>
@@ -106,37 +53,175 @@
                     </ul>
                     <li>Color and icon</li>
                     <ul>
-                        <li><code>s-status-warning-hi-icon</code></li>
-                        <li><code>s-status-warning-lo-icon</code></li>
-                        <li><code>s-status-diagnostic-icon</code></li>
-                        <li><code>s-status-info-icon</code></li>
-                        <li><code>s-status-ok-icon</code></li>
+                        <li><code>s-status-icon-warning-hi</code></li>
+                        <li><code>s-status-icon-warning-lo</code></li>
+                        <li><code>s-status-icon-diagnostic</code></li>
+                        <li><code>s-status-icon-info</code></li>
+                        <li><code>s-status-icon-ok</code></li>
                     </ul>
                 </ul>
             </div>
-<mct-example><div class="s-status-warning-hi">WARNING HI</div>
+<mct-example><!-- Color alone examples -->
+<div class="s-status-warning-hi">WARNING HI</div>
 <div class="s-status-warning-lo">WARNING LOW</div>
 <div class="s-status-diagnostic">DIAGNOSTIC</div>
 <div class="s-status-info">INFO</div>
 <div class="s-status-ok">OK</div>
-<div class="s-status-warning-hi-icon">WARNING HI with icon</div>
-<div class="s-status-warning-lo-icon">WARNING LOW with icon</div>
-<div class="s-status-diagnostic-icon">DIAGNOSTIC with icon</div>
-<div class="s-status-info-icon">INFO with icon</div>
-<div class="s-status-ok-icon">OK with icon</div>
-<div class="s-status-warning-hi icon-gear">WARNING HI with custom icon</div>
+
+<!-- Color and icon examples -->
+<div class="s-status-icon-warning-hi">WARNING HI with icon</div>
+<div class="s-status-icon-warning-lo">WARNING LOW with icon</div>
+<div class="s-status-icon-diagnostic">DIAGNOSTIC with icon</div>
+<div class="s-status-icon-info">INFO with icon</div>
+<div class="s-status-icon-ok">OK with icon</div>
+<div class="s-status-warning-hi icon-alert-triangle">WARNING HI with custom icon</div>
+<div>Some text with an <span class="s-status-icon-diagnostic">inline element</span> showing a Diagnostic status.</div>
 </mct-example>
         </div>
     </div>
 
     <div class="l-section">
-        <h2>Synchronization</h2>
+        <h2>Limit Classes</h2>
         <div class="cols cols1-1">
             <div class="col">
-                <p>When the system is operating in real-time streaming mode, it is important for views that display real-time data to clearly articulate when they are not, such as when a user zooms or pans a plot view, freezing that view. In that case, the CSS class <code>s-unsynced</code> should be applied to that view.</p>
+                <p>Limit classes are a specialized form of status, specifically meant to be applied to telemetry
+                    displays to indicate that a limit threshold has been violated. Open MCT provides both severity
+                    and direction classes; severity (yellow and red) can be used alone or in combination
+                    with direction (upper or lower). Direction classes cannot be used on their own.</p>
+                <p>Like Status classes, Limits can be used as color-only, or color plus icon. Custom icons can
+                be applied in the same fashion as described above.</p>
+                <ul>
+                    <li>Severity color alone</li>
+                    <ul>
+                        <li><code>s-limit-yellow</code>: A yellow limit.</li>
+                        <li><code>s-limit-red</code>: A red limit.</li>
+                    </ul>
+                    <li>Severity color and icon</li>
+                    <ul>
+                        <li><code>s-limit-icon-yellow</code>: A yellow limit with icon.</li>
+                        <li><code>s-limit-icon-red</code>: A red limit with icon.</li>
+                    </ul>
+                    <li>Direction indicators. MUST be used with a &quot;color alone&quot; limit class. See
+                    examples for more.</li>
+                    <ul>
+                        <li><code>s-limit-upr</code>: Upper limit.</li>
+                        <li><code>s-limit-lwr</code>: Lower limit.</li>
+                    </ul>
+                </ul>
             </div>
-<mct-example><div class="s-unsynced">This element is unsynced</div>
+<mct-example><!-- Color alone examples -->
+<div class="s-limit-yellow">Yellow limit</div>
+<div class="s-limit-red">Red limit</div>
+
+<!-- Color and icon examples -->
+<div class="s-limit-icon-yellow">Yellow limit with icon</div>
+<div class="s-limit-icon-red">Red limit with icon</div>
+<div class="s-limit-red icon-alert-rect">Red Limit with a custom icon</div>
+<div>Some text with an <span class="s-limit-icon-yellow">inline element</span> showing a yellow limit.</div>
+
+<!-- Severity and direction examples -->
+<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
+<div class="s-limit-red s-limit-upr">Upper red limit</div>
+
+<!-- Limits applied in a table -->
+<table>
+    <tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
+    <tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
+    <tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
+    <tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-alert-triangle">0.451</td><td>1.007</td></tr>
+</table>
 </mct-example>
         </div>
     </div>
-</div>
+
+    <div class="l-section">
+        <h2>Status Bar Indicators</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Indicators are small iconic notification elements that appear in the Status Bar area of
+                    the application at the window's bottom. Indicators should be used to articulate the state of a
+                    system and optionally provide gestures related to that system. They use a combination of icon and
+                    color to identify themselves and articulate a state respectively.</p>
+                <h3>Recommendations</h3>
+                <ul>
+                    <li><strong>Keep the icon consistent</strong>. The icon is the principal identifier of the system and is a valuable
+                        recall aid for the user. Don't change the icon as a system's state changes, use color and
+                        text for that purpose.</li>
+                    <li><strong>Don't use the same icon more than once</strong>. Select meaningful and distinct icons so the user
+                        will be able to quickly identify what they're looking for.</li>
+                </ul>
+
+                <h3>States</h3>
+                <ul>
+                    <li><strong>Disabled</strong>: The system is not available to the user.</li>
+                    <li><strong>Off / Available</strong>: The system is accessible to the user but is not currently
+                        &quot;On&quot; or has not been configured. If the Indicator directly provides gestures
+                        related to the system, such as opening a configuration dialog box, then use
+                        &quot;Available&quot;; if the user must act elsewhere or the system isn't user-controllable,
+                        use &quot;Off&quot;.</li>
+                    <li><strong>On</strong>: The system is enabled or configured; it is having an effect on the larger application.</li>
+                    <li><strong>Alert / Error</strong>: There has been a problem with the system. Generally, &quot;Alert&quot;
+                        should be used to call attention to an issue that isn't critical, while  &quot;Error&quot;
+                        should be used to call attention to a problem that the user should really be aware of or do
+                        something about.</li>
+                </ul>
+
+                <h3>Structure</h3>
+                <p>Indicators consist of a <code>.ls-indicator</code>
+                    wrapper element with <code>.icon-*</code> classes for the type of thing they represent and
+                    <code>.s-status-*</code> classes to articulate the current state. Title attributes should be used
+                    to provide more verbose information about the thing and/or its status.</p>
+                <p>The wrapper encloses a <code>.label</code> element that is displayed on hover. This element should
+                    include a brief statement of the current status, and can also include clickable elements
+                    as <code>&lt;a&gt;</code> tags. An optional <code>.count</code> element can be included to display
+                    information such as a number of messages.</p>
+                <p>Icon classes are as defined on the
+                    <a class="link" href="#/browse/styleguide:home/glyphs?tc.mode=local&tc.timeSystem=utc&tc.startDelta=1800000&tc.endDelta=0&view=styleguide.glyphs">
+                        Glyphs page</a>. Status classes applicable to Indicators are as follows:</p>
+                <ul>
+                    <li><code>s-status-disabled</code></li>
+                    <li><code>s-status-off</code></li>
+                    <li><code>s-status-available</code></li>
+                    <li><code>s-status-on</code></li>
+                    <li><code>s-status-alert</code></li>
+                    <li><code>s-status-error</code></li>
+                </ul>
+            </div>
+<mct-example><div class="s-ue-bottom-bar status-holder s-status-bar">
+    <span class="ls-indicator icon-database s-status-disabled" title="The system is currently disabled.">
+        <span class="label">System not enabled.</span>
+    </span>
+</div>
+
+<div class="s-ue-bottom-bar status-holder s-status-bar">
+    <span class="ls-indicator icon-database s-status-available" title="Configure data connection.">
+        <span class="label">Data connection available
+            <a class="icon-gear">Configure</a>
+        </span>
+    </span>
+</div>
+
+<div class="s-ue-bottom-bar status-holder s-status-bar">
+    <span class="ls-indicator icon-database s-status-on" title="Data connected.">
+        <span class="label">Connected to Skynet
+            <a class="icon-gear">Change</a>
+            <a>Disconnect</a>
+        </span>
+    </span>
+</div>
+
+<div class="s-ue-bottom-bar status-holder s-status-bar">
+    <span class="ls-indicator icon-database s-status-alert" title="System is self-aware.">
+        <span class="label">Skynet at Turing Level 5</span>
+    </span>
+    <span class="ls-indicator icon-bell s-status-error" title="You have alerts.">
+        <span class="label">
+            <a class="icon-alert-triangle">View Alerts</a>
+        </span>
+        <span class="count">495</span>
+    </span>
+</div>
+</mct-example>
+        </div>
+    </div>
+</div>

example/worker/src/FibonacciIndicator.js

@@ -54,7 +54,7 @@ define(
                     return "icon-object-unknown";
                 },
                 getText: function () {
-                    return latest;
+                    return "" + latest;
                 },
                 getDescription: function () {
                     return "";

index.html

@@ -70,9 +70,11 @@
                 }));
                 openmct.install(openmct.plugins.SummaryWidget());
                 openmct.install(openmct.plugins.Notebook());
+                openmct.install(openmct.plugins.NotebookV2());
                 openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
                 openmct.time.timeSystem('utc');
                 openmct.start();
+                window.openmct = openmct;
             });
         </script>
         <link rel="stylesheet" href="platform/commonUI/general/res/css/startup-base.css">

karma.conf.js

@@ -37,6 +37,7 @@ module.exports = function(config) {
             {pattern: 'bower_components/**/*.js', included: false},
             {pattern: 'node_modules/d3-*/**/*.js', included: false},
             {pattern: 'node_modules/vue/**/*.js', included: false},
+            {pattern: 'node_modules/printj/dist/*.js', included: false},
             {pattern: 'src/**/*', included: false},
             {pattern: 'node_modules/painterro/build/*.js', included: false},
             {pattern: 'node_modules/html2canvas/dist/*', included: false},
@@ -64,7 +65,7 @@ module.exports = function(config) {
         // Test results reporter to use
         // Possible values: 'dots', 'progress'
         // Available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['progress', 'coverage', 'html', 'junit'],
+        reporters: ['progress', 'coverage', 'html'],
 
         // Web server port.
         port: 9876,
@@ -80,7 +81,7 @@ module.exports = function(config) {
         // Specify browsers to run tests in.
         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
         browsers: [
-            'Chrome'
+            'ChromeHeadless'
         ],
 
         // Code coverage reporting.
@@ -103,10 +104,6 @@ module.exports = function(config) {
             foldAll: false
         },
 
-        junitReporter: {
-            outputDir: process.env.CIRCLE_TEST_REPORTS || 'dist/reports/junit'
-        },
-
         // Continuous Integration mode.
         // If true, Karma captures browsers, runs the tests and exits.
         singleRun: true

openmct.js

@@ -50,7 +50,8 @@ requirejs.config({
         "d3-time": "node_modules/d3-time/build/d3-time.min",
         "d3-time-format": "node_modules/d3-time-format/build/d3-time-format.min",
         "html2canvas": "node_modules/html2canvas/dist/html2canvas.min",
-        "painterro": "node_modules/painterro/build/painterro.min"
+        "painterro": "node_modules/painterro/build/painterro.min",
+        "printj": "node_modules/printj/dist/printj.min"
     },
     "shim": {
         "angular": {

package.json

@@ -32,18 +32,17 @@
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^1.6.0",
     "html2canvas": "^1.0.0-alpha.12",
-    "jasmine-core": "^2.3.0",
+    "jasmine-core": "^3.1.0",
     "jscs-html-reporter": "^0.1.0",
     "jsdoc": "^3.3.2",
     "jshint": "^2.7.0",
-    "karma": "^0.13.3",
-    "karma-chrome-launcher": "^0.1.12",
-    "karma-cli": "0.0.4",
-    "karma-coverage": "^0.5.3",
+    "karma": "^2.0.3",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-cli": "^1.0.1",
+    "karma-coverage": "^1.1.2",
     "karma-html-reporter": "^0.2.7",
-    "karma-jasmine": "^0.1.5",
-    "karma-junit-reporter": "^0.3.8",
-    "karma-requirejs": "^0.2.2",
+    "karma-jasmine": "^1.1.2",
+    "karma-requirejs": "^1.1.0",
     "lodash": "^3.10.1",
     "markdown-toc": "^0.11.7",
     "marked": "^0.3.5",
@@ -51,6 +50,7 @@
     "mkdirp": "^0.5.1",
     "moment": "^2.11.1",
     "node-bourbon": "^4.2.3",
+    "printj": "^1.1.0",
     "requirejs": "2.1.x",
     "split": "^1.0.0",
     "v8-compile-cache": "^1.1.0"

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

@@ -19,41 +19,46 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-controller="ObjectInspectorController as controller">
-    <ul class="flex-elem grows l-inspector-part">
-        <li>
-            <em class="t-inspector-part-header">Properties</em>
-            <div class="inspector-properties"
-                 ng-repeat="data in metadata"
-                 ng-class="{ first:$index === 0 }">
-                <div class="label">{{ data.name }}</div>
-                <div class="value">{{ data.value }}</div>
+<div ng-controller="ObjectInspectorController as controller" class="grid-properties">
+    <ul class="l-inspector-part">
+        <h2 class="first">Properties</h2>
+        <li class="t-repeat grid-row"
+             ng-repeat="data in metadata"
+             ng-class="{ first:$index === 0 }">
+            <div class="grid-cell label">{{ data.name }}</div>
+            <div class="grid-cell value">{{ data.value }}</div>
+        </li>
+    </ul>
+
+    <ul class="l-inspector-part" ng-if="contextutalParents.length > 0">
+        <h2 title="The location of this linked object.">Location</h2>
+        <li class="grid-row">
+            <div class="label" ng-if="primaryParents.length > 0">This Link</div>
+            <div class="grid-cell value">
+                <div class="t-repeat inspector-location"
+                     ng-repeat="parent in contextutalParents"
+                     ng-class="{ last:($index + 1) === contextualParents.length }">
+                    <mct-representation key="'label'"
+                                        mct-object="parent"
+                                        ng-click="parent.getCapability('action').perform('navigate')"
+                                        class="location-item">
+                    </mct-representation>
+                </div>
             </div>
         </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 }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-click="parent.getCapability('action').perform('navigate')"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-        <li ng-if="primaryParents.length > 0">
-            <div class="section-header">Object's Original</div>
-            <span class="inspector-location"
-                  ng-repeat="parent in primaryParents"
-                  ng-class="{ last:($index + 1) === primaryParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-click="parent.getCapability('action').perform('navigate')"
-                                    class="location-item">
-                </mct-representation>
-            </span>
+        <li class="grid-row" ng-if="primaryParents.length > 0">
+            <div class="grid-cell label">Original</div>
+            <div class="grid-cell value">
+                <div class="t-repeat inspector-location value"
+                     ng-repeat="parent in primaryParents"
+                     ng-class="{ last:($index + 1) === primaryParents.length }">
+                    <mct-representation key="'label'"
+                                        mct-object="parent"
+                                        ng-click="parent.getCapability('action').perform('navigate')"
+                                        class="location-item">
+                    </mct-representation>
+                </div>
+            </div>
         </li>
     </ul>
 </div>

platform/commonUI/browse/test/BrowseControllerSpec.js

@@ -19,6 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/*global console*/
 
 /**
  * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
@@ -48,9 +49,19 @@ define(
                 controller;
 
             function waitsForNavigation() {
-                var calls = mockNavigationService.setNavigation.calls.length;
-                waitsFor(function () {
-                    return mockNavigationService.setNavigation.calls.length > calls;
+                return new Promise(function (resolve) {
+                    mockNavigationService.setNavigation.and.callFake(function (obj) {
+                        var returnValue;
+                        try {
+                            returnValue = NavigationService.prototype.setNavigation.call(mockNavigationService, obj);
+                        } catch (err) {
+                            console.error(err);
+                            //Not rejecting because 'setNavigation' has been called, which is what's being tested here.
+                            //Rejecting will fail tests.
+                        }
+                        resolve();
+                        return returnValue;
+                    });
                 });
             }
 
@@ -78,7 +89,7 @@ define(
                     "urlService",
                     ["urlForLocation"]
                 );
-                mockUrlService.urlForLocation.andCallFake(function (mode, object) {
+                mockUrlService.urlForLocation.and.callFake(function (mode, object) {
                     if (object === mockDefaultRootObject) {
                         return [mode, testDefaultRoot].join('/');
                     }
@@ -106,7 +117,7 @@ define(
                     "removeListener"
                 ].forEach(function (method) {
                     spyOn(mockNavigationService, method)
-                        .andCallThrough();
+                        .and.callThrough();
                 });
                 mockRootObject = jasmine.createSpyObj(
                     "rootObjectContainer",
@@ -124,60 +135,58 @@ define(
                     "nestedDomainObject",
                     ["getId", "getCapability", "getModel", "useCapability", "hasCapability"]
                 );
-                mockObjectService.getObjects.andReturn(Promise.resolve({
+                mockObjectService.getObjects.and.returnValue(Promise.resolve({
                     ROOT: mockRootObject
                 }));
-                mockRootObject.useCapability.andReturn(Promise.resolve([
+                mockRootObject.useCapability.and.returnValue(Promise.resolve([
                     mockOtherDomainObject,
                     mockDefaultRootObject
                 ]));
-                mockRootObject.hasCapability.andReturn(true);
-                mockDefaultRootObject.useCapability.andReturn(Promise.resolve([
+                mockRootObject.hasCapability.and.returnValue(true);
+                mockDefaultRootObject.useCapability.and.returnValue(Promise.resolve([
                     mockNextObject
                 ]));
-                mockDefaultRootObject.hasCapability.andReturn(true);
-                mockOtherDomainObject.hasCapability.andReturn(false);
-                mockNextObject.useCapability.andReturn(undefined);
-                mockNextObject.hasCapability.andReturn(false);
-                mockNextObject.getId.andReturn("next");
-                mockDefaultRootObject.getId.andReturn(testDefaultRoot);
+                mockDefaultRootObject.hasCapability.and.returnValue(true);
+                mockOtherDomainObject.hasCapability.and.returnValue(false);
+                mockNextObject.useCapability.and.returnValue(undefined);
+                mockNextObject.hasCapability.and.returnValue(false);
+                mockNextObject.getId.and.returnValue("next");
+                mockDefaultRootObject.getId.and.returnValue(testDefaultRoot);
 
                 instantiateController();
-                waitsForNavigation();
+                return waitsForNavigation();
             });
 
             it("uses composition to set the navigated object, if there is none", function () {
                 instantiateController();
-                waitsForNavigation();
-                runs(function () {
+                return waitsForNavigation().then(function () {
                     expect(mockNavigationService.setNavigation)
-                        .toHaveBeenCalledWith(mockDefaultRootObject);
+                    .toHaveBeenCalledWith(mockDefaultRootObject);
                 });
             });
 
             it("navigates to a root-level object, even when default path is not found", function () {
                 mockDefaultRootObject.getId
-                    .andReturn("something-other-than-the-" + testDefaultRoot);
+                    .and.returnValue("something-other-than-the-" + testDefaultRoot);
                 instantiateController();
 
-                waitsForNavigation();
-                runs(function () {
+                return waitsForNavigation().then(function () {
                     expect(mockNavigationService.setNavigation)
-                        .toHaveBeenCalledWith(mockDefaultRootObject);
+                    .toHaveBeenCalledWith(mockDefaultRootObject);
                 });
+            });
 
-            });
-            //
             it("does not try to override navigation", function () {
-                mockNavigationService.getNavigation.andReturn(mockDefaultRootObject);
+                mockNavigationService.getNavigation.and.returnValue(mockDefaultRootObject);
                 instantiateController();
-                waitsForNavigation();
-                expect(mockScope.navigatedObject).toBe(mockDefaultRootObject);
+                return waitsForNavigation().then(function () {
+                    expect(mockScope.navigatedObject).toBe(mockDefaultRootObject);
+                });
             });
-            //
+
             it("updates scope when navigated object changes", function () {
                 // Should have registered a listener - call it
-                mockNavigationService.addListener.mostRecentCall.args[0](
+                mockNavigationService.addListener.calls.mostRecent().args[0](
                     mockOtherDomainObject
                 );
                 expect(mockScope.navigatedObject).toEqual(mockOtherDomainObject);
@@ -189,19 +198,18 @@ define(
                     "$destroy",
                     jasmine.any(Function)
                 );
-                mockScope.$on.mostRecentCall.args[1]();
+                mockScope.$on.calls.mostRecent().args[1]();
 
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
-                    mockNavigationService.addListener.mostRecentCall.args[0]
+                    mockNavigationService.addListener.calls.mostRecent().args[0]
                 );
             });
 
             it("uses route parameters to choose initially-navigated object", function () {
                 mockRoute.current.params.ids = testDefaultRoot + "/next";
                 instantiateController();
-                waitsForNavigation();
-                runs(function () {
+                return waitsForNavigation().then(function () {
                     expect(mockScope.navigatedObject).toBe(mockNextObject);
                     expect(mockNavigationService.setNavigation)
                         .toHaveBeenCalledWith(mockNextObject);
@@ -214,12 +222,10 @@ define(
                 // it hits an invalid ID.
                 mockRoute.current.params.ids = testDefaultRoot + "/junk";
                 instantiateController();
-                waitsForNavigation();
-                runs(function () {
+                return waitsForNavigation().then(function () {
                     expect(mockScope.navigatedObject).toBe(mockDefaultRootObject);
                     expect(mockNavigationService.setNavigation)
                         .toHaveBeenCalledWith(mockDefaultRootObject);
-
                 });
             });
 
@@ -229,8 +235,7 @@ define(
                 // should stop at it since remaining IDs cannot be loaded.
                 mockRoute.current.params.ids = testDefaultRoot + "/next/junk";
                 instantiateController();
-                waitsForNavigation();
-                runs(function () {
+                return waitsForNavigation().then(function () {
                     expect(mockScope.navigatedObject).toBe(mockNextObject);
                     expect(mockNavigationService.setNavigation)
                         .toHaveBeenCalledWith(mockNextObject);
@@ -244,11 +249,11 @@ define(
                 expect(mockRoute.current.pathParams.ids)
                     .not
                     .toBe(testDefaultRoot + '/next');
-                mockLocation.path.andCallFake(function () {
+                mockLocation.path.and.callFake(function () {
                     expect(mockRoute.current.pathParams.ids)
                         .toBe(testDefaultRoot + '/next');
                 });
-                mockNavigationService.addListener.mostRecentCall.args[0](
+                mockNavigationService.addListener.calls.mostRecent().args[0](
                     mockNextObject
                 );
                 expect(mockLocation.path).toHaveBeenCalledWith(

platform/commonUI/browse/test/BrowseObjectControllerSpec.js

@@ -20,7 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-
 define(
     ["../src/BrowseObjectController"],
     function (BrowseObjectController) {
@@ -33,7 +32,7 @@ define(
 
             // Utility function; look for a $watch on scope and fire it
             function fireWatch(expr, value) {
-                mockScope.$watch.calls.forEach(function (call) {
+                mockScope.$watch.calls.all().forEach(function (call) {
                     if (call.args[0] === expr) {
                         call.args[1](value);
                     }
@@ -50,7 +49,7 @@ define(
                     "$location",
                     ["path", "search"]
                 );
-                mockLocation.search.andReturn({});
+                mockLocation.search.and.returnValue({});
 
                 controller = new BrowseObjectController(
                     mockScope,
@@ -65,7 +64,7 @@ define(
 
                 // Allows the path index to be checked
                 // prior to setting $route.current
-                mockLocation.path.andReturn("/browse/");
+                mockLocation.path.and.returnValue("/browse/");
             });
 
             it("sets the active view from query parameters", function () {
@@ -79,10 +78,10 @@ define(
                         { key: 'xyz' }
                     ];
 
-                mockDomainObject.useCapability.andCallFake(function (c) {
+                mockDomainObject.useCapability.and.callFake(function (c) {
                     return (c === 'view') && testViews;
                 });
-                mockLocation.search.andReturn({ view: 'def' });
+                mockLocation.search.and.returnValue({ view: 'def' });
 
                 fireWatch('domainObject', mockDomainObject);
                 expect(mockScope.representation.selected)

platform/commonUI/browse/test/InspectorPaneControllerSpec.js

@@ -50,14 +50,14 @@ define(
                     "navigationService",
                     ["getNavigation", "addListener"]
                 );
-                mockNavigationService.addListener.andReturn(mockNavigationUnlistener);
+                mockNavigationService.addListener.and.returnValue(mockNavigationUnlistener);
 
                 mockStatusUnlistener = jasmine.createSpy("statusUnlistener");
                 mockStatusCapability = jasmine.createSpyObj(
                     "statusCapability",
                     ["listen"]
                 );
-                mockStatusCapability.listen.andReturn(mockStatusUnlistener);
+                mockStatusCapability.listen.and.returnValue(mockStatusUnlistener);
 
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
@@ -68,13 +68,13 @@ define(
                         'hasCapability'
                     ]
                 );
-                mockDomainObject.getId.andReturn("domainObject");
-                mockDomainObject.getModel.andReturn({});
-                mockDomainObject.hasCapability.andReturn(true);
-                mockDomainObject.getCapability.andReturn(mockStatusCapability);
+                mockDomainObject.getId.and.returnValue("domainObject");
+                mockDomainObject.getModel.and.returnValue({});
+                mockDomainObject.hasCapability.and.returnValue(true);
+                mockDomainObject.getCapability.and.returnValue(mockStatusCapability);
 
                 mockLocation = jasmine.createSpyObj('location', ['search']);
-                mockLocation.search.andReturn({});
+                mockLocation.search.and.returnValue({});
 
                 mockAttrs = {};
 
@@ -84,7 +84,7 @@ define(
             it("listens for changes to navigation and attaches a status" +
                 " listener", function () {
                 expect(mockNavigationService.addListener).toHaveBeenCalledWith(jasmine.any(Function));
-                mockNavigationService.addListener.mostRecentCall.args[0](mockDomainObject);
+                mockNavigationService.addListener.calls.mostRecent().args[0](mockDomainObject);
                 expect(mockStatusCapability.listen).toHaveBeenCalledWith(jasmine.any(Function));
             });
 
@@ -93,8 +93,8 @@ define(
                 controller.toggle();
                 // test pre-condition that inspector is hidden
                 expect(controller.visible()).toBe(false);
-                mockNavigationService.addListener.mostRecentCall.args[0](mockDomainObject);
-                mockStatusCapability.listen.mostRecentCall.args[0](["editing"]);
+                mockNavigationService.addListener.calls.mostRecent().args[0](mockDomainObject);
+                mockStatusCapability.listen.calls.mostRecent().args[0](["editing"]);
                 expect(controller.visible()).toBe(true);
             });
 

platform/commonUI/browse/test/MenuArrowControllerSpec.js

@@ -60,8 +60,8 @@ define(
                 mockActionContext.domainObject = mockDomainObject;
                 mockActionContext.event = mockEvent;
                 mockScope.domainObject = mockDomainObject;
-                mockDomainObject.getCapability.andReturn(mockContextMenuAction);
-                mockContextMenuAction.perform.andReturn(jasmine.any(Function));
+                mockDomainObject.getCapability.and.returnValue(mockContextMenuAction);
+                mockContextMenuAction.perform.and.returnValue(jasmine.any(Function));
 
                 controller = new MenuArrowController(mockScope);
             });

platform/commonUI/browse/test/ObjectHeaderControllerSpec.js

@@ -39,7 +39,7 @@ define(
                 mockMutationCapability = jasmine.createSpyObj("mutation", ["mutate"]);
                 mockTypeCapability = jasmine.createSpyObj("type", ["typeDef", "hasFeature"]);
                 mockTypeCapability.typeDef = { name: ""};
-                mockTypeCapability.hasFeature.andCallFake(function (feature) {
+                mockTypeCapability.hasFeature.and.callFake(function (feature) {
                     return feature === 'creation';
                 });
 
@@ -52,8 +52,8 @@ define(
                     name: "Test name"
                 };
                 mockDomainObject = jasmine.createSpyObj("domainObject", ["getCapability", "getModel"]);
-                mockDomainObject.getModel.andReturn(model);
-                mockDomainObject.getCapability.andCallFake(function (key) {
+                mockDomainObject.getModel.and.returnValue(model);
+                mockDomainObject.getCapability.and.callFake(function (key) {
                     return mockCapabilities[key];
                 });
 
@@ -62,7 +62,7 @@ define(
                 };
 
                 mockCurrentTarget = jasmine.createSpyObj("currentTarget", ["blur", "textContent"]);
-                mockCurrentTarget.blur.andReturn(mockCurrentTarget);
+                mockCurrentTarget.blur.and.returnValue(mockCurrentTarget);
 
                 mockEvent = {
                     which: {},
@@ -109,7 +109,7 @@ define(
 
                 expect(mockMutationCapability.mutate).toHaveBeenCalledWith(jasmine.any(Function));
 
-                mockMutationCapability.mutate.mostRecentCall.args[0](model);
+                mockMutationCapability.mutate.calls.mostRecent().args[0](model);
 
                 expect(mockDomainObject.getModel().name).toBe("New name");
             });
@@ -127,7 +127,7 @@ define(
             });
 
             it("disallows editting name when object is non-creatable", function () {
-                mockTypeCapability.hasFeature.andReturn(false);
+                mockTypeCapability.hasFeature.and.returnValue(false);
 
                 expect(controller.allowEdit()).toBe(false);
 

platform/commonUI/browse/test/PaneControllerSpec.js

@@ -53,8 +53,8 @@ define(
                         ['getId', 'getModel', 'getCapability']
                     );
 
-                    mockDomainObject.getId.andReturn(id);
-                    mockDomainObject.getModel.andReturn({});
+                    mockDomainObject.getId.and.returnValue(id);
+                    mockDomainObject.getModel.and.returnValue({});
 
                     return mockDomainObject;
                 });
@@ -65,7 +65,7 @@ define(
                 mockWindow = jasmine.createSpyObj("$window", ["open"]);
 
                 mockLocation = jasmine.createSpyObj('location', ['search']);
-                mockLocation.search.andReturn({});
+                mockLocation.search.and.returnValue({});
 
                 mockAttrs = {};
             });
@@ -83,9 +83,9 @@ define(
             });
 
             it("collapses on navigation changes on portrait-oriented phones", function () {
-                mockAgentService.isMobile.andReturn(true);
-                mockAgentService.isPhone.andReturn(true);
-                mockAgentService.isPortrait.andReturn(true);
+                mockAgentService.isMobile.and.returnValue(true);
+                mockAgentService.isPhone.and.returnValue(true);
+                mockAgentService.isPortrait.and.returnValue(true);
                 controller = instantiateController();
                 expect(controller.visible()).toBeTruthy();
 
@@ -102,13 +102,13 @@ define(
                 });
 
                 it("sets pane state to false when in location.search", function () {
-                    mockLocation.search.andReturn({'hideTree': true});
+                    mockLocation.search.and.returnValue({'hideTree': true});
                     expect(instantiateController().visible()).toBe(false);
                     expect(mockLocation.search).toHaveBeenCalledWith('hideTree', undefined);
                 });
 
                 it("sets state to true when not found in location.search", function () {
-                    mockLocation.search.andReturn({});
+                    mockLocation.search.and.returnValue({});
                     expect(instantiateController().visible()).toBe(true);
                     expect(mockLocation.search).not.toHaveBeenCalledWith('hideTree', undefined);
                 });

platform/commonUI/browse/test/navigation/NavigateActionSpec.js

@@ -34,17 +34,6 @@ define([
             mockDomainObject,
             action;
 
-
-        function waitForCall() {
-            var called = false;
-            waitsFor(function () {
-                return called;
-            });
-            return function () {
-                called = true;
-            };
-        }
-
         beforeEach(function () {
             mockNavigationService = jasmine.createSpyObj(
                 "navigationService",
@@ -63,26 +52,24 @@ define([
         });
 
         it("sets navigation if it is allowed", function () {
-            mockNavigationService.shouldNavigate.andReturn(true);
-            action.perform()
-                .then(waitForCall());
-            runs(function () {
-                expect(mockNavigationService.setNavigation)
+            mockNavigationService.shouldNavigate.and.returnValue(true);
+            return action.perform()
+                .then(function () {
+                    expect(mockNavigationService.setNavigation)
                     .toHaveBeenCalledWith(mockDomainObject, true);
-            });
+                });
         });
 
         it("does not set navigation if it is not allowed", function () {
-            mockNavigationService.shouldNavigate.andReturn(false);
+            mockNavigationService.shouldNavigate.and.returnValue(false);
             var onSuccess = jasmine.createSpy('onSuccess');
-            action.perform()
-                .then(onSuccess, waitForCall());
-            runs(function () {
-                expect(onSuccess).not.toHaveBeenCalled();
-                expect(mockNavigationService.setNavigation)
-                    .not
-                    .toHaveBeenCalledWith(mockDomainObject);
-            });
+            return action.perform()
+                .then(onSuccess, function () {
+                    expect(onSuccess).not.toHaveBeenCalled();
+                    expect(mockNavigationService.setNavigation)
+                        .not
+                        .toHaveBeenCalledWith(mockDomainObject);
+                });
         });
 
         it("is only applicable when a domain object is in context", function () {

platform/commonUI/browse/test/navigation/NavigationServiceSpec.js

@@ -69,7 +69,7 @@ define(
                 navigationService.addListener(callback);
                 navigationService.setNavigation(testObject);
                 navigationService.setNavigation(testObject);
-                expect(callback.calls.length).toEqual(1);
+                expect(callback.calls.count()).toEqual(1);
             });
 
             it("stops notifying listeners after removal", function () {

platform/commonUI/browse/test/navigation/OrphanNavigationHandlerSpec.js

@@ -65,34 +65,35 @@ define([
             mockActionCapability = jasmine.createSpyObj('action', ['perform']);
             mockEditor = jasmine.createSpyObj('editor', ['isEditContextRoot']);
 
-            mockThrottle.andCallFake(function (fn) {
+            mockThrottle.and.callFake(function (fn) {
                 var mockThrottledFn =
                     jasmine.createSpy('throttled-' + mockThrottledFns.length);
-                mockThrottledFn.andCallFake(fn);
+                mockThrottledFn.and.callFake(fn);
                 mockThrottledFns.push(mockThrottledFn);
                 return mockThrottledFn;
             });
-            mockTopic.andReturn(mockMutationTopic);
-            mockDomainObject.getId.andReturn(testId);
-            mockDomainObject.getCapability.andCallFake(function (c) {
+            mockTopic.and.returnValue(mockMutationTopic);
+            mockDomainObject.getId.and.returnValue(testId);
+            mockDomainObject.getCapability.and.callFake(function (c) {
                 return {
                     context: mockContext,
                     editor: mockEditor
                 }[c];
             });
-            mockDomainObject.hasCapability.andCallFake(function (c) {
+            mockDomainObject.hasCapability.and.callFake(function (c) {
                 return !!mockDomainObject.getCapability(c);
             });
-            mockParentObject.getCapability.andCallFake(function (c) {
+            mockParentObject.getCapability.and.callFake(function (c) {
                 return {
                     action: mockActionCapability
                 }[c];
             });
             testParentComposition = [];
-            mockParentObject.useCapability.andReturn(Promise.resolve(testParentComposition));
-            mockContext.getParent.andReturn(mockParentObject);
-            mockNavigationService.getNavigation.andReturn(mockDomainObject);
-            mockEditor.isEditContextRoot.andReturn(false);
+            mockParentObject.useCapability.and.returnValue(Promise.resolve(testParentComposition));
+
+            mockContext.getParent.and.returnValue(mockParentObject);
+            mockNavigationService.getNavigation.and.returnValue(mockDomainObject);
+            mockEditor.isEditContextRoot.and.returnValue(false);
 
             return new OrphanNavigationHandler(
                 mockThrottle,
@@ -106,7 +107,7 @@ define([
             expect(mockMutationTopic.listen)
                 .toHaveBeenCalledWith(jasmine.any(Function));
             expect(mockThrottledFns.indexOf(
-                mockMutationTopic.listen.mostRecentCall.args[0]
+                mockMutationTopic.listen.calls.mostRecent().args[0]
             )).not.toEqual(-1);
         });
 
@@ -114,7 +115,7 @@ define([
             expect(mockNavigationService.addListener)
                 .toHaveBeenCalledWith(jasmine.any(Function));
             expect(mockThrottledFns.indexOf(
-                mockNavigationService.addListener.mostRecentCall.args[0]
+                mockNavigationService.addListener.calls.mostRecent().args[0]
             )).not.toEqual(-1);
         });
 
@@ -134,28 +135,14 @@ define([
                     function itNavigatesAsExpected() {
                         if (isOrphan && !isEditRoot) {
                             it("navigates to the parent", function () {
-                                var done = false;
-                                waitsFor(function () {
-                                    return done;
-                                });
-                                setTimeout(function () {
-                                    done = true;
-                                }, 5);
-                                runs(function () {
+                                return Promise.resolve().then(function () {
                                     expect(mockActionCapability.perform)
                                         .toHaveBeenCalledWith('navigate');
                                 });
                             });
                         } else {
                             it("does nothing", function () {
-                                var done = false;
-                                waitsFor(function () {
-                                    return done;
-                                });
-                                setTimeout(function () {
-                                    done = true;
-                                }, 5);
-                                runs(function () {
+                                return Promise.resolve().then(function () {
                                     expect(mockActionCapability.perform)
                                         .not.toHaveBeenCalled();
                                 });
@@ -165,12 +152,12 @@ define([
 
                     describe(caseName, function () {
                         beforeEach(function () {
-                            mockEditor.isEditContextRoot.andReturn(isEditRoot);
+                            mockEditor.isEditContextRoot.and.returnValue(isEditRoot);
                         });
 
                         describe("when navigation changes", function () {
                             beforeEach(function () {
-                                mockNavigationService.addListener.mostRecentCall
+                                mockNavigationService.addListener.calls.mostRecent()
                                     .args[0](mockDomainObject);
                             });
                             itNavigatesAsExpected();
@@ -178,7 +165,7 @@ define([
 
                         describe("when mutation occurs", function () {
                             beforeEach(function () {
-                                mockMutationTopic.listen.mostRecentCall
+                                mockMutationTopic.listen.calls.mostRecent()
                                     .args[0](mockParentObject);
                             });
 

platform/commonUI/browse/test/windowing/WindowTitlerSpec.js

@@ -49,8 +49,8 @@ define(
                 );
                 mockDocument = [{}];
 
-                mockDomainObject.getModel.andReturn({ name: 'Test name' });
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                mockDomainObject.getModel.and.returnValue({ name: 'Test name' });
+                mockNavigationService.getNavigation.and.returnValue(mockDomainObject);
 
                 titler = new WindowTitler(
                     mockNavigationService,
@@ -64,12 +64,12 @@ define(
                     jasmine.any(Function),
                     jasmine.any(Function)
                 );
-                expect(mockRootScope.$watch.mostRecentCall.args[0]())
+                expect(mockRootScope.$watch.calls.mostRecent().args[0]())
                     .toEqual('Test name');
             });
 
             it("sets the title to the name of the navigated object", function () {
-                mockRootScope.$watch.mostRecentCall.args[1]("Some name");
+                mockRootScope.$watch.calls.mostRecent().args[1]("Some name");
                 expect(mockDocument[0].title).toEqual("Some name");
             });
 

platform/commonUI/dialog/test/DialogServiceSpec.js

@@ -63,12 +63,12 @@ define(
                   ["find"]
                 );
                 mockBody = jasmine.createSpyObj('body', ['on', 'off']);
-                mockDocument.find.andReturn(mockBody);
+                mockDocument.find.and.returnValue(mockBody);
 
                 mockDeferred.promise = "mock promise";
 
-                mockQ.defer.andReturn(mockDeferred);
-                mockOverlayService.createOverlay.andReturn(mockOverlay);
+                mockQ.defer.and.returnValue(mockDeferred);
+                mockOverlayService.createOverlay.and.returnValue(mockOverlay);
 
                 dialogService = new DialogService(
                     mockOverlayService,
@@ -85,7 +85,7 @@ define(
 
             it("allows user input to be canceled", function () {
                 dialogService.getUserInput({}, { someKey: "some value" });
-                mockOverlayService.createOverlay.mostRecentCall.args[1].cancel();
+                mockOverlayService.createOverlay.calls.mostRecent().args[1].cancel();
                 expect(mockDeferred.reject).toHaveBeenCalled();
                 expect(mockDeferred.resolve).not.toHaveBeenCalled();
             });
@@ -93,7 +93,7 @@ define(
             it("passes back the result of user input when confirmed", function () {
                 var value = { someKey: 42 };
                 dialogService.getUserInput({}, value);
-                mockOverlayService.createOverlay.mostRecentCall.args[1].confirm();
+                mockOverlayService.createOverlay.calls.mostRecent().args[1].confirm();
                 expect(mockDeferred.reject).not.toHaveBeenCalled();
                 expect(mockDeferred.resolve).toHaveBeenCalledWith(value);
             });
@@ -109,7 +109,7 @@ define(
             it("can show multiple dialogs if prior ones are dismissed", function () {
                 dialogService.getUserInput({}, {});
                 expect(mockLog.warn).not.toHaveBeenCalled();
-                mockOverlayService.createOverlay.mostRecentCall.args[1].confirm();
+                mockOverlayService.createOverlay.calls.mostRecent().args[1].confirm();
                 dialogService.getUserInput({}, {});
                 expect(mockLog.warn).not.toHaveBeenCalled();
                 expect(mockDeferred.reject).not.toHaveBeenCalled();
@@ -148,13 +148,13 @@ define(
 
             it("destroys the event listener when the dialog is cancelled", function () {
                 dialogService.getUserInput({}, {});
-                mockOverlayService.createOverlay.mostRecentCall.args[1].cancel();
+                mockOverlayService.createOverlay.calls.mostRecent().args[1].cancel();
                 expect(mockBody.off).toHaveBeenCalledWith("keydown", jasmine.any(Function));
             });
 
             it("cancels the dialog when an escape keydown event is triggered", function () {
                 dialogService.getUserInput({}, {});
-                mockBody.on.mostRecentCall.args[1]({
+                mockBody.on.calls.mostRecent().args[1]({
                     keyCode: 27
                 });
                 expect(mockDeferred.reject).toHaveBeenCalled();
@@ -163,7 +163,7 @@ define(
 
             it("ignores non escape keydown events", function () {
                 dialogService.getUserInput({}, {});
-                mockBody.on.mostRecentCall.args[1]({
+                mockBody.on.calls.mostRecent().args[1]({
                     keyCode: 13
                 });
                 expect(mockDeferred.reject).not.toHaveBeenCalled();
@@ -197,7 +197,7 @@ define(
                         "overlay",
                         ["dismiss"]
                     );
-                    mockOverlayService.createOverlay.andReturn(secondMockOverlay);
+                    mockOverlayService.createOverlay.and.returnValue(secondMockOverlay);
                     secondDialogHandle = dialogService.showBlockingMessage(dialogModel);
 
                     //Dismiss the first dialog. It should only dismiss if it

platform/commonUI/dialog/test/OverlayServiceSpec.js

@@ -46,10 +46,10 @@ define(
                 mockElement = jasmine.createSpyObj("element", ["remove"]);
                 mockScope = jasmine.createSpyObj("scope", ["$destroy"]);
 
-                mockDocument.find.andReturn(mockBody);
-                mockCompile.andReturn(mockTemplate);
-                mockRootScope.$new.andReturn(mockScope);
-                mockTemplate.andReturn(mockElement);
+                mockDocument.find.and.returnValue(mockBody);
+                mockCompile.and.returnValue(mockTemplate);
+                mockRootScope.$new.and.returnValue(mockScope);
+                mockTemplate.and.returnValue(mockElement);
 
                 overlayService = new OverlayService(
                     mockDocument,
@@ -61,7 +61,7 @@ define(
             it("prepends an mct-include to create overlays", function () {
                 overlayService.createOverlay("test", {});
                 expect(mockCompile).toHaveBeenCalled();
-                expect(mockCompile.mostRecentCall.args[0].indexOf("mct-include"))
+                expect(mockCompile.calls.mostRecent().args[0].indexOf("mct-include"))
                     .not.toEqual(-1);
             });
 

platform/commonUI/edit/res/templates/elements.html

@@ -24,7 +24,7 @@
                  class="flex-elem holder"
                  ng-model="filterBy">
     </mct-include>
-    <div class="flex-elem grows vscroll">
+    <div class="flex-elem grows vscroll scroll-pad">
         <ul class="tree" id="inspector-elements-tree"
             ng-if="composition.length > 0">
             <li ng-repeat="containedObject in composition | filter:searchElements">

platform/commonUI/edit/test/actions/CancelActionSpec.js

@@ -49,7 +49,7 @@ define(
                         "getModel"
                     ]
                 );
-                mockDomainObject.getModel.andReturn({});
+                mockDomainObject.getModel.and.returnValue({});
 
                 mockParentObject = jasmine.createSpyObj(
                     "parentObject",
@@ -57,7 +57,7 @@ define(
                         "getCapability"
                     ]
                 );
-                mockParentObject.getCapability.andCallFake(function (name) {
+                mockParentObject.getCapability.and.callFake(function (name) {
                     return parentCapabilities[name];
                 });
 
@@ -77,14 +77,14 @@ define(
                         "getOriginal"
                     ]
                 );
-                capabilities.location.getOriginal.andReturn(mockPromise(mockDomainObject));
+                capabilities.location.getOriginal.and.returnValue(mockPromise(mockDomainObject));
                 capabilities.context = jasmine.createSpyObj(
                     "contextCapability",
                     [
                         "getParent"
                     ]
                 );
-                capabilities.context.getParent.andReturn(mockParentObject);
+                capabilities.context.getParent.and.returnValue(mockParentObject);
 
                 parentCapabilities.action = jasmine.createSpyObj(
                     "actionCapability",
@@ -97,37 +97,37 @@ define(
                     domainObject: mockDomainObject
                 };
 
-                mockDomainObject.getCapability.andCallFake(function (name) {
+                mockDomainObject.getCapability.and.callFake(function (name) {
                     return capabilities[name];
                 });
 
-                mockDomainObject.hasCapability.andCallFake(function (name) {
+                mockDomainObject.hasCapability.and.callFake(function (name) {
                     return !!capabilities[name];
                 });
 
-                capabilities.editor.finish.andReturn(mockPromise(true));
+                capabilities.editor.finish.and.returnValue(mockPromise(true));
 
                 action = new CancelAction(actionContext);
 
             });
 
             it("only applies to domain object that is being edited", function () {
-                capabilities.editor.isEditContextRoot.andReturn(true);
+                capabilities.editor.isEditContextRoot.and.returnValue(true);
                 expect(CancelAction.appliesTo(actionContext)).toBeTruthy();
                 expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
 
-                capabilities.editor.isEditContextRoot.andReturn(false);
+                capabilities.editor.isEditContextRoot.and.returnValue(false);
                 expect(CancelAction.appliesTo(actionContext)).toBeFalsy();
 
-                mockDomainObject.hasCapability.andReturn(false);
+                mockDomainObject.hasCapability.and.returnValue(false);
                 expect(CancelAction.appliesTo(actionContext)).toBeFalsy();
             });
 
             it("invokes the editor capability's cancel functionality when" +
                 " performed", function () {
-                mockDomainObject.getModel.andReturn({persisted: 1});
+                mockDomainObject.getModel.and.returnValue({persisted: 1});
                 //Return true from navigate action
-                capabilities.action.perform.andReturn(mockPromise(true));
+                capabilities.action.perform.and.returnValue(mockPromise(true));
                 action.perform();
 
                 // Should have called finish
@@ -138,15 +138,15 @@ define(
             });
 
             it("navigates to object if existing using navigate action", function () {
-                mockDomainObject.getModel.andReturn({persisted: 1});
+                mockDomainObject.getModel.and.returnValue({persisted: 1});
                 //Return true from navigate action
-                capabilities.action.perform.andReturn(mockPromise(true));
+                capabilities.action.perform.and.returnValue(mockPromise(true));
                 action.perform();
                 expect(capabilities.action.perform).toHaveBeenCalledWith("navigate");
             });
 
             it("navigates to parent if new using navigate action", function () {
-                mockDomainObject.getModel.andReturn({persisted: undefined});
+                mockDomainObject.getModel.and.returnValue({persisted: undefined});
                 action.perform();
                 expect(parentCapabilities.action.perform).toHaveBeenCalledWith("navigate");
             });

platform/commonUI/edit/test/actions/EditActionSpec.js

@@ -66,11 +66,11 @@ define(
                     editor: mockEditor
                 };
 
-                mockDomainObject.getCapability.andCallFake(function (name) {
+                mockDomainObject.getCapability.and.callFake(function (name) {
                     return capabilities[name];
                 });
-                mockDomainObject.hasCapability.andReturn(true);
-                mockType.hasFeature.andReturn(true);
+                mockDomainObject.hasCapability.and.returnValue(true);
+                mockType.hasFeature.and.returnValue(true);
 
                 actionContext = { domainObject: mockDomainObject };
 
@@ -92,9 +92,9 @@ define(
             });
 
             it("is only applicable to objects not already in edit mode", function () {
-                mockEditor.isEditContextRoot.andReturn(false);
+                mockEditor.isEditContextRoot.and.returnValue(false);
                 expect(EditAction.appliesTo(actionContext)).toBe(true);
-                mockEditor.isEditContextRoot.andReturn(true);
+                mockEditor.isEditContextRoot.and.returnValue(true);
                 expect(EditAction.appliesTo(actionContext)).toBe(false);
             });
 

platform/commonUI/edit/test/actions/EditAndComposeActionSpec.js

@@ -71,14 +71,14 @@ define(
                 mockActionCapability = jasmine.createSpyObj("actionCapability", ["getActions"]);
                 mockEditAction = jasmine.createSpyObj("editAction", ["perform"]);
 
-                mockDomainObject.getId.andReturn("test");
-                mockDomainObject.getCapability.andReturn(mockContext);
-                mockContext.getParent.andReturn(mockParent);
-                mockType.hasFeature.andReturn(true);
-                mockType.getKey.andReturn("layout");
-                mockComposition.invoke.andReturn(mockPromise(true));
-                mockComposition.add.andReturn(mockPromise(true));
-                mockActionCapability.getActions.andReturn([]);
+                mockDomainObject.getId.and.returnValue("test");
+                mockDomainObject.getCapability.and.returnValue(mockContext);
+                mockContext.getParent.and.returnValue(mockParent);
+                mockType.hasFeature.and.returnValue(true);
+                mockType.getKey.and.returnValue("layout");
+                mockComposition.invoke.and.returnValue(mockPromise(true));
+                mockComposition.add.and.returnValue(mockPromise(true));
+                mockActionCapability.getActions.and.returnValue([]);
 
                 capabilities = {
                     composition: mockComposition,
@@ -105,14 +105,14 @@ define(
             });
 
             it("enables edit mode for objects that have an edit action", function () {
-                mockActionCapability.getActions.andReturn([mockEditAction]);
+                mockActionCapability.getActions.and.returnValue([mockEditAction]);
                 action.perform();
                 expect(mockEditAction.perform).toHaveBeenCalled();
             });
 
             it("Does not enable edit mode for objects that do not have an" +
                 " edit action", function () {
-                mockActionCapability.getActions.andReturn([]);
+                mockActionCapability.getActions.and.returnValue([]);
                 action.perform();
                 expect(mockEditAction.perform).not.toHaveBeenCalled();
                 expect(mockComposition.add)

platform/commonUI/edit/test/actions/PropertiesActionSpec.js

@@ -71,8 +71,8 @@ define(
                     }
                 };
 
-                capabilities.type.hasFeature.andReturn(true);
-                capabilities.mutation.andReturn(true);
+                capabilities.type.hasFeature.and.returnValue(true);
+                capabilities.mutation.and.returnValue(true);
 
                 action = new PropertiesAction(dialogService, context);
             });
@@ -80,7 +80,7 @@ define(
             it("mutates an object when performed", function () {
                 action.perform();
                 expect(capabilities.mutation).toHaveBeenCalled();
-                capabilities.mutation.mostRecentCall.args[0]({});
+                capabilities.mutation.calls.mostRecent().args[0]({});
             });
 
             it("does not muate object upon cancel", function () {

platform/commonUI/edit/test/actions/RemoveActionSpec.js

@@ -95,13 +95,13 @@ define(
                         "removeListener"
                     ]
                 );
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                mockNavigationService.getNavigation.and.returnValue(mockDomainObject);
 
 
-                mockDomainObject.getId.andReturn("test");
-                mockDomainObject.getCapability.andReturn(mockContext);
-                mockContext.getParent.andReturn(mockParent);
-                mockType.hasFeature.andReturn(true);
+                mockDomainObject.getId.and.returnValue("test");
+                mockDomainObject.getCapability.and.returnValue(mockContext);
+                mockContext.getParent.and.returnValue(mockParent);
+                mockType.hasFeature.and.returnValue(true);
 
                 capabilities = {
                     mutation: mockMutation,
@@ -119,7 +119,7 @@ define(
             it("only applies to objects with parents", function () {
                 expect(RemoveAction.appliesTo(actionContext)).toBeTruthy();
 
-                mockContext.getParent.andReturn(undefined);
+                mockContext.getParent.and.returnValue(undefined);
 
                 expect(RemoveAction.appliesTo(actionContext)).toBeFalsy();
 
@@ -136,7 +136,7 @@ define(
             it("changes composition from its mutation function", function () {
                 var mutator, result;
                 action.perform();
-                mutator = mockMutation.invoke.mostRecentCall.args[0];
+                mutator = mockMutation.invoke.calls.mostRecent().args[0];
                 result = mutator(model);
 
                 // Should not have cancelled the mutation
@@ -153,22 +153,22 @@ define(
 
             it("removes parent of object currently navigated to", function () {
                 // Navigates to child object
-                mockNavigationService.getNavigation.andReturn(mockChildObject);
+                mockNavigationService.getNavigation.and.returnValue(mockChildObject);
 
                 // Test is id of object being removed
                 // Child object has different id
-                mockDomainObject.getId.andReturn("test");
-                mockChildObject.getId.andReturn("not test");
+                mockDomainObject.getId.and.returnValue("test");
+                mockChildObject.getId.and.returnValue("not test");
 
                 // Sets context for the child and domainObject
-                mockDomainObject.getCapability.andReturn(mockContext);
-                mockChildObject.getCapability.andReturn(mockChildContext);
+                mockDomainObject.getCapability.and.returnValue(mockContext);
+                mockChildObject.getCapability.and.returnValue(mockChildContext);
 
                 // Parents of child and domainObject are set
-                mockContext.getParent.andReturn(mockParent);
-                mockChildContext.getParent.andReturn(mockDomainObject);
+                mockContext.getParent.and.returnValue(mockParent);
+                mockChildContext.getParent.and.returnValue(mockDomainObject);
 
-                mockType.hasFeature.andReturn(true);
+                mockType.hasFeature.and.returnValue(true);
 
                 action.perform();
 
@@ -178,25 +178,25 @@ define(
 
             it("checks if removing object not in ascendent path (reaches ROOT)", function () {
                 // Navigates to grandchild of ROOT
-                mockNavigationService.getNavigation.andReturn(mockGrandchildObject);
+                mockNavigationService.getNavigation.and.returnValue(mockGrandchildObject);
 
                 // domainObject (grandparent) is set as ROOT, child and grandchild
                 // are set objects not being removed
-                mockDomainObject.getId.andReturn("test 1");
-                mockRootObject.getId.andReturn("ROOT");
-                mockChildObject.getId.andReturn("not test 2");
-                mockGrandchildObject.getId.andReturn("not test 3");
+                mockDomainObject.getId.and.returnValue("test 1");
+                mockRootObject.getId.and.returnValue("ROOT");
+                mockChildObject.getId.and.returnValue("not test 2");
+                mockGrandchildObject.getId.and.returnValue("not test 3");
 
                 // Sets context for the grandchild, child, and domainObject
-                mockRootObject.getCapability.andReturn(mockRootContext);
-                mockChildObject.getCapability.andReturn(mockChildContext);
-                mockGrandchildObject.getCapability.andReturn(mockGrandchildContext);
+                mockRootObject.getCapability.and.returnValue(mockRootContext);
+                mockChildObject.getCapability.and.returnValue(mockChildContext);
+                mockGrandchildObject.getCapability.and.returnValue(mockGrandchildContext);
 
                 // Parents of grandchild and child are set
-                mockChildContext.getParent.andReturn(mockRootObject);
-                mockGrandchildContext.getParent.andReturn(mockChildObject);
+                mockChildContext.getParent.and.returnValue(mockRootObject);
+                mockGrandchildContext.getParent.and.returnValue(mockChildObject);
 
-                mockType.hasFeature.andReturn(true);
+                mockType.hasFeature.and.returnValue(true);
 
                 action.perform();
 

platform/commonUI/edit/test/actions/SaveActionSpec.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global describe,it,expect,beforeEach,jasmine,waitsFor,runs*/
+/*global describe,it,expect,beforeEach,jasmine*/
 
 define(
     ["../../src/actions/SaveAction"],
@@ -81,13 +81,13 @@ define(
                     ["info", "error"]
                 );
 
-                mockDomainObject.hasCapability.andReturn(true);
-                mockDomainObject.getCapability.andCallFake(function (capability) {
+                mockDomainObject.hasCapability.and.returnValue(true);
+                mockDomainObject.getCapability.and.callFake(function (capability) {
                     return capabilities[capability];
                 });
-                mockDomainObject.getModel.andReturn({persisted: 0});
-                mockEditorCapability.save.andReturn(mockPromise(true));
-                mockEditorCapability.isEditContextRoot.andReturn(true);
+                mockDomainObject.getModel.and.returnValue({persisted: 0});
+                mockEditorCapability.save.and.returnValue(mockPromise(true));
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
 
                 action = new SaveAction(mockDialogService, mockNotificationService, actionContext);
             });
@@ -96,14 +96,14 @@ define(
                 expect(SaveAction.appliesTo(actionContext)).toBe(true);
                 expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
 
-                mockDomainObject.hasCapability.andReturn(false);
-                mockDomainObject.getCapability.andReturn(undefined);
+                mockDomainObject.hasCapability.and.returnValue(false);
+                mockDomainObject.getCapability.and.returnValue(undefined);
                 expect(SaveAction.appliesTo(actionContext)).toBe(false);
             });
 
             it("only applies to domain object that has already been persisted",
                 function () {
-                    mockDomainObject.getModel.andReturn({persisted: undefined});
+                    mockDomainObject.getModel.and.returnValue({persisted: undefined});
                     expect(SaveAction.appliesTo(actionContext)).toBe(false);
                 });
 
@@ -118,11 +118,11 @@ define(
 
                 beforeEach(function () {
                     mockDialogHandle = jasmine.createSpyObj("dialogHandle", ["dismiss"]);
-                    mockDialogService.showBlockingMessage.andReturn(mockDialogHandle);
+                    mockDialogService.showBlockingMessage.and.returnValue(mockDialogHandle);
                 });
 
                 it("shows a dialog while saving", function () {
-                    mockEditorCapability.save.andReturn(new Promise(function () {
+                    mockEditorCapability.save.and.returnValue(new Promise(function () {
                     }));
                     action.perform();
                     expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
@@ -137,12 +137,8 @@ define(
 
                 it("notifies if saving succeeded", function () {
                     var mockCallback = jasmine.createSpy("callback");
-                    mockEditorCapability.save.andReturn(Promise.resolve("success"));
-                    action.perform().then(mockCallback);
-                    waitsFor(function () {
-                        return mockCallback.calls.length > 0;
-                    });
-                    runs(function () {
+                    mockEditorCapability.save.and.returnValue(Promise.resolve());
+                    return action.perform().then(mockCallback).then(function () {
                         expect(mockNotificationService.info).toHaveBeenCalled();
                         expect(mockNotificationService.error).not.toHaveBeenCalled();
                     });
@@ -150,12 +146,8 @@ define(
 
                 it("notifies if saving failed", function () {
                     var mockCallback = jasmine.createSpy("callback");
-                    mockEditorCapability.save.andReturn(Promise.reject("some failure reason"));
-                    action.perform().then(mockCallback);
-                    waitsFor(function () {
-                        return mockCallback.calls.length > 0;
-                    });
-                    runs(function () {
+                    mockEditorCapability.save.and.returnValue(Promise.reject("some failure reason"));
+                    return action.perform().then(mockCallback).then(function () {
                         expect(mockNotificationService.error).toHaveBeenCalled();
                         expect(mockNotificationService.info).not.toHaveBeenCalled();
                     });

platform/commonUI/edit/test/actions/SaveAndStopEditingActionSpec.js

@@ -86,13 +86,13 @@ define(
                     ["info", "error"]
                 );
 
-                mockDomainObject.hasCapability.andReturn(true);
-                mockDomainObject.getCapability.andCallFake(function (capability) {
+                mockDomainObject.hasCapability.and.returnValue(true);
+                mockDomainObject.getCapability.and.callFake(function (capability) {
                     return capabilities[capability];
                 });
-                mockDomainObject.getModel.andReturn({ persisted: 0 });
-                mockEditorCapability.save.andReturn(mockPromise(true));
-                mockEditorCapability.isEditContextRoot.andReturn(true);
+                mockDomainObject.getModel.and.returnValue({ persisted: 0 });
+                mockEditorCapability.save.and.returnValue(mockPromise(true));
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
 
                 action = new SaveAndStopEditingAction(dialogService, notificationService, actionContext);
             });
@@ -102,18 +102,18 @@ define(
                 expect(SaveAndStopEditingAction.appliesTo(actionContext)).toBe(true);
                 expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
 
-                mockDomainObject.hasCapability.andReturn(false);
-                mockDomainObject.getCapability.andReturn(undefined);
+                mockDomainObject.hasCapability.and.returnValue(false);
+                mockDomainObject.getCapability.and.returnValue(undefined);
                 expect(SaveAndStopEditingAction.appliesTo(actionContext)).toBe(false);
             });
 
             it("only applies to domain object that has already been persisted", function () {
-                mockDomainObject.getModel.andReturn({ persisted: undefined });
+                mockDomainObject.getModel.and.returnValue({ persisted: undefined });
                 expect(SaveAndStopEditingAction.appliesTo(actionContext)).toBe(false);
             });
 
             it("does not close the editor before completing the save", function () {
-                mockEditorCapability.save.andReturn(new Promise(function () {
+                mockEditorCapability.save.and.returnValue(new Promise(function () {
                 }));
                 action.perform();
                 expect(mockEditorCapability.save).toHaveBeenCalled();

platform/commonUI/edit/test/actions/SaveAsActionSpec.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global describe,it,expect,beforeEach,jasmine,runs,waitsFor,spyOn*/
+/*global describe,it,expect,beforeEach,jasmine,spyOn*/
 
 define(
     ["../../src/actions/SaveAsAction"],
@@ -63,12 +63,12 @@ define(
                         "getId"
                     ]
                 );
-                mockDomainObject.hasCapability.andReturn(true);
-                mockDomainObject.getCapability.andCallFake(function (capability) {
+                mockDomainObject.hasCapability.and.returnValue(true);
+                mockDomainObject.getCapability.and.callFake(function (capability) {
                     return capabilities[capability];
                 });
-                mockDomainObject.getModel.andReturn({location: 'a', persisted: undefined});
-                mockDomainObject.getId.andReturn(0);
+                mockDomainObject.getModel.and.returnValue({location: 'a', persisted: undefined});
+                mockDomainObject.getId.and.returnValue(0);
 
                 mockClonedObject = jasmine.createSpyObj(
                     "clonedObject",
@@ -76,7 +76,7 @@ define(
                         "getId"
                     ]
                 );
-                mockClonedObject.getId.andReturn(1);
+                mockClonedObject.getId.and.returnValue(1);
 
                 mockParent = jasmine.createSpyObj(
                     "parentObject",
@@ -91,9 +91,9 @@ define(
                     "editor",
                     ["save", "finish", "isEditContextRoot"]
                 );
-                mockEditorCapability.save.andReturn(mockPromise(true));
-                mockEditorCapability.finish.andReturn(mockPromise(true));
-                mockEditorCapability.isEditContextRoot.andReturn(true);
+                mockEditorCapability.save.and.returnValue(mockPromise(true));
+                mockEditorCapability.finish.and.returnValue(mockPromise(true));
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
                 capabilities.editor = mockEditorCapability;
 
                 mockActionCapability = jasmine.createSpyObj(
@@ -106,7 +106,7 @@ define(
                     "objectService",
                     ["getObjects"]
                 );
-                mockObjectService.getObjects.andReturn(mockPromise({'a': mockParent}));
+                mockObjectService.getObjects.and.returnValue(mockPromise({'a': mockParent}));
 
                 mockDialogService = jasmine.createSpyObj(
                     "dialogService",
@@ -115,7 +115,7 @@ define(
                         "showBlockingMessage"
                     ]
                 );
-                mockDialogService.getUserInput.andReturn(mockPromise(undefined));
+                mockDialogService.getUserInput.and.returnValue(mockPromise(undefined));
 
                 mockCopyService = jasmine.createSpyObj(
                     "copyService",
@@ -123,7 +123,7 @@ define(
                         "perform"
                     ]
                 );
-                mockCopyService.perform.andReturn(mockPromise(mockClonedObject));
+                mockCopyService.perform.and.returnValue(mockPromise(mockClonedObject));
 
                 mockNotificationService = jasmine.createSpyObj(
                     "notificationService",
@@ -146,10 +146,10 @@ define(
                     actionContext);
 
                 spyOn(action, "getObjectService");
-                action.getObjectService.andReturn(mockObjectService);
+                action.getObjectService.and.returnValue(mockObjectService);
 
                 spyOn(action, "createWizard");
-                action.createWizard.andReturn({
+                action.createWizard.and.returnValue({
                     getFormStructure: noop,
                     getInitialFormValue: noop,
                     populateObjectFromInput: function () {
@@ -163,8 +163,8 @@ define(
                 expect(SaveAsAction.appliesTo(actionContext)).toBe(true);
                 expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
 
-                mockDomainObject.hasCapability.andReturn(false);
-                mockDomainObject.getCapability.andReturn(undefined);
+                mockDomainObject.hasCapability.and.returnValue(false);
+                mockDomainObject.getCapability.and.returnValue(undefined);
                 expect(SaveAsAction.appliesTo(actionContext)).toBe(false);
             });
 
@@ -173,35 +173,27 @@ define(
                 expect(SaveAsAction.appliesTo(actionContext)).toBe(true);
                 expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
 
-                mockDomainObject.getModel.andReturn({persisted: 0});
+                mockDomainObject.getModel.and.returnValue({persisted: 0});
                 expect(SaveAsAction.appliesTo(actionContext)).toBe(false);
             });
 
             it("uses the editor capability to save the object", function () {
-                mockEditorCapability.save.andReturn(new Promise(function () {}));
-                runs(function () {
-                    action.perform();
-                });
-                waitsFor(function () {
-                    return mockEditorCapability.save.calls.length > 0;
-                }, "perform() should call EditorCapability.save");
-                runs(function () {
-                    expect(mockEditorCapability.finish).not.toHaveBeenCalled();
+                mockEditorCapability.save.and.returnValue(Promise.resolve());
+
+                return action.perform().then(function () {
+                    expect(mockEditorCapability.save).toHaveBeenCalled();
                 });
             });
 
             it("uses the editor capability to finish editing the object", function () {
-                runs(function () {
-                    action.perform();
+                return action.perform().then(function () {
+                    expect(mockEditorCapability.finish.calls.count()).toBeGreaterThan(0);
                 });
-                waitsFor(function () {
-                    return mockEditorCapability.finish.calls.length > 0;
-                }, "perform() should call EditorCapability.finish");
             });
 
             it("returns to browse after save", function () {
                 spyOn(action, "save");
-                action.save.andReturn(mockPromise(mockDomainObject));
+                action.save.and.returnValue(mockPromise(mockDomainObject));
                 action.perform();
                 expect(mockActionCapability.perform).toHaveBeenCalledWith(
                     "navigate"
@@ -218,48 +210,33 @@ define(
 
                 beforeEach(function () {
                     mockDialogHandle = jasmine.createSpyObj("dialogHandle", ["dismiss"]);
-                    mockDialogService.showBlockingMessage.andReturn(mockDialogHandle);
+                    mockDialogService.showBlockingMessage.and.returnValue(mockDialogHandle);
                 });
 
                 it("shows a blocking dialog indicating that saving is in progress", function () {
-                    mockEditorCapability.save.andReturn(new Promise(function () {}));
+                    mockEditorCapability.save.and.returnValue(new Promise(function () {}));
                     action.perform();
                     expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
                     expect(mockDialogHandle.dismiss).not.toHaveBeenCalled();
                 });
 
                 it("hides the blocking dialog after saving finishes", function () {
-                    var mockCallback = jasmine.createSpy();
-                    action.perform().then(mockCallback);
-                    expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
-                    waitsFor(function () {
-                        return mockCallback.calls.length > 0;
-                    });
-                    runs(function () {
+                    return action.perform().then(function () {
+                        expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
                         expect(mockDialogHandle.dismiss).toHaveBeenCalled();
                     });
                 });
 
                 it("notifies if saving succeeded", function () {
-                    var mockCallback = jasmine.createSpy();
-                    action.perform().then(mockCallback);
-                    waitsFor(function () {
-                        return mockCallback.calls.length > 0;
-                    });
-                    runs(function () {
+                    return action.perform().then(function () {
                         expect(mockNotificationService.info).toHaveBeenCalled();
                         expect(mockNotificationService.error).not.toHaveBeenCalled();
                     });
                 });
 
                 it("notifies if saving failed", function () {
-                    mockCopyService.perform.andReturn(Promise.reject("some failure reason"));
-                    var mockCallback = jasmine.createSpy();
-                    action.perform().then(mockCallback);
-                    waitsFor(function () {
-                        return mockCallback.calls.length > 0;
-                    });
-                    runs(function () {
+                    mockCopyService.perform.and.returnValue(Promise.reject("some failure reason"));
+                    action.perform().then(function () {
                         expect(mockNotificationService.error).toHaveBeenCalled();
                         expect(mockNotificationService.info).not.toHaveBeenCalled();
                     });

platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js

@@ -60,8 +60,8 @@ define(
                         "cancel"
                     ]
                 );
-                mockTransactionService.commit.andReturn(fastPromise());
-                mockTransactionService.cancel.andReturn(fastPromise());
+                mockTransactionService.commit.and.returnValue(fastPromise());
+                mockTransactionService.cancel.and.returnValue(fastPromise());
                 mockTransactionService.isActive = jasmine.createSpy('isActive');
 
                 mockStatusCapability = jasmine.createSpyObj(
@@ -76,23 +76,23 @@ define(
                     "contextCapability",
                     ["getParent"]
                 );
-                mockContextCapability.getParent.andReturn(mockParentObject);
+                mockContextCapability.getParent.and.returnValue(mockParentObject);
 
                 capabilities = {
                     context: mockContextCapability,
                     status: mockStatusCapability
                 };
 
-                mockDomainObject.hasCapability.andCallFake(function (name) {
+                mockDomainObject.hasCapability.and.callFake(function (name) {
                     return capabilities[name] !== undefined;
                 });
 
-                mockDomainObject.getCapability.andCallFake(function (name) {
+                mockDomainObject.getCapability.and.callFake(function (name) {
                     return capabilities[name];
                 });
 
-                mockParentObject.getCapability.andReturn(mockParentStatus);
-                mockParentObject.hasCapability.andReturn(false);
+                mockParentObject.getCapability.and.returnValue(mockParentStatus);
+                mockParentObject.hasCapability.and.returnValue(false);
 
                 capability = new EditorCapability(
                     mockTransactionService,
@@ -112,18 +112,18 @@ define(
 
             it("uses editing status to determine editing context root", function () {
                 capability.edit();
-                mockStatusCapability.get.andReturn(false);
+                mockStatusCapability.get.and.returnValue(false);
                 expect(capability.isEditContextRoot()).toBe(false);
-                mockStatusCapability.get.andReturn(true);
+                mockStatusCapability.get.and.returnValue(true);
                 expect(capability.isEditContextRoot()).toBe(true);
             });
 
             it("inEditingContext returns true if parent object is being" +
                 " edited", function () {
-                mockStatusCapability.get.andReturn(false);
-                mockParentStatus.get.andReturn(false);
+                mockStatusCapability.get.and.returnValue(false);
+                mockParentStatus.get.and.returnValue(false);
                 expect(capability.inEditContext()).toBe(false);
-                mockParentStatus.get.andReturn(true);
+                mockParentStatus.get.and.returnValue(true);
                 expect(capability.inEditContext()).toBe(true);
             });
 
@@ -142,7 +142,7 @@ define(
 
             describe("finish", function () {
                 beforeEach(function () {
-                    mockTransactionService.isActive.andReturn(true);
+                    mockTransactionService.isActive.and.returnValue(true);
                     capability.edit();
                     capability.finish();
                 });
@@ -156,7 +156,7 @@ define(
 
             describe("finish", function () {
                 beforeEach(function () {
-                    mockTransactionService.isActive.andReturn(false);
+                    mockTransactionService.isActive.and.returnValue(false);
                     capability.edit();
                 });
 
@@ -175,15 +175,15 @@ define(
                 var model = {};
 
                 beforeEach(function () {
-                    mockDomainObject.getModel.andReturn(model);
+                    mockDomainObject.getModel.and.returnValue(model);
                     capability.edit();
                     capability.finish();
                 });
                 it("returns true if the object has been modified since it" +
                     " was last persisted", function () {
-                    mockTransactionService.size.andReturn(0);
+                    mockTransactionService.size.and.returnValue(0);
                     expect(capability.dirty()).toBe(false);
-                    mockTransactionService.size.andReturn(1);
+                    mockTransactionService.size.and.returnValue(1);
                     expect(capability.dirty()).toBe(true);
                 });
             });

platform/commonUI/edit/test/capabilities/TransactionCapabilityDecoratorSpec.js

@@ -37,7 +37,7 @@ define(
                 mockQ = {};
                 mockTransactionService = {};
                 mockCapabilityService = jasmine.createSpyObj("capabilityService", ["getCapabilities"]);
-                mockCapabilityService.getCapabilities.andReturn({
+                mockCapabilityService.getCapabilities.and.returnValue({
                     persistence: function () {}
                 });
 

platform/commonUI/edit/test/capabilities/TransactionalPersistenceCapabilitySpec.js

@@ -47,7 +47,7 @@ define(
                 testId = "test-id";
 
                 mockQ = jasmine.createSpyObj("$q", ["when"]);
-                mockQ.when.andCallFake(function (val) {
+                mockQ.when.and.callFake(function (val) {
                     return fastPromise(val);
                 });
                 mockTransactionManager = jasmine.createSpyObj(
@@ -58,15 +58,15 @@ define(
                     "persistenceCapability",
                     ["persist", "refresh", "getSpace"]
                 );
-                mockPersistence.persist.andReturn(fastPromise());
-                mockPersistence.refresh.andReturn(fastPromise());
+                mockPersistence.persist.and.returnValue(fastPromise());
+                mockPersistence.refresh.and.returnValue(fastPromise());
 
                 mockDomainObject = jasmine.createSpyObj(
                     "domainObject",
                     ["getModel", "getId"]
                 );
-                mockDomainObject.getModel.andReturn({persisted: 1});
-                mockDomainObject.getId.andReturn(testId);
+                mockDomainObject.getModel.and.returnValue({persisted: 1});
+                mockDomainObject.getId.and.returnValue(testId);
 
                 capability = new TransactionalPersistenceCapability(
                     mockQ,
@@ -78,24 +78,24 @@ define(
 
             it("if no transaction is active, passes through to persistence" +
                 " provider", function () {
-                mockTransactionManager.isActive.andReturn(false);
+                mockTransactionManager.isActive.and.returnValue(false);
                 capability.persist();
                 expect(mockPersistence.persist).toHaveBeenCalled();
             });
 
             it("if transaction is active, persist and cancel calls are" +
                 " queued", function () {
-                mockTransactionManager.isActive.andReturn(true);
+                mockTransactionManager.isActive.and.returnValue(true);
                 capability.persist();
                 expect(mockTransactionManager.addToTransaction).toHaveBeenCalled();
-                mockTransactionManager.addToTransaction.mostRecentCall.args[1]();
+                mockTransactionManager.addToTransaction.calls.mostRecent().args[1]();
                 expect(mockPersistence.persist).toHaveBeenCalled();
-                mockTransactionManager.addToTransaction.mostRecentCall.args[2]();
+                mockTransactionManager.addToTransaction.calls.mostRecent().args[2]();
                 expect(mockPersistence.refresh).toHaveBeenCalled();
             });
 
             it("wraps getSpace", function () {
-                mockPersistence.getSpace.andReturn('foo');
+                mockPersistence.getSpace.and.returnValue('foo');
                 expect(capability.getSpace()).toEqual('foo');
             });
 

platform/commonUI/edit/test/controllers/EditActionControllerSpec.js

@@ -38,7 +38,7 @@ define(
                         jasmine.createSpyObj("mockSaveAction", ["getMetadata", "perform"])
                     ];
                     mockedSaveActions.forEach(function (action) {
-                        action.getMetadata.andReturn(mockSaveActionMetadata);
+                        action.getMetadata.and.returnValue(mockSaveActionMetadata);
                     });
                     return mockedSaveActions;
                 } else if (actionContext.category === "conclude-editing") {
@@ -54,14 +54,14 @@ define(
 
             beforeEach(function () {
                 mockActions = jasmine.createSpyObj("action", ["getActions"]);
-                mockActions.getActions.andCallFake(fakeGetActions);
+                mockActions.getActions.and.callFake(fakeGetActions);
                 mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
                 mockScope.action = mockActions;
                 controller = new EditActionController(mockScope);
             });
 
             function makeControllerUpdateActions() {
-                mockScope.$watch.mostRecentCall.args[1]();
+                mockScope.$watch.calls.mostRecent().args[1]();
             }
 
             it("watches scope that may change applicable actions", function () {

platform/commonUI/edit/test/controllers/EditObjectControllerSpec.js

@@ -61,17 +61,17 @@ define(
                 mockLocation = jasmine.createSpyObj('$location',
                     ["search"]
                 );
-                mockLocation.search.andReturn({"view": "fixed"});
+                mockLocation.search.and.returnValue({"view": "fixed"});
                 mockNavigationService = jasmine.createSpyObj('navigationService',
                     ["checkBeforeNavigation"]
                 );
 
                 removeCheck = jasmine.createSpy('removeCheck');
-                mockNavigationService.checkBeforeNavigation.andReturn(removeCheck);
+                mockNavigationService.checkBeforeNavigation.and.returnValue(removeCheck);
 
-                mockObject.getId.andReturn("test");
-                mockObject.getModel.andReturn({ name: "Test object" });
-                mockObject.getCapability.andCallFake(function (key) {
+                mockObject.getId.and.returnValue("test");
+                mockObject.getModel.and.returnValue({ name: "Test object" });
+                mockObject.getCapability.and.callFake(function (key) {
                     return mockCapabilities[key];
                 });
 
@@ -81,10 +81,10 @@ define(
                     { key: 'xyz' }
                 ];
 
-                mockObject.useCapability.andCallFake(function (c) {
+                mockObject.useCapability.and.callFake(function (c) {
                     return (c === 'view') && testViews;
                 });
-                mockLocation.search.andReturn({ view: 'def' });
+                mockLocation.search.and.returnValue({ view: 'def' });
 
                 mockScope.domainObject = mockObject;
 
@@ -99,17 +99,17 @@ define(
                 expect(mockNavigationService.checkBeforeNavigation)
                     .toHaveBeenCalledWith(jasmine.any(Function));
 
-                var checkFn = mockNavigationService.checkBeforeNavigation.mostRecentCall.args[0];
+                var checkFn = mockNavigationService.checkBeforeNavigation.calls.mostRecent().args[0];
 
-                mockEditorCapability.isEditContextRoot.andReturn(false);
-                mockEditorCapability.dirty.andReturn(false);
+                mockEditorCapability.isEditContextRoot.and.returnValue(false);
+                mockEditorCapability.dirty.and.returnValue(false);
 
                 expect(checkFn()).toBe("Continuing will cause the loss of any unsaved changes.");
 
-                mockEditorCapability.isEditContextRoot.andReturn(true);
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
                 expect(checkFn()).toBe("Continuing will cause the loss of any unsaved changes.");
 
-                mockEditorCapability.dirty.andReturn(true);
+                mockEditorCapability.dirty.and.returnValue(true);
                 expect(checkFn())
                     .toBe("Continuing will cause the loss of any unsaved changes.");
 
@@ -119,7 +119,7 @@ define(
                 expect(mockScope.$on)
                     .toHaveBeenCalledWith("$destroy", jasmine.any(Function));
 
-                mockScope.$on.mostRecentCall.args[1]();
+                mockScope.$on.calls.mostRecent().args[1]();
 
                 expect(mockEditorCapability.finish).toHaveBeenCalled();
                 expect(removeCheck).toHaveBeenCalled();

platform/commonUI/edit/test/controllers/EditPanesControllerSpec.js

@@ -41,13 +41,13 @@ define(
                     ['getTrueRoot']
                 );
 
-                mockDomainObject.getId.andReturn('test-id');
-                mockDomainObject.getCapability.andReturn(mockContext);
+                mockDomainObject.getId.and.returnValue('test-id');
+                mockDomainObject.getCapability.and.returnValue(mockContext);
 
                 // Return a new instance of the root object each time
-                mockContext.getTrueRoot.andCallFake(function () {
+                mockContext.getTrueRoot.and.callFake(function () {
                     var mockRoot = jasmine.createSpyObj('root', ['getId']);
-                    mockRoot.getId.andReturn('root-id');
+                    mockRoot.getId.and.returnValue('root-id');
                     return mockRoot;
                 });
 
@@ -63,7 +63,7 @@ define(
             });
 
             it("exposes the root object found via the object's context capability", function () {
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
 
                 // Verify that the correct capability was used
                 expect(mockDomainObject.getCapability)
@@ -76,10 +76,10 @@ define(
             it("preserves the same root instance to avoid excessive refreshing", function () {
                 var firstRoot;
                 // Expose the domain object
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
                 firstRoot = controller.getRoot();
                 // Update!
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
                 // Should still have the same object instance, to avoid
                 // triggering the watch used by the template we're supporting
                 expect(controller.getRoot()).toBe(firstRoot);
@@ -90,18 +90,18 @@ define(
             it("updates the root when it changes", function () {
                 var firstRoot;
                 // Expose the domain object
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
                 firstRoot = controller.getRoot();
 
                 // Change the exposed root
-                mockContext.getTrueRoot.andCallFake(function () {
+                mockContext.getTrueRoot.and.callFake(function () {
                     var mockRoot = jasmine.createSpyObj('root', ['getId']);
-                    mockRoot.getId.andReturn('other-root-id');
+                    mockRoot.getId.and.returnValue('other-root-id');
                     return mockRoot;
                 });
 
                 // Update!
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
 
                 // Should still have the same object instance, to avoid
                 // triggering the watch used by the template we're supporting

platform/commonUI/edit/test/controllers/ElementsControllerSpec.js

@@ -63,13 +63,13 @@ define(
                 mockMutationCapability = jasmine.createSpyObj("mutationCapability", [
                     "listen"
                 ]);
-                mockMutationCapability.listen.andReturn(mockUnlisten);
+                mockMutationCapability.listen.and.returnValue(mockUnlisten);
                 mockDomainObject = jasmine.createSpyObj("domainObject", [
                     "getCapability",
                     "useCapability"
                 ]);
-                mockDomainObject.useCapability.andReturn(mockCompositionCapability);
-                mockDomainObject.getCapability.andReturn(mockMutationCapability);
+                mockDomainObject.useCapability.and.returnValue(mockCompositionCapability);
+                mockDomainObject.getCapability.and.returnValue(mockMutationCapability);
 
                 mockScope = jasmine.createSpyObj("$scope", ['$on']);
                 mockSelection = jasmine.createSpyObj("selection", [
@@ -77,7 +77,7 @@ define(
                     'off',
                     'get'
                 ]);
-                mockSelection.get.andReturn([]);
+                mockSelection.get.and.returnValue([]);
                 mockOpenMCT = {
                     selection: mockSelection
                 };
@@ -88,7 +88,7 @@ define(
                     }
                 };
 
-                spyOn(ElementsController.prototype, 'refreshComposition').andCallThrough();
+                spyOn(ElementsController.prototype, 'refreshComposition').and.callThrough();
 
                 controller = new ElementsController(mockScope, mockOpenMCT);
             });
@@ -123,29 +123,29 @@ define(
             });
 
             it("refreshes composition on selection", function () {
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
 
                 expect(ElementsController.prototype.refreshComposition).toHaveBeenCalledWith(mockDomainObject);
             });
 
             it("listens on mutation and refreshes composition", function () {
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
 
                 expect(mockDomainObject.getCapability).toHaveBeenCalledWith('mutation');
                 expect(mockMutationCapability.listen).toHaveBeenCalled();
-                expect(ElementsController.prototype.refreshComposition.calls.length).toBe(1);
+                expect(ElementsController.prototype.refreshComposition.calls.count()).toBe(1);
 
-                mockMutationCapability.listen.mostRecentCall.args[0](mockDomainObject);
+                mockMutationCapability.listen.calls.mostRecent().args[0](mockDomainObject);
 
-                expect(ElementsController.prototype.refreshComposition.calls.length).toBe(2);
+                expect(ElementsController.prototype.refreshComposition.calls.count()).toBe(2);
             });
 
             it("cleans up mutation listener when selection changes", function () {
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
 
                 expect(mockMutationCapability.listen).toHaveBeenCalled();
 
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
 
                 expect(mockUnlisten).toHaveBeenCalled();
             });
@@ -156,7 +156,7 @@ define(
                         elementProxy: {}
                     }
                 };
-                mockOpenMCT.selection.on.mostRecentCall.args[1](selectable);
+                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
 
                 expect(mockDomainObject.getCapability).not.toHaveBeenCalledWith('mutation');
             });
@@ -167,13 +167,13 @@ define(
                     firstCompositionCallback,
                     secondCompositionCallback;
 
-                spyOn(mockCompositionCapability, "then").andCallThrough();
+                spyOn(mockCompositionCapability, "then").and.callThrough();
 
                 controller.refreshComposition(mockDomainObject);
                 controller.refreshComposition(mockDomainObject);
 
-                firstCompositionCallback = mockCompositionCapability.then.calls[0].args[0];
-                secondCompositionCallback = mockCompositionCapability.then.calls[1].args[0];
+                firstCompositionCallback = mockCompositionCapability.then.calls.all()[0].args[0];
+                secondCompositionCallback = mockCompositionCapability.then.calls.all()[1].args[0];
                 secondCompositionCallback(secondMockCompositionObjects);
                 firstCompositionCallback(mockCompositionObjects);
 

platform/commonUI/edit/test/creation/AddActionProviderSpec.js

@@ -51,9 +51,9 @@ define(
                         "hasFeature"
                     ]
                 );
-                mockType.hasFeature.andReturn(true);
-                mockType.getName.andReturn(name);
-                mockType.getKey.andReturn(name);
+                mockType.hasFeature.and.returnValue(true);
+                mockType.getName.and.returnValue(name);
+                mockType.getKey.and.returnValue(name);
                 return mockType;
             }
 
@@ -77,7 +77,7 @@ define(
                     mockTypeMap[type.getKey()] = type;
                 });
 
-                mockTypeService.getType.andCallFake(function (key) {
+                mockTypeService.getType.and.callFake(function (key) {
                     return mockTypeMap[key];
                 });
 

platform/commonUI/edit/test/creation/CreateActionProviderSpec.js

@@ -49,8 +49,8 @@ define(
                         "hasFeature"
                     ]
                 );
-                mockType.hasFeature.andReturn(true);
-                mockType.getName.andReturn(name);
+                mockType.hasFeature.and.returnValue(true);
+                mockType.getName.and.returnValue(name);
                 return mockType;
             }
 
@@ -74,11 +74,11 @@ define(
                     return mockPolicyMap[type.getName()];
                 };
 
-                mockPolicyService.allow.andCallFake(function (category, type) {
+                mockPolicyService.allow.and.callFake(function (category, type) {
                     return category === "creation" && mockCreationPolicy(type) ? true : false;
                 });
 
-                mockTypeService.listTypes.andReturn(mockTypes);
+                mockTypeService.listTypes.and.returnValue(mockTypes);
 
                 provider = new CreateActionProvider(
                     mockTypeService,

platform/commonUI/edit/test/creation/CreateActionSpec.js

@@ -77,10 +77,10 @@ define(
                         "useCapability"
                     ]
                 );
-                mockDomainObject.hasCapability.andCallFake(function (name) {
+                mockDomainObject.hasCapability.and.callFake(function (name) {
                     return !!capabilities[name];
                 });
-                mockDomainObject.getCapability.andCallFake(function (name) {
+                mockDomainObject.getCapability.and.callFake(function (name) {
                     return capabilities[name];
                 });
                 mockSaveAction = jasmine.createSpyObj(
@@ -117,14 +117,14 @@ define(
                 mockContext = {
                     domainObject: mockParent
                 };
-                mockParent.useCapability.andReturn(mockDomainObject);
+                mockParent.useCapability.and.returnValue(mockDomainObject);
 
-                mockType.getKey.andReturn("test");
-                mockType.getCssClass.andReturn("icon-telemetry");
-                mockType.getDescription.andReturn("a test type");
-                mockType.getName.andReturn("Test");
-                mockType.getProperties.andReturn([]);
-                mockType.getInitialModel.andReturn({});
+                mockType.getKey.and.returnValue("test");
+                mockType.getCssClass.and.returnValue("icon-telemetry");
+                mockType.getDescription.and.returnValue("a test type");
+                mockType.getName.and.returnValue("Test");
+                mockType.getProperties.and.returnValue([]);
+                mockType.getInitialModel.and.returnValue({});
 
                 action = new CreateAction(
                     mockType,
@@ -144,7 +144,7 @@ define(
             describe("the perform function", function () {
                 var promise = jasmine.createSpyObj("promise", ["then"]);
                 beforeEach(function () {
-                    capabilities.action.getActions.andReturn([mockEditAction]);
+                    capabilities.action.getActions.and.returnValue([mockEditAction]);
                 });
 
                 it("uses the instantiation capability when performed", function () {
@@ -159,30 +159,30 @@ define(
 
                 it("uses the save-as action if object does not have an edit action" +
                     " available", function () {
-                    capabilities.action.getActions.andReturn([]);
-                    capabilities.action.perform.andReturn(mockPromise(undefined));
-                    capabilities.editor.save.andReturn(promise);
+                    capabilities.action.getActions.and.returnValue([]);
+                    capabilities.action.perform.and.returnValue(mockPromise(undefined));
+                    capabilities.editor.save.and.returnValue(promise);
                     action.perform();
                     expect(capabilities.action.perform).toHaveBeenCalledWith("save-as");
                 });
 
                 describe("uses to editor capability", function () {
                     beforeEach(function () {
-                        capabilities.action.getActions.andReturn([]);
-                        capabilities.action.perform.andReturn(promise);
-                        capabilities.editor.save.andReturn(promise);
+                        capabilities.action.getActions.and.returnValue([]);
+                        capabilities.action.perform.and.returnValue(promise);
+                        capabilities.editor.save.and.returnValue(promise);
                     });
 
                     it("to save the edit if user saves dialog", function () {
                         action.perform();
                         expect(promise.then).toHaveBeenCalled();
-                        promise.then.mostRecentCall.args[0]();
+                        promise.then.calls.mostRecent().args[0]();
                         expect(capabilities.editor.save).toHaveBeenCalled();
                     });
 
                     it("to finish the edit if user cancels dialog", function () {
                         action.perform();
-                        promise.then.mostRecentCall.args[1]();
+                        promise.then.calls.mostRecent().args[1]();
                         expect(capabilities.editor.finish).toHaveBeenCalled();
                     });
                 });

platform/commonUI/edit/test/creation/CreateMenuControllerSpec.js

@@ -49,10 +49,10 @@ define(
             it("populates the scope with create actions", function () {
                 mockScope.action = mockActions;
 
-                mockActions.getActions.andReturn(["a", "b", "c"]);
+                mockActions.getActions.and.returnValue(["a", "b", "c"]);
 
                 // Call the watch
-                mockScope.$watch.mostRecentCall.args[1]();
+                mockScope.$watch.calls.mostRecent().args[1]();
 
                 // Should have grouped and ungrouped actions in scope now
                 expect(mockScope.createActions.length).toEqual(3);

platform/commonUI/edit/test/creation/CreateWizardSpec.js

@@ -41,10 +41,10 @@ define(
                     "property" + name,
                     ["getDefinition", "getValue", "setValue"]
                 );
-                mockProperty.getDefinition.andReturn({
+                mockProperty.getDefinition.and.returnValue({
                     control: "textfield"
                 });
-                mockProperty.getValue.andReturn(name);
+                mockProperty.getValue.and.returnValue(name);
                 return mockProperty;
             }
 
@@ -74,12 +74,12 @@ define(
 
                 testModel = { someKey: "some value" };
 
-                mockType.getKey.andReturn("test");
-                mockType.getCssClass.andReturn("icon-telemetry");
-                mockType.getDescription.andReturn("a test type");
-                mockType.getName.andReturn("Test");
-                mockType.getInitialModel.andReturn(testModel);
-                mockType.getProperties.andReturn(mockProperties);
+                mockType.getKey.and.returnValue("test");
+                mockType.getCssClass.and.returnValue("icon-telemetry");
+                mockType.getDescription.and.returnValue("a test type");
+                mockType.getName.and.returnValue("Test");
+                mockType.getInitialModel.and.returnValue(testModel);
+                mockType.getProperties.and.returnValue(mockProperties);
 
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
@@ -87,9 +87,9 @@ define(
                 );
 
                 //Mocking the getCapability('type') call
-                mockDomainObject.getCapability.andReturn(mockType);
-                mockDomainObject.useCapability.andReturn();
-                mockDomainObject.getModel.andReturn(testModel);
+                mockDomainObject.getCapability.and.returnValue(mockType);
+                mockDomainObject.useCapability.and.returnValue();
+                mockDomainObject.getModel.and.returnValue(testModel);
 
                 wizard = new CreateWizard(
                     mockDomainObject,
@@ -147,9 +147,11 @@ define(
                     "C": "ValueC"
                 },
                 compareModel = wizard.createModel(formValue);
+                //populateObjectFromInput adds a .location attribute that is not added by createModel.
+                compareModel.location = undefined;
                 wizard.populateObjectFromInput(formValue);
                 expect(mockDomainObject.useCapability).toHaveBeenCalledWith('mutation', jasmine.any(Function));
-                expect(mockDomainObject.useCapability.mostRecentCall.args[1]()).toEqual(compareModel);
+                expect(mockDomainObject.useCapability.calls.mostRecent().args[1]()).toEqual(compareModel);
             });
 
             it("validates selection types using policy", function () {
@@ -168,7 +170,7 @@ define(
                     rows = structure.sections[sections.length - 1].rows,
                     locationRow = rows[rows.length - 1];
 
-                mockDomainObj.getCapability.andReturn(mockOtherType);
+                mockDomainObj.getCapability.and.returnValue(mockOtherType);
                 locationRow.validate(mockDomainObj);
 
                 // Should check policy to see if the user-selected location

platform/commonUI/edit/test/creation/CreationPolicySpec.js

@@ -38,12 +38,12 @@ define(
             });
 
             it("allows creation of types with the creation feature", function () {
-                mockType.hasFeature.andReturn(true);
+                mockType.hasFeature.and.returnValue(true);
                 expect(policy.allow(mockType)).toBeTruthy();
             });
 
             it("disallows creation of types without the creation feature", function () {
-                mockType.hasFeature.andReturn(false);
+                mockType.hasFeature.and.returnValue(false);
                 expect(policy.allow(mockType)).toBeFalsy();
             });
         });

platform/commonUI/edit/test/creation/CreationServiceSpec.js

@@ -103,33 +103,33 @@ define(
                     ["persist", "getSpace"]
                 );
 
-                mockParentObject.getCapability.andCallFake(function (key) {
+                mockParentObject.getCapability.and.callFake(function (key) {
                     return mockCapabilities[key];
                 });
-                mockParentObject.useCapability.andCallFake(function (key, value) {
+                mockParentObject.useCapability.and.callFake(function (key, value) {
                     return mockCapabilities[key].invoke(value);
                 });
-                mockParentObject.getId.andReturn('parentId');
+                mockParentObject.getId.and.returnValue('parentId');
 
-                mockNewObject.getId.andReturn('newId');
-                mockNewObject.getCapability.andCallFake(function (c) {
+                mockNewObject.getId.and.returnValue('newId');
+                mockNewObject.getCapability.and.callFake(function (c) {
                     return c === 'persistence' ?
                             mockNewPersistenceCapability : undefined;
                 });
 
                 mockPersistenceCapability.persist
-                    .andReturn(mockPromise(true));
+                    .and.returnValue(mockPromise(true));
                 mockNewPersistenceCapability.persist
-                    .andReturn(mockPromise(true));
+                    .and.returnValue(mockPromise(true));
 
-                mockMutationCapability.invoke.andReturn(mockPromise(true));
-                mockPersistenceCapability.getSpace.andReturn("testSpace");
-                mockCompositionCapability.invoke.andReturn(
+                mockMutationCapability.invoke.and.returnValue(mockPromise(true));
+                mockPersistenceCapability.getSpace.and.returnValue("testSpace");
+                mockCompositionCapability.invoke.and.returnValue(
                     mockPromise([mockNewObject])
                 );
-                mockCompositionCapability.add.andReturn(mockPromise(true));
-                mockCreationCapability.instantiate.andReturn(mockNewObject);
-                mockCreationCapability.invoke.andCallFake(function (model) {
+                mockCompositionCapability.add.and.returnValue(mockPromise(true));
+                mockCreationCapability.instantiate.and.returnValue(mockNewObject);
+                mockCreationCapability.invoke.and.callFake(function (model) {
                     return mockCreationCapability.instantiate(model);
                 });
 
@@ -163,10 +163,10 @@ define(
                     mockCallback = jasmine.createSpy('callback');
 
                 // Act as if the object had been created
-                mockCompositionCapability.add.andCallFake(function (id) {
-                    mockDomainObject.getId.andReturn(id);
+                mockCompositionCapability.add.and.callFake(function (id) {
+                    mockDomainObject.getId.and.returnValue(id);
                     mockCompositionCapability.invoke
-                        .andReturn(mockPromise([mockDomainObject]));
+                        .and.returnValue(mockPromise([mockDomainObject]));
                     return mockPromise(mockDomainObject);
                 });
 
@@ -200,7 +200,7 @@ define(
                 // created object - this is an error.
                 var model = { someKey: "some value" };
 
-                mockCompositionCapability.add.andReturn(mockPromise(false));
+                mockCompositionCapability.add.and.returnValue(mockPromise(false));
 
                 creationService.createObject(model, mockParentObject);
 

platform/commonUI/edit/test/creation/LocatorControllerSpec.js

@@ -64,9 +64,9 @@ define(
                     ["then"]
                 );
 
-                mockDomainObject.getCapability.andReturn(mockContext);
-                mockContext.getRoot.andReturn(mockRootObject);
-                mockObjectService.getObjects.andReturn(getObjectsPromise);
+                mockDomainObject.getCapability.and.returnValue(mockContext);
+                mockContext.getRoot.and.returnValue(mockRootObject);
+                mockObjectService.getObjects.and.returnValue(getObjectsPromise);
 
                 mockScope.ngModel = {};
                 mockScope.field = "someField";
@@ -76,7 +76,7 @@ define(
             describe("when context is available", function () {
 
                 beforeEach(function () {
-                        mockContext.getRoot.andReturn(mockRootObject);
+                        mockContext.getRoot.and.returnValue(mockRootObject);
                         controller = new LocatorController(mockScope, mockTimeout, mockObjectService);
                     });
 
@@ -96,8 +96,8 @@ define(
                 it("changes its own model on embedded model updates", function () {
                         // Need to pass on selection changes as updates to
                         // the control's value
-                        mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                        mockTimeout.mostRecentCall.args[0]();
+                        mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
+                        mockTimeout.calls.mostRecent().args[0]();
                         expect(mockScope.ngModel.someField).toEqual(mockDomainObject);
                         expect(mockScope.rootObject).toEqual(mockRootObject);
 
@@ -109,11 +109,11 @@ define(
 
                 it("rejects changes which fail validation", function () {
                         mockScope.structure = { validate: jasmine.createSpy('validate') };
-                        mockScope.structure.validate.andReturn(false);
+                        mockScope.structure.validate.and.returnValue(false);
 
                         // Pass selection change
-                        mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                        mockTimeout.mostRecentCall.args[0]();
+                        mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
+                        mockTimeout.calls.mostRecent().args[0]();
 
                         expect(mockScope.structure.validate).toHaveBeenCalled();
                         // Change should have been rejected
@@ -126,13 +126,13 @@ define(
                             ['$setValidity']
                         );
 
-                        mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                        mockTimeout.mostRecentCall.args[0]();
+                        mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
+                        mockTimeout.calls.mostRecent().args[0]();
                         expect(mockScope.ngModelController.$setValidity)
                             .toHaveBeenCalledWith(jasmine.any(String), true);
 
-                        mockScope.$watch.mostRecentCall.args[1](undefined);
-                        mockTimeout.mostRecentCall.args[0]();
+                        mockScope.$watch.calls.mostRecent().args[1](undefined);
+                        mockTimeout.calls.mostRecent().args[0]();
                         expect(mockScope.ngModelController.$setValidity)
                             .toHaveBeenCalledWith(jasmine.any(String), false);
                     });
@@ -141,27 +141,27 @@ define(
                 var defaultRoot = "DEFAULT_ROOT";
 
                 beforeEach(function () {
-                    mockContext.getRoot.andReturn(undefined);
-                    getObjectsPromise.then.andCallFake(function (callback) {
+                    mockContext.getRoot.and.returnValue(undefined);
+                    getObjectsPromise.then.and.callFake(function (callback) {
                         callback({'ROOT': defaultRoot});
                     });
                     controller = new LocatorController(mockScope, mockTimeout, mockObjectService);
                 });
 
                 it("provides a default context where none is available", function () {
-                    mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                    mockTimeout.mostRecentCall.args[0]();
+                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
+                    mockTimeout.calls.mostRecent().args[0]();
                     expect(mockScope.rootObject).toBe(defaultRoot);
                 });
 
                 it("does not issue redundant requests for the root object", function () {
-                    mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                    mockTimeout.mostRecentCall.args[0]();
-                    mockScope.$watch.mostRecentCall.args[1](undefined);
-                    mockTimeout.mostRecentCall.args[0]();
-                    mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                    mockTimeout.mostRecentCall.args[0]();
-                    expect(mockObjectService.getObjects.calls.length)
+                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
+                    mockTimeout.calls.mostRecent().args[0]();
+                    mockScope.$watch.calls.mostRecent().args[1](undefined);
+                    mockTimeout.calls.mostRecent().args[0]();
+                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
+                    mockTimeout.calls.mostRecent().args[0]();
+                    expect(mockObjectService.getObjects.calls.count())
                         .toEqual(1);
                 });
 

platform/commonUI/edit/test/policies/EditActionPolicySpec.js

@@ -58,10 +58,10 @@ define(
                 mockEditAction = jasmine.createSpyObj('edit', ['getMetadata']);
                 mockPropertiesAction = jasmine.createSpyObj('edit', ['getMetadata']);
 
-                mockDomainObject.getCapability.andCallFake(function (capability) {
+                mockDomainObject.getCapability.and.callFake(function (capability) {
                     return capabilities[capability];
                 });
-                mockDomainObject.hasCapability.andCallFake(function (capability) {
+                mockDomainObject.hasCapability.and.callFake(function (capability) {
                     return !!capabilities[capability];
                 });
 
@@ -71,13 +71,13 @@ define(
                 plotView = { key: "plot", editable: false };
                 testViews = [];
 
-                mockDomainObject.useCapability.andCallFake(function (c) {
+                mockDomainObject.useCapability.and.callFake(function (c) {
                     // Provide test views, only for the view capability
                     return c === 'view' && testViews;
                 });
 
-                mockEditAction.getMetadata.andReturn({ key: 'edit' });
-                mockPropertiesAction.getMetadata.andReturn({ key: 'properties' });
+                mockEditAction.getMetadata.and.returnValue({ key: 'edit' });
+                mockPropertiesAction.getMetadata.and.returnValue({ key: 'properties' });
 
                 testContext = {
                     domainObject: mockDomainObject,
@@ -111,20 +111,20 @@ define(
             it("disallows the edit action when object is already being" +
                 " edited", function () {
                 testViews = [editableView];
-                mockEditorCapability.isEditContextRoot.andReturn(true);
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
                 expect(policy.allow(mockEditAction, testContext)).toBe(false);
             });
 
             it("allows editing of panels in plot view", function () {
                 testViews = [plotView];
-                mockTypeCapability.getKey.andReturn('telemetry.panel');
+                mockTypeCapability.getKey.and.returnValue('telemetry.panel');
 
                 expect(policy.allow(mockEditAction, testContext)).toBe(true);
             });
 
             it("disallows editing of plot view when object not a panel type", function () {
                 testViews = [plotView];
-                mockTypeCapability.getKey.andReturn('something.else');
+                mockTypeCapability.getKey.and.returnValue('something.else');
 
                 expect(policy.allow(mockEditAction, testContext)).toBe(false);
             });

platform/commonUI/edit/test/policies/EditContextualActionPolicySpec.js

@@ -41,20 +41,20 @@ define(
                 mockEditorCapability = jasmine.createSpyObj("editorCapability", ["isEditContextRoot", "inEditContext"]);
 
                 navigatedObject = jasmine.createSpyObj("navigatedObject", ["hasCapability", "getCapability"]);
-                navigatedObject.getCapability.andReturn(mockEditorCapability);
-                navigatedObject.hasCapability.andReturn(false);
+                navigatedObject.getCapability.and.returnValue(mockEditorCapability);
+                navigatedObject.hasCapability.and.returnValue(false);
 
 
                 mockDomainObject = jasmine.createSpyObj("domainObject", ["hasCapability", "getCapability"]);
-                mockDomainObject.hasCapability.andReturn(false);
-                mockDomainObject.getCapability.andReturn(mockEditorCapability);
+                mockDomainObject.hasCapability.and.returnValue(false);
+                mockDomainObject.getCapability.and.returnValue(mockEditorCapability);
 
                 navigationService = jasmine.createSpyObj("navigationService", ["getNavigation"]);
-                navigationService.getNavigation.andReturn(navigatedObject);
+                navigationService.getNavigation.and.returnValue(navigatedObject);
 
                 metadata = {key: "move"};
                 mockAction = jasmine.createSpyObj("action", ["getMetadata"]);
-                mockAction.getMetadata.andReturn(metadata);
+                mockAction.getMetadata.and.returnValue(metadata);
 
                 context = {domainObject: mockDomainObject};
 
@@ -67,8 +67,8 @@ define(
 
             it('Allows "window" action when navigated object in edit mode,' +
                 ' but selected object not in edit mode ', function () {
-                navigatedObject.hasCapability.andReturn(true);
-                mockEditorCapability.isEditContextRoot.andReturn(true);
+                navigatedObject.hasCapability.and.returnValue(true);
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
                 metadata.key = "window";
                 expect(policy.allow(mockAction, context)).toBe(true);
             });
@@ -79,12 +79,12 @@ define(
                     var mockParent = jasmine.createSpyObj("parentObject", ["hasCapability"]),
                         mockContextCapability = jasmine.createSpyObj("contextCapability", ["getParent"]);
 
-                    mockParent.hasCapability.andReturn(true);
-                    mockContextCapability.getParent.andReturn(mockParent);
-                    navigatedObject.hasCapability.andReturn(true);
+                    mockParent.hasCapability.and.returnValue(true);
+                    mockContextCapability.getParent.and.returnValue(mockParent);
+                    navigatedObject.hasCapability.and.returnValue(true);
 
-                    mockDomainObject.getCapability.andReturn(mockContextCapability);
-                    mockDomainObject.hasCapability.andCallFake(function (capability) {
+                    mockDomainObject.getCapability.and.returnValue(mockContextCapability);
+                    mockDomainObject.hasCapability.and.callFake(function (capability) {
                         switch (capability) {
                             case "editor": return false;
                             case "context": return true;
@@ -97,19 +97,19 @@ define(
 
             it('Disallows "move" action when navigated object in edit mode,' +
                 ' but selected object not in edit mode ', function () {
-                navigatedObject.hasCapability.andReturn(true);
-                mockEditorCapability.isEditContextRoot.andReturn(true);
-                mockEditorCapability.inEditContext.andReturn(false);
+                navigatedObject.hasCapability.and.returnValue(true);
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
+                mockEditorCapability.inEditContext.and.returnValue(false);
                 metadata.key = "move";
                 expect(policy.allow(mockAction, context)).toBe(false);
             });
 
             it('Disallows copy action when navigated object and' +
                 ' selected object in edit mode', function () {
-                navigatedObject.hasCapability.andReturn(true);
-                mockDomainObject.hasCapability.andReturn(true);
-                mockEditorCapability.isEditContextRoot.andReturn(true);
-                mockEditorCapability.inEditContext.andReturn(true);
+                navigatedObject.hasCapability.and.returnValue(true);
+                mockDomainObject.hasCapability.and.returnValue(true);
+                mockEditorCapability.isEditContextRoot.and.returnValue(true);
+                mockEditorCapability.inEditContext.and.returnValue(true);
 
                 metadata.key = "copy";
                 expect(policy.allow(mockAction, context)).toBe(false);

platform/commonUI/edit/test/policies/EditPersistableObjectsSpec.js

@@ -54,11 +54,11 @@ define(
                 mockPropertiesAction = jasmine.createSpyObj('properties', ['getMetadata']);
                 mockOtherAction = jasmine.createSpyObj('other', ['getMetadata']);
 
-                mockEditAction.getMetadata.andReturn({ key: 'edit' });
-                mockPropertiesAction.getMetadata.andReturn({ key: 'properties' });
-                mockOtherAction.getMetadata.andReturn({key: 'other'});
+                mockEditAction.getMetadata.and.returnValue({ key: 'edit' });
+                mockPropertiesAction.getMetadata.and.returnValue({ key: 'properties' });
+                mockOtherAction.getMetadata.and.returnValue({key: 'other'});
 
-                mockDomainObject.getId.andReturn('test:testId');
+                mockDomainObject.getId.and.returnValue('test:testId');
 
                 testContext = {
                     domainObject: mockDomainObject,
@@ -69,7 +69,7 @@ define(
             });
 
             it("Applies to edit action", function () {
-                mockObjectAPI.getProvider.andReturn({});
+                mockObjectAPI.getProvider.and.returnValue({});
                 expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
 
                 policy.allow(mockEditAction, testContext);
@@ -77,7 +77,7 @@ define(
             });
 
             it("Applies to properties action", function () {
-                mockObjectAPI.getProvider.andReturn({});
+                mockObjectAPI.getProvider.and.returnValue({});
                 expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
 
                 policy.allow(mockPropertiesAction, testContext);
@@ -85,7 +85,7 @@ define(
             });
 
             it("does not apply to other actions", function () {
-                mockObjectAPI.getProvider.andReturn({});
+                mockObjectAPI.getProvider.and.returnValue({});
                 expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
 
                 policy.allow(mockOtherAction, testContext);
@@ -93,10 +93,10 @@ define(
             });
 
             it("Tests object provider for editability", function () {
-                mockObjectAPI.getProvider.andReturn({});
+                mockObjectAPI.getProvider.and.returnValue({});
                 expect(policy.allow(mockEditAction, testContext)).toBe(false);
                 expect(mockObjectAPI.getProvider).toHaveBeenCalled();
-                mockObjectAPI.getProvider.andReturn({save: function () {}});
+                mockObjectAPI.getProvider.and.returnValue({save: function () {}});
                 expect(policy.allow(mockEditAction, testContext)).toBe(true);
             });
         });

platform/commonUI/edit/test/policies/EditableViewPolicySpec.js

@@ -35,12 +35,12 @@ define(
                     'domainObject',
                     ['hasCapability', 'getCapability']
                 );
-                mockDomainObject.getCapability.andReturn({
+                mockDomainObject.getCapability.and.returnValue({
                     inEditContext: function () {
                        return true;
                    }
                 });
-                mockDomainObject.hasCapability.andCallFake(function (c) {
+                mockDomainObject.hasCapability.and.callFake(function (c) {
                     return (c === 'editor') && testMode;
                 });
 

platform/commonUI/edit/test/representers/EditRepresenterSpec.js

@@ -52,8 +52,8 @@ define([
                     'useCapability'
                 ]);
 
-                domainObject.getId.andReturn('anId');
-                domainObject.getModel.andReturn({name: 'anObject'});
+                domainObject.getId.and.returnValue('anId');
+                domainObject.getModel.and.returnValue({name: 'anObject'});
 
                 representation = {
                     key: 'someRepresentation'
@@ -75,7 +75,7 @@ define([
                 expect(domainObject.useCapability)
                     .toHaveBeenCalledWith('mutation', jasmine.any(Function));
 
-                var mutateValue = domainObject.useCapability.calls[0].args[1]();
+                var mutateValue = domainObject.useCapability.calls.all()[0].args[1]();
 
                 expect(mutateValue.configuration.someRepresentation)
                     .toEqual({some: 'config'});

platform/commonUI/edit/test/representers/EditToolbarSpec.js

@@ -41,13 +41,13 @@ define(
             beforeEach(function () {
                 mockOpenMCT = jasmine.createSpy('openmct', ['objects']);
                 mockObjects = jasmine.createSpyObj('objects', ['observe']);
-                mockObjects.observe.andReturn();
+                mockObjects.observe.and.returnValue();
                 mockOpenMCT.objects = mockObjects;
                 mockScope = jasmine.createSpyObj("$scope", [
                     "$watchCollection",
                     "$on"
                 ]);
-                mockScope.$watchCollection.andReturn();
+                mockScope.$watchCollection.and.returnValue();
                 mockDomainObject = jasmine.createSpyObj("domainObject", [
                     'identifier'
                 ]);

platform/commonUI/edit/test/services/TransactionManagerSpec.js

@@ -44,10 +44,10 @@ define(
                 testId = 'test-id';
                 mockPromise = jasmine.createSpyObj('promise', ['then']);
 
-                mockOnCommit.andReturn(mockPromise);
-                mockOnCancel.andReturn(mockPromise);
+                mockOnCommit.and.returnValue(mockPromise);
+                mockOnCancel.and.returnValue(mockPromise);
 
-                mockTransactionService.addToTransaction.andCallFake(function () {
+                mockTransactionService.addToTransaction.and.callFake(function () {
                     var mockRemove =
                         jasmine.createSpy('remove-' + mockRemoves.length);
                     mockRemoves.push(mockRemove);
@@ -59,7 +59,7 @@ define(
 
             it("delegates isActive calls", function () {
                 [false, true].forEach(function (state) {
-                    mockTransactionService.isActive.andReturn(state);
+                    mockTransactionService.isActive.and.returnValue(state);
                     expect(manager.isActive()).toBe(state);
                 });
             });
@@ -84,12 +84,12 @@ define(
                 it("invokes passed-in callbacks from its own callbacks", function () {
                     expect(mockOnCommit).not.toHaveBeenCalled();
                     mockTransactionService.addToTransaction
-                        .mostRecentCall.args[0]();
+                        .calls.mostRecent().args[0]();
                     expect(mockOnCommit).toHaveBeenCalled();
 
                     expect(mockOnCancel).not.toHaveBeenCalled();
                     mockTransactionService.addToTransaction
-                        .mostRecentCall.args[1]();
+                        .calls.mostRecent().args[1]();
                     expect(mockOnCancel).toHaveBeenCalled();
                 });
 
@@ -99,7 +99,7 @@ define(
                         jasmine.createSpy(),
                         jasmine.createSpy()
                     );
-                    expect(mockTransactionService.addToTransaction.calls.length)
+                    expect(mockTransactionService.addToTransaction.calls.count())
                         .toEqual(1);
                 });
 
@@ -109,7 +109,7 @@ define(
                         jasmine.createSpy(),
                         jasmine.createSpy()
                     );
-                    expect(mockTransactionService.addToTransaction.calls.length)
+                    expect(mockTransactionService.addToTransaction.calls.count())
                         .toEqual(2);
                 });
 

platform/commonUI/edit/test/services/TransactionServiceSpec.js

@@ -40,7 +40,7 @@ define(
 
             beforeEach(function () {
                 mockQ = jasmine.createSpyObj("$q", ["all"]);
-                mockQ.all.andReturn(fastPromise());
+                mockQ.all.and.returnValue(fastPromise());
                 mockLog = jasmine.createSpyObj("$log", ["error"]);
                 transactionService = new TransactionService(mockQ, mockLog);
             });

platform/commonUI/edit/test/services/TransactionSpec.js

@@ -92,7 +92,7 @@ define(
 
                 describe("and an exception is encountered during commit", function () {
                     beforeEach(function () {
-                        mockCommit.andCallFake(function () {
+                        mockCommit.and.callFake(function () {
                             throw new Error("test error");
                         });
                         transaction.commit();

platform/commonUI/general/bundle.js

@@ -34,7 +34,6 @@ define([
     "./src/controllers/ContextMenuController",
     "./src/controllers/ClickAwayController",
     "./src/controllers/ViewSwitcherController",
-    "./src/controllers/BottomBarController",
     "./src/controllers/GetterSetterController",
     "./src/controllers/SelectorController",
     "./src/controllers/ObjectInspectorController",
@@ -49,13 +48,14 @@ define([
     "./src/directives/MCTSplitPane",
     "./src/directives/MCTSplitter",
     "./src/directives/MCTTree",
+    "./src/directives/MCTIndicators",
     "./src/directives/MCTPreview",
     "./src/actions/MCTPreviewAction",
     "./src/filters/ReverseFilter",
     "text!./res/templates/bottombar.html",
     "text!./res/templates/controls/action-button.html",
     "text!./res/templates/controls/input-filter.html",
-    "text!./res/templates/indicator.html",
+    "text!./res/templates/angular-indicator.html",
     "text!./res/templates/message-banner.html",
     "text!./res/templates/progress-bar.html",
     "text!./res/templates/controls/time-controller.html",
@@ -87,7 +87,6 @@ define([
     ContextMenuController,
     ClickAwayController,
     ViewSwitcherController,
-    BottomBarController,
     GetterSetterController,
     SelectorController,
     ObjectInspectorController,
@@ -102,6 +101,7 @@ define([
     MCTSplitPane,
     MCTSplitter,
     MCTTree,
+    MCTIndicators,
     MCTPreview,
     MCTPreviewAction,
     ReverseFilter,
@@ -281,13 +281,6 @@ define([
                         "$timeout"
                     ]
                 },
-                {
-                    "key": "BottomBarController",
-                    "implementation": BottomBarController,
-                    "depends": [
-                        "indicators[]"
-                    ]
-                },
                 {
                     "key": "GetterSetterController",
                     "implementation": GetterSetterController,
@@ -401,7 +394,12 @@ define([
                 {
                     "key": "mctTree",
                     "implementation": MCTTree,
-                    "depends": ['gestureService']
+                    "depends": ['gestureService', 'openmct']
+                },
+                {
+                    "key": "mctIndicators",
+                    "implementation": MCTIndicators,
+                    "depends": ['openmct']
                 },
                 {
                     "key": "mctPreview",

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

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "openmct-symbols-16px",
     "lastOpened": 0,
-    "created": 1527895011127
+    "created": 1529545133464
   },
   "iconSets": [
     {
@@ -268,13 +268,21 @@
           "code": 59697,
           "tempChar": ""
         },
+        {
+          "order": 148,
+          "id": 118,
+          "name": "icon-arrow-right-equilateral",
+          "prevSize": 24,
+          "code": 59698,
+          "tempChar": ""
+        },
         {
           "order": 48,
           "prevSize": 24,
           "name": "icon-arrows-out",
           "id": 43,
           "code": 921600,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 49,
@@ -282,7 +290,7 @@
           "name": "icon-arrows-right-left",
           "id": 44,
           "code": 921601,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 50,
@@ -290,7 +298,7 @@
           "name": "icon-arrows-up-down",
           "id": 45,
           "code": 921602,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 9,
@@ -298,7 +306,7 @@
           "name": "icon-bullet",
           "id": 4,
           "code": 921604,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 25,
@@ -306,7 +314,7 @@
           "name": "icon-calendar",
           "id": 20,
           "code": 921605,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 30,
@@ -314,7 +322,7 @@
           "name": "icon-chain-links",
           "id": 25,
           "code": 921606,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -322,7 +330,7 @@
           "prevSize": 24,
           "code": 921607,
           "name": "icon-pane-collapse-left",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 110,
@@ -330,7 +338,7 @@
           "prevSize": 24,
           "code": 921608,
           "name": "icon-pane-collapse-right",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 5,
@@ -338,7 +346,7 @@
           "prevSize": 24,
           "code": 921609,
           "name": "icon-download",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -346,7 +354,7 @@
           "name": "icon-duplicate",
           "id": 55,
           "code": 921616,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 61,
@@ -354,7 +362,7 @@
           "name": "icon-folder-new",
           "id": 56,
           "code": 921617,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 64,
@@ -362,7 +370,7 @@
           "name": "icon-fullscreen-expand",
           "id": 59,
           "code": 921618,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 63,
@@ -370,7 +378,7 @@
           "name": "icon-fullscreen-collapse",
           "id": 58,
           "code": 921619,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -378,7 +386,7 @@
           "name": "icon-layers",
           "id": 62,
           "code": 921620,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 145,
@@ -386,7 +394,7 @@
           "name": "icon-line-horz",
           "id": 64,
           "code": 921621,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 146,
@@ -394,7 +402,7 @@
           "name": "icon-magnify",
           "id": 68,
           "code": 921622,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 71,
@@ -402,7 +410,7 @@
           "name": "icon-magnify-in",
           "id": 66,
           "code": 921623,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 72,
@@ -410,7 +418,7 @@
           "name": "icon-magnify-out",
           "id": 67,
           "code": 921624,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 74,
@@ -418,7 +426,7 @@
           "name": "icon-menu",
           "id": 69,
           "code": 921625,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 75,
@@ -426,7 +434,7 @@
           "name": "icon-move",
           "id": 70,
           "code": 921632,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 76,
@@ -434,7 +442,7 @@
           "name": "icon-new-window",
           "id": 71,
           "code": 921633,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 26,
@@ -442,7 +450,7 @@
           "name": "icon-paint-bucket",
           "id": 21,
           "code": 921634,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -450,7 +458,7 @@
           "name": "icon-pause",
           "id": 76,
           "code": 921635,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 82,
@@ -458,7 +466,7 @@
           "name": "icon-pencil",
           "id": 77,
           "code": 921636,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 84,
@@ -466,7 +474,7 @@
           "name": "icon-play",
           "id": 79,
           "code": 921637,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 85,
@@ -474,7 +482,7 @@
           "name": "icon-plot-resource",
           "id": 80,
           "code": 921638,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 27,
@@ -482,7 +490,7 @@
           "name": "icon-pointer-left",
           "id": 22,
           "code": 921639,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 28,
@@ -490,7 +498,7 @@
           "name": "icon-pointer-right",
           "id": 23,
           "code": 921640,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 32,
@@ -498,7 +506,7 @@
           "name": "icon-refresh",
           "id": 27,
           "code": 921641,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 16,
@@ -506,7 +514,7 @@
           "name": "icon-save",
           "id": 11,
           "code": 921648,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 88,
@@ -514,7 +522,7 @@
           "name": "icon-sine",
           "id": 83,
           "code": 921649,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 102,
@@ -522,7 +530,7 @@
           "name": "icon-T",
           "id": 84,
           "code": 921650,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -530,7 +538,7 @@
           "name": "icon-thumbs-strip",
           "id": 87,
           "code": 921651,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 96,
@@ -538,7 +546,7 @@
           "name": "icon-two-parts-both",
           "id": 91,
           "code": 921652,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 97,
@@ -546,7 +554,7 @@
           "name": "icon-two-parts-one-only",
           "id": 92,
           "code": 921653,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 21,
@@ -554,7 +562,7 @@
           "name": "icon-resync",
           "id": 16,
           "code": 921654,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 120,
@@ -562,7 +570,7 @@
           "name": "icon-reset",
           "prevSize": 24,
           "code": 921655,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 121,
@@ -570,7 +578,7 @@
           "name": "icon-x-in-circle",
           "prevSize": 24,
           "code": 921656,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 118,
@@ -578,7 +586,7 @@
           "name": "icon-brightness",
           "prevSize": 24,
           "code": 921657,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 119,
@@ -586,7 +594,7 @@
           "name": "icon-contrast",
           "prevSize": 24,
           "code": 921664,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 124,
@@ -594,7 +602,7 @@
           "name": "icon-expand",
           "prevSize": 24,
           "code": 921665,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 125,
@@ -602,7 +610,7 @@
           "name": "icon-list-view",
           "prevSize": 24,
           "code": 921666,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 133,
@@ -610,7 +618,7 @@
           "name": "icon-grid-snap-to",
           "prevSize": 24,
           "code": 921667,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 128,
@@ -618,7 +626,7 @@
           "name": "icon-grid-snap-no",
           "prevSize": 24,
           "code": 921668,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
@@ -626,7 +634,7 @@
           "name": "icon-frame-show",
           "prevSize": 24,
           "code": 921669,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
@@ -634,7 +642,7 @@
           "name": "icon-frame-hide",
           "prevSize": 24,
           "code": 921670,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 138,
@@ -642,7 +650,7 @@
           "name": "icon-import",
           "prevSize": 24,
           "code": 921671,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
@@ -650,7 +658,7 @@
           "name": "icon-export",
           "prevSize": 24,
           "code": 921672,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 37,
@@ -658,7 +666,7 @@
           "name": "icon-activity",
           "id": 32,
           "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 36,
@@ -666,7 +674,7 @@
           "name": "icon-activity-mode",
           "id": 31,
           "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -674,7 +682,7 @@
           "name": "icon-autoflow-tabular",
           "id": 47,
           "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -682,7 +690,7 @@
           "name": "icon-clock",
           "id": 50,
           "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -690,7 +698,7 @@
           "name": "icon-database",
           "id": 53,
           "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 57,
@@ -698,7 +706,7 @@
           "name": "icon-database-query",
           "id": 52,
           "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 17,
@@ -706,7 +714,7 @@
           "name": "icon-dataset",
           "id": 12,
           "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 22,
@@ -714,7 +722,7 @@
           "name": "icon-datatable",
           "id": 17,
           "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -722,7 +730,7 @@
           "name": "icon-dictionary",
           "id": 54,
           "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 62,
@@ -730,7 +738,7 @@
           "name": "icon-folder",
           "id": 57,
           "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 66,
@@ -738,7 +746,7 @@
           "name": "icon-image",
           "id": 61,
           "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -746,7 +754,7 @@
           "name": "icon-layout",
           "id": 63,
           "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 77,
@@ -754,7 +762,7 @@
           "name": "icon-object",
           "id": 72,
           "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 78,
@@ -762,7 +770,7 @@
           "name": "icon-object-unknown",
           "id": 73,
           "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -770,7 +778,7 @@
           "name": "icon-packet",
           "id": 74,
           "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -778,7 +786,7 @@
           "name": "icon-page",
           "id": 75,
           "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 135,
@@ -786,7 +794,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -794,7 +802,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -802,7 +810,7 @@
           "name": "icon-session",
           "id": 5,
           "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -810,7 +818,7 @@
           "name": "icon-tabular",
           "id": 19,
           "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -818,7 +826,7 @@
           "name": "icon-tabular-lad",
           "id": 2,
           "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -826,7 +834,7 @@
           "name": "icon-tabular-lad-set",
           "id": 1,
           "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 8,
@@ -834,7 +842,7 @@
           "name": "icon-tabular-realtime",
           "id": 3,
           "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 23,
@@ -842,7 +850,7 @@
           "name": "icon-tabular-scrolling",
           "id": 18,
           "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 112,
@@ -850,7 +858,7 @@
           "name": "icon-telemetry",
           "id": 86,
           "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -858,7 +866,7 @@
           "name": "icon-telemetry-panel",
           "id": 85,
           "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 93,
@@ -866,7 +874,7 @@
           "name": "icon-timeline",
           "id": 88,
           "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 116,
@@ -874,7 +882,7 @@
           "name": "icon-timer-v1.5",
           "prevSize": 24,
           "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -882,7 +890,7 @@
           "name": "icon-topic",
           "id": 6,
           "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -890,7 +898,7 @@
           "name": "icon-box-with-dashed-lines",
           "id": 29,
           "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -898,7 +906,7 @@
           "name": "icon-summary-widget",
           "prevSize": 24,
           "code": 921904,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 139,
@@ -906,7 +914,7 @@
           "name": "icon-notebook",
           "prevSize": 24,
           "code": 921905,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "metadata": {
@@ -1639,6 +1647,26 @@
             ]
           }
         },
+        {
+          "id": 118,
+          "paths": [
+            "M962 512l-896 512v-1024z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-arrow-right-equilateral"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {}
+            ]
+          }
+        },
         {
           "paths": [
             "M0 512l256 256v-512z",
@@ -2034,9 +2062,9 @@
         },
         {
           "paths": [
-            "M0 0h1024v256h-1024v-256z",
-            "M0 384h1024v256h-1024v-256z",
-            "M0 768h1024v256h-1024v-256z"
+            "M0 128h1024v128h-1024v-128z",
+            "M0 448h1024v128h-1024v-128z",
+            "M0 768h1024v128h-1024v-128z"
           ],
           "grid": 16,
           "tags": [
@@ -2044,9 +2072,19 @@
           ],
           "defaultCode": 109,
           "id": 69,
-          "attrs": [],
+          "attrs": [
+            {},
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "colorPermutations": {
-            "1161751207457516161751": []
+            "1161751207457516161751": [
+              {},
+              {},
+              {}
+            ]
           }
         },
         {

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

@@ -39,6 +39,7 @@
 <glyph unicode="&#xe929;" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
 <glyph unicode="&#xe930;" glyph-name="icon-crosshair" d="M574 962h-128v-320h128v320zM1022 514h-320v-128h320v128zM574 258h-128v-320h128v320zM318 514h-320v-128h320v128z" />
 <glyph unicode="&#xe931;" glyph-name="icon-grippy-v2" horiz-adv-x="586" d="M146.4 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 886.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 667.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 448c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 228.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
+<glyph unicode="&#xe932;" glyph-name="icon-arrow-right-equilateral" d="M962 448l-896-512v1024z" />
 <glyph unicode="&#xe1000;" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
 <glyph unicode="&#xe1001;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe1002;" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
@@ -57,7 +58,7 @@
 <glyph unicode="&#xe1016;" glyph-name="icon-magnify" d="M1024 64l-256.8 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128zM212.4 340.4c-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0 112.4-294.8 0-407.2c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4z" />
 <glyph unicode="&#xe1017;" glyph-name="icon-magnify-in" d="M1024 64l-256.86 256.86c40.681 62.963 64.861 139.898 64.861 222.481 0 0.232 0 0.464-0.001 0.696v-0.036c0 229.76-186.24 416-416 416s-416-186.24-416-416 186.24-416 416-416c0.196 0 0.427-0.001 0.659-0.001 82.583 0 159.518 24.18 224.112 65.846l-1.631-0.985 256.86-256.86zM212.36 340.36c-52.114 52.117-84.346 124.114-84.346 203.64 0 159.058 128.942 288 288 288s288-128.942 288-288c0-159.058-128.942-288-288-288-0.005 0-0.010 0-0.014 0h0.001c-0.242-0.001-0.529-0.001-0.815-0.001-79.271 0-151.010 32.251-202.811 84.348l-0.013 0.014zM224 608h384v-128h-384v128zM352 736h128v-384h-128v384z" />
 <glyph unicode="&#xe1018;" glyph-name="icon-magnify-out" d="M767.2 320.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128-256.8 256.8zM619.6 340.4c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0c112.4-112.4 112.4-294.8 0-407.2zM224 608h384v-128h-384v128z" />
-<glyph unicode="&#xe1019;" glyph-name="icon-menu" d="M0 960h1024v-256h-1024v256zM0 576h1024v-256h-1024v256zM0 192h1024v-256h-1024v256z" />
+<glyph unicode="&#xe1019;" glyph-name="icon-menu" d="M0 832h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 192h1024v-128h-1024v128z" />
 <glyph unicode="&#xe1020;" glyph-name="icon-move" d="M293.4 448l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 512h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
 <glyph unicode="&#xe1021;" glyph-name="icon-new-window" d="M448 960v-128h320l-384-384 128-128 384 384v-320h128v576zM576 285.726v-157.382c-0.1-0.118-0.226-0.244-0.344-0.344h-383.312c-0.118 0.1-0.244 0.226-0.344 0.344v383.312c0.1 0.118 0.226 0.244 0.344 0.344h157.382l192 192h-349.726c-105.6 0-192-86.4-192-192v-384c0-105.6 86.4-192 192-192h384c105.6 0 192 86.4 192 192v349.726l-192-192z" />
 <glyph unicode="&#xe1022;" 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" />

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

@@ -157,3 +157,57 @@
 .t-popup {
     z-index: 75;
 }
+
+/********************************************* GRID STYLES */
+.grid-two-column {
+    display: grid;
+    grid-row-gap: 0;
+    grid-template-columns: 1fr 2fr;
+    align-items: top;
+}
+
+.grid-two-column-span-cols {
+    grid-column: 1 / 3;
+}
+
+.grid-elem {
+    &:not(:first-child) {
+        border-top: 1px solid $colorInteriorBorder;
+    }
+    &.label {
+        background-color: rgba(0,0,128,0.2);
+    }
+    &.value {
+        background-color: rgba(0,128,0,0.2);
+    }
+}
+
+// Properties grids
+.grid-properties {
+    @extend .grid-two-column;
+}
+
+.grid-row {
+    display: contents;
+}
+
+.grid-span-all {
+    @extend .grid-two-column-span-cols;
+}
+
+.grid-row {
+    .grid-cell {
+        padding: 3px $interiorMarginLg 3px 0;
+        &[title] {
+            // When a cell has a title, assume it's helpful text
+            cursor: help;
+        }
+    }
+    &.force-border,
+    &:not(:first-of-type) {
+        // Row borders, effected via border-top on child elements of the row
+        .grid-cell {
+            border-top: 1px solid $colorInspectorSectionHeaderBg;
+        }
+    }
+}

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

@@ -37,25 +37,9 @@
     vertical-align: middle;
 }
 
-//.top-bar .btn-browse .badge {
-// Moved to _controls.scss .btn.browse-btn
-//    border-radius: $controlCr * 1.5;
-//    $d: 20px;
-//    display: block;
-//    font-size: 1em;
-//    line-height: $d;
-////    margin-top: -4px;
-//
-//    position: absolute;
-//    top: 5px; left: 5px; bottom: 5px; right: auto;
-//    width: $d; height: auto;
-//}
-
 .super-menu .badge {
     @include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
     border-radius: $controlCr;
     @include boxShdwSubtle();
-//    display: inline-block;
-//    margin-right: 10px !important;
     padding: 2px 7px;
 }

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

@@ -43,10 +43,10 @@ $ueColMargin: 1.5%;
 $ueAppLogoW: 80px;
 $ueEditToolBarH: 25px;
 $ueCollapsedPaneEdgeM: 22px;
-$uePaneMiniTabH: 22px;
-$uePaneMiniTabW: 8px;
-$uePaneMiniTabFontSize: 8px;
-$uePaneMiniTabCollapsedW: 18px;
+$uePaneMiniTabH: 36px;
+$uePaneMiniTabW: 10px;
+$uePaneMiniTabFontSize: 9px;
+$uePaneMiniTabCollapsedW: 22px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 /*************** Panes */
@@ -70,7 +70,7 @@ $ueBrowseGridItemTopBarH: 20px;
 $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;
 /*************** Tree */
-$treeVCW: 10px;
+$treeVCW: 16px;
 $treeTypeIconH: 1.4em; // was 16px
 $treeTypeIconHPx: 16px;
 $treeTypeIconW: 18px;
@@ -111,7 +111,7 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
-$inputTextPTopBtm: 3px;
+$inputTextPTopBtm: 2px;
 $inputTextPLeftRight: 5px;
 $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 /*************** Wait Spinner Defaults */
@@ -132,7 +132,7 @@ $menuLineHPx: 24px;
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
 $controlBarH: $btnStdH;
-$btnFrameH: 16px;
+$btnFrameH: 18px;
 
 /************************** PATHS */
 // Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory

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

@@ -141,7 +141,6 @@ a.disabled {
 
 .s-status-missing {
     // Labels. Expects .s-status-missing to be applied to mct-representation that contains
-    // .t-object-label
     .t-object-label .t-item-icon:before {
         content: $glyph-icon-object-unknown;
     }
@@ -200,7 +199,16 @@ a.disabled {
 }
 
 .vscroll {
+    overflow-x: hidden;
     overflow-y: auto;
+    &.scroll-pad {
+        padding-right: $interiorMargin;
+    }
+}
+
+.vscroll--persist {
+    overflow-x: hidden;
+    overflow-y: scroll;
 }
 
 .slidable {
@@ -224,6 +232,10 @@ a.disabled {
     box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
 }
 
+.capitalize {
+    text-transform: capitalize;
+}
+
 .hide,
 .hidden,
 .t-main-view .hide-in-t-main-view {
@@ -235,14 +247,16 @@ a.disabled {
     pointer-events: none;
 }
 
-.off {
+.invisible {
+    display: block;
     visibility: hidden;
-    opacity: 0;
     height: 0;
-    margin: 0;
     padding: 0;
     border: 0;
     margin: 0 !important;
+    transform: scale(0);
+    pointer-events: none;
+    position: absolute;
 }
 
 .sep {

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

@@ -75,6 +75,7 @@ $glyph-icon-x: '\e928';
 $glyph-icon-brackets: '\e929';
 $glyph-icon-crosshair: '\e930';
 $glyph-icon-grippy: '\e931';
+$glyph-icon-arrow-right-equilateral: '\e932';
 $glyph-icon-arrows-out: '\e1000';
 $glyph-icon-arrows-right-left: '\e1001';
 $glyph-icon-arrows-up-down: '\e1002';
@@ -190,6 +191,7 @@ $glyph-icon-notebook: '\e1131';
 .icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
 .icon-crosshair {  @include glyphBefore($glyph-icon-crosshair); }
 .icon-grippy {  @include glyphBefore($glyph-icon-grippy); }
+.icon-arrow-right-equilateral {  @include glyphBefore($glyph-icon-arrow-right-equilateral); }
 .icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }

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

@@ -19,23 +19,15 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* Styles for the Inspector pane */
-
-.l-inspect,
-.l-inspect table tr td {
-    font-size: 0.75rem;
-}
 
+/* New grid layout for the Inspector pane */
 .l-inspect {
+    // Overall layout
     @extend .abs;
     background: $colorInspectorBg;
     color: $colorInspectorFg;
     line-height: 140%;
 
-    .flex-elem.holder:not(:last-child) {
-        margin-bottom: $interiorMargin;
-    }
-
     .pane-header {
         color: pushBack($colorInspectorFg, 20%);
         font-size: 0.8rem;
@@ -50,80 +42,48 @@
             }
         }
     }
+
     .l-inspector-part {
-        box-sizing: border-box;
-        padding-right: $interiorMargin;
-        .tree .form {
+        display: contents;
+    }
+
+    .tree {
+        .grid-properties {
             margin-left: $treeVCW + $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;
-            .l-section-body {
-                margin-bottom: 0;
-                &:not(.first) {
-                    border-top: 1px solid $colorFormLines;
-                }
-            }
-            .form-row {
-                align-items: center;
-                border: none !important;
-                margin-bottom: 0 !important;
-                padding: $interiorMarginSm 0;
-                .label {
-                    min-width: 80px;
-                }
-                input[type='text'],
-                input[type='search'] {
-                    width: 100%;
-                }
-            }
-        }
     }
 
-    ul li,
-    em.t-inspector-part-header {
-        display: block;
-        position: relative;
-    }
-
-    ul li {
-        margin-bottom: $interiorMarginLg;
-    }
-
-    em.t-inspector-part-header {
-        border-radius: $basicCr;
-        background-color: $colorInspectorSectionHeaderBg;
-        color: $colorInspectorSectionHeaderFg;
-        margin-bottom: $interiorMargin;
-        padding: floor($formTBPad * .75) $formLRPad;
-        text-transform: uppercase;
-    }
-
-    .inspector-properties {
-        &:not(.first) {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
-        padding: $interiorMarginSm 0;
+    .grid-properties {
         .label {
             color: $colorInspectorPropName;
-            text-transform: uppercase;
         }
         .value {
             color: $colorInspectorPropVal;
             word-break: break-all;
+            &:first-child {
+                // If there is no preceding .label element, make value span columns
+                @extend .grid-two-column-span-cols;
+            }
+        }
+    }
+
+    .inspector-location {
+        display: inline-block;
+    }
+
+    h2 {
+        // Headers for .l-inspector-part elements
+        @extend .grid-two-column-span-cols;
+        border-radius: $controlCr;
+        background-color: $colorInspectorSectionHeaderBg;
+        color: $colorInspectorSectionHeaderFg;
+        font-size: 0.8rem;
+        font-weight: normal;
+        margin: $interiorMarginLg 0 $interiorMarginSm 0;
+        padding: floor($formTBPad * .75) $formLRPad;
+        text-transform: uppercase;
+        &.first {
+            margin-top: 0;
         }
     }
 
@@ -162,6 +122,34 @@
             width: 4px;
         }
     }
+
+    // Elements pool
+    .holder-elements {
+        .current-elements {
+            position: relative;
+            .tree-item {
+                .t-object-label {
+                    // Elements pool is a flat list, so don't indent items.
+                    font-size: 0.75rem;
+                    left: 0;
+                }
+            }
+        }
+    }
+}
+
+/* Styles for the Inspector pane */
+
+.l-inspect,
+.l-inspect table tr td {
+    font-size: 0.75rem;
+}
+
+.l-inspect {
+    .flex-elem.holder:not(:last-child) {
+        margin-bottom: $interiorMargin;
+    }
+
     .holder-elements {
         .current-elements {
             position: relative;

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

@@ -42,6 +42,7 @@
 @import "controls/lists";
 @import "controls/menus";
 @import "controls/messages";
+@import "controls/indicators";
 @import "mobile/controls/menus";
 
 /********************************* FORMS */

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

@@ -334,7 +334,7 @@
     color: $fg;
 }
 
-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
     @include s-input($bg, $fg, $shdw);
     border: none;
     outline: none;

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

@@ -20,66 +20,120 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /*************************************************** MIXINS */
-@mixin formulateStatusColors($c) {
+@mixin elementStatusColors($c) {
     // Sets bg and icon colors for elements
-    background: rgba($c, 0.4) !important;
-    &:before { color: $c !important; }
-}
-
-
-
-/*************************************************** GENERAL */
-.s-limit-yellow,
-.s-limit-red,
-.s-limit-yellow-icon,
-.s-limit-red-icon,
-.s-status-warning-lo,
-.s-status-warning-hi,
-.s-status-diagnostic,
-.s-status-command,
-.s-status-info,
-.s-status-ok,
-.s-status-warning-lo-icon,
-.s-status-warning-hi-icon,
-.s-status-diagnostic-icon,
-.s-status-command-icon,
-.s-status-info-icon,
-.s-status-ok-icon {
-    @include trans-prop-nice($props: background, $dur: 500ms);
+    background: rgba($c, 0.5) !important;
     &:before {
-        content:'';
-        font-family: symbolsfont;
-        font-size: 0.8em;
-        margin-right: $interiorMarginSm;
+        color: $c !important;
     }
 }
 
+@mixin indicatorStatusColors($c) {
+    &:before, .count {
+        color: $c;
+    }
+}
+
+/*************************************************** GENERAL */
+.s-limit-upr,
+.s-limit-lwr,
+[class*='s-limit-icon'],
+[class*='s-status-icon'] {
+    &:before {
+        content:'';
+        display: inline-block;
+        font-family: symbolsfont;
+        font-size: 0.8em;
+    }
+}
 
 /*************************************************** LIMITS */
-.s-limit-yellow, .s-limit-yellow-icon {
-    @include formulateStatusColors($colorWarningLo);
+[class*='s-limit'] {
+    &[class*='icon-'] {
+        &:before {
+            margin-right: $interiorMargin;
+        }
+    }
 }
 
-.s-limit-red, .s-limit-red-icon {
-    @include formulateStatusColors($colorWarningHi);
+.s-limit-yellow, .s-limit-icon-yellow {
+    @include elementStatusColors($colorWarningLo);
 }
 
-.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
-.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
-.s-limit-yellow-icon:before,
-.s-limit-red-icon:before { content: $glyph-icon-alert-triangle; }
+.s-limit-red, .s-limit-icon-red {
+    @include elementStatusColors($colorWarningHi);
+}
+
+.s-limit {
+    &-upr,
+    &-lwr {
+        &:before {
+            margin-right: $interiorMargin;
+        }
+    }
+
+    &-upr:before { content: $glyph-icon-arrow-double-up; }
+    &-lwr:before { content: $glyph-icon-arrow-double-down; }
+
+    &-icon-yellow,
+    &-icon-red {
+        &:before {
+            content: $glyph-icon-alert-triangle;
+        }
+    }
+}
 
 /*************************************************** STATUS */
-.s-status-warning-hi, .s-status-warning-hi-icon {  @include formulateStatusColors($colorWarningHi); }
-.s-status-warning-lo, .s-status-warning-lo-icon {  @include formulateStatusColors($colorWarningLo); }
-.s-status-diagnostic, .s-status-diagnostic-icon {  @include formulateStatusColors($colorDiagnostic); }
-.s-status-info, .s-status-info-icon {  @include formulateStatusColors($colorInfo); }
-.s-status-ok, .s-status-ok-icon {  @include formulateStatusColors($colorOk); }
+[class*='s-status'] {
+    &[class*='icon-'] {
+        &:before {
+            margin-right: $interiorMargin;
+        }
+    }
+}
 
-.s-status-warning-hi-icon:before { content: $glyph-icon-alert-triangle; }
-.s-status-warning-lo-icon:before { content: $glyph-icon-alert-rect; }
-.s-status-diagnostic-icon:before { content: $glyph-icon-eye-open; }
-.s-status-info-icon:before { content: $glyph-icon-info; }
-.s-status-ok-icon:before { content: $glyph-icon-check; }
+.s-status-warning-hi, .s-status-icon-warning-hi {  @include elementStatusColors($colorWarningHi); }
+.s-status-warning-lo, .s-status-icon-warning-lo {  @include elementStatusColors($colorWarningLo); }
+.s-status-diagnostic, .s-status-icon-diagnostic {  @include elementStatusColors($colorDiagnostic); }
+.s-status-info, .s-status-icon-info {  @include elementStatusColors($colorInfo); }
+.s-status-ok, .s-status-icon-ok {  @include elementStatusColors($colorOk); }
 
+.s-status-icon-warning-hi:before { content: $glyph-icon-alert-triangle; }
+.s-status-icon-warning-lo:before { content: $glyph-icon-alert-rect; }
+.s-status-icon-diagnostic:before { content: $glyph-icon-eye-open; }
+.s-status-icon-info:before { content: $glyph-icon-info; }
+.s-status-icon-ok:before { content: $glyph-icon-check; }
 
+/*************************************************** INDICATOR COLORING */
+.ls-indicator {
+    &.s-status-info {
+        @include indicatorStatusColors($colorInfo);
+    }
+
+    &.s-status-disabled {
+        @include indicatorStatusColors($colorIndicatorDisabled);
+    }
+
+    &.s-status-available {
+        @include indicatorStatusColors($colorIndicatorAvailable);
+    }
+
+    &.s-status-on,
+    &.s-status-enabled {
+        @include indicatorStatusColors($colorIndicatorOn);
+    }
+
+    &.s-status-off {
+        @include indicatorStatusColors($colorIndicatorOff);
+    }
+
+    &.s-status-caution,
+    &.s-status-warning,
+    &.s-status-alert {
+        @include indicatorStatusColors($colorStatusAlert);
+    }
+
+    &.s-status-error {
+        @include indicatorStatusColors($colorStatusError);
+    }
+}

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

@@ -113,10 +113,11 @@ body.desktop .mini-tab-icon {
 .l-btn-set {
     // Buttons that have a very tight conceptual grouping - no internal space between them.
     font-size: 0; // Remove space between s-button elements due to white space in markup
+    white-space: nowrap;
 
     .s-button {
         border-radius: 0;
-        margin-left: 1px;
+        margin-left: 1px !important;
     }
 
     > .s-button {

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

@@ -128,40 +128,72 @@
     }
 }
 
-.l-local-controls {
-    // Control shown when hovering over an object, like plots and imagery
-    // Default position is upper right
-    $p: $interiorMargin;
-    position: absolute;
-    top: $p; right: $p; bottom: auto;
-    text-align: right;
-    z-index: 5;
+
+
+/******************************************************** LOCAL CONTROLS */
+// Controls placed in proximity to or overlaid on components and views
+
+.local-controls-hidden {
+    // Used within .has-local-controls, hidden by default
+
 }
 
-.s-local-controls {
-    font-size: 0.7rem;
-    &.s-wrapper-transluc {
-        // Semi-opaque wrapper to visually distinguish a control
-        // from the background
-        background: rgba($colorTransLucBg, 0.7);
-        box-sizing: border-box;
-        border-radius: $controlCr;
+body.desktop .has-local-controls {
+    // Helper class, provides hover ability to show local controls
+
+    &:hover .local-controls-hidden {
+        @include trans-prop-nice($props: opacity, $dur: 50ms);
+        opacity: 1;
+        pointer-events: inherit;
     }
-}
 
-.has-local-controls {
-    .local-control {
-        @include trans-prop-nice($props: opacity, $dur: 250ms);
+    .local-controls-hidden {
+        @include trans-prop-nice($props: opacity, $dur: 500ms);
         opacity: 0;
+        pointer-events: none;
     }
-    &:hover {
-        .local-control {
-            @include trans-prop-nice($props: opacity, $dur: 10ms);
-            opacity: 1;
+}
+
+.h-local-controls {
+    // An explicit outer holder for controls. Typically placed in upper right.
+    align-items: center;
+    font-size: 0.7rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+
+    &.h-local-controls-overlay-content {
+        $p: $interiorMargin;
+        position: absolute;
+        top: $p; right: $p;
+        z-index: 2;
+    }
+
+    .l-btn-set,
+    .s-button {
+        &:not(:first-child) {
+            margin-left: $interiorMargin;
         }
     }
 }
 
+.h-local-controls-overlay-content {
+    background: $colorBodyBg;
+    border-radius: $controlCr + 1;
+    box-sizing: border-box;
+    border-radius: $controlCr;
+    padding: 1px;
+    .s-button {
+        background: $colorBtnBg;
+    }
+}
+
+.h-local-controls-trans {
+    background: rgba($colorTransLucBg, 0.5);
+    padding: $interiorMargin;
+}
+
 /******************************************************** VIEW CONTROLS */
 // Expand/collapse > and v arrows, used in tree and plot legend
 // Moved this over from a tree-only context 5/18/17
@@ -171,10 +203,11 @@
     cursor: pointer;
     height: 1em; width: 1em;
     line-height: inherit;
+    position: relative;
     &:before {
         position: absolute;
         @include trans-prop-nice(transform, 100ms);
-        content: $glyph-icon-arrow-right;
+        content: $glyph-icon-arrow-right-equilateral;
         @include transform-origin(center);
     }
     &.expanded:before {
@@ -773,13 +806,17 @@ textarea {
     @extend .icon-arrow-right;
     cursor: pointer;
     font-size: 0.75em;
+    width: $treeVCW;
     &:before {
+        // Arrow glyph
+        left: 50%;
         position: absolute;
         @include trans-prop-nice(transform, 100ms);
+        transform: translateX(-50%);
         transform-origin: center;
     }
     &.expanded:before {
-        transform: rotate(90deg);
+        transform: translateX(-50%) rotate(90deg);
     }
 }
 

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

@@ -0,0 +1,147 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */
+
+.h-indicator,
+mct-indicators mct-include {
+    display: inline; // Fallback for display: contents
+    display: contents;
+}
+
+.ls-indicator {
+    $bg: rgba(white, 0.2) !important;
+    $hbg: $colorStatusBarBg;
+    $hshdw: rgba(white, 0.4) 0 0 3px;
+    $br: $controlCr;
+    $hoverYOffset: -35px;
+    background: transparent !important;
+    border-radius: $br;
+    display: inline-block;
+    position: relative;
+    padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
+
+    &:before {
+        display: inline-block;
+    }
+
+    .label {
+        display: inline-block;
+        a,
+        button,
+        .s-button {
+            // Make <a> in label look like buttons
+            @include trans-prop-nice($props: all, $dur: 100ms);
+            background: transparent;
+            border: 1px solid rgba($colorStatusBarFg, 0.5);
+            border-radius: $br;
+            box-sizing: border-box;
+            color: inherit;
+            font-size: inherit;
+            height: auto;
+            line-height: normal;
+            padding: 0 2px;
+            &:hover {
+                background: $bg;
+                color: #fff;
+            }
+        }
+
+        [class*='icon-'] {
+            // If any elements within label include the class 'icon-*' then deal with their :before's
+            &:before {
+                font-size: 0.8em;
+                margin-right: $interiorMarginSm;
+            }
+        }
+
+        button { text-transform: uppercase !important; }
+    }
+
+    &.no-collapse {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        > *,
+        &:before {
+            flex: 1 1 auto;
+        }
+
+        &:before {
+            margin-right: $interiorMarginSm;
+        }
+    }
+
+    &:not(.no-collapse) {
+        z-index: 0;
+
+        &:before {
+            margin-right: 0 !important;
+        }
+
+        .label {
+            transition: all 250ms ease-in 100ms;
+            background: $hbg;
+            border-radius: $br;
+            font-size: .6rem;
+            left: 0;
+            bottom: 140%;
+            opacity: 0;
+            padding: $interiorMarginSm $interiorMargin;
+            position: absolute;
+            transform-origin: 10px 100%;
+            transform: scale(0.0);
+            white-space: nowrap;
+            &:before {
+                // Infobubble-style arrow element
+                content: '';
+                display: block;
+                position: absolute;
+                top: 100%;
+                @include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
+            }
+        }
+
+        &:hover {
+            background: $bg;
+            z-index: 1;
+            .label {
+                opacity: 1;
+                transform: scale(1.0);
+                transition: all 100ms ease-out 0s;
+            }
+        }
+    }
+
+    &.float-right {
+        float: right;
+    }
+}
+
+/* Mobile */
+// Hide the clock indicator when we're phone portrait
+body.phone.portrait {
+    .ls-indicator.t-indicator-clock {
+        display: none;
+    }
+}

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

@@ -19,9 +19,9 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******************************************************************* STATUS BLOCK ELEMS */
+
 @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
-	$bgPb: 30%;
+	$bgPb: 10%;
 	$bgPbD: 10%;
 	background-color: darken($bg, $bgPb);
 	color: $fg;
@@ -36,110 +36,6 @@
 	}
 }
 
-// Status coloring
-.ok, .info {
-    .status-indicator {
-        color: $colorInfo;
-    }
-}
-
-.alert, .caution, .warning {
-    .status-indicator, .count {
-        color: $colorStatusAlert;
-    }
-
-}
-
-.error, .err {
-    .status-indicator, .count {
-        color: $colorStatusError;
-    }
-}
-
-.available {
-    .status-indicator, .count {
-        color: $colorStatusAvailable;
-    }
-}
-
-.subdued {
-    .status-indicator {
-        color: pullForward($colorStatusBarBg, 40%);
-    }
-}
-
-.status-block-holder {
-    // Applied to mct-include element
-    // Contains status.block elements
-    $transDelay: 1.5s;
-    $transSpeed: .25s;
-    display: inline-block;
-    &.clickable { cursor: pointer; }
-    &:not(.clickable) { cursor: default; }
-    &.no-icon .status.block {
-        .status-indicator {
-            display: none;
-        }
-    }
-    &.float-right {
-        float: right;
-    }
-    &:not(.no-collapse) .status.block {
-        .label {
-            // Max-width silliness is necessary for width transition
-            @include trans-prop-nice(max-width, $transSpeed, $transDelay);
-            overflow: hidden;
-            max-width: 0px;
-        }
-        &:hover {
-            .label {
-                @include trans-prop-nice(max-width, $transSpeed, 0s);
-                max-width: 600px;
-                width: auto;
-            }
-            .count {
-                @include trans-prop-nice(max-width, $transSpeed, 0s);
-                opacity: 0;
-            }
-        }
-    }
-
-}
-
-.status.block {
-    $transDelay: 1.5s;
-    $transSpeed: .25s;
-	color: $colorStatusDefault;
-	display: inline-block;
-	margin-right: $interiorMargin;
-	.status-indicator,
-	.label,
-	.count {
-		display: inline-block;
-		vertical-align: top;
-	}
-
-	.status-indicator {
-        background: none !important;
-		margin-right: $interiorMarginSm;
-        &[class*='s-status']:before {
-            font-size: 1em;
-        }
-	}
-
-	.count {
-		@include trans-prop-nice(opacity, $transSpeed, $transDelay);
-		font-weight: bold;
-		opacity: 1;
-	}
-    .s-button {
-        background: $colorStatusBtnBg;
-        padding: 0 $interiorMargin;
-        height: auto;
-        line-height: inherit;
-    }
-}
-
 /******************************************************************* MESSAGE BANNERS */
 .message {
 	&.block {
@@ -289,7 +185,6 @@
 
     > div,
     > span {
-        //@include test(red);
         margin-bottom: $interiorMargin;
     }
 

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

@@ -138,54 +138,51 @@
 }
 
 /*************************************** LOCAL CONTROLS */
-.l-local-controls {
-    max-width: 200px;
-    min-width: 100px;
-    width: 35%;
-    input[type="range"] {
-        display: block;
-        width: 100%;
-        &:not(:first-child) {
-            margin-top: $interiorMarginLg;
-        }
-
-        &:before {
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    .t-reset-btn-holder {
-        $bc: $scrollbarTrackColorBg;
-        &:before,
-        &:after {
-            border-right: 1px solid $bc;
-            content:'';
-            display: block;
-            width: 5px;
-            height: 4px;
-        }
-
-        &:before {
-            border-top: 1px solid $bc;
-            margin-bottom: 2px;
-        }
-
-        &:after {
-            border-bottom: 1px solid $bc;
-            margin-top: 2px;
-        }
-    }
-
-    &.s-wrapper-transluc {
-        left: auto;
-        padding: $interiorMargin $interiorMarginLg;
-    }
-
-    &.l-flex-row {
+.t-imagery {
+	.h-local-controls.h-local-controls-overlay-content {
+		max-width: 200px;
+		min-width: 100px;
+		width: 35%;
         align-items: center;
-    }
+        padding: $interiorMargin $interiorMarginLg;
+
+		input[type="range"] {
+			display: block;
+			width: 100%;
+			&:not(:first-child) {
+				margin-top: $interiorMarginLg;
+			}
+
+			&:before {
+				margin-right: $interiorMarginSm;
+			}
+		}
+
+		.t-reset-btn-holder {
+			$bc: $scrollbarTrackColorBg;
+			&:before,
+			&:after {
+				border-right: 1px solid $bc;
+				content:'';
+				display: block;
+				width: 5px;
+				height: 4px;
+			}
+
+			&:before {
+				border-top: 1px solid $bc;
+				margin-bottom: 2px;
+			}
+
+			&:after {
+				border-bottom: 1px solid $bc;
+				margin-top: 2px;
+			}
+		}
+	}
 }
 
+
 /*************************************** WHEN IN FRAME */
 .frame .t-imagery {
 	.l-image-main-wrapper {

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

@@ -41,6 +41,7 @@
     width: 100%;
 
     .l-form-section {
+        margin-bottom: $interiorMarginLg * 2;
         position: relative;
         &.grows {
             .l-section-body,
@@ -57,7 +58,6 @@
 		$m: $interiorMargin;
 		box-sizing: border-box;
 		border-top: 1px solid $colorFormLines;
-        margin-bottom: $interiorMarginLg * 2;
 		padding: $formTBPad 0;
 		position: relative;
 
@@ -132,6 +132,7 @@
         width: auto;
         order: 2;
     }
+    >.control,
     >.controls {
         flex: 0 0 auto;
         margin-right: $interiorMargin;
@@ -258,19 +259,19 @@
             }
         }
     }
+}
 
-    .form-error {
-        // Block element that visually flags an error and contains a message
-        background-color: $colorFormFieldErrorBg;
-        color: $colorFormFieldErrorFg;
-        border-radius: $basicCr;
-        display: block;
-        padding: 1px 6px;
-        &:before {
-            content: $glyph-icon-alert-triangle;
-            display: inline;
-            font-family: symbolsfont;
-            margin-right: $interiorMarginSm;
-        }
+.form-error {
+    // Block element that visually flags an error and contains a message
+    background-color: $colorFormFieldErrorBg;
+    color: $colorFormFieldErrorFg;
+    border-radius: $basicCr;
+    display: block;
+    padding: 1px 6px;
+    &:before {
+        content: $glyph-icon-alert-triangle;
+        display: inline-block;
+        font-family: symbolsfont;
+        margin-right: $interiorMarginSm;
     }
 }

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -26,6 +26,20 @@
 
 .tabular-holder {
     @include absPosDefault();
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    > * {
+        position: relative;
+        flex: 0 0 auto;
+    }
+
+    &.l-sticky-headers {
+        .l-tabular-body {
+            flex: 1 1 99%;
+			overflow-x: auto;
+        }
+    }
 }
 
 .tabular,
@@ -41,19 +55,20 @@ table {
 	tbody tr, .tbody .tr {
 		width: 100%;
 	}
-	thead, .thead {
-		border-bottom: 1px solid $colorTabHeaderBorder;
-	}
 
-	&:not(.fixed-header) tr th {
-		background-color: $colorTabHeaderBg;
-	}
+    thead tr th {
+        // Add some bg to the headers. Note that this is overwritten below
+        // by .mct-table-headers-w when headers are wrapped by that container.
+        background-color: $colorTabHeaderBg;
+    }
 
 	tbody, .tbody {
 		display: table-row-group;
+        tr, .tr {
+            border-top: 1px solid $colorTabBorder;
+        }
 	}
 	tr, .tr {
-        border-top: 1px solid $colorTabBorder;
 		display: table-row;
 		&:first-child .td {
 			border-top: none;
@@ -118,42 +133,40 @@ table {
 		tbody, .tbody {
 			top: $tabularHeaderH * 2;
 		}
-		input[type="text"],
-		input[type="search"] {
-			box-sizing: border-box;
-			width: 100%;
-		}
+        .l-filter {
+            input[type="text"],
+            input[type="search"] {
+                $p: 20px;
+                transition: padding 200ms ease-in-out;
+                box-sizing: border-box;
+                padding-right: $p; // Fend off from icon
+                padding-left: $p; // Fend off from icon
+                width: 100%;
+            }
+            &.active {
+                // When user has typed something, hide the icon and collapse left padding
+                &:before {
+                    opacity: 0;
+                }
+                input[type="text"],
+                input[type="search"] {
+                    padding-left: $interiorMargin;
+                }
+            }
+        }
 	}
 
-	&.fixed-header {
-		height: 100%;
-		thead, .thead,
-		tbody tr, .tbody .tr {
-			display: table;
-			table-layout: fixed;
-		}
-		thead, .thead {
-			width: calc(100% - 10px);
-			&:before {
-				content: "";
-				display: block;
-				z-index: 0;
-				position: absolute;
-				width: 100%;
-				height: $tabularHeaderH;
-				background-color: $colorTabHeaderBg;
-			}
-		}
-		tbody, .tbody {
-			@include absPosDefault(0);
-			top: $tabularHeaderH;
-			display: block;
-			overflow-y: scroll;
-		}
-	}
 	&.t-event-messages {
 		td, .td {
 			min-width: 150px;
 		}
 	}
 }
+
+.mct-table-headers-w {
+    background: $colorTabHeaderBg;
+    overflow: hidden;
+    thead tr th {
+        background: none;
+    }
+}

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

@@ -91,7 +91,7 @@ body.mobile {
 
     .object-browse-bar {
         &.t-primary {
-            margin-left: 45px;
+            margin-left: 30px;
 
             .title-label {
                 // Prevent inline editing of the object title in the main view in mobile

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

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

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

@@ -246,21 +246,6 @@
 	}
 }
 
-.gl-plot-display-area,
-.plot-display-area,
-.gl-plot-axis-area {
-    .gl-plot-local-controls,
-    .l-local-controls {
-        @include trans-prop-nice(opacity, 150ms);
-        opacity: 0;
-        pointer-events: none;
-    }
-    &:hover .gl-plot-local-controls,
-    &:hover .l-local-controls {
-        opacity: 1;
-        pointer-events: inherit;
-    }
-}
 
 .gl-plot-display-area,
 .plot-display-area {

platform/commonUI/general/res/sass/search/_search.scss

@@ -97,6 +97,7 @@ input.c-search__search-input {
     box-shadow: none !important; // !important needed to override default for [input]
     flex: 1 1 99%;
     min-width: 10px;
+    width: 100%;
 }
 
 .c-search__search-menu-holder {
@@ -109,16 +110,21 @@ input.c-search__search-input {
 .holder-search {
 	$iconWidth: 20px;
 
+    .c-search-btn-wrapper {
+        margin-right: $interiorMarginLg; // Fend off rights side from pane splitter control
+    }
+
     .results-msg {
         font-size: 0.8rem;
+        opacity: 0.6;
     }
 
 	.active-filter-display {
-		$s: 0.7em;
+		$s: 0.7rem;
 		$p: $interiorMargin;
 		box-sizing: border-box;
 		line-height: 130%;
-		padding-left: $s * 2;
+		padding-left: $s * 1.5;
 		font-size: $s;
 
 		.clear-filters {

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

@@ -64,14 +64,16 @@
         left: $m;
     }
     &.frame-template {
-        .s-button,
-        .s-menu-button {
-            height: $ohH;
-            line-height: $ohH;
-            padding: 0 $interiorMargin;
-            > span,
-            &:before {
-                font-size: 0.65rem;
+        .h-local-controls {
+            .s-button,
+            .s-menu-button {
+                height: $btnFrameH;
+                line-height: $btnFrameH;
+                padding: 0 $interiorMargin;
+                > span,
+                &:before {
+                    font-size: 0.65rem;
+                }
             }
         }
 
@@ -96,8 +98,6 @@
         border-color: transparent;
         .object-browse-bar .right {
             $m: 0;
-            background: rgba(black, 0.3);
-            border-radius: $basicCr;
             padding: $interiorMarginSm;
             position: absolute;
             top: $m; right: $m;
@@ -111,10 +111,23 @@
                 bottom: $m;
                 left: $m;
             }
+
             > .t-frame-inner {
-                > .object-browse-bar .left {
-                    display: none;
+                &.t-object-type-layout {
+                    > .object-browse-bar {
+                        .t-btn-view-large {
+                            // When a nested layout has its frame hidden, don't display a view large button
+                            display: none;
+                        }
+                    }
                 }
+
+                > .object-browse-bar {
+                    .left {
+                        display: none;
+                    }
+                }
+
                 > .object-holder.abs {
                     overflow: hidden;
                     top: 0 !important;

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

@@ -47,6 +47,18 @@
     }
 }
 
+
+.status-holder {
+    text-transform: uppercase;
+}
+
+.s-ue-bottom-bar {
+    background: $colorStatusBarBg;
+    color: $colorStatusBarFg;
+    cursor: default;
+    font-size: .7rem;
+}
+
 .user-environ {
     height: 100%;
     width: 100%;
@@ -81,21 +93,17 @@
         }
     }
 
-    .ue-bottom-bar {
-        @include absPosDefault(0);// New status bar design
+    .l-ue-bottom-bar {
+        $m: $interiorMarginSm;
+        @include absPosDefault(0, $overflow: visible);// New status bar design
         top: auto;
         height: $ueFooterH;
-        line-height: $ueFooterH - ($interiorMargin * 2);
-        background: $colorStatusBarBg;
-        color: lighten($colorBodyBg, 30%);
-        font-size: .7rem;
+        line-height: $ueFooterH - ($m * 2);
         .status-holder {
             box-sizing: border-box;
-            @include absPosDefault($interiorMargin);
-            @include ellipsize();
+            @include absPosDefault($m, $overflow: visible);
             right: 120px;
-            text-transform: uppercase;
-            z-index: 1;
+            z-index: 10;
         }
         .app-logo {
             background-position: right center;
@@ -145,20 +153,18 @@
 body.desktop .pane .mini-tab-icon.toggle-pane {
     $hi: splitterHandleInset($splitterD, $splitterHandleD);
     $paneExpandedOffset: $hi + $splitterHandleD + $uePaneMiniTabW;
-    top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
+    top: 0;
 
     &.toggle-tree.anchor-left.collapsed,
     &.toggle-inspect.anchor-right:not(.collapsed) {
         @extend .icon-arrow-right;
         border-bottom-right-radius: $controlCr;
-        border-top-right-radius: $controlCr;
     }
 
     &.toggle-tree.anchor-left:not(.collapsed),
     &.toggle-inspect.anchor-right.collapsed {
         @extend .icon-arrow-left;
         border-bottom-left-radius: $controlCr;
-        border-top-left-radius: $controlCr;
     }
 
     &.toggle-tree.anchor-left {
@@ -240,7 +246,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     }
 }
 
-.object-browse-bar .s-button,
 .top-bar .buttons-main .s-button,
 .top-bar .s-menu-button,
 .tool-bar .s-button,
@@ -268,7 +273,12 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
 
     .left {
         .l-back {
-            margin-right: $interiorMarginLg;
+            a {
+                display: inline-block;
+                text-align: center;
+                width: 24px;
+            }
+            margin-right: $interiorMargin;
             &.s-status-editing { display: none; }
         }
     }

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

@@ -19,51 +19,62 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
 .s-hover-border {
     border: 1px solid transparent;
-    &:hover {
-        border-color: rgba($colorSelectableSelectedPrimary, 0.5) !important;
-    }
 }
 
-.s-status-editing {
-    // Limit to editing mode
-    $o: 0.5;
-    $oHover: 0.8;
-    $bc: $colorSelectableSelectedPrimary;
+body.desktop {
     .s-hover-border {
-        // Show a border by default so user can see object bounds and empty objects
-        border-color: rgba($bc, $o) !important;
-        border-style: dotted !important;
-
         &:hover {
-            border-color: rgba($bc, $oHover) !important;
-        }
-
-        &.t-object-type-layout {
-            border-style: dashed !important;
+            border-color: rgba($colorBodyFg, 0.3) !important;
         }
     }
-    .s-selected {
-        &.s-moveable {
-            &:not(.s-drilled-in) {
-                cursor: move;
+
+    .s-status-editing {
+        // Limit to editing mode
+        $o: 0.5;
+        $oHover: 0.8;
+        $bc: $colorSelectableSelectedPrimary;
+        .s-hover-border {
+            // Show a border by default so user can see object bounds and empty objects
+            border-color: rgba($bc, $o) !important;
+            border-style: dotted !important;
+
+            &:hover {
+                border-color: rgba($bc, $oHover) !important;
+            }
+
+            &.t-object-type-layout {
+                border-style: dashed !important;
+            }
+        }
+        .s-selected {
+            > .s-hover-border,
+            &.s-hover-border {
+                // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
+                @include boxShdwLarge();
+                // Show edit-corners if you got 'em
+                .edit-corner {
+                    display: block;
+                    &:hover {
+                        background-color: rgba($colorKey, 1);
+                    }
+                }
+            }
+
+            &.s-moveable {
+                &:not(.s-drilled-in) {
+                    cursor: move;
+                }
             }
         }
     }
-}
 
-.s-selected > .s-hover-border,
-.s-selected.s-hover-border {
-    // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
-    border-color: $colorSelectableSelectedPrimary !important;
-    @include boxShdwLarge();
-    // Show edit-corners if you got 'em
-    .edit-corner {
-        display: block;
-        &:hover {
-            background-color: rgba($colorKey, 1);
-        }
+    .s-selected > .s-hover-border,
+    .s-selected.s-hover-border {
+        border-color: $colorSelectableSelectedPrimary !important;
+        //z-index: 1; // Bring selected item from beneath others. BUT, this breaks editing in Fixed Position.
     }
 }
 

platform/commonUI/general/res/templates/angular-indicator.html

@@ -20,14 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div class='status block'
+<div class="ls-indicator {{ngModel.getCssClass()}}"
 	 title="{{ngModel.getDescription()}}"
-	 ng-click='ngModel.configure()'
 	 ng-show="ngModel.getText().length > 0">
-	<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label"
-		  ng-class='ngModel.getTextClass()'>
-		{{ngModel.getText()}}
-        <a class="s-button icon-gear" ng-if="ngModel.configure"></a>
-	</span><span class="count">
-	</span>
+	<span class="label">{{ngModel.getText()}}</span>
 </div>

platform/commonUI/general/res/templates/bottombar.html

@@ -19,14 +19,9 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
+<div class='abs bottom-bar l-ue-bottom-bar s-ue-bottom-bar mobile-disable-select'>
     <div id='status' class='status-holder'>
-        <mct-include ng-repeat="indicator in bar.getIndicators()"
-                     ng-model="indicator.ngModel"
-                     key="indicator.template"
-                     class="status-block-holder"
-                     ng-class='indicator.ngModel.getGlyphClass()'>
-        </mct-include>
+        <mct-indicators></mct-indicators>
     </div>
     <mct-include key="'message-banner'"></mct-include>
     <mct-include key="'about-logo'"></mct-include>

platform/commonUI/general/res/templates/controls/selector.html

@@ -23,17 +23,6 @@
      ng-controller="SelectorController as selector">
     <div class='col col-15'>
         <div class='line field-hints'>Available</div>
-        <!--div id='_form_filter' class='line filter'>
-            <input type='text' class='control filter' name='filter-available' />
-            <a class='icon ui-symbol t-available-trigger'
-               href=''
-               title="Filter is case sensitive">M</a>
-        </div>
-
-        <div class="line">
-            Showing {{shown}} of {{count}} available options.
-        </div -->
-
         <div class='line treeview' name='available'>
             <mct-representation key="'tree'"
                                 mct-object="selector.root()"
@@ -55,18 +44,6 @@
     </div>
     <div class='col col-15'>
         <div class='line field-hints'>Selected</div>
-        <!-- div id='_form_filter' class='line filter'>
-            <input type='text' class='control filter' name='filter-selected' />
-            <a class='icon ui-symbol t-selected-trigger'
-               href=''
-               title="Filter is case sensitive">
-                M
-            </a>
-        </div>
-        <div class="line">
-            Showing {{shown}} of {{count}} available options.
-        </div -->
-
         <div class='line treeview l-tree-item-flat-list' name='selected'>
             <ul class="tree">
                 <li ng-repeat="selectedObject in selector.selected()">

platform/commonUI/general/res/templates/object-inspector.html

@@ -29,14 +29,14 @@
                             key="'inspector-region'"
                             mct-object="domainObject"
                             ng-model="ngModel"
-                            class="flex-elem grows vscroll l-flex-col">
+                            class="flex-elem grows vscroll scroll-pad l-flex-col inspector-properties">
                     </mct-representation>
                 </div>
             </div>
             <mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
             <div class="split-pane-component pane bottom">
                 <div class="abs holder holder-elements l-flex-col">
-                    <em class="flex-elem t-inspector-part-header">Elements</em>
+                    <h2>Elements</h2>
                     <mct-representation
                             key="'edit-elements'"
                             mct-object="domainObject"

platform/commonUI/general/src/controllers/TreeNodeController.js

@@ -79,8 +79,8 @@ define(
                 // a recursive step for subsequent ids in the paths,
                 // until we exceed path length or hit a mismatch.
                 return (index >= nodePath.length) ||
-                        ((navPath[index] === nodePath[index]) &&
-                                checkPath(nodePath, navPath, index + 1));
+                    ((navPath[index] === nodePath[index]) &&
+                    checkPath(nodePath, navPath, index + 1));
             }
 
             // Consider the currently-navigated object and update
@@ -89,9 +89,9 @@ define(
                 var nodeObject = $scope.domainObject,
                     navObject = selectedObject,
                     nodeContext = nodeObject &&
-                            nodeObject.getCapability('context'),
+                        nodeObject.getCapability('context'),
                     navContext = navObject &&
-                            navObject.getCapability('context'),
+                        navObject.getCapability('context'),
                     nodePath,
                     navPath;
 
@@ -110,7 +110,7 @@ define(
                     // within the navigation path; otherwise, navigation
                     // has happened in some other subtree.
                     if (navPath.length >= nodePath.length &&
-                            checkPath(nodePath, navPath)) {
+                        checkPath(nodePath, navPath)) {
 
                         // nodePath is along the navPath; if it's
                         // at the end of the path, highlight;

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

@@ -19,33 +19,22 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define*/
 
-define([
-    './LegacyObjectAPIInterceptor',
-    'legacyRegistry'
-], function (
-    LegacyObjectAPIInterceptor,
-    legacyRegistry
-) {
-    legacyRegistry.register('src/api/objects', {
-        name: 'Object API',
-        description: 'The public Objects API',
-        extensions: {
-            components: [
-                {
-                    provides: "objectService",
-                    type: "decorator",
-                    priority: "mandatory",
-                    implementation: LegacyObjectAPIInterceptor,
-                    depends: [
-                        "openmct",
-                        "roots[]",
-                        "instantiate",
-                        "topic"
-                    ]
+define(
+    [],
+    function () {
+        function MCTIndicators(openmct) {
+            return {
+                restrict: "E",
+                link: function link(scope, element) {
+                    openmct.indicators.indicatorElements
+                        .forEach(function (indicatorElement) {
+                            element.append(indicatorElement);
+                        });
                 }
-            ]
+            };
         }
-    });
-});
+
+        return MCTIndicators;
+    }
+);

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

@@ -24,7 +24,7 @@ define([
     'angular',
     '../ui/TreeView'
 ], function (angular, TreeView) {
-    function MCTTree(gestureService) {
+    function MCTTree(gestureService, openmct) {
         function link(scope, element) {
             if (!scope.allowSelection) {
                 scope.allowSelection = function () {
@@ -34,8 +34,9 @@ define([
             if (!scope.onSelection) {
                 scope.onSelection = function () {};
             }
+
             var currentSelection = scope.selectedObject;
-            var treeView = new TreeView(gestureService);
+            var treeView = new TreeView(gestureService, openmct);
 
             function setSelection(domainObject, event) {
                 if (currentSelection === domainObject) {

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

@@ -27,9 +27,9 @@ define([
     './TreeLabelView'
 ], function ($, nodeTemplate, ToggleView, TreeLabelView) {
 
-    function TreeNodeView(gestureService, subtreeFactory, selectFn) {
+    function TreeNodeView(gestureService, subtreeFactory, selectFn, openmct) {
         this.li = $('<li>');
-
+        this.openmct = openmct;
         this.statusClasses = [];
 
         this.toggleView = new ToggleView(false);
@@ -81,11 +81,14 @@ define([
         }
 
         this.activeObject = domainObject;
-
-        if (domainObject && domainObject.hasCapability('composition')) {
-            $(this.toggleView.elements()).removeClass('no-children');
-        } else {
-            $(this.toggleView.elements()).addClass('no-children');
+        if (domainObject && domainObject.hasCapability('adapter')) {
+            var obj = domainObject.useCapability('adapter');
+            var hasComposition =  this.openmct.composition.get(obj) !== undefined;
+            if (hasComposition) {
+                $(this.toggleView.elements()).removeClass('no-children');
+            } else {
+                $(this.toggleView.elements()).addClass('no-children');
+            }
         }
 
         if (domainObject && domainObject.hasCapability('status')) {
@@ -150,6 +153,5 @@ define([
         return this.li;
     };
 
-
     return TreeNodeView;
 });

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

@@ -26,17 +26,18 @@ define([
     'text!../../res/templates/tree/wait-node.html'
 ], function ($, TreeNodeView, spinnerTemplate) {
 
-    function TreeView(gestureService, selectFn) {
+    function TreeView(gestureService, openmct, selectFn) {
         this.ul = $('<ul class="tree"></ul>');
         this.nodeViews = [];
         this.callbacks = [];
         this.selectFn = selectFn || this.value.bind(this);
         this.gestureService = gestureService;
         this.pending = false;
+        this.openmct = openmct;
     }
 
     TreeView.prototype.newTreeView = function () {
-        return new TreeView(this.gestureService, this.selectFn);
+        return new TreeView(this.gestureService, this.openmct, this.selectFn);
     };
 
     TreeView.prototype.setSize = function (sz) {
@@ -46,7 +47,8 @@ define([
             nodeView = new TreeNodeView(
                 this.gestureService,
                 this.newTreeView.bind(this),
-                this.selectFn
+                this.selectFn,
+                this.openmct
             );
             this.nodeViews.push(nodeView);
             this.ul.append($(nodeView.elements()));