[Mobile] Merge 1

Part 1 of merge, sliding menu not
working, however right representation
works and the left tree is expanded.

platform/commonUI/browse/bundle.json

@@ -21,7 +21,7 @@
             {
                 "key": "BrowseObjectController",
                 "implementation": "BrowseObjectController.js",
-                "depends": [ "$scope", "$location", "$route" ]
+                "depends": [ "$scope", "$location", "$route", "$window" ]
             },
             {
                 "key": "CreateMenuController",

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

@@ -21,11 +21,21 @@
 -->
 <span ng-controller="BrowseObjectController">
     <div class="object-browse-bar bar l-flex">
+
+        <div class="pane-tabs left mobile-hide"
+             ng-class="{inactivePane: !ngModel.leftPane, activePane: ngModel.leftPane}"
+             ng-click="ngModel.leftPane = !ngModel.leftPane">
+        </div>
+
         <div class="items-select left">
-            <mct-representation key="'back-arrow'" class="l-back"></mct-representation>
+            <mct-representation key="'back-arrow'"
-            <mct-representation key="'object-header'" mct-object="domainObject">
+                                class="l-back">
+            </mct-representation>
+            <mct-representation key="'object-header'"
+                                mct-object="domainObject">
             </mct-representation>
         </div>
+
         <div class="btn-bar right">
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
@@ -38,6 +48,12 @@
                                 class="mobile-hide">
             </mct-representation>
         </div>
+        
+        <div class="pane-tabs right"
+             ng-class="{inactivePane: !ngModel.rightPane, activePane: ngModel.rightPane}"
+             ng-click="ngModel.rightPane = !ngModel.rightPane">
+        </div>
+        
     </div>
 
     <div class='object-holder abs vscroll'>
@@ -45,4 +61,5 @@
                             mct-object="representation.selected.key && domainObject">
         </mct-representation>
     </div>
+    
 </span>

platform/commonUI/browse/res/templates/browse.html

@@ -20,14 +20,30 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div class="abs holder-all browse-mode" ng-controller="BrowseController">
+<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 browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
+
-        <mct-split-pane class='contents abs' anchor='left'>
+    <div class="holder browse-area s-browse-area abs browse-wrapper">
-            <div class='split-pane-component treeview pane left'>
+         <!--ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">-->
+
+        <mct-split-pane
+                class='contents abs'
+                anchor='left'>
+
+            <!-- PANE TREE-->
+            <div class='split-pane-component treeview pane left'
+                 ng-class='{inactive: !paneModel.leftPane}'>
+
 	            <div class="holder abs l-mobile">
-	                <mct-representation key="'create-button'" mct-object="navigatedObject">
+	                <mct-representation key="'create-button'"
+                                        mct-object="navigatedObject"
+                                        ng-model="paneModel">
+
 	                </mct-representation>
+
 	                <div class='holder search-holder abs'
 	                     ng-class="{active: treeModel.search}">
 	                    <mct-representation key="'search'"
@@ -35,6 +51,7 @@
 	                                 ng-model="treeModel">
 	                    </mct-representation>
 	                </div>
+
 	                <div class='tree-holder abs mobile-tree-holder'
 	                     ng-hide="treeModel.search">
 	                    <mct-representation key="'tree'"
@@ -44,18 +61,59 @@
 	                </div>
 	            </div>
             </div>
+            <!-- PANE TREE-->
 
-            <mct-splitter class="mobile-hide"></mct-splitter>
 
-            <div class='split-pane-component items pane right-repr'>
+            <!-- SPLITTER LEFT-->
-                <div class='holder abs l-mobile' id='content-area'>
+            <mct-splitter class="mobile-hide"
-                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                      class="splitter-bar left"
+                      ng-class="{inactive: !paneModel.leftPane}">
+            </mct-splitter>
+            <!-- SPLITTER LEFT-->
+
+            <!-- PANE RIGHT-->
+            <div class='split-pane-component items secondary-split pane right slide'
+                 ng-class='{leftInactive: !paneModel.leftPane}'>
+
+                <!--<mct-split-pane class='contents abs'-->
+                                <!--anchor='right'>-->
+
+                <!--<div class='split-pane-component items pane slide'-->
+                    <!--ng-class='{rightInactive: !paneModel.rightPane}'>-->
+                <div class='holder abs l-mobile'
+                     id='content-area'>
+                    <mct-representation mct-object="navigatedObject"
+                                        key="'browse-object'"
+                                        ng-model="paneModel">>
                     </mct-representation>
                 </div>
+
                 <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
+                <!--</div>-->
+
+                <!--<mct-splitter class="splitter-bar right"-->
+                              <!--ng-class="{inactive: !paneModel.rightPane}">-->
+                <!--</mct-splitter>-->
+
+                <!--<div class='split-pane-component object-inspector pane right'-->
+                     <!--ng-class='{inactive: !paneModel.rightPane}'>-->
+                    <!--<div class='holder inspector-holder abs'>-->
+                        <!--<mct-representation key="'object-inspector'"-->
+                                            <!--mct-object="domainObject"-->
+                                            <!--ng-model="treeModel">-->
+                        <!--</mct-representation>-->
+                    <!--</div>-->
+                <!--</div>-->
+
+        <!--</mct-split-pane>-->
             </div>
+            <!-- PANE RIGHT-->
+            
         </mct-split-pane>
-    </div>
+        
-    <mct-include key="'bottombar'"></mct-include>
+    </div>
+    
+    <mct-include key="'bottombar'">
+    </mct-include>
 </div>
 

platform/commonUI/browse/res/templates/create/create-button.html

@@ -20,8 +20,10 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
+    <div class="btn btn-menu create-btn major"
-	    Create
+         ng-class="{inactivePane: !ngModel.leftPane}"
+         ng-click="createController.toggle()">
+	    <span>Create</span>
     </div>
     <div class="menu dropdown super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">

platform/commonUI/browse/src/BrowseController.js

@@ -220,6 +220,11 @@ define(
                 $scope.treeClass = !$scope.treeClass;
             };
 
+            // Provide a model for the left pane
+            $scope.paneModel = {
+                selectedObject: navigationService.getNavigation()
+            };
+
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -240,7 +245,6 @@ define(
             $scope.backArrow = navigateToParent;
             
             $scope.checkRoot = checkRoot;
-
         }
 
         return BrowseController;

platform/commonUI/browse/src/BrowseObjectController.js

@@ -32,7 +32,7 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function BrowseObjectController($scope, $location, $route) {
+        function BrowseObjectController($scope, $location, $route, $window) {
             function setViewForDomainObject(domainObject) {
                 var locationViewKey = $location.search().view;
 
@@ -65,6 +65,19 @@ define(
                 }
             }
 
+            // If there is a defined opener, assume that the window was opened 
+            //   by choosing 'Open in a new tab'
+            if ($window.opener) {
+                // The desired default for this is to have a closed left pane
+                $scope.ngModel.leftPane = false;
+            } else {
+                // Otherwise, start the application with an open left pane
+                $scope.ngModel.leftPane = true;
+            }
+            
+            // The object inspector by default always starts closed
+            $scope.ngModel.rightPane = false;
+            
             $scope.$watch('domainObject', setViewForDomainObject);
             $scope.$watch('representation.selected.key', updateQueryParam);
         }

platform/commonUI/browse/test/BrowseControllerSpec.js

@@ -57,6 +57,7 @@ define(
                     "$scope",
                     [ "$on", "$watch", "treeSlide", "backArrow" ]
                 );
+                mockScope.ngModel = {};
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
                     "$location",

platform/commonUI/browse/test/BrowseObjectControllerSpec.js

@@ -31,6 +31,7 @@ define(
             var mockScope,
                 mockLocation,
                 mockRoute,
+                mockWindow,
                 mockUnlisten,
                 controller;
 
@@ -48,7 +49,9 @@ define(
                     "$scope",
                     [ "$on", "$watch" ]
                 );
+                mockScope.ngModel = {};
                 mockRoute = { current: { params: {} } };
+                mockWindow = {};
                 mockLocation = jasmine.createSpyObj(
                     "$location",
                     [ "path", "search" ]
@@ -60,7 +63,8 @@ define(
                 controller = new BrowseObjectController(
                     mockScope,
                     mockLocation,
-                    mockRoute
+                    mockRoute,
+                    mockWindow
                 );
             });
 
@@ -98,6 +102,22 @@ define(
                     .toEqual(testViews[1]);
             });
             
+            it("sets ngModel properties on initialization", function () {
+                // Left pane open status depends on how the window was opened
+                // Case 1: undefined opener
+                expect(mockWindow.opener).not.toBeDefined();
+                expect(mockScope.ngModel.leftPane).toBeTruthy();
+                
+                // Case 2: defined opener
+                mockWindow.opener = {};
+                controller = new BrowseObjectController(
+                    mockScope,
+                    mockLocation,
+                    mockRoute,
+                    mockWindow
+                );
+                expect(mockScope.ngModel.leftPane).toBeFalsy();
+            });
         });
     }
 );

platform/commonUI/general/bundle.json

@@ -108,6 +108,11 @@
                 "key": "SelectorController",
                 "implementation": "controllers/SelectorController.js",
                 "depends": [ "objectService", "$scope" ]
+            },
+            {
+                "key": "ObjectInspectorController",
+                "implementation": "controllers/ObjectInspectorController.js",
+                "depends": [ "$scope", "objectService" ]
             }
         ],
         "directives": [
@@ -223,6 +228,10 @@
                 "key": "switcher",
                 "templateUrl": "templates/controls/switcher.html",
                 "uses": [ "view" ]
+            },
+            {
+              "key": "object-inspector",
+              "templateUrl": "templates/object-inspector.html"
             }
         ],
         "controls": [

platform/commonUI/general/res/css/theme-espresso.css

@@ -5701,3 +5701,215 @@ input[type="text"] {
   .l-view-section label,
   .l-view-section .inline-block {
     display: inline-block; }
+
+/*****************************************************************************
+ * 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 31, ../sass/tree/_pane.scss */
+.pane.left.inactive {
+  width: 0 !important;
+  min-width: 0 !important; }
+  /* line 36, ../sass/tree/_pane.scss */
+  .pane.left.inactive .tree-holder {
+    padding-right: 0; }
+  /* line 41, ../sass/tree/_pane.scss */
+  .pane.left.inactive .search-holder {
+    display: none; }
+/* line 47, ../sass/tree/_pane.scss */
+.pane.left .create-btn.major {
+  top: 0;
+  left: 0;
+  transition: all 0.35s; }
+  /* line 52, ../sass/tree/_pane.scss */
+  .pane.left .create-btn.major.inactivePane {
+    top: 0;
+    left: 0;
+    position: relative;
+    padding: 0;
+    text-align: center;
+    font-size: 12px;
+    width: 13px;
+    height: 16px;
+    line-height: 14px;
+    left: -11px;
+    top: 20px; }
+    /* line 70, ../sass/tree/_pane.scss */
+    .pane.left .create-btn.major.inactivePane span {
+      display: none; }
+
+/* line 78, ../sass/tree/_pane.scss */
+.splitter-bar.splitter {
+  opacity: 1;
+  transition: opacity 0.35s, visibility 0.35s;
+  top: 0; }
+  /* line 85, ../sass/tree/_pane.scss */
+  .splitter-bar.splitter.inactive {
+    visibility: hidden;
+    opacity: 0; }
+    /* line 89, ../sass/tree/_pane.scss */
+    .splitter-bar.splitter.inactive:before {
+      border-width: 0; }
+
+/* line 97, ../sass/tree/_pane.scss */
+.splitter-bar.left.splitter.inactive {
+  transition: opacity 0s, visibility 0s; }
+
+/* line 106, ../sass/tree/_pane.scss */
+.split-pane-component.secondary-split.pane.right.leftInactive {
+  left: 0 !important; }
+/* line 109, ../sass/tree/_pane.scss */
+.split-pane-component.secondary-split.pane.right.slide {
+  transition: left 0.35s; }
+/* line 116, ../sass/tree/_pane.scss */
+.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.rightInactive {
+  right: 0 !important; }
+/* line 119, ../sass/tree/_pane.scss */
+.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.slide {
+  transition: right 0.35s; }
+/* line 124, ../sass/tree/_pane.scss */
+.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar {
+  position: relative; }
+  /* line 127, ../sass/tree/_pane.scss */
+  .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs {
+    position: relative;
+    cursor: pointer;
+    font-family: symbolsfont;
+    background-color: #595959;
+    width: 13px !important;
+    height: 16px;
+    line-height: 16px;
+    font-size: 10px;
+    text-align: center; }
+    /* line 141, ../sass/tree/_pane.scss */
+    .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left {
+      left: -12px;
+      top: 3px;
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px; }
+      /* line 149, ../sass/tree/_pane.scss */
+      .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane {
+        left: -15px; }
+        /* line 151, ../sass/tree/_pane.scss */
+        .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane:after {
+          content: 'F'; }
+      /* line 155, ../sass/tree/_pane.scss */
+      .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.activePane:after {
+        content: '<'; }
+    /* line 161, ../sass/tree/_pane.scss */
+    .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right {
+      float: right;
+      right: -9px;
+      top: -13px;
+      border-top-left-radius: 2px;
+      border-bottom-left-radius: 2px; }
+      /* line 170, ../sass/tree/_pane.scss */
+      .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane {
+        right: -12px; }
+        /* line 172, ../sass/tree/_pane.scss */
+        .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane:after {
+          content: '\e608'; }
+      /* line 176, ../sass/tree/_pane.scss */
+      .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.activePane:after {
+        content: '>'; }
+  /* line 184, ../sass/tree/_pane.scss */
+  .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .items-select {
+    margin-left: 10px; }
+  /* line 188, ../sass/tree/_pane.scss */
+  .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right {
+    margin-right: 10px; }
+/* line 194, ../sass/tree/_pane.scss */
+.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right {
+  min-width: 150px;
+  opacity: 1;
+  transition: opacity 0.175s;
+  transition-delay: 0.175s; }
+  /* line 200, ../sass/tree/_pane.scss */
+  .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right.inactive {
+    min-width: 0 !important;
+    width: 0 !important;
+    visibility: hidden;
+    opacity: 0; }
+  /* line 207, ../sass/tree/_pane.scss */
+  .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder {
+    overflow-y: auto;
+    overflow-x: hidden; }
+    /* line 211, ../sass/tree/_pane.scss */
+    .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon {
+      color: #0099cc; }
+    /* line 215, ../sass/tree/_pane.scss */
+    .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li {
+      font-size: 0.9em;
+      padding: 2px 0px;
+      margin: 2px 0px;
+      border-top: solid 1px grey; }
+      /* line 222, ../sass/tree/_pane.scss */
+      .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child {
+        border-top-width: 0px; }
+      /* line 227, ../sass/tree/_pane.scss */
+      .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em {
+        font-weight: bold;
+        line-height: 1.25em; }
+        /* line 231, ../sass/tree/_pane.scss */
+        .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after {
+          content: '\A';
+          white-space: pre; }
+      /* line 238, ../sass/tree/_pane.scss */
+      .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location {
+        display: inline-block;
+        max-width: 100%; }
+        /* line 242, ../sass/tree/_pane.scss */
+        .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label {
+          cursor: pointer;
+          display: inline-block;
+          white-space: nowrap;
+          transition: background-color 0.2s;
+          border-radius: 4px;
+          padding: 3px;
+          margin: 2px;
+          max-width: 100%;
+          text-overflow: ellipsis;
+          overflow-x: hidden; }
+          /* line 249, ../sass/tree/_pane.scss */
+          .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover {
+            background-color: #404040; }
+          /* line 263, ../sass/tree/_pane.scss */
+          .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon {
+            font-size: 14px; }
+            /* line 266, ../sass/tree/_pane.scss */
+            .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link {
+              color: #49dedb;
+              font-size: 6px;
+              margin-left: -22px;
+              margin-right: 9px;
+              text-shadow: black 0 1px 2px;
+              z-index: 2; }
+        /* line 280, ../sass/tree/_pane.scss */
+        .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after {
+          content: '>';
+          font-family: symbolsfont;
+          font-size: 8px;
+          position: relative;
+          top: -8px;
+          left: -4px; }
+        /* line 290, ../sass/tree/_pane.scss */
+        .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after {
+          content: '';
+          display: inline-block; }

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

@@ -80,3 +80,4 @@
 @import "initialization";
 @import "hide-non-functional";
 @import "views";
+@import "tree/pane";

platform/commonUI/general/res/sass/tree/_pane.scss

@@ -0,0 +1,298 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+// Added by shale on 08/19/2015. Styling for the collapsible tree view. 
+
+$transitionTime: 0.35s; // For the pane open/close
+
+
+// Set the left pane (which contains the tree) to have no width to close
+// (not display:none because we still need to have access to the create button)
+.pane.left {
+    &.inactive {
+        width: 0 !important;
+        min-width: 0 !important;
+        
+        // Undo the tree-holder's right padding when tree closed
+        .tree-holder {
+            padding-right: 0;
+        }
+        
+        // Hide the search bar when the pane is closed
+        .search-holder {
+            display: none;
+        }
+    }
+    
+    // When the pane is closed, move and resize the create button
+    .create-btn.major {
+        top: 0;
+        left: 0;
+        transition: all $transitionTime;
+
+        &.inactivePane {
+            top: 0;
+            left: 0;
+
+            position: relative;
+            padding: 0;
+
+            text-align: center;
+            font-size: 12px;
+
+            width: 13px;
+            height: 16px;
+            line-height: 14px;
+
+            left: -11px;
+            top: 20px;
+
+            // Remove 'Create' text from the button when in small mode
+            span {
+                display: none;
+            }
+        }
+    }
+}
+
+// Hide a splitter bar when the corresponding pane is inactive
+.splitter-bar.splitter {
+    opacity: 1;
+    transition: opacity $transitionTime, visibility $transitionTime;
+    
+    // Make the splitter bar vertically span to the top
+    top: 0;
+    
+    &.inactive {
+        visibility: hidden;
+        opacity: 0;
+        
+        &:before {
+            border-width: 0;
+        }
+    }
+}
+// Fade the splitter bar in when opening treeview, but immediately fade
+//   out when closing treeview
+.splitter-bar.left.splitter {
+    &.inactive {
+        transition: opacity 0s, visibility 0s;
+    }
+}
+
+// The main view needs to align left when the left pane is moving around
+.split-pane-component.secondary-split.pane.right {
+    
+    // Sliding transition for open/close of left pane
+    &.leftInactive {
+        left: 0 !important;
+    }
+    &.slide {
+        transition: left $transitionTime;
+    }
+    
+    .split-pane-component.items.pane {
+        
+        // Sliding transition for open/close of right pane
+        &.rightInactive {
+            right: 0 !important;
+        }
+        &.slide {
+            transition: right $transitionTime;
+        }
+        
+        // Tab buttons close to the splitter bars
+        .object-browse-bar {
+            position: relative;
+            
+            .pane-tabs {
+                position: relative;
+                cursor: pointer;
+                font-family: symbolsfont;
+                
+                background-color: darken($colorBodyFg, 25%);
+                
+                width: 13px !important;
+                height: 16px;
+                line-height: 16px;
+                font-size: 10px;
+                text-align: center;
+                
+                // Open and closes treeview
+                &.left {
+                    left: -12px;
+                    top: 3px;
+
+                    border-top-right-radius: 2px;
+                    border-bottom-right-radius: 2px;
+
+                    // Change button icon depending on state
+                    &.inactivePane {
+                        left: -15px;
+                        &:after {
+                            content: 'F';//'>';
+                        }
+                    }
+                    &.activePane:after {
+                        content: '<';
+                    }
+                }
+                
+                // Open and closes object inspector 
+                &.right {
+                    float: right;
+                    right: -9px;
+                    top: -13px;
+
+                    border-top-left-radius: 2px;
+                    border-bottom-left-radius: 2px;
+                    
+                    // Change button icon depending on state
+                    &.inactivePane {
+                        right: -12px;
+                        &:after {
+                            content: '\e608';//'G';//'<';
+                        }
+                    }
+                    &.activePane:after {
+                        content: '>';
+                    }
+                }
+            }
+            
+            // Move domain object title to the right some to make room 
+            //   for treeview collapser button
+            .items-select {
+                margin-left: 10px;
+            }
+            // Similarly move the top button bar for the object inspector
+            .btn-bar.right {
+                margin-right: 10px;
+            }
+        }
+    }
+    
+    .split-pane-component.object-inspector.pane.right {
+        min-width: 150px;
+        opacity: 1;
+        
+        transition: opacity $transitionTime/2;
+        transition-delay: $transitionTime/2;
+        &.inactive {
+            min-width: 0 !important;
+            width: 0 !important;
+            visibility: hidden;
+            opacity: 0;
+        }
+        
+        .holder.inspector-holder {
+            overflow-y: auto;
+            overflow-x: hidden;
+            
+            .info-icon {
+                color: $colorKey;
+            }
+            
+            ul li {
+                font-size: 0.9em;
+
+                // Add spacing between items
+                padding: 2px 0px;
+                margin: 2px 0px;
+                border-top: solid 1px grey;
+                &:first-child {
+                    border-top-width: 0px;
+                }
+
+                // Style the titles
+                em {
+                    font-weight: bold;
+                    line-height: 1.25em;
+
+                    &:after {
+                        content: '\A';
+                        white-space: pre;
+                    }
+                }
+
+                // Style object labels 
+                .inspector-location {
+                    display: inline-block;
+                    max-width: 100%;
+                    
+                    .label {
+                        cursor: pointer;
+                        display: inline-block;
+                        white-space: nowrap;
+
+                        // Colors
+                        transition: background-color 0.2s;
+                        &:hover {
+                            background-color: lighten($colorBodyBg, 5%);
+                        }
+
+                        // Sizing and spacing 
+                        border-radius: 4px;
+                        padding: 3px;
+                        margin: 2px;
+
+                        // Horizontal overflow 
+                        max-width: 100%;
+                        text-overflow: ellipsis;
+                        overflow-x: hidden;
+                        
+                        .icon.type-icon {
+                            font-size: 14px;
+
+                            .l-icon-link {
+                                color: $colorIconLink;
+
+                                font-size: 6px;
+                                margin-left: -22px;
+                                margin-right: 9px;
+
+                                @include txtShdwSubtle(1);
+                                z-index: 2;
+                            }
+                        }
+                    }
+
+                    // Add arrows to indicate tree heirarchy 
+                    &:after {
+                        content: '>';
+                        font-family: symbolsfont;
+                        font-size: 8px;
+                        
+                        //margin-left: -6px;
+                        position: relative;
+                        top: -8px;
+                        left: -4px;
+                    }
+                    &:last-child:after {
+                        content: '';
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,59 @@
+<!--
+ 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.
+-->
+<span ng-controller="ObjectInspectorController as controller">
+    <span class="ui-symbol info-icon">
+        &#xe608;
+    </span>
+    
+    <ul>
+        <li ng-repeat="data in metadata">
+            <em>{{ data.name }}</em>
+            {{ data.value }}
+        </li>
+        <li ng-if="contextutalParents.length > 0">
+            <em title="The location of this linked object.">
+                Contextual Location
+            </em>
+            <span class="inspector-location"
+                  ng-repeat="parent in contextutalParents">
+                <mct-representation key="'label'"
+                                    mct-object="parent"
+                                    ng-model="ngModel"
+                                    ng-click="ngModel.selectedObject = parent">
+                </mct-representation>
+            </span>
+        </li>
+        <li ng-if="primaryParents.length > 0">
+            <em title="The location of the object that this was linked from.">
+                Primary Location
+            </em>
+            <span class="inspector-location"
+                  ng-repeat="parent in primaryParents">
+                <mct-representation key="'label'"
+                                    mct-object="parent"
+                                    ng-model="ngModel"
+                                    ng-click="ngModel.selectedObject = parent">
+                </mct-representation>
+            </span>
+        </li>
+    </ul>
+</span>

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

@@ -0,0 +1,117 @@
+/*****************************************************************************
+ * 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 ObjectInspectorController. Created by shale on 08/21/2015.
+ */
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The ObjectInspectorController gets and formats the data for 
+         *  the inspector display
+         *
+         * @constructor
+         */
+        function ObjectInspectorController($scope, objectService) {
+            $scope.primaryParents = [];
+            $scope.contextutalParents = [];
+            //$scope.isLink = false;
+            
+            // Gets an array of the contextual parents/anscestors of the selected object
+            function getContextualPath() {
+                var currentObj = $scope.ngModel.selectedObject,
+                    currentParent,
+                    parents = [];
+                
+                currentParent = currentObj &&
+                    currentObj.hasCapability('context') &&
+                    currentObj.getCapability('context').getParent();
+                
+                while (currentParent && currentParent.getModel().type !== 'root' &&
+                        currentParent.hasCapability('context')) {
+                    // Record this object 
+                    parents.unshift(currentParent);
+                    
+                    // Get the next one up the tree 
+                    currentObj = currentParent;
+                    currentParent = currentObj.getCapability('context').getParent();
+                }
+                
+                $scope.contextutalParents = parents;
+            }
+            
+            // Gets an array of the parents/anscestors of the selected object's 
+            //   primary location (locational of original non-link)
+            function getPrimaryPath(current) {
+                var location;
+                
+                // If this the the initial call of this recursive function
+                if (!current) {
+                    current = $scope.ngModel.selectedObject;
+                    $scope.primaryParents = [];
+                }
+                
+                location = current.getModel().location;
+                
+                if (location && location !== 'root') {
+                    objectService.getObjects([location]).then(function (obj) {
+                        var next = obj[location];
+                        
+                        $scope.primaryParents.unshift(next);
+                        getPrimaryPath(next);
+                    });
+                }
+                
+            }
+            
+            // Gets the metadata for the selected object
+            function getMetadata() {
+                $scope.metadata = $scope.ngModel.selectedObject &&
+                    $scope.ngModel.selectedObject.hasCapability('metadata') &&
+                    $scope.ngModel.selectedObject.useCapability('metadata');
+            }
+            
+            // Set scope variables when the selected object changes 
+            $scope.$watch('ngModel.selectedObject', function () {
+                $scope.isLink = $scope.ngModel.selectedObject &&
+                    $scope.ngModel.selectedObject.hasCapability('location') &&
+                    $scope.ngModel.selectedObject.getCapability('location').isLink();
+                
+                if ($scope.isLink) {
+                    getPrimaryPath();
+                    getContextualPath();
+                } else {
+                    $scope.primaryParents = [];
+                    getContextualPath();
+                }
+                
+                getMetadata();
+            });
+        }
+
+        return ObjectInspectorController;
+    }
+);

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

@@ -29,7 +29,8 @@ define(
         // Pixel width to allocate for the splitter itself
         var SPLITTER_TEMPLATE = "<div class='abs'" +
                 "mct-drag-down=\"splitter.startMove()\" " +
-                "mct-drag=\"splitter.move(delta)\"></div>",
+                "mct-drag=\"splitter.move(delta)\" " +
+                "mct-drag-up=\"splitter.endMove()\"></div>",
             OFFSETS_BY_EDGE = {
                 left: "offsetLeft",
                 right: "offsetRight",
@@ -44,7 +45,8 @@ define(
          */
         function MCTSplitter() {
             function link(scope, element, attrs, mctSplitPane) {
-                var initialPosition;
+                var initialPosition,
+                    slideElement;
 
                 element.addClass("splitter");
 
@@ -55,8 +57,27 @@ define(
                 scope.splitter = {
                     // Begin moving this splitter
                     startMove: function () {
-                        var splitter = element[0];
+                        var splitter = element[0],
+                            children = element.parent().children(),
+                            i, j;
+                        
+                        // Set initial position
                         initialPosition = mctSplitPane.position();
+                        
+                        // Remove sliding class from sibling element so no delay in pane movement
+                        for (i = 0; i < children.length; i += 1) {
+                            // undefined check
+                            if (children[i].classList) {
+                                for (j = 0; j < children[i].classList.length; j += 1) {
+                                    if (children[i].classList[j] === 'slide') {
+                                        // Store the element that had the sliding class so 
+                                        //  we can replace it later
+                                        slideElement = children[i];
+                                        children[i].classList.remove('slide');
+                                    }
+                                }
+                            }
+                        }
                     },
                     // Handle user changes to splitter position
                     move: function (delta) {
@@ -67,6 +88,12 @@ define(
                         
                         // Update the position of this splitter
                         mctSplitPane.position(initialPosition + pixelDelta);
+                    },
+                    // Replace sliding class
+                    endMove: function () {
+                        if (slideElement && slideElement.classList) {
+                            slideElement.classList.add('slide');
+                        }
                     }
                 };
             }

platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js

@@ -0,0 +1,112 @@
+/*****************************************************************************
+ * 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*/
+
+/**
+ * Created by shale on 08/24/2015.
+ */
+define(
+    ["../../src/controllers/ObjectInspectorController"],
+    function (ObjectInspectorController) {
+        "use strict";
+
+        describe("The object inspector controller ", function () {
+            var mockScope,
+                mockObjectService,
+                mockPromise,
+                mockDomainObject,
+                mockContextCapability,
+                mockLocationCapability,
+                controller;
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj(
+                    "$scope",
+                    [ "$watch" ]
+                );
+                mockScope.ngModel = {};
+                mockScope.ngModel.selectedObject = 'mock selected object';
+                
+                mockObjectService = jasmine.createSpyObj(
+                    "objectService",
+                    [ "getObjects" ]
+                );
+                mockPromise = jasmine.createSpyObj(
+                    "promise",
+                    [ "then" ]
+                );
+                mockObjectService.getObjects.andReturn(mockPromise);
+                
+                mockDomainObject = jasmine.createSpyObj(
+                    "selectedObject",
+                    [ "hasCapability", "getCapability", "useCapability", "getModel" ]
+                );
+                mockDomainObject.getModel.andReturn({location: 'somewhere'});
+                mockDomainObject.hasCapability.andReturn(true);
+                
+                mockContextCapability = jasmine.createSpyObj(
+                    "context capability",
+                    [ "getParent" ]
+                );
+                mockLocationCapability = jasmine.createSpyObj(
+                    "location capability",
+                    [ "isLink" ]
+                );
+                mockDomainObject.getCapability.andCallFake(function (param) {
+                    if (param === 'location') {
+                        return mockLocationCapability;
+                    } else if (param === 'context') {
+                        return mockContextCapability;
+                    }
+                });
+                
+                controller = new ObjectInspectorController(mockScope, mockObjectService);
+                
+                // Change the selected object to trigger the watch call
+                mockScope.ngModel.selectedObject = mockDomainObject;
+            });
+
+            it("watches for changes to the selected object", function () {
+                expect(mockScope.$watch).toHaveBeenCalledWith('ngModel.selectedObject', jasmine.any(Function));
+            });
+
+            it("looks for contextual parent objects", function () {
+                mockScope.$watch.mostRecentCall.args[1]();
+                expect(mockContextCapability.getParent).toHaveBeenCalled();
+            });
+
+            it("if link, looks for primary parent objects", function () {
+                mockLocationCapability.isLink.andReturn(true);
+                
+                mockScope.$watch.mostRecentCall.args[1]();
+                expect(mockDomainObject.getModel).toHaveBeenCalled();
+                expect(mockObjectService.getObjects).toHaveBeenCalled();
+                mockPromise.then.mostRecentCall.args[0]({'somewhere': mockDomainObject});
+            });
+            
+            it("gets metadata", function () {
+                mockScope.$watch.mostRecentCall.args[1]();
+                expect(mockDomainObject.useCapability).toHaveBeenCalledWith('metadata');
+            });
+        });
+    }
+);

platform/commonUI/general/test/suite.json

@@ -4,6 +4,7 @@
     "controllers/ClickAwayController",
     "controllers/ContextMenuController",
     "controllers/GetterSetterController",
+    "controllers/ObjectInspectorController",
     "controllers/SelectorController",
     "controllers/SplitPaneController",
     "controllers/ToggleController",