using an arrow as an indicator of expanding field

www/md_base/src/app/common/directives/inspectdata/inspectdata.less

@@ -13,6 +13,13 @@
     .value {
       border-left: 1px solid #FFF;
     }
+
+    .expand-button {
+      background-image: -webkit-linear-gradient(left, rgba(239, 239, 239, 0) 0%, #efefef 50%);
+      background-image: -moz-linear-gradient(left, rgba(239, 239, 239, 0) 0%, #efefef 50%);
+      background-image: -ms-linear-gradient(left, rgba(239, 239, 239, 0) 0%, #efefef 50%);
+      background-image: linear-gradient(left, rgba(239, 239, 239, 0) 0%, #efefef 50%);
+    }
   }
 
   .row:nth-child(even) {
@@ -23,12 +30,19 @@
     &:last-child {
       border-bottom: 1px solid #efefef;
     }
+
+    .expand-button {
+      background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 50%);
+      background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 50%);
+      background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 50%);
+      background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 50%);
+    }
   }
 
   .key, .value {
     min-height: 28px;
     line-height: 28px;
-    padding: 2px 10px;
+    padding-left: 10px;
   }
 
   .key {
@@ -37,11 +51,29 @@
   }
 
   .object-value {
-    cursor: pointer;
-
     pre {
       margin: 0;
       padding: 0;
     }
   }
+
+  .expand-button {
+    cursor: pointer;
+    float: right;
+    width: 32px;
+    height: 28px;
+    position: relative;
+    z-index: 99;
+    text-align: center;
+
+    &>md-icon {
+      transition: -webkit-transform 0.2s ease-in-out;
+      transition: transform 0.2s ease-in-out;
+    }
+
+    &.collapsed>md-icon{
+      -webkit-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+  }
 }

www/md_base/src/app/common/directives/inspectdata/inspectdata.spec.coffee

@@ -2,11 +2,13 @@ beforeEach module 'app'
 
 describe 'inspectdata', ->
 
-    $rootScope = $compile = null
+    $rootScope = $compile = $httpBackend = null
 
     injected = ($injector) ->
         $compile = $injector.get('$compile')
         $rootScope = $injector.get('$rootScope')
+        $httpBackend = $injector.get('$httpBackend')
+        decorateHttpBackend($httpBackend)
 
     beforeEach inject injected
 
@@ -35,6 +37,7 @@ describe 'inspectdata', ->
         test_obj_json_short = JSON.stringify(testdata.test_object)
         test_obj_json_long = JSON.stringify(testdata.test_object, null, 2)
 
+        $httpBackend.expectGETSVGIcons()
         element = $compile('<inspect-data data="testdata"></inspect-data>')($rootScope)
         $rootScope.testdata = testdata
         $rootScope.$digest()
@@ -49,9 +52,9 @@ describe 'inspectdata', ->
 
             if key == 'test_object'
                 objvalue = value.children().eq(0)
-                expect(objvalue.children().length).toBe(2)
-                expect(objvalue.children().eq(0).text()).toBe(test_obj_json_short)
-                expect(objvalue.children().eq(1).text()).toBe(test_obj_json_long)
+                expect(objvalue.children().length).toBe(3)
+                expect(objvalue.children().eq(1).text()).toBe(test_obj_json_short)
+                expect(objvalue.children().eq(2).text()).toBe(test_obj_json_long)
             else
                 expect(value.text()).toBe('' + testdata[key])
 
@@ -72,32 +75,34 @@ describe 'inspectdata', ->
             value = row.children().eq(1)
             if key == 'test_object'
                 objvalue = value.children().eq(0)
-                expect(objvalue.children().length).toBe(2)
-                expect(objvalue.children().eq(0).text()).toBe(test_obj_json_short)
-                expect(objvalue.children().eq(1).text()).toBe(test_obj_json_long)
+                expect(objvalue.children().length).toBe(3)
+                expect(objvalue.children().eq(1).text()).toBe(test_obj_json_short)
+                expect(objvalue.children().eq(2).text()).toBe(test_obj_json_long)
             else
                 expect(value.text()).toBe('' + testdata[key])
 
         # test collapse and expand object field
         objectfield = rows.eq(4)
         objvalue = objectfield.children().eq(1).children().eq(0)
+        expandarrow = objvalue.children().eq(0)
 
         # initial state: short showing, long hiding
-        expect(objvalue.children().eq(0).hasClass('ng-hide')).toBe(false)
-        expect(objvalue.children().eq(1).hasClass('ng-hide')).toBe(true)
+        expect(objvalue.children().eq(1).hasClass('ng-hide')).toBe(false)
+        expect(objvalue.children().eq(2).hasClass('ng-hide')).toBe(true)
 
         # click on the field
-        objvalue.triggerHandler('click')
+        expandarrow.triggerHandler('click')
         $rootScope.$digest()
 
         # expanded state: short hiding, long showing
-        expect(objvalue.children().eq(0).hasClass('ng-hide')).toBe(true)
-        expect(objvalue.children().eq(1).hasClass('ng-hide')).toBe(false)
+        expect(objvalue.children().eq(1).hasClass('ng-hide')).toBe(true)
+        expect(objvalue.children().eq(2).hasClass('ng-hide')).toBe(false)
 
         # click again to collapse
-        objvalue.triggerHandler('click')
+        expandarrow.triggerHandler('click')
         $rootScope.$digest()
 
         # back to collapsed
-        expect(objvalue.children().eq(0).hasClass('ng-hide')).toBe(false)
-        expect(objvalue.children().eq(1).hasClass('ng-hide')).toBe(true)
+        expect(objvalue.children().eq(1).hasClass('ng-hide')).toBe(false)
+        expect(objvalue.children().eq(2).hasClass('ng-hide')).toBe(true)
+        $httpBackend.flush()

www/md_base/src/app/common/directives/inspectdata/inspectdata.tpl.jade

@@ -7,7 +7,8 @@ div.inspect-data
       div.object-value(
         ng-if="item.value.type == 'object'",
         ng-init="collapsed = 1",
-        ng-click="collapsed = !collapsed",
         )
+        div.expand-button(ng-click="collapsed = !collapsed", ng-class="{collapsed: collapsed}")
+          md-icon(md-svg-icon="arrow-down")
         pre(ng-show="collapsed") {{ item.value.value }}
         pre(ng-show="!collapsed") {{ item.value.value_long }}