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

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
  };
-})();
+})();