Adding indentation of the folder in the header and refining background color

scripts/developer/utilities/lib/jet/qml/TaskPropView.qml

@@ -26,6 +26,7 @@ Prop.PropGroup {
     property var rootConfig : Render
     property var jobPath: ""
     property alias label: root.label
+    property alias indentDepth: root.indentDepth
 
     property var showProps: true
     property var showSubs: true
@@ -33,7 +34,7 @@ Prop.PropGroup {
     function populatePropItems() {
         var propsModel = []
         var props = Jet.job_propKeys(rootConfig.getConfig(jobPath));
-        console.log(JSON.stringify(props));
+      //  console.log(JSON.stringify(props));
         if (showProps) {
             for (var p in props) {
                 propsModel.push({"object": rootConfig.getConfig(jobPath), "property":props[p] })
@@ -50,7 +51,8 @@ Prop.PropGroup {
                         "rootConfig": root.rootConfig,
                         "jobPath": root.jobPath + '.' + job.objectName,
                         "showProps": root.showProps,
-                        "showSubs": root.showSubs
+                        "showSubs": root.showSubs,
+                        "indentDepth": root.indentDepth + 1,
                     })
                     /*  var component = Qt.createComponent("../../prop/PropItem.qml");
                     component.createObject(root.propItemsPanel, {

scripts/developer/utilities/lib/prop/PropGroup.qml

@@ -17,20 +17,33 @@ Item {
     property var label: "group"
 
     property alias isUnfold: headerFolderIcon.icon
+    property var indentDepth: 0
+    
     property alias propItemsPanel: propItemsContainer
     default property alias extHeader: headerContainer.data
 
     // Header Item
-    Item {
+    Rectangle {
         id: header
         height: global.slimHeight
         anchors.left: parent.left           
         anchors.right: parent.right
 
-        // First in the header, the folder button / indicator
+        color: global.colorBackShadow // header of group is darker
+
+        // First in the header, some indentation spacer
+        Item {
+            id: indentSpacer
+            width: (headerFolderIcon.width * root.indentDepth) + global.horizontalMargin   // Must be non-zero
+            height: parent.height
+
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        // Second, the folder button / indicator
         Item {
             id: headerFolder
-            anchors.left: header.left
+            anchors.left: indentSpacer.right
             width: headerFolderIcon.width * 2
             anchors.verticalCenter: header.verticalCenter
             height: parent.height

scripts/developer/utilities/lib/prop/style/Global.qml

@@ -24,6 +24,7 @@ Item {
     readonly property real horizontalMargin: 4
 
     readonly property color color: hifi.colors.baseGray
+    readonly property color colorBackShadow: hifi.colors.baseGrayShadow
     readonly property color colorBackHighlight: hifi.colors.baseGrayHighlight
     readonly property color colorBorderLight: hifi.colors.lightGray
     readonly property color colorBorderHighight: hifi.colors.blueHighlight