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..f48b1613ec7feb850a5a69bcbebbbdae9d4fd1e3 100644
--- a/Source/devtools/front_end/components/ObjectPropertiesSection.js
+++ b/Source/devtools/front_end/components/ObjectPropertiesSection.js
@@ -34,8 +34,9 @@
  * @param {boolean=} ignoreHasOwnProperty
  * @param {!Array.<!WebInspector.RemoteObjectProperty>=} extraProperties
  * @param {function(new:TreeElement, !WebInspector.RemoteObjectProperty)=} treeElementConstructor
+ * @param {?WebInspector.SidebarPane=} sidebarPane
  */
-WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, treeElementConstructor)
+WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, treeElementConstructor, sidebarPane)
 {
     this._emptyPlaceholder = emptyPlaceholder;
     this.object = object;
@@ -44,6 +45,7 @@ WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPl
     this.treeElementConstructor = treeElementConstructor || WebInspector.ObjectPropertyTreeElement;
     this.editable = true;
     this.skipProto = false;
+    this.pane = sidebarPane;

[aandrey, 2015/01/20 05:05:01]

Should not depend on SidebarPane, should not have this line at all.

 
     WebInspector.Section.call(this, title || "", subtitle);
 }
@@ -94,6 +96,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  = {};

[aandrey, 2015/01/20 05:05:01]

this is a no-go

+
         if (!rootTreeElementConstructor)
             rootTreeElementConstructor = this.treeElementConstructor;
 
@@ -178,6 +195,10 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
      */
     onattach: function()
     {
+        // record the propertyIdentifier
+        if (this.treeOutline.section.pane && this.propertyPath() && this.treeOutline.section.pane._propertyIdentifiers)
+            this.treeOutline.section.pane._propertyIdentifiers[this.propertyPath()] = 1;
+
         this.update();
     },
 
@@ -203,7 +224,45 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
             this.valueElement = createElementWithClass("span", "value");
             var type = this.property.value.type;
             var subtype = this.property.value.subtype;
+
+            if (this.treeOutline.section && this.treeOutline.section.pane) {
+                // detect if the propertyIdentifier was shown when the debugee was suspended last time
+                var hadProperty = true;
+                if (this.propertyPath())
+                    // 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.pane._lastDescriptions)
+                    // retrieve the description from last suspension
+                    oldDescription = this.treeOutline.section.pane._lastDescriptions[this.propertyPath()];
+            }
+
             var description = this.property.value.description;
+
+            if (this.treeOutline.section && this.treeOutline.section.pane) {
+                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.pane._lastDescriptions)
+                    this.treeOutline.section.pane._lastDescriptions[this.propertyPath()] = descriptionToCompare;
+            }
+
             var prefix;
             var valueText;
             var suffix;
@@ -240,6 +299,15 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
                 this.listItemElement.classList.add("hbox");
             }
 
+            if (this.treeOutline.section && this.treeOutline.section.pane) {
+                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)