[Mobile] Comments

Added comments to plot controller regarding the change in the snapping to right and mobile adjustment.
[Mobile] Plot & Gestures
2015-09-03 16:30:12 -07:00 · 2015-09-03 16:15:34 -07:00 · 2015-09-03 11:48:42 -07:00 · 2015-09-03 11:47:33 -07:00 · 2015-09-03 09:53:17 -07:00 · 2015-09-03 09:51:12 -07:00
78 changed files with 4550 additions and 242 deletions
--- a/bundles.json
+++ b/bundles.json
@@ -14,7 +14,7 @@
    "platform/features/imagery",
    "platform/features/layout",
    "platform/features/pages",
-    "platform/features/plot",
+    "platform/features/plot-reborn",
    "platform/features/scrolling",
    "platform/features/events",
    "platform/forms",
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@
 <html>
 <head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <script type="text/javascript"
            src="platform/framework/lib/require.js"
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -82,6 +82,11 @@
                "templateUrl": "templates/menu-arrow.html",
                "uses": [ "action" ],
                "gestures": [ "menu" ]
            },
            {
                "key": "back-arrow",
                "uses": [ "type", "action" ],
                "templateUrl": "templates/back-arrow.html"
            }
        ],
        "services": [
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -0,0 +1,28 @@
 <!--
 Open MCT Web, Copyright (c) 2014-2015, United States Government
 as represented by the Administrator of the National Aeronautics and Space
 Administration. All rights reserved.
 Open MCT Web is licensed under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0.
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations
 under the License.
 Open MCT Web includes source code licensed under additional open source
 licenses. See the Open Source Licenses file (LICENSES.md) included with
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
      ng-click='backArrow()'
      ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
    <a class='type-icon icon ui-symbol'>{</a>
 </span>
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -25,8 +25,8 @@
            <mct-representation key="'object-header'" mct-object="domainObject">
            </mct-representation>
        </div>
-
+        <!-- Temporarily, on mobile, the button bar is hidden-->
-        <div class="btn-bar right abs">
+        <div class="btn-bar right abs mobile-hide">
            <mct-representation key="'action-group'"
                                mct-object="domainObject"
                                parameters="{ category: 'view-control' }">
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -19,29 +19,31 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div content="jquery-wrapper" class="abs holder-all browse-mode">
+
 <div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController">
    <mct-include key="'topbar-browse'"></mct-include>
-    <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
+    <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
        <mct-split-pane class='contents abs' anchor='left'>
-            <div
+            <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
-                class='split-pane-component treeview pane left'
+                <div class='holder tree-holder abs mobile-tree-holder'>
                >
                <mct-representation key="'create-button'" mct-object="navigatedObject">
                </mct-representation>
                <div class='holder tree-holder abs'>
                    <mct-representation key="'tree'"
                                        mct-object="domainObject"
                                        ng-model="treeModel">
                    </mct-representation>
                </div>
-            </div>
+                    <mct-representation key="'create-button'" mct-object="navigatedObject">
            <mct-splitter></mct-splitter>
            <div class='split-pane-component items pane'>
                <div class='holder abs' id='content-area'>
                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
                    </mct-representation>
                </div>
            </div>
            <mct-splitter class="mobile-hide"></mct-splitter>
                    <div class='split-pane-component items pane mobile-pane right-repr'>
                        <div class='holder abs' id='content-area'>
                            <mct-representation mct-object="navigatedObject" key="'browse-object'">
                            </mct-representation>
                        </div>
                    <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                        ng-click="treeSlide()">m</div>                        
                    </div>   
        </mct-split-pane>
    </div>
    <mct-include key="'bottombar'"></mct-include>
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -19,11 +19,12 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class='object-header'>
+<div class='object-header object-header-mobile'>
    <span class="label s-label">
        <mct-representation key="'back-arrow'"></mct-representation>
        <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
        <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='type-name'>{{type.getName()}}</span>
+        <span class='type-name mobile-important-hide'>{{type.getName()}}</span>
        <span class='title-label'>{{model.name}}</span>
        <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
    </span>
--- a/platform/commonUI/browse/res/templates/browse/object-pane.html
+++ b/platform/commonUI/browse/res/templates/browse/object-pane.html
@@ -0,0 +1,27 @@
 <!--
 Open MCT Web, Copyright (c) 2014-2015, United States Government
 as represented by the Administrator of the National Aeronautics and Space
 Administration. All rights reserved.
 Open MCT Web is licensed under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0.
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations
 under the License.
 Open MCT Web includes source code licensed under additional open source
 licenses. See the Open Source Licenses file (LICENSES.md) included with
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
 <div class='object-holder abs vscroll'>
    <mct-representation key="representation.selected.key"
                        mct-object="representation.selected.key && domainObject">
    </mct-representation>
 </div>
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -20,13 +20,13 @@
 at runtime from the About dialog for additional information.
 -->
 <!-- For selected, add class 'selected' to outer div -->
-<div class='item grid-item' ng-click='action.perform("navigate")'>
+<div class='item grid-item'>
-    <div class="contents abs">
+    <div class="contents abs mobile-grid-nav" ng-click='action.perform("navigate")'>
        <div class='top-bar bar abs'>
            <div class='left abs'>
                <mct-include key="_checkbox"></mct-include>
            </div>
-            <div class='right abs'>
+            <div class='right abs mobile-right'>
                <div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div>
                <div class='ui-symbol icon profile' title="Shared">P</div>
            </div>
@@ -44,4 +44,7 @@
            </div>
        </div>
    </div>
-</div>
+    <div class="contents abs mobile-info desktop-hide">
        <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
    </div>
 </div>
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -63,7 +63,6 @@ define(
                // path to new, addressed, path based on
                // domainObject
                $location.path(urlService.urlForLocation("browse", domainObject));
            }
            // Callback for updating the in-scope reference to the object
@@ -126,6 +125,36 @@ define(
                    navigateTo(domainObject);
                }
            }
            // Uses the current navigation to get the 
            // current ContextCapability, then the
            // parent is gotten from that. If the parent
            // is not the root, then user is navigated to
            // parent
            function navigateToParent() {
                var parent = navigationService.getNavigation().getCapability('context').getParent(),
                    grandparent;
                if (parent.getId() !== ROOT_ID) {
                    grandparent = parent.getCapability('context').getParent().getId();
                    navigateTo(parent);
                    if (grandparent && grandparent !== ROOT_ID) {
                        $scope.atRoot = false;
                    } else {
                        $scope.atRoot = true;
                    }
                } else {
                    $scope.atRoot = true;
                }
            }
            function checkRoot() {
                var parent = navigationService.getNavigation().getCapability('context').getParent();
                if (parent.getId() !== ROOT_ID) {
                    $scope.atRoot = false;
                } else {
                    $scope.atRoot = true;
                }
            }
            // Load the root object, put it in the scope.
            // Also, load its immediate children, and (possibly)
@@ -140,7 +169,13 @@ define(
            $scope.treeModel = {
                selectedObject: navigationService.getNavigation()
            };
-
+            
            // SlideMenu boolean used to hide and show
            // tree menu
            $scope.treeSlide = function () {
                $scope.treeClass = !$scope.treeClass;
            };
            // Listen for changes in navigation state.
            navigationService.addListener(setNavigation);
@@ -151,6 +186,10 @@ define(
            $scope.$on("$destroy", function () {
                navigationService.removeListener(setNavigation);
            });
            $scope.backArrow = navigateToParent;
            $scope.checkRoot = checkRoot;
        }
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -39,6 +39,9 @@ define(
                mockUrlService,
                mockDomainObject,
                mockNextObject,
                mockParentContext,
                mockParent,
                mockGrandparent,
                controller;
            function mockPromise(value) {
@@ -52,7 +55,7 @@ define(
            beforeEach(function () {
                mockScope = jasmine.createSpyObj(
                    "$scope",
-                    [ "$on", "$watch" ]
+                    [ "$on", "$watch", "treeSlide", "backArrow" ]
                );
                mockRoute = { current: { params: {} } };
                mockLocation = jasmine.createSpyObj(
@@ -88,6 +91,17 @@ define(
                    "nextObject",
                    [ "getId", "getCapability", "getModel", "useCapability" ]
                );
                mockParentContext = jasmine.createSpyObj('context', ['getParent']);
                mockParent  = jasmine.createSpyObj(
                    "domainObject",
                    [ "getId", "getCapability", "getModel", "useCapability" ]
                );
                mockGrandparent  = jasmine.createSpyObj(
                    "domainObject",
                    [ "getId", "getCapability", "getModel", "useCapability" ]
                );
                mockObjectService.getObjects.andReturn(mockPromise({
                    ROOT: mockRootObject
@@ -145,6 +159,13 @@ define(
                );
                expect(mockScope.navigatedObject).toEqual(mockDomainObject);
            });
            // Mocks the tree slide call that
            // lets the html code know if the
            // tree menu is open.
            it("calls the treeSlide function", function () {
                mockScope.treeSlide();
            });
            it("releases its navigation listener when its scope is destroyed", function () {
                expect(mockScope.$on).toHaveBeenCalledWith(
@@ -237,7 +258,104 @@ define(
                    mockUrlService.urlForLocation(mockMode, mockNextObject)
                );
            });
-
+            
            it("checks if the user is current navigated to the root", function () {
                var mockContext = jasmine.createSpyObj('context', ['getParent']);
                mockRoute.current.params.ids = "ROOT/mine";
                mockParent.getId.andReturn("ROOT");
                mockDomainObject.getCapability.andCallFake(function (c) {
                    return c === 'context' && mockContext;
                });
                mockNavigationService.getNavigation.andReturn(mockDomainObject);
                mockContext.getParent.andReturn(mockParent);
                mockParent.getCapability.andCallFake(function (c) {
                    return c === 'context' && mockParentContext;
                });
                mockParentContext.getParent.andReturn(mockGrandparent);
                controller = new BrowseController(
                    mockScope,
                    mockRoute,
                    mockLocation,
                    mockObjectService,
                    mockNavigationService
                );
                mockScope.checkRoot();
                mockRoute.current.params.ids = "mine/junk";
                mockParent.getId.andReturn("mine");
                controller = new BrowseController(
                    mockScope,
                    mockRoute,
                    mockLocation,
                    mockObjectService,
                    mockNavigationService
                );
                mockScope.checkRoot();
            });
            // Mocks the back arrow call that
            // lets the html code know the back
            // arrow navigation needs to be done
            it("calls the backArrow function", function () {
                var mockContext = jasmine.createSpyObj('context', ['getParent']);
                mockRoute.current.params.ids = "mine/junk";
                mockParent.getId.andReturn("mine");
                mockDomainObject.getCapability.andCallFake(function (c) {
                    return c === 'context' && mockContext;
                });
                mockNavigationService.getNavigation.andReturn(mockDomainObject);
                mockContext.getParent.andReturn(mockParent);
                mockParent.getCapability.andCallFake(function (c) {
                    return c === 'context' && mockParentContext;
                });
                mockParentContext.getParent.andReturn(mockGrandparent);
                controller = new BrowseController(
                    mockScope,
                    mockRoute,
                    mockLocation,
                    mockObjectService,
                    mockNavigationService
                );
                mockScope.backArrow();
                mockRoute.current.params.ids = "mine/lessjunk/morejunk";
                mockGrandparent.getId.andReturn("mine");
                controller = new BrowseController(
                    mockScope,
                    mockRoute,
                    mockLocation,
                    mockObjectService,
                    mockNavigationService
                );
                mockScope.backArrow();
                mockRoute.current.params.ids = "ROOT/mine";
                mockParent.getId.andReturn("ROOT");
                controller = new BrowseController(
                    mockScope,
                    mockRoute,
                    mockLocation,
                    mockObjectService,
                    mockNavigationService
                );
                mockScope.backArrow();
            });
        });
    }
 );
--- a/platform/commonUI/edit/bundle.json
+++ b/platform/commonUI/edit/bundle.json
@@ -59,7 +59,7 @@
                "glyph": "Z",
                "name": "Remove",
                "description": "Remove this object from its containing object.",
-                "depends": [ "$q" ]
+                "depends": [ "$q", "navigationService" ]
            },
            {
                "key": "save",
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -40,7 +40,7 @@ define(
         * @constructor
         * @memberof module:editor/actions/remove-action
         */
-        function RemoveAction($q, context) {
+        function RemoveAction($q, navigationService, context) {
            var object = (context || {}).domainObject;
            /**
@@ -69,14 +69,25 @@ define(
                return persistence && persistence.persist();
            }
            // Checks current object with object being removed
            function checkCurrentObjectNavigation(object, parent) {
                var currentObj = navigationService.getNavigation();
                if (currentObj.getId() === object.getId()) {
                    navigationService.setNavigation(parent);
                }
            }
            /**
             * Remove the object from its parent, as identified by its context
             * capability.
-             * @param {ContextCapability} contextCapability the "context" capability
+             * @param {object} domain object being removed contextCapability
-             *        of the domain object being removed.
+                      gotten from the "context" capability of this object
             */
-            function removeFromContext(contextCapability) {
+            function removeFromContext(object) {
-                var parent = contextCapability.getParent();
+                var contextCapability = object.getCapability('context'),
                    parent = contextCapability.getParent();
                // Navigates to parent if deleting current object
                checkCurrentObjectNavigation(object, parent);
                $q.when(
                    parent.useCapability('mutation', doMutate)
                ).then(function () {
@@ -91,7 +102,7 @@ define(
                 *         fulfilled when the action has completed.
                 */
                perform: function () {
-                    return $q.when(object.getCapability('context'))
+                    return $q.when(object)
                        .then(removeFromContext);
                }
            };
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -28,6 +28,7 @@ define(
        describe("The Remove action", function () {
            var mockQ,
                mockNavigationService,
                mockDomainObject,
                mockParent,
                mockContext,
@@ -64,19 +65,32 @@ define(
                    },
                    useCapability: function (k, v) {
                        return capabilities[k].invoke(v);
                    },
                    getId: function () {
                        return "test";
                    }
                };
                mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
                mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
-
+                mockNavigationService = jasmine.createSpyObj(
                    "navigationService",
                    [
                        "getNavigation",
                        "setNavigation",
                        "addListener",
                        "removeListener"
                    ]
                );
                mockNavigationService.getNavigation.andReturn(mockDomainObject);
                mockDomainObject.getId.andReturn("test");
                mockDomainObject.getCapability.andReturn(mockContext);
                mockContext.getParent.andReturn(mockParent);
                mockType.hasFeature.andReturn(true);
                capabilities = {
                    mutation: mockMutation,
                    persistence: mockPersistence,
@@ -88,7 +102,7 @@ define(
                actionContext = { domainObject: mockDomainObject };
-                action = new RemoveAction(mockQ, actionContext);
+                action = new RemoveAction(mockQ, mockNavigationService, actionContext);
            });
            it("only applies to objects with parents", function () {
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -8,6 +8,11 @@
                "key": "urlService",
                "implementation": "/services/UrlService.js",
                "depends": [ "$location" ]
            },
            {
                "key": "agentService",
                "implementation": "/services/AgentService.js",
                "depends": [ "$window" ]
            }
        ],
        "runs": [
@@ -60,7 +65,7 @@
            {
                "key": "TreeNodeController",
                "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout" ]
+                "depends": [ "$scope", "$timeout", "agentService" ]
            },
            {
                "key": "ActionGroupController",
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -48,6 +48,33 @@
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -120,6 +147,27 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /* line 22, ../sass/forms/_elems.scss */
 .section-header {
  -moz-border-radius: 3px;
@@ -392,7 +440,7 @@ input[type="text"] {
  margin: 0 0 2px 2px;
  overflow: hidden;
  position: relative; }
-  /* line 162, ../sass/_mixins.scss */
+  /* line 163, ../sass/_mixins.scss */
  .form-control.select:not(.disabled):hover {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
@@ -401,10 +449,10 @@ input[type="text"] {
    background-image: -webkit-linear-gradient(#636363, #575757);
    background-image: linear-gradient(#636363, #575757);
    color: #bdbdbd; }
-    /* line 165, ../sass/_mixins.scss */
+    /* line 166, ../sass/_mixins.scss */
    .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
      color: #878787; }
-  /* line 170, ../sass/_mixins.scss */
+  /* line 171, ../sass/_mixins.scss */
  .form-control.select.btn-menu .invoke-menu {
    color: #757575; }
  /* line 29, ../sass/forms/_selects.scss */
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -48,6 +48,33 @@
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -78,6 +105,27 @@
 	}
 }
 */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -136,7 +184,7 @@
    margin-bottom: 3px;
    margin-right: 3px;
    position: relative; }
-    /* line 162, ../sass/_mixins.scss */
+    /* line 163, ../sass/_mixins.scss */
    .items-holder .item.grid-item:not(.disabled):hover {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
@@ -145,10 +193,10 @@
      background-image: -webkit-linear-gradient(#707070, #636363);
      background-image: linear-gradient(#707070, #636363);
      color: #bdbdbd; }
-      /* line 165, ../sass/_mixins.scss */
+      /* line 166, ../sass/_mixins.scss */
      .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
        color: #949494; }
-    /* line 170, ../sass/_mixins.scss */
+    /* line 171, ../sass/_mixins.scss */
    .items-holder .item.grid-item.btn-menu .invoke-menu {
      color: #828282; }
    /* line 46, ../sass/items/_item.scss */
@@ -269,7 +317,7 @@
      color: #999;
      display: inline-block;
      color: #80dfff; }
-      /* line 162, ../sass/_mixins.scss */
+      /* line 163, ../sass/_mixins.scss */
      .items-holder .item.grid-item.selected:not(.disabled):hover {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background-size: 100%;
@@ -278,10 +326,10 @@
        background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
        background-image: linear-gradient(#2ecbff, #14c4ff);
        color: #bdbdbd; }
-        /* line 165, ../sass/_mixins.scss */
+        /* line 166, ../sass/_mixins.scss */
        .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
          color: #75ddff; }
-      /* line 170, ../sass/_mixins.scss */
+      /* line 171, ../sass/_mixins.scss */
      .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
        color: #52d4ff; }
      /* line 140, ../sass/items/_item.scss */
@@ -296,3 +344,105 @@
      /* line 144, ../sass/items/_item.scss */
      .items-holder .item.grid-item.selected:hover .item-main .item-type {
        color: white !important; }
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 34, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item .mobile-grid-nav {
    top: 0px;
    bottom: 0px;
    right: 55px; }
  /* line 39, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item .mobile-info {
    text-align: center;
    width: 50px;
    right: 0px;
    left: auto;
    font-size: 1.3em; }
  /* line 47, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item .bar.bottom-bar.abs {
    top: 0px;
    height: auto; }
  /* line 54, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item .item-main .item-type {
    font-size: 30px;
    top: 0px;
    left: 0px;
    text-align: left;
    height: auto; }
  /* line 61, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item .item-main .item-open {
    display: none; }
  /* line 65, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
    margin-left: 30px; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 29, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item {
    width: 100%;
    height: 50px; }
    /* line 74, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .mobile-right {
      top: 100%; }
    /* line 77, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .mobile-info {
      line-height: 25px; }
    /* line 81, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .item-main .item-type {
      line-height: 40px; }
    /* line 85, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .title {
      margin-right: 10px;
      line-height: 25px; }
    /* line 89, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .details {
      margin-right: 10px;
      line-height: 0px; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 29, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item {
    width: 100%;
    height: 66.66667px; }
    /* line 99, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .mobile-right {
      top: 100%; }
    /* line 103, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .mobile-info {
      line-height: 38px; }
    /* line 107, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .item-main .item-type {
      font-size: 30px;
      line-height: 50px; }
    /* line 112, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .title {
      margin-right: 10px;
      line-height: 38px; }
    /* line 116, ../sass/mobile/_item.scss */
    .items-holder .item.grid-item .details {
      margin-right: 10px;
      line-height: 0px; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
  /* line 29, ../sass/mobile/_item.scss */
  .items-holder .item.grid-item {
    width: 200px;
    height: 200px; } }
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -49,6 +49,33 @@
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -92,7 +119,7 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -113,38 +140,38 @@ time, mark, audio, video {
  font-size: 100%;
  vertical-align: baseline; }
-/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
  line-height: 1; }
-/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
  list-style: none; }
-/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
  border-collapse: collapse;
  border-spacing: 0; }
-/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }
-/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
  quotes: none; }
-  /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }
-/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
  border: none; }
-/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }
@@ -178,6 +205,27 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 	}
 }
 */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -664,21 +712,251 @@ mct-container {
 /* line 267, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
  margin-left: 5px; }
-  /* line 269, ../sass/user-environ/_layout.scss */
+  /* line 270, ../sass/user-environ/_layout.scss */
  .split-layout.vertical > .pane > .holder {
    left: 0;
    right: 0; }
-  /* line 273, ../sass/user-environ/_layout.scss */
+  /* line 274, ../sass/user-environ/_layout.scss */
  .split-layout.vertical > .pane:first-child {
    margin-left: 0; }
-    /* line 275, ../sass/user-environ/_layout.scss */
+    /* line 276, ../sass/user-environ/_layout.scss */
    .split-layout.vertical > .pane:first-child .holder {
      right: 3px; }
-/* line 284, ../sass/user-environ/_layout.scss */
+/* line 285, ../sass/user-environ/_layout.scss */
 .vscroll {
  overflow-y: auto; }
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 26, ../sass/mobile/_layout.scss */
  .browse-wrapper,
  .mobile-pane {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    white-space: nowrap; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
  /* line 38, ../sass/mobile/_layout.scss */
  .desktop-browse {
    min-width: 150px;
    max-width: 800px;
    width: 25%; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 49, ../sass/mobile/_layout.scss */
  .browse-hidetree {
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 60, ../sass/mobile/_layout.scss */
  .browse-hidetree .mobile-pane.left-menu {
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    opacity: 0;
    right: 100% !important;
    width: auto !important;
    overflow-y: hidden;
    overflow-x: hidden; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 73, ../sass/mobile/_layout.scss */
  .browse-hidetree .mobile-pane.right-repr {
    -moz-transition-duration: 0.35s;
    -o-transition-duration: 0.35s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    transition-timing-function: ease;
    backface-visibility: hidden;
    left: auto !important;
    width: 100% !important; } }
 /* line 82, ../sass/mobile/_layout.scss */
 .mobile-tree-holder {
  top: 30px; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 91, ../sass/mobile/_layout.scss */
  .browse-showtree {
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 102, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.left-menu {
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    opacity: 1;
    display: block !important;
    width: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
  /* line 102, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.left-menu {
    right: 19px !important; } }
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 102, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.left-menu {
    right: 66% !important; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
  /* line 102, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.left-menu {
    right: 500px !important; } }
@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 102, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.left-menu {
    right: 78% !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 126, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.right-repr {
    -moz-transition-duration: 0.35s;
    -o-transition-duration: 0.35s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    transition-timing-function: ease;
    backface-visibility: hidden;
    left: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
  /* line 126, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.right-repr {
    width: 19px !important; } }
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 126, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.right-repr {
    width: 66% !important; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
  /* line 126, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.right-repr {
    width: 500px !important; } }
@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 126, ../sass/mobile/_layout.scss */
  .browse-showtree .mobile-pane.right-repr {
    width: 78% !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 149, ../sass/mobile/_layout.scss */
  .button-pos {
    position: absolute; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 158, ../sass/mobile/_layout.scss */
  .object-header {
    position: relative;
    left: 44px; }
    /* line 163, ../sass/mobile/_layout.scss */
    .object-header .label .context-available {
      opacity: 1 !important; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
  /* line 170, ../sass/mobile/_layout.scss */
  .desktop-hide {
    display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 177, ../sass/mobile/_layout.scss */
  .mobile-hide {
    display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 183, ../sass/mobile/_layout.scss */
  .mobile-important-hide {
    display: none !important; } }
 /* line 189, ../sass/mobile/_layout.scss */
 .mobile-back-hide {
  pointer-events: none;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 0; }
 /* line 196, ../sass/mobile/_layout.scss */
 .mobile-back-unhide {
  pointer-events: all;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 1; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 203, ../sass/mobile/_layout.scss */
  .phone-hide {
    display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 209, ../sass/mobile/_layout.scss */
  .tree-holder {
    overflow-x: hidden !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 214, ../sass/mobile/_layout.scss */
  .mobile-disable-select {
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none; } }
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -1452,7 +1730,7 @@ mct-container {
    color: #999;
    display: inline-block;
    color: #ccf2ff; }
-    /* line 162, ../sass/_mixins.scss */
+    /* line 163, ../sass/_mixins.scss */
    .btn.major:not(.disabled):hover,
    .s-btn.major:not(.disabled):hover,
    .major.icon-btn:not(.disabled):hover,
@@ -1464,13 +1742,13 @@ mct-container {
      background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
      background-image: linear-gradient(#2ecbff, #14c4ff);
      color: #bdbdbd; }
-      /* line 165, ../sass/_mixins.scss */
+      /* line 166, ../sass/_mixins.scss */
      .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
      .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
      .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
      .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
        color: #75ddff; }
-    /* line 170, ../sass/_mixins.scss */
+    /* line 171, ../sass/_mixins.scss */
    .btn.major.btn-menu .invoke-menu,
    .s-btn.major.btn-menu .invoke-menu,
    .major.btn-menu.icon-btn .invoke-menu,
@@ -1500,7 +1778,7 @@ mct-container {
      border-top: 1px solid #2ecbff;
      color: #ccf2ff;
      display: inline-block; }
-      /* line 162, ../sass/_mixins.scss */
+      /* line 163, ../sass/_mixins.scss */
      .btn.major:hover:not(.disabled):hover,
      .s-btn.major:hover:not(.disabled):hover,
      .major.icon-btn:hover:not(.disabled):hover,
@@ -1512,13 +1790,13 @@ mct-container {
        background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
        background-image: linear-gradient(#47d1ff, #2ecbff);
        color: white; }
-        /* line 165, ../sass/_mixins.scss */
+        /* line 166, ../sass/_mixins.scss */
        .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
        .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
        .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
        .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
          color: #8fe3ff; }
-      /* line 170, ../sass/_mixins.scss */
+      /* line 171, ../sass/_mixins.scss */
      .btn.major:hover.btn-menu .invoke-menu,
      .s-btn.major:hover.btn-menu .invoke-menu,
      .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1554,7 +1832,7 @@ mct-container {
    border-top: 1px solid #8a8a8a;
    color: #cccccc;
    display: inline-block; }
-    /* line 162, ../sass/_mixins.scss */
+    /* line 163, ../sass/_mixins.scss */
    .btn.subtle:not(.disabled):hover,
    .s-btn.subtle:not(.disabled):hover,
    .subtle.icon-btn:not(.disabled):hover,
@@ -1566,13 +1844,13 @@ mct-container {
      background-image: -webkit-linear-gradient(#969696, #8a8a8a);
      background-image: linear-gradient(#969696, #8a8a8a);
      color: #f0f0f0; }
-      /* line 165, ../sass/_mixins.scss */
+      /* line 166, ../sass/_mixins.scss */
      .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
      .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
      .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
      .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
        color: #bababa; }
-    /* line 170, ../sass/_mixins.scss */
+    /* line 171, ../sass/_mixins.scss */
    .btn.subtle.btn-menu .invoke-menu,
    .s-btn.subtle.btn-menu .invoke-menu,
    .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1605,7 +1883,7 @@ mct-container {
    border-top: 1px solid #575757;
    color: #999;
    display: inline-block; }
-    /* line 162, ../sass/_mixins.scss */
+    /* line 163, ../sass/_mixins.scss */
    .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
    .s-btn.very-subtle:not(.disabled):hover,
    .very-subtle.icon-btn:not(.disabled):hover,
@@ -1620,7 +1898,7 @@ mct-container {
      background-image: -webkit-linear-gradient(#636363, #575757);
      background-image: linear-gradient(#636363, #575757);
      color: #bdbdbd; }
-      /* line 165, ../sass/_mixins.scss */
+      /* line 166, ../sass/_mixins.scss */
      .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
      .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
      .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1629,7 +1907,7 @@ mct-container {
      .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
      .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
        color: #878787; }
-    /* line 170, ../sass/_mixins.scss */
+    /* line 171, ../sass/_mixins.scss */
    .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
    .s-btn.very-subtle.btn-menu .invoke-menu,
    .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1665,7 +1943,7 @@ mct-container {
      border-top: 1px solid #fe9510;
      color: #fff;
      display: inline-block; }
-      /* line 162, ../sass/_mixins.scss */
+      /* line 163, ../sass/_mixins.scss */
      .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
      .s-btn.very-subtle.paused:not(.disabled):hover,
      .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1680,7 +1958,7 @@ mct-container {
        background-image: -webkit-linear-gradient(#fea029, #fe9510);
        background-image: linear-gradient(#fea029, #fe9510);
        color: white; }
-        /* line 165, ../sass/_mixins.scss */
+        /* line 166, ../sass/_mixins.scss */
        .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
        .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
        .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1689,7 +1967,7 @@ mct-container {
        .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
        .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
          color: #fec070; }
-      /* line 170, ../sass/_mixins.scss */
+      /* line 171, ../sass/_mixins.scss */
      .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
      .s-btn.very-subtle.paused.btn-menu .invoke-menu,
      .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2141,7 +2419,7 @@ label.checkbox.custom {
  			color: lighten($c, 10%);
  		}
  	}*/ }
-  /* line 162, ../sass/_mixins.scss */
+  /* line 163, ../sass/_mixins.scss */
  .btn-menu:not(.disabled):hover {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
@@ -2150,10 +2428,10 @@ label.checkbox.custom {
    background-image: -webkit-linear-gradient(#636363, #575757);
    background-image: linear-gradient(#636363, #575757);
    color: #bdbdbd; }
-    /* line 165, ../sass/_mixins.scss */
+    /* line 166, ../sass/_mixins.scss */
    .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
      color: #878787; }
-  /* line 170, ../sass/_mixins.scss */
+  /* line 171, ../sass/_mixins.scss */
  .btn-menu.btn-menu .invoke-menu {
    color: #757575; }
  /* line 285, ../sass/controls/_controls.scss */
@@ -2299,7 +2577,7 @@ label.checkbox.custom {
  auto: 0;
  bottom: auto;
  left: auto; }
-  /* line 162, ../sass/_mixins.scss */
+  /* line 163, ../sass/_mixins.scss */
  .slider .knob:not(.disabled):hover {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
@@ -2308,13 +2586,13 @@ label.checkbox.custom {
    background-image: -webkit-linear-gradient(#636363, #575757);
    background-image: linear-gradient(#636363, #575757);
    color: #bdbdbd; }
-    /* line 165, ../sass/_mixins.scss */
+    /* line 166, ../sass/_mixins.scss */
    .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
      color: #878787; }
-  /* line 170, ../sass/_mixins.scss */
+  /* line 171, ../sass/_mixins.scss */
  .slider .knob.btn-menu .invoke-menu {
    color: #757575; }
-  /* line 186, ../sass/_mixins.scss */
+  /* line 187, ../sass/_mixins.scss */
  .slider .knob:before {
    -moz-transition-property: "border-color";
    -o-transition-property: "border-color";
@@ -2338,7 +2616,7 @@ label.checkbox.custom {
    left: 2px;
    bottom: 5px;
    top: 5px; }
-  /* line 208, ../sass/_mixins.scss */
+  /* line 209, ../sass/_mixins.scss */
  .slider .knob:not(.disabled):hover:before {
    -moz-transition-property: "border-color";
    -o-transition-property: "border-color";
@@ -2510,14 +2788,14 @@ label.checkbox.custom {
    padding: 3px 0;
    position: absolute;
    z-index: 10; }
-    /* line 170, ../sass/_mixins.scss */
+    /* line 171, ../sass/_mixins.scss */
    .menu-element .menu.btn-menu .invoke-menu {
      color: #828282; }
    /* line 37, ../sass/controls/_menus.scss */
    .menu-element .menu ul {
      margin: 0;
      padding: 0; }
-      /* line 276, ../sass/_mixins.scss */
+      /* line 277, ../sass/_mixins.scss */
      .menu-element .menu ul li {
        list-style-type: none;
        margin: 0;
@@ -2568,7 +2846,7 @@ label.checkbox.custom {
    border-top: 1px solid #919191;
    color: #999;
    display: inline-block; }
-    /* line 170, ../sass/_mixins.scss */
+    /* line 171, ../sass/_mixins.scss */
    .menu-element .context-menu.btn-menu .invoke-menu,
    .menu-element .super-menu.btn-menu .invoke-menu {
      color: #b0b0b0; }
@@ -2686,6 +2964,40 @@ label.checkbox.custom {
  right: 0;
  width: auto; }
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /* line 25, ../sass/mobile/controls/_menus.scss */
 .mobile-menu-icon {
  display: inline-block; }
  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
    /* line 25, ../sass/mobile/controls/_menus.scss */
    .mobile-menu-icon {
      font-size: 21px;
      padding-top: 1px; } }
  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
    /* line 25, ../sass/mobile/controls/_menus.scss */
    .mobile-menu-icon {
      display: none; } }
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
  position: relative;
@@ -3442,7 +3754,7 @@ input[type="text"] {
  margin: 0 0 2px 2px;
  overflow: hidden;
  position: relative; }
-  /* line 162, ../sass/_mixins.scss */
+  /* line 163, ../sass/_mixins.scss */
  .form-control.select:not(.disabled):hover {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
@@ -3451,10 +3763,10 @@ input[type="text"] {
    background-image: -webkit-linear-gradient(#636363, #575757);
    background-image: linear-gradient(#636363, #575757);
    color: #bdbdbd; }
-    /* line 165, ../sass/_mixins.scss */
+    /* line 166, ../sass/_mixins.scss */
    .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
      color: #878787; }
-  /* line 170, ../sass/_mixins.scss */
+  /* line 171, ../sass/_mixins.scss */
  .form-control.select.btn-menu .invoke-menu {
    color: #757575; }
  /* line 29, ../sass/forms/_selects.scss */
@@ -4073,7 +4385,7 @@ input[type="text"] {
  bottom: 15%;
  left: 15%;
  z-index: 101; }
-  /* line 170, ../sass/_mixins.scss */
+  /* line 171, ../sass/_mixins.scss */
  .overlay > .holder.btn-menu .invoke-menu {
    color: #757575; }
  /* line 45, ../sass/overlay/_overlay.scss */
@@ -4118,6 +4430,17 @@ input[type="text"] {
  left: 5px;
  overflow: auto; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 6, ../sass/mobile/overlay/_overlay.scss */
  .overlay > .holder {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; } }
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -4443,33 +4766,40 @@ input[type="text"] {
    margin-left: 20px; }
    /* line 80, ../sass/helpers/_bubbles.scss */
    .l-infobubble-wrapper.arw-left .l-infobubble::before {
-      right: 100%;
+      right: 100%; }
-      width: 0;
+      @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      height: 0;
+        /* line 80, ../sass/helpers/_bubbles.scss */
-      border-top: 6.66667px solid transparent;
+        .l-infobubble-wrapper.arw-left .l-infobubble::before {
-      border-bottom: 6.66667px solid transparent;
+          width: 0;
-      border-right: 10px solid #ddd; }
+          height: 0;
-  /* line 86, ../sass/helpers/_bubbles.scss */
+          border-top: 6.66667px solid transparent;
-  .l-infobubble-wrapper.arw-right {
+          border-bottom: 6.66667px solid transparent;
-    margin-right: 20px; }
+          border-right: 10px solid #ddd; } }
-    /* line 88, ../sass/helpers/_bubbles.scss */
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    .l-infobubble-wrapper.arw-right .l-infobubble::before {
+    /* line 92, ../sass/helpers/_bubbles.scss */
-      left: 100%;
+    .l-infobubble-wrapper.arw-right {
-      width: 0;
+      margin-right: 20px; } }
-      height: 0;
+  /* line 99, ../sass/helpers/_bubbles.scss */
-      border-top: 6.66667px solid transparent;
+  .l-infobubble-wrapper.arw-right .l-infobubble::before {
-      border-bottom: 6.66667px solid transparent;
+    left: 100%; }
-      border-left: 10px solid #ddd; }
+    @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 95, ../sass/helpers/_bubbles.scss */
+      /* line 99, ../sass/helpers/_bubbles.scss */
      .l-infobubble-wrapper.arw-right .l-infobubble::before {
        width: 0;
        height: 0;
        border-top: 6.66667px solid transparent;
        border-bottom: 6.66667px solid transparent;
        border-left: 10px solid #ddd; } }
  /* line 112, ../sass/helpers/_bubbles.scss */
  .l-infobubble-wrapper.arw-top .l-infobubble::before {
    top: 20px; }
-  /* line 101, ../sass/helpers/_bubbles.scss */
+  /* line 118, ../sass/helpers/_bubbles.scss */
  .l-infobubble-wrapper.arw-btm .l-infobubble::before {
    bottom: 20px; }
-  /* line 106, ../sass/helpers/_bubbles.scss */
+  /* line 123, ../sass/helpers/_bubbles.scss */
  .l-infobubble-wrapper.arw-down {
    margin-bottom: 10px; }
-    /* line 108, ../sass/helpers/_bubbles.scss */
+    /* line 125, ../sass/helpers/_bubbles.scss */
    .l-infobubble-wrapper.arw-down .l-infobubble::before {
      left: 50%;
      top: 100%;
@@ -4477,21 +4807,21 @@ input[type="text"] {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 7.5px solid #ddd; }
-  /* line 117, ../sass/helpers/_bubbles.scss */
+  /* line 134, ../sass/helpers/_bubbles.scss */
  .l-infobubble-wrapper .arw {
    z-index: 2; }
-  /* line 120, ../sass/helpers/_bubbles.scss */
+  /* line 137, ../sass/helpers/_bubbles.scss */
  .l-infobubble-wrapper.arw-up .arw.arw-down, .l-infobubble-wrapper.arw-down .arw.arw-up {
    display: none; }
-/* line 127, ../sass/helpers/_bubbles.scss */
+/* line 144, ../sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-up {
  width: 0;
  height: 0;
  border-left: 6.66667px solid transparent;
  border-right: 6.66667px solid transparent;
  border-bottom: 10px solid #4d4d4d; }
-/* line 130, ../sass/helpers/_bubbles.scss */
+/* line 147, ../sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-down {
  width: 0;
  height: 0;
@@ -4499,7 +4829,7 @@ input[type="text"] {
  border-right: 6.66667px solid transparent;
  border-top: 10px solid #4d4d4d; }
-/* line 134, ../sass/helpers/_bubbles.scss */
+/* line 151, ../sass/helpers/_bubbles.scss */
 .s-infobubble {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
@@ -4510,22 +4840,22 @@ input[type="text"] {
  background: #ddd;
  color: #666;
  font-size: 0.8rem; }
-  /* line 141, ../sass/helpers/_bubbles.scss */
+  /* line 158, ../sass/helpers/_bubbles.scss */
  .s-infobubble .title {
    color: #333333;
    font-weight: bold; }
-  /* line 146, ../sass/helpers/_bubbles.scss */
+  /* line 163, ../sass/helpers/_bubbles.scss */
  .s-infobubble tr td {
    border-top: 1px solid #c4c4c4;
    font-size: 0.9em; }
-  /* line 150, ../sass/helpers/_bubbles.scss */
+  /* line 167, ../sass/helpers/_bubbles.scss */
  .s-infobubble tr:first-child td {
    border-top: none; }
-  /* line 154, ../sass/helpers/_bubbles.scss */
+  /* line 171, ../sass/helpers/_bubbles.scss */
  .s-infobubble .value {
    color: #333333; }
-/* line 159, ../sass/helpers/_bubbles.scss */
+/* line 176, ../sass/helpers/_bubbles.scss */
 .s-thumbsbubble {
  background: #4d4d4d;
  color: #b3b3b3; }
@@ -4580,7 +4910,7 @@ input[type="text"] {
    right: 0;
    width: auto;
    height: 5px; }
-    /* line 186, ../sass/_mixins.scss */
+    /* line 187, ../sass/_mixins.scss */
    .split-layout.horizontal > .splitter:before {
      -moz-transition-property: "border-color";
      -o-transition-property: "border-color";
@@ -4604,7 +4934,7 @@ input[type="text"] {
      top: 2px;
      left: 5px;
      right: 5px; }
-    /* line 208, ../sass/_mixins.scss */
+    /* line 209, ../sass/_mixins.scss */
    .split-layout.horizontal > .splitter:not(.disabled):hover:before {
      -moz-transition-property: "border-color";
      -o-transition-property: "border-color";
@@ -4634,7 +4964,7 @@ input[type="text"] {
  bottom: 0;
  cursor: col-resize;
  width: 5px; }
-  /* line 186, ../sass/_mixins.scss */
+  /* line 187, ../sass/_mixins.scss */
  .split-layout.vertical > .splitter:before {
    -moz-transition-property: "border-color";
    -o-transition-property: "border-color";
@@ -4658,7 +4988,7 @@ input[type="text"] {
    left: 2px;
    bottom: 5px;
    top: 5px; }
-  /* line 208, ../sass/_mixins.scss */
+  /* line 209, ../sass/_mixins.scss */
  .split-layout.vertical > .splitter:not(.disabled):hover:before {
    -moz-transition-property: "border-color";
    -o-transition-property: "border-color";
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -48,6 +48,33 @@
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -78,6 +105,27 @@
 	}
 }
 */
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -103,7 +151,7 @@
 ul.tree {
  margin: 0;
  padding: 0; }
-  /* line 276, ../sass/_mixins.scss */
+  /* line 277, ../sass/_mixins.scss */
  ul.tree li {
    list-style-type: none;
    margin: 0;
@@ -133,10 +181,11 @@ ul.tree {
        margin-left: 5px;
        font-size: 0.75em;
        width: 10px; }
-        /* line 45, ../sass/tree/_tree.scss */
+        @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        ul.tree li span.tree-item .view-control:hover {
+          /* line 47, ../sass/tree/_tree.scss */
-          color: #ffc700; }
+          ul.tree li span.tree-item .view-control:hover {
-      /* line 50, ../sass/tree/_tree.scss */
+            color: #ffc700; } }
      /* line 53, ../sass/tree/_tree.scss */
      ul.tree li span.tree-item .label {
        display: block;
        overflow: hidden;
@@ -148,7 +197,7 @@ ul.tree {
        width: auto;
        height: auto;
        left: 15px; }
-        /* line 57, ../sass/tree/_tree.scss */
+        /* line 60, ../sass/tree/_tree.scss */
        ul.tree li span.tree-item .label .type-icon {
          overflow: false;
          position: absolute;
@@ -163,12 +212,12 @@ ul.tree {
          left: 5px;
          right: auto;
          width: 1em; }
-          /* line 65, ../sass/tree/_tree.scss */
+          /* line 68, ../sass/tree/_tree.scss */
          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
            text-shadow: black 0 1px 2px;
            position: absolute;
            z-index: 2; }
-          /* line 71, ../sass/tree/_tree.scss */
+          /* line 74, ../sass/tree/_tree.scss */
          ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
            color: #ff3c00;
            font-size: 8px;
@@ -177,7 +226,7 @@ ul.tree {
            width: 8px;
            top: 1px;
            right: -2px; }
-          /* line 77, ../sass/tree/_tree.scss */
+          /* line 80, ../sass/tree/_tree.scss */
          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
            color: #49dedb;
            font-size: 8px;
@@ -186,7 +235,7 @@ ul.tree {
            width: 8px;
            left: -3px;
            bottom: 5px; }
-        /* line 86, ../sass/tree/_tree.scss */
+        /* line 89, ../sass/tree/_tree.scss */
        ul.tree li span.tree-item .label .title-label {
          overflow: hidden;
          position: absolute;
@@ -201,51 +250,110 @@ ul.tree {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
-      /* line 97, ../sass/tree/_tree.scss */
+      /* line 100, ../sass/tree/_tree.scss */
      ul.tree li span.tree-item.loading {
        pointer-events: none; }
-        /* line 99, ../sass/tree/_tree.scss */
+        /* line 102, ../sass/tree/_tree.scss */
        ul.tree li span.tree-item.loading .label {
          opacity: 0.5; }
-          /* line 101, ../sass/tree/_tree.scss */
+          /* line 104, ../sass/tree/_tree.scss */
          ul.tree li span.tree-item.loading .label .title-label {
            font-style: italic; }
-        /* line 105, ../sass/tree/_tree.scss */
+        /* line 108, ../sass/tree/_tree.scss */
        ul.tree li span.tree-item.loading .wait-spinner {
          margin-left: 14px; }
-      /* line 110, ../sass/tree/_tree.scss */
+      /* line 113, ../sass/tree/_tree.scss */
      ul.tree li span.tree-item.selected {
        background: #005177;
        color: #fff; }
-        /* line 114, ../sass/tree/_tree.scss */
+        /* line 117, ../sass/tree/_tree.scss */
        ul.tree li span.tree-item.selected .view-control {
          color: #0099cc; }
-        /* line 117, ../sass/tree/_tree.scss */
+        /* line 120, ../sass/tree/_tree.scss */
        ul.tree li span.tree-item.selected .label .type-icon {
          color: #fff; }
-      /* line 123, ../sass/tree/_tree.scss */
+      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      ul.tree li span.tree-item:not(.selected):hover {
+        /* line 128, ../sass/tree/_tree.scss */
-        background: #404040;
+        ul.tree li span.tree-item:not(.selected):hover {
-        color: #cccccc; }
+          background: #404040;
-        /* line 126, ../sass/tree/_tree.scss */
+          color: #cccccc; }
-        ul.tree li span.tree-item:not(.selected):hover .context-trigger {
+          /* line 131, ../sass/tree/_tree.scss */
-          display: block; }
+          ul.tree li span.tree-item:not(.selected):hover .context-trigger {
-        /* line 129, ../sass/tree/_tree.scss */
+            display: block; }
-        ul.tree li span.tree-item:not(.selected):hover .icon {
+          /* line 134, ../sass/tree/_tree.scss */
-          color: #33ccff; }
+          ul.tree li span.tree-item:not(.selected):hover .icon {
-      /* line 135, ../sass/tree/_tree.scss */
+            color: #33ccff; } }
      /* line 141, ../sass/tree/_tree.scss */
      ul.tree li span.tree-item:not(.loading) {
        cursor: pointer; }
-      /* line 139, ../sass/tree/_tree.scss */
+      /* line 145, ../sass/tree/_tree.scss */
      ul.tree li span.tree-item .context-trigger {
        top: -1px;
        position: absolute;
        right: 3px; }
-        /* line 145, ../sass/tree/_tree.scss */
+        /* line 151, ../sass/tree/_tree.scss */
        ul.tree li span.tree-item .context-trigger .invoke-menu {
          font-size: 0.75em;
          height: 0.9rem;
          line-height: 0.9rem; }
-  /* line 154, ../sass/tree/_tree.scss */
+  /* line 160, ../sass/tree/_tree.scss */
  ul.tree ul.tree {
    margin-left: 15px; }
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 24, ../sass/mobile/_tree.scss */
  ul.tree {
    margin: 0;
    padding: 0; }
    /* line 277, ../sass/_mixins.scss */
    ul.tree li {
      list-style-type: none;
      margin: 0;
      padding: 0; }
    /* line 29, ../sass/mobile/_tree.scss */
    ul.tree li span.tree-item {
      height: 38px;
      line-height: 38px;
      padding-top: 3px;
      padding-bottom: 3px;
      margin-bottom: 0px; }
      /* line 36, ../sass/mobile/_tree.scss */
      ul.tree li span.tree-item .view-control {
        position: absolute;
        right: 13px;
        font-size: 1.8em;
        right: 0px;
        width: 35px;
        text-align: center; }
      /* line 45, ../sass/mobile/_tree.scss */
      ul.tree li span.tree-item .label {
        left: 3px;
        right: 45px;
        font-size: 1.2em; }
        /* line 54, ../sass/mobile/_tree.scss */
        ul.tree li span.tree-item .label .title-label {
          right: 16.9px; }
    /* line 63, ../sass/mobile/_tree.scss */
    ul.tree ul.tree {
      margin-left: 7px; } }
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -27,10 +27,14 @@
@import "compass/utilities";
@import "mixins";
@import "mobile/mixins";
@import "effects";
@import "global";
@import "fonts";
@import "user-environ/layout";
@import "mobile/layout";
@import "fixed-position";
@import "about";
@import "text";
@@ -45,6 +49,7 @@
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
@import "mobile/controls/menus";
@import "controls/time-controller";
@import "edit/editor";
@import "features/imagery";
@@ -59,6 +64,7 @@
@import "forms/filter";
@import "plots/plots-main";
@import "overlay/overlay";
@import "mobile/overlay/overlay";
@import "user-environ/frame";
@import "user-environ/top-bar";
@import "user-environ/bottom-bar";
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -19,6 +19,7 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
@mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
    overflow: $overflowHidden;
    position: absolute;
--- a/platform/commonUI/general/res/sass/forms.scss
+++ b/platform/commonUI/general/res/sass/forms.scss
@@ -26,8 +26,10 @@
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
@import "forms/mixins";
@import "mobile/mixins";
@import "forms/elems";
@import "forms/textarea";
@import "forms/text-input";
--- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss
+++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss
@@ -79,15 +79,32 @@
 		margin-left: $bubbleArwSize*2;
 		.l-infobubble::before {
 			right: 100%;
-			@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            // NOTE: [MOBILE] REMOVES TRIANGLE
            // Removes the triangle located on the info
            // bubble for phones only, for tablets and
            // desktops, triangle remains.
            @include desktopandtablet {
                @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
            }
 		}
 	}
 	&.arw-right {
-		margin-right: $bubbleArwSize*2;
+        // NOTE: [MOBILE] REMOVES RIGHT MARGIN
        // Removes right margin made for the 
        // triangle on mobile
        @include desktopandtablet {
 		  margin-right: $bubbleArwSize*2;
        }
 		.l-infobubble::before {
 			left: 100%;
-			@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            // NOTE: [MOBILE] REMOVES TRIANGLE
            // Removes the triangle located on the info
            // bubble for phones only, for tablets and
            // desktops, triangle remains.
            @include desktopandtablet {
                @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
            }
 		}
 	}
@@ -124,12 +141,12 @@
 //************************************************* LOOK AND FEEL
 .l-thumbsbubble-wrapper {
-	.arw-up {
+    .arw-up {
-		@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+        @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-	}
+    }
-	.arw-down {
+    .arw-down {
-		@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+        @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-	}
+    }
 }
 .s-infobubble {
 	$emFg: darken($colorInfoBubbleFg, 20%);
--- a/platform/commonUI/general/res/sass/items.scss
+++ b/platform/commonUI/general/res/sass/items.scss
@@ -26,5 +26,8 @@
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
-@import "items/item";
+@import "mobile/mixins";
@import "items/item";
@import "mobile/item";
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -0,0 +1,87 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobile-listIcon: 30px;
 $mobile-listRight: 10px;
 $phone-itemHeight: $ueBrowseGridItemLg/4;
 $tablet-itemHeight: $ueBrowseGridItemLg/3;
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobile-treeHeight: 38px;
 $mobile-startingTreeLeft: 3px;
 $mobile-runningTreeLeft: 7px;
 $mobile-treeRight: 13px;
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
 $phoMaxH: 740px;
 $tabMinW: 515px;
 $tabMaxW: 799px;
 $tabMinH: 741px;
 $tabMaxH: 1024px;
 $compMinW: 800px;
 $compMinH: 1025px;
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $screenPortrait: "screen and (orientation: portrait)";
 $screenLandscape: "screen and (orientation: landscape)";
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
 $mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 $phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
 $phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
 $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
 $tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}";
 $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 $tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
 $desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopLandscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
 $phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
 $phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
 $tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}";
 $tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
 $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
 $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $phoneRepSizePortrait: 19px;
 $phoneRepSizeLandscape: 66%;
 $tabletRepSizePortrait: 500px;
 $tabletRepSizeLandscape: 78%;
 $desktopMenuSize: 25%;
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -0,0 +1,130 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 // Sets the size of the items in the folder
 // representation. Instead of a grid,
 // a list is used.
 .items-holder {
    .item {
        &.grid-item {
            $dWid: $ueBrowseGridItemLg;
            $dHei: $ueBrowseGridItemLg;
            @include phoneandtablet {
                $dWid: 100%;
                .mobile-grid-nav {
                    top: 0px;
                    bottom: 0px;
                    right: 55px;
                }
                .mobile-info {
                    text-align: center;
                    width: 50px;
                    right: 0px;
                    left: auto;
                    font-size: 1.3em;
                }
                .bar {
                    &.bottom-bar.abs {
                        top: 0px;
                        height: auto;
                    }
                }
                .item-main {
                    .item-type {
                        font-size: $mobile-listIcon;
                        top: 0px;
                        left: 0px;
                        text-align: left;
                        height: auto
                    }
                    .item-open {
                       display: none;
                    }
                }
                .title, .details {
                    margin-left: $mobile-listIcon;
                }
            }
            @include phone {
                $dHei: $phone-itemHeight;
                width: $dWid;
                height: $dHei;
                .mobile-right {
                    top: 100%;
                }
                .mobile-info {
                    line-height: $phone-itemHeight * .5;
                }
                .item-main {
                    .item-type {
                        line-height: $phone-itemHeight * .8;
                    }
                }
                .title {
                    margin-right: $mobile-listRight;
                    line-height: $phone-itemHeight * .5;
                }
                .details {
                    margin-right: $mobile-listRight;
                    line-height: 0px;
                }                
            }
            @include tablet {
                $dHei: $tablet-itemHeight;
                width: $dWid;
                height: $dHei;
                .mobile-right {
                    top: 100%;
                }
                .mobile-info {
                    line-height: $tablet-itemHeight * .57;
                }
                .item-main {
                    .item-type {
                        font-size: $mobile-listIcon;
                        line-height: $tablet-itemHeight * .75;
                    }
                }
                .title {
                    margin-right: $mobile-listRight;
                    line-height: $tablet-itemHeight * .57;
                }
                .details {
                    margin-right: $mobile-listRight;
                    line-height: 0px;
                }
            }
            @include desktop {
                $dWid: $ueBrowseGridItemLg;
                $dHei: $ueBrowseGridItemLg;
                width: $dWid;
                height: $dHei; 
            }
        }
    }
 }
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -0,0 +1,218 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 // Wrapper of the entire 2 panes, only enacted on
 // phone and tablet. Also for the panes
 .browse-wrapper,
 .mobile-pane {
    @include phoneandtablet {
        position: absolute;
        left: 0; top: 0;
        right: 0;
        white-space: nowrap;
    }
 }
 // Default views of the panels
 // if in desktop browser
 .desktop-browse {
    @include desktop {
        min-width: 150px;
        max-width: 800px;
        width: $desktopMenuSize;   
    }   
 }
 // When the tree is hidden, these are the
 // classes used for the left menu and the
 // right representation.
 .browse-hidetree {
    // NOTE: DISABLED SELECTION
    // Selection disabled in both panes
    // causing cut/copy/paste menu to
    // not appear. Should me moved in
    // future to properly work
    @include phoneandtablet {
        @include user-select(none);
    }
    // Sets the left tree menu when the tree
    // is hidden. 
    .mobile-pane.left-menu {
        @include phoneandtablet {
            @include trans-prop-nice(opacity, .4s);
            opacity: 0;
            right: 100% !important;
            width: auto !important;
            overflow-y: hidden;
            overflow-x: hidden;       
        }
    }
    // Sets the right represenation when
    // the tree is hidden. 
    .mobile-pane.right-repr {       
        @include phoneandtablet {         
            @include slMenuTransitions;
            left: auto !important;
            width: 100% !important;
        }
    }    
 }
 .mobile-tree-holder {
    top: 30px;
 }
 // When the tree is shown, these are
 // the classes used for the left menu
 // and the right menu (for each device &
 // orientation combination, separate 
 // parameters are used)
 .browse-showtree {
    // NOTE: DISABLED SELECTION
    // Selection disabled in both panes
    // causing cut/copy/paste menu to
    // not appear. Should me moved in
    // future to properly work
    @include phoneandtablet {
        @include user-select(none);
    }
    // Sets the left tree menu when the tree
    // is shown.     
    .mobile-pane.left-menu {
        @include phoneandtablet {
            @include trans-prop-nice(opacity, .4s);
            opacity: 1;
            display: block !important;
            width: auto !important;
        }
        // On both phones and tablets, the amount of
        // space allowed for the right pane is specified
        @include phonePortrait {
            right: $phoneRepSizePortrait !important;
        }
        @include phoneLandscape {
            right: $phoneRepSizeLandscape !important;
        }
        @include tabletPortrait {
            right: $tabletRepSizePortrait !important;
        }
        @include tabletLandscape {
            right: $tabletRepSizeLandscape !important;
        }
    }
    // Sets the right represenation when
    // the tree is shown.     
    .mobile-pane.right-repr {
        @include phoneandtablet {
            @include slMenuTransitions;
            left: auto !important;
        }
        // On both phones and tablets, the width of
        // the right pane is specified
        @include phonePortrait {
            width: $phoneRepSizePortrait !important;
        }
        @include phoneLandscape {
            width: $phoneRepSizeLandscape !important;
        }
        @include tabletPortrait {
            width: $tabletRepSizePortrait !important;
        }
        @include tabletLandscape {
            width: $tabletRepSizeLandscape !important;
        }
    }
 }
 // Button position is set as absolute with transitions
 .button-pos {
    @include phoneandtablet {
        position: absolute;
    }
 }
 // Object header must be moved
 // over to make space for the 
 // hamburger icon
 .object-header {
    @include phoneandtablet {
        position: relative;
        left: 44px;        
        .label {
            .context-available {
                opacity: 1 !important;
            }
        }
    }
 }
 .desktop-hide {
    @include desktop {
        display: none;
    }
 }
 // Hides objects on phone and tablet
 .mobile-hide {
    @include phoneandtablet {
        display: none;
    }
 }
 .mobile-important-hide {
    @include phoneandtablet {
        display: none !important;
    }
 }
 .mobile-back-hide {
        pointer-events: none;
        @include trans-prop-nice(opacity, .4s);
        opacity: 0;
 }
 // Hides objects on phone and tablet
 .mobile-back-unhide {
        pointer-events: all;
        @include trans-prop-nice(opacity, .4s);
        opacity: 1;
 }
 // Hides objects only on the phone
 .phone-hide {
    @include phone {
        display: none;
    }
 }
 .tree-holder {
    @include phoneandtablet {
        overflow-x: hidden !important;
    }
 }
 .mobile-disable-select {
    @include phoneandtablet {
        @include user-select(none);
    }
 }
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -0,0 +1,107 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 // Phones in any orientation
@mixin phone {
    @media #{$phonePortrait},
           #{$phoneLandscape},
           #{$phoneLandscapeEmu} {
        @content
    }
 }
 //Phones in portrait orientation
@mixin phonePortrait {
    @media #{$phonePortrait} {
        @content
    }
 }
 // Phones in landscape orientation
@mixin phoneLandscape {
    @media #{$phoneLandscape},
           #{$phoneLandscapeEmu} {
        @content
    }
 }
 // Tablets in any orientation
@mixin tablet {
    @media #{$tabletPortrait},
           #{$tabletLandscape},
           #{$tabletLandscapeEmu} {
        @content
    }
 }
 // Tablets in portrait orientation
@mixin tabletPortrait {
    @media #{$tabletPortrait} {
        @content
    }
 }
 // Tablets in landscape orientation
@mixin tabletLandscape {
    @media #{$tabletLandscape},
           #{$tabletLandscapeEmu} {
        @content
    }
 }
 // Phones and tablets in any orientation
@mixin phoneandtablet {
    @media #{$phonePortrait},
           #{$phoneLandscape},
           #{$phoneLandscapeEmu},
           #{$tabletPortrait},
           #{$tabletLandscape},
           #{$tabletLandscapeEmu} {
        @content
    }
 }
 // Desktop monitors in any orientation
@mixin desktopandtablet {
    @media #{$tabletPortrait},
           #{$tabletLandscape},
           #{$tabletLandscapeEmu},
           #{$desktopPortrait},
           #{$desktopLandscape} {
        @content
    }
 }
 // Desktop monitors in any orientation
@mixin desktop {
    @media #{$desktopPortrait},
           #{$desktopLandscape} {
        @content
    }
 }
 // Transition used for the slide menu
@mixin slMenuTransitions {
    @include transition-duration(.35s);
    transition-timing-function: ease;
    backface-visibility: hidden;
 }
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -0,0 +1,67 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 ul.tree {
    // Only applies to phones and tablets
    @include phoneandtablet {
        @include menuUlReset();
        li {
            span.tree-item {
                // Adds some space to the top of each tree item
                height: $mobile-treeHeight;
                line-height: $mobile-treeHeight;
                padding-top: $interiorMarginSm;
                padding-bottom: $interiorMarginSm;
                margin-bottom: 0px;
                .view-control {
                    position: absolute;
                    right: $mobile-treeRight;
                    font-size: 1.8em;
                    right: 0px;
                    width: 35px;
                    text-align: center;
                }                   
                .label {
                    // Designates the starting left margin
                    // (indentation) of 'My Items'
                    // Also adds right space for selection button
                    left: $mobile-startingTreeLeft;
                    right: 45px;
                    font-size: 1.2em;
                    // Allows tree item name to stop prior
                    // to the arrow
                    .title-label {
                        right: $mobile-treeRight * 1.3;
                    }
                }             
            }
        }
        // Sets the margin on the left, which causes the
        // running indentation after each folder is made
        ul.tree {
            margin-left: $mobile-runningTreeLeft;
        }
    }
 }
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -0,0 +1,34 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 // Mobile hamburger icon is
 // sized according to the device
 .mobile-menu-icon {
    display: inline-block;
    @include phoneandtablet {
        font-size: 21px;
        padding-top: $imageThumbPad;
    }
    @include desktop {
        display: none;
    }       
 }
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -0,0 +1,11 @@
 .overlay {
    @include phoneandtablet {
        $m: 0;
        // Removes curved edges on the dialog box
        // and makes it take up fullscreen
        >.holder {
          @include border-radius($m);
          top: $m; right: $m; bottom: $m; left: $m;
        }
    }
 }
--- a/platform/commonUI/general/res/sass/theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/theme-espresso.scss
@@ -20,5 +20,6 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
@import "constants";
@import "mobile/constants";
@import "themes/theme-espresso";
@import "main";
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -26,5 +26,8 @@
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
-@import "tree/tree";
+@import "mobile/mixins";
@import "tree/tree";
@import "mobile/tree";
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -42,9 +42,12 @@ ul.tree {
 				font-size: 0.75em;
 				width: $treeVCW;
 				$runningItemW: $interiorMargin + $treeVCW;
-				&:hover {
+                // NOTE: [Mobile] Removed Hover on Mobile
-					color: $colorItemTreeVCHover;
+                @include desktop {
-				}
+                    &:hover {
                        color: $colorItemTreeVCHover;
                    }
                }
 			}
 			.label {
@@ -120,16 +123,19 @@ ul.tree {
 			}
 			&:not(.selected) {
-				&:hover {
+                // NOTE: [Mobile] Removed Hover on Mobile
-					background: lighten($colorBodyBg, 5%);
+                @include desktop {
-					color: lighten($colorBodyFg, 20%);
+                    &:hover {
-					.context-trigger {
+                        background: lighten($colorBodyBg, 5%);
-						display: block;
+                        color: lighten($colorBodyFg, 20%);
-					}
+                        .context-trigger {
-					.icon {
+                            display: block;
-						color: $colorItemTreeIconHover;
+                        }
-					}
+                        .icon {
-				}
+                            color: $colorItemTreeIconHover;
                        }
                    }
                }
 			}
 			&:not(.loading) {
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -265,6 +265,7 @@
 	&.vertical {
 		// Slides left and right
 		>.pane {
 //            @include test();
 			margin-left: $interiorMargin;
 			>.holder {
 				left: 0;
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -19,7 +19,7 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar' ng-controller="BottomBarController as bar">
+<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
    <div id='status' class='status-holder'>
        <mct-include ng-repeat="indicator in bar.getIndicators()"
                     ng-model="indicator.ngModel"
--- a/platform/commonUI/general/res/templates/menu/context-menu.html
+++ b/platform/commonUI/general/res/templates/menu/context-menu.html
@@ -19,7 +19,7 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class="menu-element context-menu-wrapper" ng-controller="ContextMenuController">
+<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
    <div class="menu context-menu dropdown">
        <ul>
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -25,20 +25,24 @@
 	        class="tree-item menus-to-left"
 	        ng-class="{selected: treeNode.isSelected()}"
 	        >
-            <span
+            <mct-representation                                
-	            class='ui-symbol view-control'
+                key="'label'"
 				ng-click="toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined"
 				>
                {{toggle.isActive() ? "v" : ">"}}
            </span>
            <mct-representation
 				key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="ngModel.selectedObject = domainObject"
+				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
                          toggle.toggle(); treeNode.trackExpansion()"
 				>
            </mct-representation>
            <span
 	            class='ui-symbol view-control'
                mct-object="domainObject"
                ng-model="ngModel"
 				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
                          toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined || treeNode.checkMobile()"
 				>
                {{treeNode.checkMobile() ? "}" : toggle.isActive() ? "v" : ">"}}
            </span>
        </span>
        <span
 			class="tree-item-subtree"
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -50,7 +50,7 @@ define(
         * expand-to-show-navigated-object behavior.)
         * @constructor
         */
-        function TreeNodeController($scope, $timeout, $rootScope) {
+        function TreeNodeController($scope, $timeout, agentService) {
            var selectedObject = ($scope.ngModel || {}).selectedObject,
                isSelected = false,
                hasBeenExpanded = false;
@@ -86,7 +86,11 @@ define(
                    $timeout(function () { hasBeenExpanded = true; }, 0);
                }
            }
-
+            
            function checkMobile() {
                return agentService.isMobile(navigator.userAgent);
            }
            // Consider the currently-navigated object and update
            // parameters which support display.
            function checkSelection() {
@@ -150,6 +154,9 @@ define(
                 * lazy loading of the node's subtree.
                 */
                trackExpansion: trackExpansion,
                checkMobile: checkMobile,
                /**
                 * Check if this not has ever been expanded.
                 * @returns true if it has been expanded
--- a/platform/commonUI/general/src/services/AgentService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -0,0 +1,102 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*global define,Promise*/
 /**
 * Module defining AgentService.
 */
 define(
    [],
    function () {
        "use strict";
        /**
         * The query service handles calls for browser and userAgent
         * info using a comparison between the userAgent and key
         * device names
         */
        function AgentService($window) {
            // Gets the UA name if it is one of the following.
            // If it is not (a desktop for example) nothing is
            // returned instead
            function getDeviceUA(ua) {
                return ua.match(/iPad|iPhone|Android/i) ?
                        ua.match(/iPad|iPhone|Android/i) : "";
            }
            // Checks if gotten device is mobile,
            // Mobile is defined as a phone or tablet
            function isMobile(ua) {
                if (getDeviceUA(ua)) {
                    return true;
                } else {
                    return false;
                }
            }
            // Checks if device is phone,
            // phone is designated as only an
            // iPhone device
            function isPhone(ua) {
                if (getDeviceUA(ua)[0] === "iPhone") {
                    return true;
                } else {
                    return false;
                }
            }
            // Returns the orientation of the device based on the
            // device's window dimensions
            function getOrientation() {
                if ($window.outerWidth > $window.outerHeight) {
                    return "landscape";
                } else if ($window.outerWidth < $window.outerHeight) {
                    return "portrait";
                }
            }
            return {
                /**
                 * Returns the orientation for the user's device
                 */
                getOrientation: getOrientation,
                /**
                 * Returns the a boolean checking if the user is
                 * on a mobile or non-mobile device. (mobile: true,
                 * non-mobile: false)
                 */
                isMobile: isMobile,
                /**
                 * Returns the a boolean checking if the user is on
                 * a phone device. (phone: true, non-phone: false)
                 */
                isPhone: isPhone
            };
        }
        return AgentService;
    }
 );
--- a/platform/commonUI/general/src/services/UrlService.js
+++ b/platform/commonUI/general/src/services/UrlService.js
@@ -64,7 +64,7 @@ define(
                        "index.html#" + urlForLocation(mode, domainObject) + viewPath;
                return newTabPath;
            }
-            
+             
            return {
               /**
                 * Returns the Url path for a specific domain object
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -29,6 +29,7 @@ define(
        describe("The tree node controller", function () {
            var mockScope,
                mockTimeout,
                mockAgentService,
                controller;
            function TestObject(id, context) {
@@ -43,7 +44,8 @@ define(
            beforeEach(function () {
                mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
                mockTimeout = jasmine.createSpy("$timeout");
-                controller = new TreeNodeController(mockScope, mockTimeout);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                controller = new TreeNodeController(mockScope, mockTimeout, mockAgentService);
            });
            it("allows tracking of expansion state", function () {
@@ -183,6 +185,12 @@ define(
                expect(controller.isSelected()).toBeFalsy();
            });
            it("check if tree node is in a mobile device", function () {
                if (controller) {
                    controller.checkMobile();
                }
            });
        });
    }
 );
--- a/platform/commonUI/general/test/services/AgentServiceSpec.js
+++ b/platform/commonUI/general/test/services/AgentServiceSpec.js
@@ -0,0 +1,74 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
 /**
 * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
 */
 define(
    ["../../src/services/AgentService"],
    function (AgentService) {
        "use strict";
        describe("The url service", function () {
            var agentService,
                mockWindow,
                mockNavigator;
            beforeEach(function () {
                // Creates a mockLocation, used to 
                // do the view search
                mockWindow = jasmine.createSpyObj(
                    "$window",
                    [ "outerWidth", "outerHeight" ]
                );
                mockNavigator = jasmine.createSpyObj(
                    "navigator",
                    [ "userAgent" ]
                );
                agentService = new AgentService(mockWindow);
            });
            it("get current device user agent", function () {
                mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
                agentService.isMobile(mockNavigator.userAgent);
                agentService.isPhone(mockNavigator.userAgent);
                mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
                agentService.isMobile(mockNavigator.userAgent);
                mockNavigator.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
                agentService.isPhone(mockNavigator.userAgent);
            });
            it("get orientation of the current device", function () {
                mockWindow.outerWidth = 768;
                mockWindow.outerHeight = 1024;
                agentService.getOrientation();
                mockWindow.outerWidth = 1024;
                mockWindow.outerHeight = 768;
                agentService.getOrientation();
            });
        });
    }
 );
--- a/platform/commonUI/general/test/services/UrlServiceSpec.js
+++ b/platform/commonUI/general/test/services/UrlServiceSpec.js
@@ -91,7 +91,7 @@ define(
            it("get url for a new tab using domainObject and mode", function () {
                urlService.urlForNewTab(mockMode, mockDomainObject);
-            });            
+            });
        });
    }
 );
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -13,6 +13,7 @@
    "directives/MCTDrag",
    "directives/MCTResize",
    "directives/MCTScroll",
    "services/AgentService",
    "services/UrlService",
    "StyleSheetLoader"
 ]
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -24,9 +24,19 @@
                "implementation": "gestures/InfoGesture.js",
                "depends": [
                    "$timeout",
                    "agentService",
                    "infoService",
                    "INFO_HOVER_DELAY"
                ]
            },
            {
                "key": "infobutton",
                "implementation": "gestures/InfoButtonGesture.js",
                "depends": [
                    "$document",
                    "agentService",
                    "infoService"
                ]
            }
        ],
        "services": [
@@ -37,15 +47,23 @@
                    "$compile",
                    "$document",
                    "$window",
-                    "$rootScope"
+                    "$rootScope",
                    "agentService"
                ]
            }
-        ],
+        ],  
        "constants": [
            {
                "key": "INFO_HOVER_DELAY",
                "value": 2000
            }
        ],
        "representations": [
            {
                "key": "info-button",
                "templateUrl": "templates/info-button.html",
                "gestures": [ "infobutton" ]
            }
        ]
    }
 }
--- a/platform/commonUI/inspect/res/templates/info-button.html
+++ b/platform/commonUI/inspect/res/templates/info-button.html
@@ -0,0 +1,26 @@
 <!--
 Open MCT Web, Copyright (c) 2014-2015, United States Government
 as represented by the Administrator of the National Aeronautics and Space
 Administration. All rights reserved.
 Open MCT Web is licensed under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0.
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations
 under the License.
 Open MCT Web includes source code licensed under additional open source
 licenses. See the Open Source Licenses file (LICENSES.md) included with
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
 <!--The icon for the info button appearing in a grid item (list in folder)-->
 <div>
    <a class='ui-symbol icon mobile-info'>i</a>
 </div>
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -0,0 +1,123 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*global define*/
 define(
    [],
    function () {
        "use strict";
        /**
         * The `info` gesture displays domain object metadata in a
         * bubble on hover.
         *
         * @constructor
         * @param $document Angular's `$document`
         * @param {InfoService} infoService a service which shows info bubbles
         * @param element jqLite-wrapped DOM element
         * @param {DomainObject} domainObject the domain object for which to
         *        show information
         */
        function InfoGestureButton($document, agentService, infoService, element, domainObject) {
            var dismissBubble,
                touchPosition,
                scopeOff,
                body = $document.find('body');
            function trackPosition(event) {
                // Record touch position, so bubble can be shown at latest
                // touch position, also offset by 22px to left (accounts for
                // a finger-sized touch on the info button)
                touchPosition = [ event.clientX - 22, event.clientY ];
            }
            // Hides the bubble and detaches the
            // body hidebubble listener
            function hideBubble() {
                // If a bubble is showing, dismiss it
                if (dismissBubble) {
                    dismissBubble();
                    dismissBubble = undefined;
                }
                // Detaches body touch listener
                body.off('touchstart', hideBubble);
            }
            // Displays the bubble by tracking position of
            // touch, using infoService to display the bubble,
            // and then on any body touch the bubble is dismissed
            function showBubble(event) {
                trackPosition(event);
                // Show the bubble, but on any touchstart on the
                // body (anywhere) call hidebubble
                dismissBubble = infoService.display(
                    "info-table",
                    domainObject.getModel().name,
                    domainObject.useCapability('metadata'),
                    touchPosition
                );
                // On any touch on the body, default body touches/events
                // are prevented, the bubble is dismissed, and the touchstart
                // body event is unbound, reallowing gestures
                body.on('touchstart', function (event) {
                    event.preventDefault();
                    hideBubble();
                    body.unbind('touchstart');
                });
            }
            // Checks if you are on a mobile device, if the device is
            // mobile (agentService.isMobile() = true), then
            // the a click on something (info button) brings up 
            // the bubble
            if (agentService.isMobile(navigator.userAgent)) {
                element.on('click', showBubble);
            }
            // Also make sure we dismiss bubble if representation is destroyed
            // before the mouse actually leaves it
            scopeOff = element.scope().$on('$destroy', hideBubble);
            return {
                /**
                 * Detach any event handlers associated with this gesture.
                 * @memberof InfoGesture
                 * @method
                 */
                destroy: function () {
                    // Dismiss any active bubble...
                    hideBubble();
                    // ...and detach listeners
                    element.off('click', showBubble);
                    scopeOff();
                }
            };
        }
        return InfoGestureButton;
    }
 );
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -38,7 +38,7 @@ define(
         * @param {DomainObject} domainObject the domain object for which to
         *        show information
         */
-        function InfoGesture($timeout, infoService, DELAY, element, domainObject) {
+        function InfoGesture($timeout, agentService, infoService, DELAY, element, domainObject) {
            var dismissBubble,
                pendingBubble,
                mousePosition,
@@ -71,7 +71,7 @@ define(
            function showBubble(event) {
                trackPosition(event);
-
+                
                // Also need to track position during hover
                element.on('mousemove', trackPosition);
@@ -85,14 +85,20 @@ define(
                        mousePosition
                    );
                    element.off('mousemove', trackPosition);
                    pendingBubble = undefined;
                }, DELAY);
                element.on('mouseleave', hideBubble);
            }
-
+            
-            // Show bubble (on a timeout) on mouse over
+            // Checks if you are on a mobile device, if the device is
-            element.on('mouseenter', showBubble);
+            // not mobile (agentService.isMobile() = false), then
            // the pendingBubble and therefore hovering is allowed
            if (!agentService.isMobile(navigator.userAgent)) {
                // Show bubble (on a timeout) on mouse over
                element.on('mouseenter', showBubble);
            }
            // Also make sure we dismiss bubble if representation is destroyed
            // before the mouse actually leaves it
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -33,7 +33,7 @@ define(
         * Displays informative content ("info bubbles") for the user.
         * @constructor
         */
-        function InfoService($compile, $document, $window, $rootScope) {
+        function InfoService($compile, $document, $window, $rootScope, agentService) {
            function display(templateKey, title, content, position) {
                var body = $document.find('body'),
@@ -54,22 +54,33 @@ define(
                // Create the context menu
                bubble = $compile(BUBBLE_TEMPLATE)(scope);
-                // Position the bubble
+                // Position the bubble:
                // Phone: On a phone the bubble is specifically positioned
                //  so that it takes up the width of the screen.
                // Tablet/Desktop: On other devices with larger screens, the
                //  info bubble positioned as normal (with triangle pointing 
                //  to where clicked or pressed)
                bubble.css('position', 'absolute');
-                if (goLeft) {
+                if (agentService.isPhone(navigator.userAgent)) {
-                    bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
+                    bubble.css('right', '0px');
                    bubble.css('left', '0px');
                    bubble.css('top', 'auto');
                    bubble.css('bottom', '25px');
                } else {
-                    bubble.css('left', position[0] + OFFSET[0] + 'px');
+                    if (goLeft) {
                        bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
                    } else {
                        bubble.css('left', position[0] + OFFSET[0] + 'px');
                    }
                    if (goUp) {
                        bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
                    } else {
                        bubble.css('top', position[1] + OFFSET[1] + 'px');
                    }
                }
                if (goUp) {
                    bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
                } else {
                    bubble.css('top', position[1] + OFFSET[1] + 'px');
                }
                // Add the menu to the body
                body.append(bubble);
-
+                
                // Return a function to dismiss the bubble
                return function () { bubble.remove(); };
            }
--- a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
@@ -0,0 +1,145 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
 define(
    ['../../src/gestures/InfoButtonGesture'],
    function (InfoButtonGesture) {
        "use strict";
        describe("The info button gesture", function () {
            var mockTimeout,
                mockDocument,
                mockBody,
                mockAgentService,
                mockInfoService,
                mockElement,
                mockDomainObject,
                mockEvent,
                mockScope,
                mockOff,
                testMetadata,
                mockPromise,
                mockHide,
                gesture,
                fireGesture,
                fireDismissGesture;
            beforeEach(function () {
                mockTimeout = jasmine.createSpy('$timeout');
                mockDocument = jasmine.createSpyObj('$document', ['find']);
                mockBody = jasmine.createSpyObj('body', [ 'on', 'off', 'scope', 'css', 'unbind' ]);
                mockDocument.find.andReturn(mockBody);
                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
                mockInfoService = jasmine.createSpyObj(
                    'infoService',
                    [ 'display' ]
                );
                mockElement = jasmine.createSpyObj(
                    'element',
                    [ 'on', 'off', 'scope', 'css' ]
                );
                mockDomainObject = jasmine.createSpyObj(
                    'domainObject',
                    [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
                );
                mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
                mockEvent.pageX = 0;
                mockEvent.pageY = 0;
                mockScope = jasmine.createSpyObj('$scope', [ '$on' ]);
                mockOff = jasmine.createSpy('$off');
                testMetadata = [ { name: "Test name", value: "Test value" } ];
                mockHide = jasmine.createSpy('hide');
                mockDomainObject.getModel.andReturn({ name: "Test Object" });
                mockDomainObject.useCapability.andCallFake(function (c) {
                    return (c === 'metadata') ? testMetadata : undefined;
                });
                mockElement.scope.andReturn(mockScope);
                mockScope.$on.andReturn(mockOff);
                mockInfoService.display.andReturn(mockHide);
                mockAgentService.isMobile.andReturn(true);
                gesture = new InfoButtonGesture(
                    mockDocument,
                    mockAgentService,
                    mockInfoService,
                    mockElement,
                    mockDomainObject
                );
                fireGesture =  mockElement.on.mostRecentCall.args[1];
            });
            it("expect click on the representation", function () {
                // Fires a click call on element and then
                // expects the click to have happened
                fireGesture(mockEvent);
                expect(mockElement.on).toHaveBeenCalledWith(
                    "click",
                    jasmine.any(Function)
                );
            });
            it("expect click then dismiss on the representation", function () {
                // Fire the click and then expect the click
                fireGesture(mockEvent);
                expect(mockElement.on).toHaveBeenCalledWith(
                    "click",
                    jasmine.any(Function)
                );
                // Get the touch start on the body
                // and fire the dismiss gesture
                fireDismissGesture =  mockBody.on.mostRecentCall.args[1];
                fireDismissGesture(mockEvent);
                // Expect Body to have been touched, event.preventDefault()
                // to be called, then the mockBody listener to be detached
                // lastly unbind the touchstart used to dismiss so other 
                // events can be called
                expect(mockBody.on).toHaveBeenCalledWith(
                    "touchstart",
                    jasmine.any(Function)
                );
                expect(mockEvent.preventDefault).toHaveBeenCalled();
                expect(mockBody.off).toHaveBeenCalledWith(
                    "touchstart",
                    jasmine.any(Function)
                );
                expect(mockBody.unbind).toHaveBeenCalledWith(
                    'touchstart'
                );
            });
            it("detaches a callback for info bubble events when destroyed", function () {
                expect(mockElement.off).not.toHaveBeenCalled();
                gesture.destroy();
                expect(mockElement.off).toHaveBeenCalledWith(
                    "click",
                    jasmine.any(Function)
                );
            });
        });
    }
 );
--- a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
@@ -28,6 +28,7 @@ define(
        describe("The info gesture", function () {
            var mockTimeout,
                mockAgentService,
                mockInfoService,
                testDelay = 12321,
                mockElement,
@@ -50,6 +51,7 @@ define(
            beforeEach(function () {
                mockTimeout = jasmine.createSpy('$timeout');
                mockTimeout.cancel = jasmine.createSpy('cancel');
                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
                mockInfoService = jasmine.createSpyObj(
                    'infoService',
                    [ 'display' ]
@@ -79,6 +81,7 @@ define(
                gesture = new InfoGesture(
                    mockTimeout,
                    mockAgentService,
                    mockInfoService,
                    testDelay,
                    mockElement,
--- a/platform/commonUI/inspect/test/services/InfoServiceSpec.js
+++ b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
@@ -31,6 +31,7 @@ define(
                mockDocument,
                testWindow,
                mockRootScope,
                mockAgentService,
                mockCompiledTemplate,
                testScope,
                mockBody,
@@ -42,6 +43,7 @@ define(
                mockDocument = jasmine.createSpyObj('$document', ['find']);
                testWindow = { innerWidth: 1000, innerHeight: 100 };
                mockRootScope = jasmine.createSpyObj('$rootScope', ['$new']);
                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
                mockCompiledTemplate = jasmine.createSpy('template');
                testScope = {};
                mockBody = jasmine.createSpyObj('body', ['append']);
@@ -58,7 +60,8 @@ define(
                    mockCompile,
                    mockDocument,
                    testWindow,
-                    mockRootScope
+                    mockRootScope,
                    mockAgentService
                );
            });
@@ -124,6 +127,18 @@ define(
                        (40 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
                    );
                });
                it("when on phone device, positioning is always on bottom", function () {
                    mockAgentService.isPhone.andReturn(true);
                    service = new InfoService(
                        mockCompile,
                        mockDocument,
                        testWindow,
                        mockRootScope,
                        mockAgentService
                    );
                    service.display('', '', {}, [0, 0]);
                });
            });
        });
--- a/platform/commonUI/inspect/test/suite.json
+++ b/platform/commonUI/inspect/test/suite.json
@@ -1,4 +1,5 @@
 [
    "gestures/InfoGesture",
    "gestures/InfoButtonGesture",
    "services/InfoService"
 ]
--- a/platform/features/plot-reborn/README.md
+++ b/platform/features/plot-reborn/README.md
@@ -0,0 +1,57 @@
 # plot-reborn
 The `plot-reborn` bundle provides directives for composing plot based views.
 It also exposes domain objects for plotting telemetry points.
 ## Views
 * OverlayPlot: can be used on any domain object that has or delegates a 
    telemetry capability.
 * StackedPlot: can be used on any domain object that delegates telemetry or 
    delegates composition of elements that have telemetry.
 ## Directives
 * `mct-chart`: an element that takes `series`, `viewport`, and
    `rectangles` and plots the data.  Adding points to a series after it has 
    been initially plotted can be done either by recreating the series object
    or by broadcasting "series:data:add" with arguments `event`, `seriesIndex`, 
    `points`.  This will append `points` to the `series` at index `seriesIndex`.
 * `mct-plot`: A directive that wraps a mct-chart and handles user interactions
    with that plot.  It emits events that a parent view can use for coordinating
    functionality:
    * emits a `user:viewport:change:start` event when the viewport begins being
        changed by a user, to allow any parent controller to prevent viewport 
        modifications while the user is interacting with the plot.
    * emits a `user:viewport:change:end` event when the user has finished
        changing the viewport.  This allows a controller on a parent scope to
        track viewport history and provide any necessary functionality
        around viewport changes, e.g. viewport history.
 * `mct-overlay-plot`: A directive that takes `domainObject` and plots either a
    single series of data (in the case of a single telemetry object) or multiple
    series of data (in the case of a object which delegates telemetry).
 ## Controllers
 NOTE: this section not accurate.  Essentially, these controllers format data for
 the mct-chart directive.  They also handle live viewport updating, as well as
 managing all transformations from domain objects to views.
 * StackPlotController: Uses the composition capability of a StackPlot domain 
    object to retrieve SubPlots and render them with individual PlotControllers.
 * PlotController: Uses either a domain object that delegates telemetry or a 
    domain object with telemetry to and feeds that data to the mct-chart 
    directive.
 ## TODOS:
 * [ ] Re-implement history stack.
 * [ ] Re-implement plot pallette.
 * [ ] Re-implement stacked plot viewport synchronization (share viewport object)
 * [ ] Other things?
 * [ ] Handle edge cases with marquee zoom/panning.
 * [ ] Tidy code.
--- a/platform/features/plot-reborn/bundle.json
+++ b/platform/features/plot-reborn/bundle.json
@@ -0,0 +1,101 @@
 {
    "name": "Plot view for telemetry, reborn",
    "extensions": {
        "views": [
            {
                "name": "Plot",
                "key": "plot-single",
                "glyph": "6",
                "templateUrl": "templates/plot.html",
                "needs": ["telemetry"],
                "uses": ["composition"],
                "delegation": false
            },
            {
                "name": "Overlay Plot",
                "key": "plot",
                "glyph": "6",
                "templateUrl": "templates/plot.html",
                "needs": ["telemetry", "composition"],
                "uses": ["composition"],
                "delegation": true
            },
            {
                "name": "Stacked Plot",
                "key": "stackedPlot",
                "glyph": "6",
                "templateUrl": "templates/stacked-plot.html",
                "needs": ["composition", "delegation"],
                "uses": ["composition"],
                "gestures": [ "drop" ],
                "delegation": true
            }
        ],
        "directives": [
            {
                "key": "mctChart",
                "implementation": "directives/MCTChart.js",
                "depends": [ "$interval", "$log", "agentService" ]
            },
            {
                "key": "mctPlot",
                "implementation": "directives/MCTPlot.js",
                "depends": [],
                "templateUrl": "templates/mct-plot.html"
            },
            {
                "key": "mctOverlayPlot",
                "implementation": "directives/MCTOverlayPlot.js",
                "depends": []
            },
            {
                "key": "mctPinch",
                "implementation": "directives/MCTPinch.js",
                "depends": [ "agentService" ]
            }
        ],
        "controllers": [
            {
                "key": "PlotController",
                "implementation": "controllers/PlotController.js",
                "depends": [ "$scope", "colorService", "agentService"]
            },
            {
                "key": "StackedPlotController",
                "implementation": "controllers/StackedPlotController.js",
                "depends": [ "$scope" ]
            }
        ],
        "types": [
            {
                "key": "telemetry.plot.overlay",
                "name": "Overlay Plot",
                "glyph": "t",
                "description": "A plot containing one or more telemetry elements.",
                "delegates": ["telemetry"],
                "features": "creation",
                "contains": [{"has": "telemetry"}],
                "model": {"composition": []},
                "properties": []
            },
            {
                "key": "telemetry.plot.stacked",
                "name": "Stacked Plot",
                "glyph": "t",
                "description": "A stacked plot of overlay plots.",
                "delegates": ["delegation"],
                "features": "creation",
                "contains": ["telemetry.plot.overlay", {"has": "telemetry"}],
                "model": {"composition": []},
                "properties": []
            }
        ],
        "services": [
            {
                "key": "colorService",
                "implementation": "services/ColorService.js",
                "description": "Provides objects for working with colors."
            }
        ]
    }
 }
--- a/platform/features/plot-reborn/res/templates/mct-plot.html
+++ b/platform/features/plot-reborn/res/templates/mct-plot.html
@@ -0,0 +1,78 @@
 <!--TODO: Don't require plotcontroller here. -->
 <div class="gl-plot">
    <div class="gl-plot-legend">
        <span class="plot-legend-item"
              ng-repeat="series in series track by $index">
            <span class="plot-color-swatch"
                  ng-style="{ 'background-color': series.color.asHexString() }">
            </span>
            <span class="title-label">{{ series.name }}</span>
        </span>
    </div>
    <div class="gl-plot-coords"
         ng-if="mouseCoordinates">
        {{ displayableDomain(mouseCoordinates.positionAsPlotPoint.domain)  }},
        {{ displayableRange(mouseCoordinates.positionAsPlotPoint.range) }}
    </div>
    <div class="gl-plot-axis-area gl-plot-y">
        <div class="gl-plot-label gl-plot-y-label">
            {{ axes.range.label}}
        </div>
        <div ng-repeat="tick in axes.range.ticks track by $index"
             class="gl-plot-tick gl-plot-y-tick-label"
             ng-style="{ top: (100 * $index / (axes.range.ticks.length - 1)) + '%' }"
             style="margin-top: -0.50em;">
            {{ displayableRange(tick) }}
        </div>
    </div>
    <div class="gl-plot-display-area">
        <div class="gl-plot-hash hash-v"
             ng-repeat="tick in axes.domain.ticks track by $index"
             ng-style="{ left: (100 * $index / (axes.domain.ticks.length - 1)) + '%', height: '100%' }"
             ng-show="$index > 0 && $index < (axes.domain.ticks.length - 1)">
            <!--TODO: Show/hide using CSS? -->
        </div>
        <div class="gl-plot-hash hash-h"
             ng-repeat="tick in axes.range.ticks track by $index"
             ng-style="{ bottom: (100 * $index / (axes.range.ticks.length - 1)) + '%', width: '100%' }"
             ng-show="$index > 0 && $index < (axes.range.ticks.length - 1)">
             <!--TODO: Show/hide using CSS? -->
        </div>
 <!--        APPLY MCTPinch here-->
        <mct-chart series="series"
                   viewport="viewport"
                   rectangles="rectangles"
                   ng-mousemove="plot.trackMousePosition($event)"
                   ng-mouseleave="plot.untrackMousePosition()"
                   ng-mousedown="plot.startMarquee()"
                   ng-mouseup="plot.endMarquee()"
                   mct-pinch>
        </mct-chart>
        <span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
        </span>
    </div>
    <div class="gl-plot-axis-area gl-plot-x">
        <div ng-repeat="tick in axes.domain.ticks track by $index"
             class="gl-plot-tick gl-plot-x-tick-label"
             ng-show="$index > 0 && $index < (axes.domain.ticks.length - 1)"
             ng-style="{ left: (100 * $index / (axes.domain.ticks.length - 1)) + '%' }">
            {{ displayableDomain(tick) }}
        </div>
        <div class="gl-plot-label gl-plot-x-label">
            {{ axes.domain.label }}
        </div>
    </div>
 </div>
--- a/platform/features/plot-reborn/res/templates/plot.html
+++ b/platform/features/plot-reborn/res/templates/plot.html
@@ -0,0 +1,9 @@
 <span ng-controller="PlotController as controller">
    <mct-plot series="series"
              viewport="viewport"
              rectangles="rectangles"
              axes="axes"
              displayable-range="displayableRange"
              displayable-domain="displayableDomain">
    </mct-plot>
 </span>
--- a/platform/features/plot-reborn/res/templates/stacked-plot.html
+++ b/platform/features/plot-reborn/res/templates/stacked-plot.html
@@ -0,0 +1,8 @@
 <span ng-controller="StackedPlotController as stackedPlot">
    <div class="gl-plot"
        ng-style="{ height: 100 / telemetryObjects.length + '%'}"
        ng-repeat="telemetryObject in telemetryObjects">
        <mct-overlay-plot domain-object="telemetryObject"></mct-overlay-plot>
    </div>
 </span>
--- a/platform/features/plot-reborn/src/controllers/PlotController.js
+++ b/platform/features/plot-reborn/src/controllers/PlotController.js
@@ -0,0 +1,239 @@
 /*global define*/
 define(
    [],
    function () {
        "use strict";
        // TODO: Store this in more accessible locations / retrieve from
        // domainObject metadata.
        var DOMAIN_INTERVAL = 2 * 60 * 1000; // Two minutes.
        function PlotController($scope, colorService, agentService) {
            var plotHistory = [],
                isLive = true,
                maxDomain = +new Date(),
                subscriptions = [],
                palette = new colorService.ColorPalette();
            function setToDefaultViewport() {
                // TODO: We shouldn't set the viewport until we have received data or something has given us a reasonable viewport.
                $scope.viewport = {
                    topLeft: {
                        domain: maxDomain - DOMAIN_INTERVAL,
                        range: 1
                    },
                    bottomRight: {
                        domain: maxDomain,
                        range: -1
                    }
                };
            }
            setToDefaultViewport();
            $scope.displayableRange = function (rangeValue) {
                // TODO: Call format function provided by domain object.
                return rangeValue;
            };
            $scope.displayableDomain = function (domainValue) {
                // TODO: Call format function provided by domain object.
                return new Date(domainValue).toUTCString();
            };
            $scope.series = [];
            $scope.rectangles = [];
            function updateSeriesFromTelemetry(series, seriesIndex, telemetry) {
                var domainValue = telemetry.getDomainValue(
                        telemetry.getPointCount() - 1
                    ),
                    rangeValue = telemetry.getRangeValue(
                        telemetry.getPointCount() - 1
                    ),
                    newTelemetry;
                // Track the biggest domain we've seen for sticky-ness.
                maxDomain = Math.max(maxDomain, domainValue);
                newTelemetry = {
                    domain: domainValue,
                    range: rangeValue
                };
                series.data.push(newTelemetry);
                $scope.$broadcast('series:data:add', seriesIndex, [newTelemetry]);
            }
            function subscribeToDomainObject(domainObject) {
                var telemetryCapability = domainObject.getCapability('telemetry'),
                    model = domainObject.getModel(),
                    series,
                    seriesIndex,
                    updater;
                series = {
                    name: model.name,
                    // TODO: Bring back PlotPalette.
                    color: palette.getColor($scope.series.length),
                    data: []
                };
                $scope.series.push(series);
                seriesIndex = $scope.series.indexOf(series);
                updater = updateSeriesFromTelemetry.bind(
                    null,
                    series,
                    seriesIndex
                );
                subscriptions.push(telemetryCapability.subscribe(updater));
            }
            function unlinkDomainObject() {
                subscriptions.forEach(function(subscription) {
                    subscription.unsubscribe();
                });
                subscriptions = [];
            }
            function linkDomainObject(domainObject) {
                unlinkDomainObject();
                if (domainObject.hasCapability('telemetry')) {
                    subscribeToDomainObject(domainObject);
                } else if (domainObject.hasCapability('delegation')) {
                    // Makes no sense that we have to use a subscription to get domain objects associated with delegates (and their names).  We can map the same series generation code to telemetry delegates; Let's do that ourselves.
                    var subscribeToDelegates = function(delegates) {
                        return delegates.forEach(subscribeToDomainObject);
                        // TODO: Should return a promise.
                    };
                    domainObject
                        .getCapability('delegation')
                        .getDelegates('telemetry')
                        .then(subscribeToDelegates);
                        // TODO: should have a catch.
                } else {
                    throw new Error('Domain object type not supported.');
                }
            }
            function onUserViewportChangeStart() {
                // TODO: this is a great time to track a history entry.
                // Disable live mode so they have full control of viewport.
                plotHistory.push($scope.viewport);
                isLive = false;
                $scope.axes.domain.label = "Time (Manipulated)";
            }
            // Returns the value of the left domain value
            // used when the right value has been adjusted and
            // a pan or zoom has occurred
            function getLeftInterval(intervalTL, intervalBR) {
                return intervalTL.domain + (maxDomain - intervalBR.domain);
            }
            // Checks if the user is on mobile or desktop,
            // based on that returns the boolean value
            // if the chart should be snapped to the right
            // side of the screen
            function getSnapCheck(viewport, onMobile) {
                // Default amount within which to snap
                // for desktop version
                var snapPercent = 10;
                if(onMobile) {
                    // Smaller amount within which to snap
                    // for mobile version
                    snapPercent = 75;
                }
                return (Math.abs(maxDomain - viewport.bottomRight.domain) < (DOMAIN_INTERVAL/snapPercent));
            }
            // Spans the chart to the right domain value to update the
            // chart live and keep up with the maxDomain
            function snapToRight() {
                // Sets the chart to being live and changes the
                // range name to show that the chart is updating
                isLive = true;
                $scope.axes.domain.label = "Time (Updating Live)";
                // Changes right domain value to maxDomain (value
                // of latest chart domain value)
                $scope.viewport.bottomRight.domain = maxDomain;
                // Adjusts the left domain value to keep up with the
                // right domain change by adding it to the current left domain
                $scope.viewport.topLeft.domain = getLeftInterval($scope.viewport.topLeft,
                    $scope.viewport.bottomRight);
            }
            // In the past what has happened is that the interval between the left and right domain
            // is set to 2 minutes all the time. And the range is -1 and 1 on update
            function onUserViewportChangeEnd(event, viewport) {
                // If the new viewport is "close enough" to the maxDomain then
                // enable live mode.  Set empirically to 10% of the domain
                // interval.
                // TODO: Better UX pattern for this.
                // Checks if the chart needs to snap to the right based on the
                // current device and where the right domain is located
                if (getSnapCheck(viewport, agentService.isMobile(navigator.userAgent))) {
                    snapToRight();
                } else {
                    // The viewport has been changed, but is not actively
                    // keeping up with the plot, therefore isLive = false
                    isLive = false;
                    $scope.axes.domain.label = "Time (Manipulated)";
                }
                plotHistory.push(viewport);
            }
            function viewportForMaxDomain() {
                 return {
                    topLeft: {
                        range: $scope.viewport.topLeft.range,
                        domain: getLeftInterval($scope.viewport.topLeft,
                            $scope.viewport.bottomRight)
                    },
                    bottomRight: {
                        range: $scope.viewport.bottomRight.range,
                        domain: maxDomain
                    }
                };
            }
            function followDataIfLive() {
                if (isLive) {
                    $scope.viewport = viewportForMaxDomain();
                }
            }
            $scope.$on('series:data:add', followDataIfLive);
            $scope.$on('user:viewport:change:end', onUserViewportChangeEnd);
            $scope.$on('user:viewport:change:start', onUserViewportChangeStart);
            $scope.$watch('domainObject', linkDomainObject);
            return {
                historyBack: function() {
                    // TODO: Step History Back.
                },
                historyForward: function() {
                    // TODO: Step History Forward.
                },
                resetZoom: function() {
                    // TODO: Reset view to defaults.  Keep history stack alive?
                }
            };
        }
        return PlotController;
    }
 );
--- a/platform/features/plot-reborn/src/controllers/StackedPlotController.js
+++ b/platform/features/plot-reborn/src/controllers/StackedPlotController.js
@@ -0,0 +1,38 @@
 /*global define */
 define(
    function () {
        "use strict";
        function StackedPlotController($scope) {
            $scope.telemetryObjects = [];
            var linkDomainObject = function(domainObject) {
                $scope.telemetryObjects = [];
                if (domainObject.hasCapability('telemetry')) {
                    $scope.telemetryObjects = [domainObject];
                } else if (domainObject.hasCapability('delegation')) {
                    var addObjectsIfCompatible = function(objects) {
                        objects.forEach(function(object) {
                            if (object.hasCapability('telemetry')) {
                                $scope.telemetryObjects.push(object);
                            } else if (object.hasCapability('delegation')) {
                                $scope.telemetryObjects.push(object);
                            }
                        });
                    };
                    domainObject
                        .useCapability('composition')
                        .then(addObjectsIfCompatible);
                        // TODO: should have a catch.
                } else {
                    throw new Error('Domain object type not supported.');
                }
            };
            $scope.$watch('domainObject', linkDomainObject);
        }
        return StackedPlotController;
    }
 );
--- a/platform/features/plot-reborn/src/directives/MCTChart.js
+++ b/platform/features/plot-reborn/src/directives/MCTChart.js
@@ -0,0 +1,239 @@
 /*global define,requestAnimationFrame,Float32Array*/
 /**
 * Module defining MCTChart. Created by vwoeltje on 11/12/14.
 */
 define(
    ["../draw/DrawLoader"],
    function (DrawLoader) {
        "use strict";
        var TEMPLATE = "<canvas style='position: absolute; background: none; width: 100%; height: 100%;'></canvas>";
        /**
         * Offsetter adjusts domain and range values by a fixed amount,
         * generally increasing the precision of the 32 bit float representation
         * required for plotting.
         *
         * @constructor
         */
        function Offsetter(domainOffset, rangeOffset) {
            this.domainOffset = domainOffset;
            this.rangeOffset = rangeOffset;
        }
        Offsetter.prototype.domain = function(dataDomain) {
            return dataDomain - this.domainOffset;
        };
        Offsetter.prototype.range = function(dataRange) {
            return dataRange - this.rangeOffset;
        };
        /**
         * MCTChart draws charts utilizing a drawAPI.
         *
         * @constructor
         */
        function MCTChart($interval, $log, agentService) {
            function linkChart($scope, $element) {
                var canvas = $element.find("canvas")[0],
                    isDestroyed = false,
                    activeInterval,
                    drawAPI,
                    lines = [],
                    offset;
                drawAPI = DrawLoader.getDrawAPI(canvas);
                if (!drawAPI) {
                    return;
                }
                function createOffset() {
                    if (offset) {
                        return;
                    }
                    if (!$scope.viewport ||
                        !$scope.viewport.topLeft ||
                        !$scope.viewport.bottomRight) {
                        return;
                    }
                    offset = new Offsetter(
                        $scope.viewport.topLeft.domain,
                        $scope.viewport.topLeft.range
                    );
                }
                function lineFromSeries(series) {
                    // TODO: handle when lines get longer than 10,000 points.
                    // Each line allocates 10,000 points.  This should be more
                    // that we ever need, but we have to decide how to handle
                    // this at the higher level.  I imagine the plot controller
                    // should watch it's series and when they get huge, slice
                    // them in half and delete the oldest half.
                    //
                    // As long as the controller replaces $scope.series with a
                    // new series object, then this directive will
                    // automatically generate new arrays for those lines.
                    // In practice, the overhead of regenerating these lines
                    // appears minimal.
                    var lineBuffer = new Float32Array(20000),
                        i = 0;
                    for (i = 0; i < series.data.length; i++) {
                        lineBuffer[2*i] = offset.domain(series.data[i].domain);
                        lineBuffer[2*i+1] = offset.range(series.data[i].range);
                    }
                    return {
                        color: series.color,
                        buffer: lineBuffer,
                        pointCount: series.data.length
                    };
                }
                function drawSeries() {
                    // TODO: Don't regenerate lines on each frame.
                    if (!$scope.series || !$scope.series.length) {
                        return;
                    }
                    lines = $scope.series.map(lineFromSeries);
                    lines.forEach(function(line) {
                        drawAPI.drawLine(
                            line.buffer,
                            line.color.asRGBAArray(),
                            line.pointCount
                        );
                    });
                }
                function drawRectangles() {
                    if ($scope.rectangles) {
                        $scope.rectangles.forEach(function(rect) {
                            drawAPI.drawSquare(
                                [
                                    offset.domain(rect.start.domain),
                                    offset.range(rect.start.range)
                                ],
                                [
                                    offset.domain(rect.end.domain),
                                    offset.range(rect.end.range)
                                ],
                                rect.color
                            );
                        });
                    }
                }
                function updateViewport() {
                    var dimensions,
                        origin;
                    dimensions = [
                        Math.abs(
                            offset.domain($scope.viewport.topLeft.domain) -
                            offset.domain($scope.viewport.bottomRight.domain)
                        ),
                        Math.abs(
                            offset.range($scope.viewport.topLeft.range) -
                            offset.range($scope.viewport.bottomRight.range)
                        )
                    ];
                    origin = [
                        offset.domain(
                            $scope.viewport.topLeft.domain
                        ),
                        offset.range(
                            $scope.viewport.bottomRight.range
                        )
                    ];
                    drawAPI.setDimensions(
                        dimensions,
                        origin
                    );
                }
                function onSeriesDataAdd(event, seriesIndex, points) {
                    var line = lines[seriesIndex];
                    points.forEach(function (point) {
                        line.buffer[2*line.pointCount] = offset.domain(point.domain);
                        line.buffer[2*line.pointCount+1] = offset.range(point.range);
                        line.pointCount += 1;
                    });
                }
                function redraw() {
                    if (isDestroyed) {
                        return;
                    }
                    requestAnimationFrame(redraw);
                    canvas.width = canvas.offsetWidth;
                    canvas.height = canvas.offsetHeight;
                    drawAPI.clear();
                    createOffset();
                    if (!offset) {
                        return;
                    }
                    updateViewport();
                    drawSeries();
                    drawRectangles();
                }
                function drawIfResized() {
                    if (canvas.width !== canvas.offsetWidth ||
                            canvas.height !== canvas.offsetHeight) {
                        redraw();
                    }
                }
                function destroyChart() {
                    isDestroyed = true;
                    if (activeInterval) {
                        $interval.cancel(activeInterval);
                    }
                }
                // Check for resize, on a timer, the timer is 15
                // on mobile (to allow quick refresh of drawing).
                if(agentService.isMobile(navigator.userAgent)) {
                    activeInterval = $interval(drawIfResized, 15, false);
                } else {
                    activeInterval = $interval(drawIfResized, 1000, false);
                }
                $scope.$on('series:data:add', onSeriesDataAdd);
                redraw();
                // Stop checking for resize when $scope is destroyed
                $scope.$on("$destroy", destroyChart);
            }
            return {
                // Apply directive only to $elements
                restrict: "E",
                // Template to use (a canvas $element)
                template: TEMPLATE,
                // Link function; set up $scope
                link: linkChart,
                // Initial, isolate $scope for the directive
                scope: {
                    draw: "=" ,
                    rectangles: "=",
                    series: "=",
                    viewport: "="
                }
            };
        }
        return MCTChart;
    }
 );
--- a/platform/features/plot-reborn/src/directives/MCTOverlayPlot.js
+++ b/platform/features/plot-reborn/src/directives/MCTOverlayPlot.js
@@ -0,0 +1,14 @@
 /*global define*/
 define(function () {
        return function MCTOverlayPlot() {
            return {
                restrict: "E",
                templateUrl: 'platform/features/plot-reborn/res/templates/plot.html',
                scope: {
                    domainObject: "="
                }
            };
        };
    }
 );
--- a/platform/features/plot-reborn/src/directives/MCTPinch.js
+++ b/platform/features/plot-reborn/src/directives/MCTPinch.js
@@ -0,0 +1,244 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*global define*/
 define(
    [],
    function () {
        "use strict";
        function MCTPinch(agentService) {
            /*
             * Links the attributes with the
             * provided link function and nested
             * touch event functions
             */
            function link($scope, element) {
                // isPan and isPinch variables are set after the start
                // of a gestures and is checked over the change of that
                // gesture. These are used to differentiate gestures and
                // force only one type of gesture to be done at a time
                var isPan = false,
                    isPinch = false;
                // Returns position of touch event
                function trackPosition(event) {
                    return {
                        clientX: event.clientX,
                        clientY: event.clientY
                    };
                }
                // Calculates the midpoint between two given
                // coordinates and returns it as coordinate object
                function calculateMidpoint(coordOne, coordTwo) {
                    return {
                        clientX: (coordOne.clientX + coordTwo.clientX) / 2,
                        clientY: (coordOne.clientY + coordTwo.clientY) / 2
                    };
                }
                // Calculates the distance between two coordinates
                // and returns as number/integer value
                function calculateDistance(coordOne, coordTwo) {
                    return Math.sqrt(Math.pow(coordOne.clientX - coordTwo.clientX, 2) +
                        Math.pow(coordOne.clientY - coordTwo.clientY, 2));
                }
                // Checks if the user is going to pan by checking the number
                // of touches on the screen (one touch means pan)
                function checkPan(event) {
                    return (event.changedTouches.length === 1) ||
                        (event.touches.length === 1);
                }
                // Checks if the user is going to pinch by checking the number
                // of touches on the screen (two touches means pinch)
                function checkPinch(event) {
                    return (event.changedTouches.length === 2) ||
                        (event.touches.length === 2);
                }
                // On touch start the 'touch' is tracked and
                // the event is emitted through scope
                function touchStart(event) {
                    var touchPosition;
                    // If two touches or change touches are occurring
                    // than user is doing a pinch gesture
                    if (checkPinch(event)) {
                        // User has started pinch, sets isPinch and resets isPan
                        isPan = false;
                        isPinch = true;
                        // Position of both touches are tracked and saved in variable
                        touchPosition = [trackPosition(event.touches[0]),
                            trackPosition(event.touches[1])];
                        // Emits the start of the pinch and passes the
                        // touch coordinates (touches), the bounds of the
                        // event, the midpoint of both touch coorddinates,
                        // and the distance between the two touch coordinates
                        $scope.$emit('mct:pinch:start', {
                            touches: touchPosition,
                            bounds: event.target.getBoundingClientRect(),
                            midpoint: calculateMidpoint(touchPosition[0], touchPosition[1]),
                            distance: calculateDistance(touchPosition[0], touchPosition[1])
                        });
                        // Stops other gestures/button clicks from being active
                        event.preventDefault();
                    }
                    // If one touch or change touch is occurring
                    // user is doing a single finger pan gesture
                    else if (checkPan(event)) {
                        // User has started pan, sets isPan and resets isPinch
                        isPinch = false;
                        isPan = true;
                        // Position of single touch is tracked and
                        // saved in variable
                        touchPosition = trackPosition(event.touches[0]);
                        // Emits the start of the pan and passes the
                        // touch coordinates (touch), and the bounds
                        // of the event
                        $scope.$emit('mct:pan:start', {
                            touch: touchPosition,
                            bounds: event.target.getBoundingClientRect()
                        });
                        // Stops other gestures/button clicks from being active
                        event.preventDefault();
                    }
                }
                // As the touch move occurs, the touches are tracked and
                // the event is emitted through scope
                function touchChange(event) {
                    var touchPosition;
                    // If two touches or change touches are occurring
                    // and the user has started a pinch than user is
                    // doing a pinch gesture
                    if (checkPinch(event) && isPinch) {
                        // Position of both touches are tracked and saved in variable. If change
                        // in touch of either coordinate is undefined, uses touch instead
                        touchPosition = [trackPosition(event.changedTouches[0] || event.touches[0]),
                            trackPosition(event.changedTouches[1] || event.touches[1])];
                        // Emits the change in pinch and passes the
                        // touch coordinates (touches), the bounds of the
                        // event, the midpoint of both touch coorddinates,
                        // and the distance between the two touch coordinates
                        $scope.$emit('mct:pinch:change', {
                            touches: touchPosition,
                            bounds: event.target.getBoundingClientRect(),
                            midpoint: calculateMidpoint(touchPosition[0], touchPosition[1]),
                            distance: calculateDistance(touchPosition[0], touchPosition[1])
                        });
                        // Stops other gestures/button clicks from being active
                        event.preventDefault();
                    }
                    // If one touch or change touch is occurring
                    // user is doing a single finger pan gesture
                    else if (checkPan(event) && isPan) {
                        // Position of single changed touch or touch is tracked and saved in variable
                        touchPosition = trackPosition(event.changedTouches[0] || event.touches[0]);
                        // Emits the change of the pan and passes the
                        // touch coordinates (touch), and the bounds
                        // of the event
                        $scope.$emit('mct:pan:change', {
                            touch: touchPosition,
                            bounds: event.target.getBoundingClientRect()
                        });
                        // Stops other gestures/button clicks from being active
                        event.preventDefault();
                    }
                }
                // On the 'touchend' or 'touchcancel' the event
                // is emitted through scope
                function touchEnd(event) {
                    // Emits that this is the end of the touch
                    $scope.$emit('mct:ptouch:end');
                    // set pan/pinch statuses to false
                    // when the user stops touching the screen
                    isPan = false;
                    isPinch = false;
                    // Stops other gestures/button clicks from being active
                    event.preventDefault();
                }
                // On Mobile, checks for touch start, move, and end/cancel
                if (agentService.isMobile(navigator.userAgent)) {
                    element.on('touchstart', touchStart);
                    element.on('touchmove', touchChange);
                    element.on('touchend', touchEnd);
                    element.on('touchcancel', touchEnd);
                }
                // Stop checking for touch when scope is destroyed
                // (when user navigates away from graph).
                $scope.$on("$destroy", function () {
                    // All elements' event listeners are
                    // removed
                    element.off('touchstart', touchStart);
                    element.off('touchmove', touchChange);
                    element.off('touchend', touchEnd);
                    element.off('touchcancel', touchEnd);
                    // If for some reason, midtouch the
                    // user is navigated away, set pan/pinch
                    // statuses to false
                    isPan = false;
                    isPinch = false;
                });
            }
            return {
                // MCTPinch is treated as an attribute
                restrict: "A",
                // Link with the provided function above
                link: link
            };
        }
        return MCTPinch;
    }
 );
--- a/platform/features/plot-reborn/src/directives/MCTPlot.js
+++ b/platform/features/plot-reborn/src/directives/MCTPlot.js
@@ -0,0 +1,465 @@
 /*global define,window*/
 define(
    [
        '../lib/utils'
    ],
    function (utils) {
        "use strict";
        var RANGE_TICK_COUNT = 7,
            DOMAIN_TICK_COUNT = 5,
            ZOOM_AMT = 0.02,
            PINCH_DRAG_AMT = 3;
        function MCTPlot() {
            function link($scope, $element) {
                // Now that we're here, let's handle some scope management that the controller would otherwise handle.
                if (typeof $scope.rectangles === "undefined") {
                    $scope.rectangles = [];
                }
                if (typeof $scope.displayableRange === "undefined") {
                    $scope.displayableRange = function (x) { return x; };
                }
                if (typeof $scope.displayableDomain === "undefined") {
                    $scope.displayableDomain = function (x) { return x; };
                }
                if (typeof $scope.axes === "undefined") {
                    $scope.axes = {
                        domain: {
                            label: "Time (Updating Live)",
                            tickCount: DOMAIN_TICK_COUNT,
                            ticks: []
                        },
                        range: {
                            label: "Value",
                            tickCount: RANGE_TICK_COUNT,
                            ticks: []
                        }
                    };
                }
                var dragStart,
                    marqueeBox = {},
                    marqueeRect, // Set when exists.
                    chartElementBounds,
                    firstTouch,
                    firstTouchDistance,
                    prevTouchDistance,
                    $canvas = $element.find('canvas');
                function updateAxesForCurrentViewport() {
                    // Update axes definitions for current viewport.
                    ['domain', 'range'].forEach(function (axisName) {
                        var axis = $scope.axes[axisName],
                            firstTick = $scope.viewport.topLeft[axisName],
                            lastTick = $scope.viewport.bottomRight[axisName],
                            axisSize = firstTick - lastTick,
                            denominator = axis.tickCount - 1,
                            tickNumber,
                            tickIncrement,
                            tickValue;
                        // Yes, ticksize is negative for domain and positive for range.
                        // It's because ticks are generated/displayed top to bottom and left to right.
                        axis.ticks = [];
                        for (tickNumber = 0; tickNumber < axis.tickCount; tickNumber = tickNumber + 1) {
                            tickIncrement = (axisSize * (tickNumber / denominator));
                            tickValue = firstTick - tickIncrement;
                            axis.ticks.push(
                                tickValue
                            );
                        }
                    });
                }
                function drawMarquee() {
                    // Create rectangle for Marquee if it should be set.
                    if (marqueeBox && marqueeBox.start && marqueeBox.end) {
                        if (!marqueeRect) {
                            marqueeRect = {};
                            $scope.rectangles.push(marqueeRect);
                        }
                        marqueeRect.start = marqueeBox.start;
                        marqueeRect.end = marqueeBox.end;
                        marqueeRect.color = [1, 1, 1, 0.5];
                        marqueeRect.layer = 'top'; // TODO: implement this.
                        $scope.$broadcast('rectangle-change');
                    } else if (marqueeRect && $scope.rectangles.indexOf(marqueeRect) !== -1) {
                        $scope.rectangles.splice($scope.rectangles.indexOf(marqueeRect));
                        marqueeRect = undefined;
                        $scope.$broadcast('rectangle-change');
                    }
                }
                function untrackMousePosition() {
                    $scope.mouseCoordinates = undefined;
                }
                function updateMarquee() {
                    // Update the marquee box in progress.
                    marqueeBox.end = $scope.mouseCoordinates.positionAsPlotPoint;
                    drawMarquee();
                }
                function startMarquee() {
                    marqueeBox.start = $scope.mouseCoordinates.positionAsPlotPoint;
                }
                function endMarquee() {
                    // marqueeBox start/end are opposite corners but we need
                    // topLeft and bottomRight.
                    var boxPoints = utils.boxPointsFromOppositeCorners(marqueeBox.start, marqueeBox.end),
                        newViewport = utils.oppositeCornersFromBoxPoints(boxPoints);
                    marqueeBox = {};
                    drawMarquee();
                    $scope.$emit('user:viewport:change:end', newViewport);
                    $scope.viewport = newViewport;
                }
                function startDrag($event) {
                    $scope.$emit('user:viewport:change:start');
                    if (!$scope.mouseCoordinates) {
                        return;
                    }
                    $event.preventDefault();
                    // Track drag location relative to position over element
                    // not domain, as chart viewport will change as we drag.
                    dragStart = $scope.mouseCoordinates.positionAsPlotPoint;
                    // Tell controller that we're starting to navigate.
                    return false;
                }
                function updateDrag() {
                    // calculate offset between points.  Apply that offset to viewport.
                    var newPosition = $scope.mouseCoordinates.positionAsPlotPoint,
                        dDomain = dragStart.domain - newPosition.domain,
                        dRange = dragStart.range - newPosition.range;
                    $scope.viewport = {
                        topLeft: {
                            domain: $scope.viewport.topLeft.domain + dDomain,
                            range: $scope.viewport.topLeft.range + dRange
                        },
                        bottomRight: {
                            domain: $scope.viewport.bottomRight.domain + dDomain,
                            range: $scope.viewport.bottomRight.range + dRange
                        }
                    };
                }
                function endDrag() {
                    dragStart = undefined;
                    $scope.$emit('user:viewport:change:end', $scope.viewport);
                }
                // Similar to trackMousePosition, where the touch position is converted
                // into a plot point position and over element position using utils
                function trackTouchPosition(touchPosition, bounds) {
                    var positionOverElement,
                        positionAsPlotPoint,
                        position;
                    chartElementBounds = bounds;
                    positionOverElement = {
                        x: touchPosition.clientX - bounds.left,
                        y: touchPosition.clientY - bounds.top
                    };
                    positionAsPlotPoint = utils.elementPositionAsPlotPosition(
                        positionOverElement,
                        bounds,
                        $scope.viewport
                    );
                    position = {
                        positionOverElement: positionOverElement,
                        positionAsPlotPoint: positionAsPlotPoint
                    };
                    return position;
                }
                function trackMousePosition($event) {
                    // Calculate coordinates of mouse related to canvas and as
                    // domain, range value and make available in scope for display.
                    var bounds = $event.target.getBoundingClientRect(),
                        positionOverElement,
                        positionAsPlotPoint;
                    chartElementBounds = bounds;
                    positionOverElement = {
                        x: $event.clientX - bounds.left,
                        y: $event.clientY - bounds.top
                    };
                    positionAsPlotPoint = utils.elementPositionAsPlotPosition(
                        positionOverElement,
                        bounds,
                        $scope.viewport
                    );
                    $scope.mouseCoordinates = {
                        positionOverElement: positionOverElement,
                        positionAsPlotPoint: positionAsPlotPoint
                    };
                    if (marqueeBox && marqueeBox.start) {
                        updateMarquee();
                    }
                    if (dragStart) {
                        updateDrag();
                    }
                }
                function watchForMarquee() {
                    $canvas.removeClass('plot-drag');
                    $canvas.addClass('plot-marquee');
                    $canvas.on('mousedown', startMarquee);
                    $canvas.on('mouseup', endMarquee);
                    $canvas.off('mousedown', startDrag);
                    $canvas.off('mouseup', endDrag);
                }
                function watchForDrag() {
                    $canvas.addClass('plot-drag');
                    $canvas.removeClass('plot-marquee');
                    $canvas.on('mousedown', startDrag);
                    $canvas.on('mouseup', endDrag);
                    $canvas.off('mousedown', startMarquee);
                    $canvas.off('mouseup', endMarquee);
                }
                function toggleInteractionMode(event) {
                    if (event.keyCode === 16) { // shift key.
                        watchForDrag();
                    }
                }
                function resetInteractionMode(event) {
                    if (event.keyCode === 16) {
                        watchForMarquee();
                    }
                }
                function stopWatching() {
                    $canvas.off('mousedown', startDrag);
                    $canvas.off('mouseup', endDrag);
                    $canvas.off('mousedown', startMarquee);
                    $canvas.off('mouseup', endMarquee);
                    window.removeEventListener('keydown', toggleInteractionMode);
                    window.removeEventListener('keyup', resetInteractionMode);
                }
                $canvas.on('mousemove', trackMousePosition);
                $canvas.on('mouseleave', untrackMousePosition);
                watchForMarquee();
                window.addEventListener('keydown', toggleInteractionMode);
                window.addEventListener('keyup', resetInteractionMode);
                function onViewportChange() {
                    if ($scope.mouseCoordinates && chartElementBounds) {
                        $scope.mouseCoordinates.positionAsPlotPoint =
                            utils.elementPositionAsPlotPosition(
                                $scope.mouseCoordinates.positionOverElement,
                                chartElementBounds,
                                $scope.viewport
                            );
                    }
                    // TODO: Discuss whether marqueeBox start should be fixed to data or fixed to canvas element, especially when "isLive is true".
                    updateAxesForCurrentViewport();
                }
                // Updates viewport based on touch location and current event bounds
                function updatePan(touch, bounds) {
                    // Sets the panPosition plot point (relative to chart)
                    // and calculates domain/range by subtracting first touch's
                    // plot point and current touch's plot point
                    var panPosition = trackTouchPosition(touch, bounds).positionAsPlotPoint,
                        dDomain = firstTouch.domain - panPosition.domain,
                        dRange = firstTouch.range - panPosition.range;
                    // Viewport is set to calculated delta domain/range
                    $scope.viewport = {
                        topLeft: {
                            domain: (($scope.viewport.topLeft.domain) + dDomain),
                            range: (($scope.viewport.topLeft.range) + dRange)
                        },
                        bottomRight: {
                            domain: (($scope.viewport.bottomRight.domain) + dDomain),
                            range: (($scope.viewport.bottomRight.range) + dRange)
                        }
                    };
                }
                // Starts the pan by emitting that viewport will be changed
                // also sets the first touch variable
                function startPan(touch, bounds) {
                    $scope.$emit('user:viewport:change:start');
                    firstTouch = trackTouchPosition(touch, bounds).positionAsPlotPoint;
                }
                // Receives the emit of single touch pan start
                function onPanStart(event, touch) {
                    startPan(touch.touch, touch.bounds);
                }
                // Receives the emit of single touch pan change
                function onPanChange(event, touch) {
                    updatePan(touch.touch, touch.bounds);
                }
                // Sets the dimensions of the midpoint's domain and range distance to the
                // top left and bottom right corners of the viewport. Used to zoom relative to
                // midpoint pinch gestures 2 touches.
                function setDimensions(midpoint) {
                    return {
                        tl: {
                            domain: Math.abs(midpoint.domain - ($scope.viewport.topLeft.domain)),
                            range: Math.abs(midpoint.range - ($scope.viewport.topLeft.range))
                        },
                        br: {
                            domain: Math.abs(($scope.viewport.bottomRight.domain) - midpoint.domain),
                            range: Math.abs(($scope.viewport.bottomRight.range) - midpoint.range)
                        }
                    };
                }
                // Calculates the viewport for a zoom gesture
                function calculateViewport(midpoint, ratio) {
                    // Uses the distance ratio passed in and the
                    // zoom amount (variable set at top) to find the
                    // amount of zoom per change in pinch gesture and
                    // whether it is zooming in or out
                    var zoomTL, zoomBR,
                        dimensions = setDimensions(midpoint),
                        checkRatio = (ratio - 1) || 0,
                        type = (-1 * (checkRatio / Math.abs(checkRatio))) || 1,
                        zoomAmt = type * ZOOM_AMT;
                    // Sets the domain/range difference to applied to the
                    // top left and bottom right plot points
                    zoomTL = {
                        domain: zoomAmt * dimensions.tl.domain,
                        range: zoomAmt * dimensions.tl.range
                    };
                    zoomBR = {
                        domain: zoomAmt * dimensions.br.domain,
                        range: zoomAmt * dimensions.br.range
                    };
                    // Applies and returns the changed for zoom top left and bottom right
                    // plot points
                    return {
                        topLeft: {
                            domain: (($scope.viewport.topLeft.domain) + zoomTL.domain),
                            range: (($scope.viewport.topLeft.range) - zoomTL.range)
                        },
                        bottomRight: {
                            domain: (($scope.viewport.bottomRight.domain) - zoomBR.domain),
                            range: (($scope.viewport.bottomRight.range) + zoomBR.range)
                        }
                    };
                }
                // Updates the viewport based on the amount of zooming (pinching) user is doing
                // Pinch inwards (zoom out): distanceRatio > 1
                // Pinch outwards (zoom in): distanceRatio < 1
                function updateZoom(midpoint, bounds, distance) {
                    // Gets the current midpoint and distance ratio to be used to
                    // calculate new viewport
                    var midpointPosition = trackTouchPosition(midpoint, bounds).positionAsPlotPoint,
                        distanceRatio = ((prevTouchDistance || firstTouchDistance) / distance);
                    // Sets the new viewport
                    $scope.viewport = calculateViewport(midpointPosition, distanceRatio);
                }
                // Starts the zoom by emitting that viewport will be changed
                // also sets the first touch variable (midpoint) if panning will
                // happen and sets the distance between the first touches occurring
                function startZoom(midpoint, bounds, distance) {
                    $scope.$emit('user:viewport:change:start');
                    firstTouchDistance = distance;
                    firstTouch = trackTouchPosition(midpoint, bounds).positionAsPlotPoint;
                }
                // Receives the emit of the start of pinch touch
                function onPinchStart(event, touch) {
                    startZoom(touch.midpoint, touch.bounds, touch.distance);
                }
                function comparePinchDrag(distance, prevDistance) {
                    return ((prevDistance + PINCH_DRAG_AMT) >= distance) &&
                        ((prevDistance - PINCH_DRAG_AMT) <= distance);
                }
                // Receives the emit of the change of pinch touch,
                // differentiates between a pan and zoom
                function onPinchChange(event, touch) {
                    // Will pan if change in distance is within PINCH_DRAG_AMT
                    // range relative to the previous distance
                    if(comparePinchDrag(Math.round(touch.distance),
                            Math.round(prevTouchDistance || firstTouchDistance))) {
                        updatePan(touch.midpoint, touch.bounds);
                    }
                    // Will pinch in any other situation that the distance between
                    // pinching touches is increasing or decreasing by more than
                    // PINCH_DRAG_AMT
                    else {
                        updateZoom(touch.midpoint, touch.bounds, touch.distance);
                    }
                    // Sets previous touch distance to current touch.distance (for next touch event)
                    prevTouchDistance = touch.distance;
                }
                // Receives emit for touch event ending and emits that the
                // viewport has stopped changing.
                function onTouchEnd() {
                    $scope.$emit('user:viewport:change:end', $scope.viewport);
                }
                // Receives the pinch to allow pinching/panning emitted by MCTPinch
                $scope.$on('mct:pinch:start', onPinchStart);
                $scope.$on('mct:pinch:change', onPinchChange);
                // Receives the pan to allow panning emitted by MCTPinch
                $scope.$on('mct:pan:start', onPanStart);
                $scope.$on('mct:pan:change', onPanChange);
                // Receives the end of the pan/pinch emitted by MCTPinch
                $scope.$on('mct:ptouch:end', onTouchEnd);
                $scope.$on('$destroy', stopWatching);
                $scope.$watchCollection('viewport', onViewportChange);
            }
            return {
                restrict: "E",
                templateUrl: 'platform/features/plot-reborn/res/templates/mct-plot.html',
                link: link,
                scope: {
                    viewport: "=",
                    series: "=",
                    rectangles: "=?",
                    axes: "=?",
                    displayableRange: "=?",
                    displayableDomain: "=?"
                }
            };
        }
        return MCTPlot;
    }
 );
--- a/platform/features/plot-reborn/src/draw/Draw2D.js
+++ b/platform/features/plot-reborn/src/draw/Draw2D.js
@@ -0,0 +1,120 @@
 /*global define*/
 define(
    [],
    function () {
        "use strict";
        /**
         * Create a new draw API utilizing the Canvas's 2D API for rendering.
         *
         * @constructor
         * @param {CanvasElement} canvas the canvas object to render upon
         * @throws {Error} an error is thrown if Canvas's 2D API is unavailable.
         */
        function Draw2D(canvas) {
            var c2d = canvas.getContext('2d'),
                width = canvas.width,
                height = canvas.height,
                dimensions = [ width, height ],
                origin = [ 0, 0 ];
            // Convert from logical to physical x coordinates
            function x(v) {
                return ((v - origin[0]) / dimensions[0]) * width;
            }
            // Convert from logical to physical y coordinates
            function y(v) {
                return height - ((v - origin[1]) / dimensions[1]) * height;
            }
            // Set the color to be used for drawing operations
            function setColor(color) {
                var mappedColor = color.map(function (c, i) {
                        return i < 3 ? Math.floor(c * 255) : (c);
                    }).join(',');
                c2d.strokeStyle = "rgba(" + mappedColor + ")";
                c2d.fillStyle = "rgba(" + mappedColor + ")";
            }
            if (!c2d) {
                throw new Error("Canvas 2d API unavailable.");
            }
            return {
                /**
                 * Clear the chart.
                 */
                clear: function () {
                    width = canvas.width;
                    height = canvas.height;
                    c2d.clearRect(0, 0, width, height);
                },
                /**
                 * Set the logical boundaries of the chart.
                 * @param {number[]} dimensions the horizontal and
                 *        vertical dimensions of the chart
                 * @param {number[]} origin the horizontal/vertical
                 *        origin of the chart
                 */
                setDimensions: function (newDimensions, newOrigin) {
                    dimensions = newDimensions;
                    origin = newOrigin;
                },
                /**
                 * Draw the supplied buffer as a line strip (a sequence
                 * of line segments), in the chosen color.
                 * @param {Float32Array} buf the line strip to draw,
                 *        in alternating x/y positions
                 * @param {number[]} color the color to use when drawing
                 *        the line, as an RGBA color where each element
                 *        is in the range of 0.0-1.0
                 * @param {number} points the number of points to draw
                 */
                drawLine: function (buf, color, points) {
                    var i;
                    setColor(color);
                    // Configure context to draw two-pixel-thick lines
                    c2d.lineWidth = 2;
                    // Start a new path...
                    if (buf.length > 1) {
                        c2d.beginPath();
                        c2d.moveTo(x(buf[0]), y(buf[1]));
                    }
                    // ...and add points to it...
                    for (i = 2; i < points * 2; i = i + 2) {
                        c2d.lineTo(x(buf[i]), y(buf[i + 1]));
                    }
                    // ...before finally drawing it.
                    c2d.stroke();
                },
                /**
                 * Draw a rectangle extending from one corner to another,
                 * in the chosen color.
                 * @param {number[]} min the first corner of the rectangle
                 * @param {number[]} max the opposite corner
                 * @param {number[]} color the color to use when drawing
                 *        the rectangle, as an RGBA color where each element
                 *        is in the range of 0.0-1.0
                 */
                drawSquare: function (min, max, color) {
                    var x1 = x(min[0]),
                        y1 = y(min[1]),
                        w = x(max[0]) - x1,
                        h = y(max[1]) - y1;
                    setColor(color);
                    c2d.fillRect(x1, y1, w, h);
                }
            };
        }
        return Draw2D;
    }
 );
--- a/platform/features/plot-reborn/src/draw/DrawLoader.js
+++ b/platform/features/plot-reborn/src/draw/DrawLoader.js
@@ -0,0 +1,46 @@
 /*global define,$log */
 define(
    [
        './DrawWebGL',
        './Draw2D'
    ],
    function ($log, DrawWebGL, Draw2D) {
        var CHARTS = [
            DrawWebGL,
            Draw2D
        ];
        /**
         * Draw loader attaches a draw API to a canvas element and returns the
         * draw API.
         */
        return {
            /**
             * Return the first draw API available.  Returns
             * `undefined` if a draw API could not be constructed.
             *.
             * @param {CanvasElement} canvas - The canvas eelement to attach
                      the draw API to.
             */
            getDrawAPI: function (canvas) {
                var i;
                for (i = 0; i < CHARTS.length; i++) {
                    try {
                        return new CHARTS[i](canvas);
                    } catch (e) {
                        $log.warn([
                            "Could not instantiate chart",
                            CHARTS[i].name,
                            ";",
                            e.message
                        ].join(" "));
                    }
                }
                $log.warn("Cannot initialize mct-chart.");
                return undefined;
            }
        };
    }
 );
--- a/platform/features/plot-reborn/src/draw/DrawWebGL.js
+++ b/platform/features/plot-reborn/src/draw/DrawWebGL.js
@@ -0,0 +1,152 @@
 /*global define,Float32Array*/
 define(
    [],
    function () {
        "use strict";
        // WebGL shader sources (for drawing plain colors)
        var FRAGMENT_SHADER = [
                "precision mediump float;",
                "uniform vec4 uColor;",
                "void main(void) {",
                "gl_FragColor = uColor;",
                "}"
            ].join('\n'),
            VERTEX_SHADER = [
                "attribute vec2 aVertexPosition;",
                "uniform vec2 uDimensions;",
                "uniform vec2 uOrigin;",
                "void main(void) {",
                "gl_Position = vec4(2.0 * ((aVertexPosition - uOrigin) / uDimensions) - vec2(1,1), 0, 1);",
                "}"
            ].join('\n');
        /**
         * Create a draw api utilizing WebGL.
         *
         * @constructor
         * @param {CanvasElement} canvas the canvas object to render upon
         * @throws {Error} an error is thrown if WebGL is unavailable.
         */
        function DrawWebGL(canvas) {
            var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"),
                vertexShader,
                fragmentShader,
                program,
                aVertexPosition,
                uColor,
                uDimensions,
                uOrigin,
                buffer;
            // Ensure a context was actually available before proceeding
            if (!gl) {
                throw new Error("WebGL unavailable.");
            }
            // Initialize shaders
            vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, VERTEX_SHADER);
            gl.compileShader(vertexShader);
            fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, FRAGMENT_SHADER);
            gl.compileShader(fragmentShader);
            // Assemble vertex/fragment shaders into programs
            program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            gl.useProgram(program);
            // Get locations for attribs/uniforms from the
            // shader programs (to pass values into shaders at draw-time)
            aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
            uColor = gl.getUniformLocation(program, "uColor");
            uDimensions = gl.getUniformLocation(program, "uDimensions");
            uOrigin = gl.getUniformLocation(program, "uOrigin");
            gl.enableVertexAttribArray(aVertexPosition);
            // Create a buffer to holds points which will be drawn
            buffer = gl.createBuffer();
            // Use a line width of 2.0 for legibility
            gl.lineWidth(2.0);
            // Enable blending, for smoothness
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
            // Utility function to handle drawing of a buffer;
            // drawType will determine whether this is a box, line, etc.
            function doDraw(drawType, buf, color, points) {
                gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
                gl.bufferData(gl.ARRAY_BUFFER, buf, gl.DYNAMIC_DRAW);
                gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
                gl.uniform4fv(uColor, color);
                gl.drawArrays(drawType, 0, points);
            }
            return {
                /**
                 * Clear the chart.
                 */
                clear: function () {
                    // Set the viewport size; note that we use the width/height
                    // that our WebGL context reports, which may be lower
                    // resolution than the canvas we requested.
                    gl.viewport(
                        0,
                        0,
                        gl.drawingBufferWidth,
                        gl.drawingBufferHeight
                    );
                    gl.clear(gl.COLOR_BUFFER_BIT + gl.DEPTH_BUFFER_BIT);
                },
                /**
                 * Set the logical boundaries of the chart.
                 * @param {number[]} dimensions the horizontal and
                 *        vertical dimensions of the chart
                 * @param {number[]} origin the horizontal/vertical
                 *        origin of the chart
                 */
                setDimensions: function (dimensions, origin) {
                    if (dimensions && dimensions.length > 0 &&
                            origin && origin.length > 0) {
                        gl.uniform2fv(uDimensions, dimensions);
                        gl.uniform2fv(uOrigin, origin);
                    }
                },
                /**
                 * Draw the supplied buffer as a line strip (a sequence
                 * of line segments), in the chosen color.
                 * @param {Float32Array} buf the line strip to draw,
                 *        in alternating x/y positions
                 * @param {number[]} color the color to use when drawing
                 *        the line, as an RGBA color where each element
                 *        is in the range of 0.0-1.0
                 * @param {number} points the number of points to draw
                 */
                drawLine: function (buf, color, points) {
                    doDraw(gl.LINE_STRIP, buf, color, points);
                },
                /**
                 * Draw a rectangle extending from one corner to another,
                 * in the chosen color.
                 * @param {number[]} min the first corner of the rectangle
                 * @param {number[]} max the opposite corner
                 * @param {number[]} color the color to use when drawing
                 *        the rectangle, as an RGBA color where each element
                 *        is in the range of 0.0-1.0
                 */
                drawSquare: function (min, max, color) {
                    doDraw(gl.TRIANGLE_FAN, new Float32Array(
                        min.concat([min[0], max[1]]).concat(max).concat([max[0], min[1]])
                    ), color, 4);
                }
            };
        }
        return DrawWebGL;
    }
 );
--- a/platform/features/plot-reborn/src/lib/utils.js
+++ b/platform/features/plot-reborn/src/lib/utils.js
@@ -0,0 +1,75 @@
 /*global define*/
 define(function() {
    "use strict";
    var utils = {};
    utils.boxPointsFromOppositeCorners = function(start, end) {
        // Given two points defining opposite corners of a square,
        // return an array of points containing all of the boxes' rectangles.
        return [
            start,
            {domain: start.domain, range: end.range},
            end,
            {domain: end.domain, range: start.range}
        ];
    };
    utils.oppositeCornersFromBoxPoints = function(boxPoints) {
        // Given an array of box points, return the topLeft and bottomRight points of the box.
        var topLeft = boxPoints.reduce(function(topLeft, currentPoint) {
            if (!topLeft) {
                return currentPoint;
            }
            if (currentPoint.domain <= topLeft.domain &&
                    currentPoint.range >= topLeft.range) {
                return currentPoint;
            }
            return topLeft;
        });
        var bottomRight = boxPoints.reduce(function(bottomRight, currentPoint) {
            if (!bottomRight) {
                return currentPoint;
            }
            if (currentPoint.domain >= bottomRight.domain &&
                    currentPoint.range <= bottomRight.range) {
                return currentPoint;
            }
            return bottomRight;
        });
        return {
            topLeft: topLeft,
            bottomRight: bottomRight
        };
    };
    utils.elementPositionAsPlotPosition = function(elementPosition, elementBounds, viewport) {
        // Convert an (x, y) pair in element space to a
        // (domain, range) pair viewport.
        // Element space has (0,0) as the topLeft corner, With x
        // increasing to the right and y increasing to the bottom.
        var maxDomain = viewport.bottomRight.domain;
        var minDomain = viewport.topLeft.domain;
        var domainDenominator = maxDomain - minDomain;
        var maxRange = viewport.topLeft.range;
        var minRange = viewport.bottomRight.range;
        var rangeDenominator = maxRange - minRange;
        var xFraction = elementPosition.x / elementBounds.width;
        var yFraction = elementPosition.y / elementBounds.height;
        return {
            domain: minDomain + domainDenominator * xFraction,
            range: maxRange - rangeDenominator * yFraction
        };
    };
    return utils;
 });
--- a/platform/features/plot-reborn/src/services/ColorService.js
+++ b/platform/features/plot-reborn/src/services/ColorService.js
@@ -0,0 +1,154 @@
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*global define*/
 define(
    function () {
        'use strict';
        var COLOR_PALETTE = [
            [ 0x20, 0xB2, 0xAA ],
            [ 0x9A, 0xCD, 0x32 ],
            [ 0xFF, 0x8C, 0x00 ],
            [ 0xD2, 0xB4, 0x8C ],
            [ 0x40, 0xE0, 0xD0 ],
            [ 0x41, 0x69, 0xFF ],
            [ 0xFF, 0xD7, 0x00 ],
            [ 0x6A, 0x5A, 0xCD ],
            [ 0xEE, 0x82, 0xEE ],
            [ 0xCC, 0x99, 0x66 ],
            [ 0x99, 0xCC, 0xCC ],
            [ 0x66, 0xCC, 0x33 ],
            [ 0xFF, 0xCC, 0x00 ],
            [ 0xFF, 0x66, 0x33 ],
            [ 0xCC, 0x66, 0xFF ],
            [ 0xFF, 0x00, 0x66 ],
            [ 0xFF, 0xFF, 0x00 ],
            [ 0x80, 0x00, 0x80 ],
            [ 0x00, 0x86, 0x8B ],
            [ 0x00, 0x8A, 0x00 ],
            [ 0xFF, 0x00, 0x00 ],
            [ 0x00, 0x00, 0xFF ],
            [ 0xF5, 0xDE, 0xB3 ],
            [ 0xBC, 0x8F, 0x8F ],
            [ 0x46, 0x82, 0xB4 ],
            [ 0xFF, 0xAF, 0xAF ],
            [ 0x43, 0xCD, 0x80 ],
            [ 0xCD, 0xC1, 0xC5 ],
            [ 0xA0, 0x52, 0x2D ],
            [ 0x64, 0x95, 0xED ]
        ];
        /**
         * A representation of a color that allows conversions between different
         * formats.
         *
         * @constructor
         */
        function Color(integerArray) {
            this.integerArray = integerArray;
        }
        /**
         * Return color as a three element array of RGB values, where each value
         * is a integer in the range of 0-255.
         *
         * @return {number[]} the color, as integer RGB values
         */
        Color.prototype.asIntegerArray = function () {
            return this.integerArray.map(function (c) {
                return c;
            });
        };
       /**
        * Return color as a string using #-prefixed six-digit RGB hex notation
        * (e.g. #FF0000).  See http://www.w3.org/TR/css3-color/#rgb-color.
        *
        * @return {string} the color, as a style-friendly string
        */
        Color.prototype.asHexString = function () {
            return '#' + this.integerArray.map(function (c) {
                return (c < 16 ? '0' : '') + c.toString(16);
            }).join('');
        };
        /**
         * Return color as a RGBA float array.
         *
         * This format is present specifically to support use with
         * WebGL, which expects colors of that form.
         *
         * @return {number[]} the color, as floating-point RGBA values
         */
        Color.prototype.asRGBAArray = function () {
            return this.integerArray.map(function (c) {
                return c / 255.0;
            }).concat([1]);
        };
        /**
         * A color palette stores a set of colors and allows for different
         * methods of color allocation.
         *
         * @constructor
         */
        function ColorPalette() {
            this.nextColor = 0;
            this.colors = COLOR_PALETTE.map(function (color) {
                return new Color(color);
            });
        }
        /**
         * @returns {Color} the next unused color in the palette.  If all colors
         * have been allocated, it will wrap around.
         */
        ColorPalette.prototype.getNextColor = function () {
            var color = this.colors[this.nextColor % this.colors.length];
            this.nextColor++;
            return color;
        };
        /**
         * @param {number} index the index of the color to return.  An index
         * value larger than the size of the index will wrap around.
         * @returns {Color}
        */
        ColorPalette.prototype.getColor = function (index) {
            return this.colors[index % this.colors.length];
        };
        function ColorService() {}
        ColorService.prototype.ColorPalette = ColorPalette;
        ColorService.prototype.Color = Color;
        function getColorService() {
            return new ColorService();
        }
        return getColorService;
    }
 );
--- a/platform/features/plot/res/templates/plot.html
+++ b/platform/features/plot/res/templates/plot.html
@@ -25,6 +25,7 @@
    <div class="gl-plot"
         ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
         ng-repeat="subplot in plot.getSubPlots()">
 <!--         mct-pan="handlePan(position)">-->
        <div class="gl-plot-legend">
            <!-- ng-class is temporarily hard-coded in next element -->
            <span
@@ -42,7 +43,7 @@
        <div
            class="gl-plot-coords"
            ng-if="subplot.isHovering() && subplot.getHoverCoordinates()"
-            >
+             >
            {{subplot.getHoverCoordinates()}}
        </div>
--- a/platform/features/plot/src/PlotController.js
+++ b/platform/features/plot/src/PlotController.js
@@ -177,7 +177,7 @@ define(
            // Unsubscribe when the plot is destroyed
            $scope.$on("$destroy", releaseSubscription);
-
+                
            // Create a throttled update function
            scheduleUpdate = throttle(function () {
                modeOptions.getModeHandler().getSubPlots()
--- a/platform/persistence/elastic/bundle.json
+++ b/platform/persistence/elastic/bundle.json
@@ -17,7 +17,7 @@
            },
            {
                "key": "ELASTIC_ROOT",
-                "value": "http://localhost:9200",
+                "value": "/elastic",
                "priority": "fallback"
            },
            {
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
            {
                "key": "menu",
                "implementation": "gestures/ContextMenuGesture.js",
-                "depends": []
+                "depends": ["$timeout", "agentService"]
            }
        ],
        "components": [
@@ -54,7 +54,7 @@
            {
                "key": "menu",
                "implementation": "actions/ContextMenuAction.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope" ]
+                "depends": [ "$compile", "$document", "$window", "$rootScope", "agentService" ]
            }
        ]
    }
--- a/platform/representation/src/actions/ContextMenuAction.js
+++ b/platform/representation/src/actions/ContextMenuAction.js
@@ -47,7 +47,7 @@ define(
         * @param actionContexr the context in which the action
         *                      should be performed
         */
-        function ContextMenuAction($compile, $document, $window, $rootScope, actionContext) {
+        function ContextMenuAction($compile, $document, $window, $rootScope, agentService, actionContext) {
            function perform() {
                var winDim = [$window.innerWidth, $window.innerHeight],
@@ -94,13 +94,26 @@ define(
                body.append(menu);
                // Stop propagation so that clicks on the menu do not close the menu
-                menu.on('mousedown', function (event) {
+                // Stop propagation so that touches on the menu do not close the menu
-                    event.stopPropagation();
+                if (!agentService.isMobile(navigator.userAgent)) {
-                });
+                    menu.on('mousedown', function (event) {
                        event.stopPropagation();
                    });
                } else if (agentService.isMobile(navigator.userAgent)) {
                    menu.on('touchstart', function (event) {
                        event.stopPropagation();
                    });
                }
-                // Dismiss the menu when body is clicked elsewhere
+                // Dismiss the menu when body is clicked/touched elsewhere
                // ('mousedown' because 'click' breaks left-click context menus)
-                body.on('mousedown', dismiss);
+                // ('touchstart' because 'touch' breaks context menus up)
                if (!agentService.isMobile(navigator.userAgent)) {
                    body.on('mousedown', dismiss);
                } else if (agentService.isMobile(navigator.userAgent)) {
                    body.on('touchstart', dismiss);
                }
                // Don't launch browser's context menu
                actionContext.event.preventDefault();
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -39,16 +39,40 @@ define(
         * @param {DomainObject} domainObject the object on which actions
         *                       in the context menu will be performed
         */
-        function ContextMenuGesture(element, domainObject) {
+        function ContextMenuGesture($timeout, agentService, element, domainObject) {
            var actionContext,
-                stop;
+                stop,
                isPressing,
                longTouchTime = 500;
            // When context menu event occurs, show object actions instead
-            element.on('contextmenu', function (event) {
+            if (!agentService.isMobile(navigator.userAgent)) {
-                actionContext = {key: 'menu', domainObject: domainObject, event: event};
+                element.on('contextmenu', function (event) {
-                stop = domainObject.getCapability('action').perform(actionContext);
+                    actionContext = {key: 'menu', domainObject: domainObject, event: event};
-            });
+                    stop = domainObject.getCapability('action').perform(actionContext);
-            
+                });
            } else if (agentService.isMobile(navigator.userAgent)) {
                // If on mobile device, then start timeout for the single touch event
                // during the timeout 'isPressing' is true.
                element.on('touchstart', function (event) {
                    if (event.touches.length < 2) {
                        isPressing = true;
                        // After the timeout, if 'isPressing' is
                        // true, display context menu for object
                        $timeout(function () {
                            if (isPressing) {
                                actionContext = {key: 'menu', domainObject: domainObject, event: event};
                                stop = domainObject.getCapability('action').perform(actionContext);
                            }
                        }, longTouchTime);
                    }
                });
                // Whenever the touch event ends, 'isPressing' is false.
                element.on('touchend', function (event) {
                    isPressing = false;
                });
            }
            return {
                /**
                 * Detach any event handlers associated with this gesture.
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -43,13 +43,24 @@ define(
                mockBody,
                mockWindow,
                mockRootScope,
                mockAgentService,
                mockScope,
                mockElement,
                mockDomainObject,
                mockEvent,
                mockActionContext,
                mockNavigator,
                mockStopPropagation,
                action;
            function fireEvent(evt, value) {
                mockElement.on.calls.forEach(function (call) {
                    if (call.args[0] === evt) {
                        call.args[1](value);
                    }
                });
            }
            beforeEach(function () {
                mockCompile = jasmine.createSpy("$compile");
                mockCompiledTemplate = jasmine.createSpy("template");
@@ -58,10 +69,11 @@ define(
                mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS);
                mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
                mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                mockScope = {};
                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
-                mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
+                mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
                mockEvent.pageX = 0;
                mockEvent.pageY = 0;
@@ -71,12 +83,13 @@ define(
                mockRootScope.$new.andReturn(mockScope);
                mockActionContext = {key: 'menu', domainObject: mockDomainObject, event: mockEvent};
-
+                
                action = new ContextMenuAction(
                    mockCompile,
                    mockDocument,
                    mockWindow,
                    mockRootScope,
                    mockAgentService,
                    mockActionContext
                );
            });
@@ -135,6 +148,42 @@ define(
                // Listener should have been detached from body
                expect(mockBody.off).toHaveBeenCalled();
            });
            it("keeps a menu when menu is clicked", function () {
                // Show the menu
                action.perform();
                // Find and fire body's mousedown listener
                mockMenu.on.calls.forEach(function (call) {
                    if (call.args[0] === 'mousedown') {
                        call.args[1](mockEvent);
                    }
                });
                // Menu should have been removed
                expect(mockMenu.remove).not.toHaveBeenCalled();
                // Listener should have been detached from body
                expect(mockBody.off).not.toHaveBeenCalled();
            });
            it("keeps a menu when menu is clicked on mobile", function () {
                mockAgentService.isMobile.andReturn(true);
                action = new ContextMenuAction(
                    mockCompile,
                    mockDocument,
                    mockWindow,
                    mockRootScope,
                    mockAgentService,
                    mockActionContext
                );
                action.perform();
                mockMenu.on.calls.forEach(function (call) {
                    if (call.args[0] === 'touchstart') {
                        call.args[1](mockEvent);
                    }
                });
            });
        });
    }
 );
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -31,28 +31,54 @@ define(
        "use strict";
        var JQLITE_FUNCTIONS = [ "on", "off", "find", "append", "remove" ],
-            DOMAIN_OBJECT_METHODS = [ "getId", "getModel", "getCapability", "hasCapability", "useCapability" ];
+            DOMAIN_OBJECT_METHODS = [ "getId", "getModel", "getCapability", "hasCapability", "useCapability"];
        describe("The 'context menu' gesture", function () {
-            var mockElement,
+            var mockTimeout,
                mockElement,
                mockAgentService,
                mockDomainObject,
                mockEvent,
                mockTouchEvent,
                mockContextMenuAction,
                mockActionContext,
                mockTouch,
                gesture,
-                fireGesture;
+                fireGesture,
                fireTouchStartGesture,
                fireTouchEndGesture;
            beforeEach(function () {
                mockTimeout = jasmine.createSpy("$timeout");
                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
-
+                mockContextMenuAction = jasmine.createSpyObj(
-                gesture = new ContextMenuGesture(mockElement, mockDomainObject);
+                    "action",
                    [ "perform", "getActions" ]
                );
                mockActionContext = jasmine.createSpyObj(
                    "actionContext",
                    [ "" ]
                );
                mockActionContext = {domainObject: mockDomainObject, event: mockEvent};
                mockDomainObject.getCapability.andReturn(mockContextMenuAction);
                mockContextMenuAction.perform.andReturn(jasmine.any(Function));
                mockAgentService.isMobile.andReturn(false);
                gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
                // Capture the contextmenu callback
                fireGesture =  mockElement.on.mostRecentCall.args[1];
            });
            it("attaches a callback for context menu events", function () {
                // Fire a click and expect it to happen
                fireGesture();
                expect(mockElement.on).toHaveBeenCalledWith(
                    "contextmenu",
                    jasmine.any(Function)
@@ -70,6 +96,34 @@ define(
                    mockDomainObject.calls
                );
            });
            it("attaches a callback for context menu events on mobile", function () {
                // Mock touch event and set to mobile device
                mockTouchEvent = jasmine.createSpyObj("event", ["preventDefault", "touches"]);
                mockTouch = jasmine.createSpyObj("touch", ["length"]);
                mockTouch.length = 1;
                mockTouchEvent.touches.andReturn(mockTouch);
                mockAgentService.isMobile.andReturn(true);
                // Then create new (mobile) gesture
                gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
                // Set calls for the touchstart and touchend gestures
                fireTouchStartGesture = mockElement.on.calls[1].args[1];
                fireTouchEndGesture =  mockElement.on.mostRecentCall.args[1];
                // Fire touchstart and expect touch start to begin
                fireTouchStartGesture(mockTouchEvent);
                expect(mockElement.on).toHaveBeenCalledWith(
                    "touchstart",
                    jasmine.any(Function)
                );
                // Expect timeout to begin and then fireTouchEnd
                expect(mockTimeout).toHaveBeenCalled();
                mockTimeout.mostRecentCall.args[0]();
                fireTouchEndGesture(mockTouchEvent);
            });
        });
    }
 );