Show the variable path more subtly

When showing multiple variables in the tree display, this
makes it easier to scan the display for the value vs the
path.

Bug: #126

Author: cbiesinger

extensions/tree-inspector/field-selector/field-selector.css

@@ -68,6 +68,14 @@
     display:block;
 }
 
+.var-path {
+    font-style: italic;
+}
+
+.var-path-prefix {
+    color: grey;
+}
+
 input.small-input {
     font-size:8pt;
     margin-right:0.3em;

extensions/tree-inspector/field-selector/field-selector.js

@@ -174,7 +174,7 @@ var FieldSelector = (function() {
         } else {
             this.typeListContainer.appendChild(newTypeContainer);
         }
-        
+
         var that = this;
         var enabledPaths = this.checkedFields.getEnabledPaths(type);
         return Promise.map(enabledPaths, function (path) { return explorer.enableField(path, /*context*/true); })
@@ -325,17 +325,25 @@ var FieldSelector = (function() {
     FieldSelectorController.prototype._createRenderer = function(field) {
         function insertFieldList(names, container) {
             var fieldList = document.createElement("span");
+            fieldList.classList.add("var-path");
             container.appendChild(fieldList);
-            fieldList.textContent = names.join(".") + ":";
+            if (names.length > 1) {
+                var pathPrefix = names.slice(0, -1);
+                var pathPrefixList = document.createElement("span");
+                fieldList.appendChild(pathPrefixList);
+                pathPrefixList.classList.add("var-path-prefix");
+                pathPrefixList.textContent = pathPrefix.join(".") + ".";
+            }
+            fieldList.appendChild(document.createTextNode(names[names.length - 1] + ":"));
         }
 
         return function (dbgObject, element) {
             return Promise.resolve(null)
             .then(function() {
                 var valueContainer = document.createElement("span");
                 return DbgObject.render(
-                    field.getter(dbgObject), 
-                    valueContainer, 
+                    field.getter(dbgObject),
+                    valueContainer,
                     function (dbgObject) {
                         if (dbgObject.type.isArray()) {
                             return dbgObject.array();
@@ -524,4 +532,4 @@ var FieldSelector = (function() {
 
         TreeReader: FieldTreeReader
     };
-})();
+})();