From fb4b03858d4d629d635b212de7b22336396baf2e Mon Sep 17 00:00:00 2001
From: Christian Biesinger <cbiesinger@chromium.org>
Date: Fri, 21 Jun 2019 14:54:12 -0500
Subject: [PATCH] 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
---
 .../field-selector/field-selector.css          |  8 ++++++++
 .../field-selector/field-selector.js           | 18 +++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/extensions/tree-inspector/field-selector/field-selector.css b/extensions/tree-inspector/field-selector/field-selector.css
index 435e94ef..6bc34d9f 100644
--- a/extensions/tree-inspector/field-selector/field-selector.css
+++ b/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;
diff --git a/extensions/tree-inspector/field-selector/field-selector.js b/extensions/tree-inspector/field-selector/field-selector.js
index 19022cf3..c33d27ab 100644
--- a/extensions/tree-inspector/field-selector/field-selector.js
+++ b/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,8 +325,16 @@ 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) {
@@ -334,8 +342,8 @@ var FieldSelector = (function() {
             .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
     };
-})();
\ No newline at end of file
+})();