DevTools: Highlight changed scope variables as they change

Source/devtools/front_end/components/ObjectPropertiesSection.js

Index: Source/devtools/front_end/components/ObjectPropertiesSection.js
diff --git a/Source/devtools/front_end/components/ObjectPropertiesSection.js b/Source/devtools/front_end/components/ObjectPropertiesSection.js
index 0a4a643645405ca7a40ebec43c19403933ad5995..1fca2ef65ded2809958959bcf784d7535e753b36 100644
--- a/Source/devtools/front_end/components/ObjectPropertiesSection.js
+++ b/Source/devtools/front_end/components/ObjectPropertiesSection.js
@@ -44,6 +44,7 @@ WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPl
     this.treeElementConstructor = treeElementConstructor || WebInspector.ObjectPropertyTreeElement;
     this.editable = true;
     this.skipProto = false;
+    this.pane = {}; // set in ScopeChainSidebarPane

[aandrey, 2015/01/12 14:50:35]

This should be better encapsulated. The ObjectPropertiesSection should not
depend on ScopeChainSidebarPane in any way, even implicitly.

 
     WebInspector.Section.call(this, title || "", subtitle);
 }
@@ -94,6 +95,21 @@ WebInspector.ObjectPropertiesSection.prototype = {
 
     updateProperties: function(properties, internalProperties, rootTreeElementConstructor, rootPropertyComparer)
     {
+        // Delete the cached last descriptions of all propertyIdentifiers
+        // did were not preset when the debugee was suspended last time
+        if (this.pane && this.pane._lastDescriptions && this.pane._propertyIdentifiers)
+            for (var pi in this.pane._lastDescriptions) {
+                if (!(pi in this.pane._propertyIdentifiers))
+                    // Delete the properties that no longer exist
+                    delete this.pane._lastDescriptions[pi];
+            }
+
+        // start with empty propertyIdentifiers cache
+        // this will get populated as the tree elemnts are
+        // shown
+        if (this.pane)
+           this.pane._propertyIdentifiers  = {};
+
         if (!rootTreeElementConstructor)
             rootTreeElementConstructor = this.treeElementConstructor;
 
@@ -178,6 +194,10 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
      */
     onattach: function()
     {
+        // record the propertyIdentifier
+        if (this.propertyPath() && this.treeOutline.section.pane && this.treeOutline.section.pane._propertyIdentifiers)
+            this.treeOutline.section.pane._propertyIdentifiers[this.propertyPath()] = 1;
+
         this.update();
     },
 
@@ -203,7 +223,41 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
             this.valueElement = createElementWithClass("span", "value");
             var type = this.property.value.type;
             var subtype = this.property.value.subtype;
+            // detect if the propertyIdentifier was shown when the debugee was suspended last time
+            var hadProperty = true;
+            if (this.propertyPath() && this.treeOutline.section && this.treeOutline.section.pane)
+                // not a first suspension
+                if (this.treeOutline.section.pane._lastDescriptions)
+                    hadProperty = (this.treeOutline.section.pane._lastDescriptions[this.propertyPath()] != undefined);
+                else {
+                    // first suspension
+                    this.treeOutline.section.pane._lastDescriptions = {};
+                    hadProperty = false;
+                }
+
+            var oldDescription;
+
+            if (this.propertyPath() && this.treeOutline.section && this.treeOutline.section.pane && this.treeOutline.section.pane._lastDescriptions)
+                // retrieve the description from last suspension
+                oldDescription = this.treeOutline.section.pane._lastDescriptions[this.propertyPath()];
+
+            // description now
             var description = this.property.value.description;
+
+            var descriptionToCompare = (type + ":" +
+                (subtype? subtype : "") + ":" + /* (this.property.value.objectId ? this.property.value.objectId : "") + ":" + */ description);
+            // determine if it has it changed only if description is initialized
+            // this handles the case when the variable came into scope but
+            // was not initialized
+            var descriptionChanged = false;
+            if (hadProperty)
+                descriptionChanged = (descriptionToCompare != oldDescription);
+            else
+                descriptionChanged = true;
+
+            if (this.propertyPath() && this.treeOutline.section && this.treeOutline.section.pane && this.treeOutline.section.pane._lastDescriptions)
+                this.treeOutline.section.pane._lastDescriptions[this.propertyPath()] = descriptionToCompare;
+
             var prefix;
             var valueText;
             var suffix;
@@ -240,6 +294,13 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
                 this.listItemElement.classList.add("hbox");
             }
 
+            if (descriptionChanged) {
+                this.valueElement.classList.add("highlighted-search-result");
+                if (!hadProperty)
+                    // new - highlight name also
+                    this.nameElement.classList.add("highlighted-search-result");
+            }
+
             if (this.property.wasThrown)
                 this.valueElement.classList.add("error");
             if (subtype || type)