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 5ad51126a336150be71066f4e919f937dbc281c7..4b593bec83ff920d860008f504161416f55d0c78 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.ObjectPropertiesMemento=} memento
  */
-WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, treeElementConstructor)
+WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, treeElementConstructor, memento)
 {
     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.memento = memento;

[pfeldman, 2015/01/21 10:41:25]

Should be private.

[sandipchitale, 2015/01/22 07:46:33]

Acknowledged.

 
     WebInspector.PropertiesSection.call(this, title || "", subtitle);
 }
@@ -94,6 +96,17 @@ WebInspector.ObjectPropertiesSection.prototype = {
 
     updateProperties: function(properties, internalProperties, rootTreeElementConstructor, rootPropertyComparer)
     {
+        if (this.memento) {
+            // Delete the cached last descriptions of all propertyIdentifiers

[pfeldman, 2015/01/21 10:41:25]

No need for comments.

[sandipchitale, 2015/01/22 07:46:33]

Acknowledged.

+            // did were not preset when the debugee was suspended last time
+            this.memento.forgetProperties();
+
+            // start with empty propertyIdentifiers cache
+            // this will get populated as the tree elemnts are
+            // shown
+            this.memento.initPropertyIdentifiers();
+        }
+
         if (!rootTreeElementConstructor)
             rootTreeElementConstructor = this.treeElementConstructor;
 
@@ -140,6 +153,53 @@ WebInspector.ObjectPropertiesSection.CompareProperties = function(propertyA, pro
 
 /**
  * @constructor
+ */
+WebInspector.ObjectPropertiesMemento = function() {

[pfeldman, 2015/01/21 10:41:25]

Here and below, { on the next line.

[sandipchitale, 2015/01/22 07:46:34]

Acknowledged.

+    this._expandedProperties = new Set();
+    this._lastDescriptions = {};
+    this._propertyIdentifiers = {};
+}
+
+WebInspector.ObjectPropertiesMemento.prototype = {
+    forgetProperties: function() {
+        for (var pi in this._lastDescriptions) {
+            if (!(pi in this._propertyIdentifiers))
+                // Delete the properties that no longer exist
+                delete this._lastDescriptions[pi];
+        }
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isPropertyPathExpanded: function(propertyPath) {
+        return this._expandedProperties.has(propertyPath);
+    },
+    addExpandedPropertyPath: function(propertyPath) {
+        this._expandedProperties.add(propertyPath);
+    },
+    deleteExpandedPropertyPath: function(propertyPath) {
+        this._expandedProperties['delete'](propertyPath);
+    },
+    initPropertyIdentifiers: function() {
+        this._propertyIdentifiers = {};
+    },
+    recordPropertyPath: function(propertyPath) {
+        this._propertyIdentifiers[propertyPath] = 1;
+    },
+    /**
+     * @return {string}
+     */
+    getLastDescriptionForPropertyPath: function(propertyPath) {

[pfeldman, 2015/01/21 10:41:25]

no get prefixes in Blink

[sandipchitale, 2015/01/22 07:46:33]

Acknowledged.

+        return this._lastDescriptions[propertyPath];
+    },
+    setLastDescriptionForPropertyPath: function(propertyPath, description) {
+        this._lastDescriptions[propertyPath] = description;
+    }
+}
+
+/**
+ * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.RemoteObjectProperty} property
  */
@@ -178,6 +238,10 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
      */
     onattach: function()
     {
+        // record the propertyIdentifier
+        if (WebInspector.settings.highlightChangedProperties.get() && this.propertyPath() && this.treeOutline.section.memento && this.treeOutline.section.memento._propertyIdentifiers)
+            this.treeOutline.section.memento.recordPropertyPath(this.propertyPath());
+
         this.update();
     },
 
@@ -203,7 +267,38 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
             this.valueElement = createElementWithClass("span", "value");
             var type = this.property.value.type;
             var subtype = this.property.value.subtype;
+
+            var oldDescription;
+
+            if (WebInspector.settings.highlightChangedProperties.get() && this.treeOutline.section && this.treeOutline.section.memento) {
+                // detect if the propertyIdentifier was shown when the debugee was suspended last time
+                var hadProperty = false;
+                var lastDesription = this.treeOutline.section.memento.getLastDescriptionForPropertyPath(this.propertyPath())

[pfeldman, 2015/01/21 10:41:25]

This code can't be a part of the ObjectPropertyTreeElement which is just a tree
that renders remote objects. You can try decorating it externally, but baking
this functionality into it is wrong.

[sandipchitale, 2015/01/22 07:46:33]

Will work on this.

+                if (this.propertyPath()) {
+                    hadProperty = (lastDesription != undefined);
+                    // retrieve the description from last suspension
+                    oldDescription = lastDesription;
+                }
+            }
+
             var description = this.property.value.description;
+
+            if (WebInspector.settings.highlightChangedProperties.get() && this.treeOutline.section && this.treeOutline.section.memento) {
+                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.memento._lastDescriptions)
+                    this.treeOutline.section.memento.setLastDescriptionForPropertyPath(this.propertyPath(), descriptionToCompare);
+            }
+
             var prefix;
             var valueText;
             var suffix;
@@ -240,6 +335,15 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
                 this.listItemElement.classList.add("hbox");
             }
 
+            if (WebInspector.settings.highlightChangedProperties.get() && this.treeOutline.section && this.treeOutline.section.memento) {
+                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)