fix(jsonTree) show icons

The arrows indicating expanded / collapsed status of objects and arrays
in the jsonTree were missing. The expanded css class was added to a dom
node that was immediately discarded while redrawing the jsonTree to
display the child elements. Updated the code to reapply the css on each
rebuild. Also corrected the relative path to the images.

Author: gary-b

panel/components/json-tree/json-tree.css

@@ -55,16 +55,17 @@ bat-json-tree .properties-tree li.parent li {
 
 bat-json-tree .properties-tree li.parent::before {
   -webkit-user-select: none;
-  background-image: url(../../img/statusbarButtonGlyphs.png);
-  background-size: 320px 120px;
+  background-image: url(../../../img/statusbarButtonGlyphs.png);
+  background-size: 320px 144px;
   opacity: 0.5;
   content: "a";
-  width: 8px;
+  width: 6px;
+  height: 10px;
   float: left;
   margin-right: 2px;
   color: transparent;
   text-shadow: none;
-  margin-top: -2px;
+  margin-top: -3px;
 }
 
 bat-json-tree .properties-tree li.parent::before {

panel/components/json-tree/json-tree.js

@@ -40,7 +40,10 @@ function batJsonTreeDirective() {
       '': root
     };
 
+    var expandedPaths = {};
+
     scope.$watch('batModel', function (val) {
+      expandedPaths = {};
       if (!val) {
         root = angular.element(BAT_JSON_TREE_TEMPLATE);
         element.html('');
@@ -98,6 +101,10 @@ function batJsonTreeDirective() {
           '</li>'),
           childElt;
 
+        if (expandedPaths.hasOwnProperty(fullPath)) {
+          parentElt.addClass('expanded');
+        }
+
         if (val === null) {
           childElt = angular.element('<span class="value console-formatted-null">null</span>');
         } else if (val['~object'] || val['~array-length'] !== undefined) {
@@ -106,8 +113,8 @@ function batJsonTreeDirective() {
           // you can't expand an empty array
           if (val['~array-length'] !== 0) {
             parentElt.on('click', function () {
+              expandedPaths[fullPath] = true;
               scope.batInspect({ path: fullPath });
-              parentElt.addClass('expanded');
             });
           }
 

panel/components/json-tree/json-tree.spec.js

@@ -141,6 +141,51 @@ describe('batJsonTree', function () {
     });
   });
 
+  describe('expanded css', function() {
+    var modelWithObject = {
+      '': {
+        '$id': 1,
+        objectA: { '~object': true }
+      }
+    };
+    it("should not add expanded class to object that is not expanded", function () {
+      $rootScope.data = modelWithObject;
+      compileTree();
+      expect(element[0].querySelectorAll('.expanded').length).toEqual(0);
+    });
+
+    it("should add expanded class to object that is expanded", function () {
+      setupTreeWithModelAndExpandIt();
+      waitsFor(function() {
+        return element[0].querySelector('.parent.expanded');
+      }, 'Expected parent element to have the class .expanded');
+    });
+
+    it("should clear the history of expanded elements when model changes", function () {
+      setupTreeWithModelAndExpandIt();
+      $rootScope.data = {
+        '': {
+          '$id': 1,
+          objectA: { '~object': true }
+        }
+      };
+      $rootScope.$apply();
+      waitsFor(function() {
+        return element[0].querySelector('.parent');
+      }, 'Expected parent element to be present');
+      runs(function() {
+        expect(element[0].querySelector('.parent.expanded')).toBeNull();
+      });
+    });
+
+    function setupTreeWithModelAndExpandIt(){
+      $rootScope.data = modelWithObject;
+      compileTree();
+      angular.element(element[0].querySelector('.parent')).triggerHandler('click');
+      $rootScope.$broadcast('model:change', { id: 1 });
+    }
+  });
+
   function compileAndExpectOutputToEqual(expected) {
     compileTree();
     expect(element.text()).toEqual(expected);