DevTools: Highlight changed scope variables as they change

Source/devtools/front_end/components/ObjectPropertiesSection.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 16 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.PropertiesSection}
  * @param {!WebInspector.RemoteObject} object
  * @param {?string|!Element=} title
  * @param {string=} subtitle
  * @param {?string=} emptyPlaceholder
  * @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;
     this.ignoreHasOwnProperty = ignoreHasOwnProperty;
     this.extraProperties = extraProperties;
     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);
 }
 
 /** @const */
 WebInspector.ObjectPropertiesSection._arrayLoadThreshold = 100;
 
 WebInspector.ObjectPropertiesSection.prototype = {
     enableContextMenu: function()
     {
@@ skipping 30 matching lines @@
             if (!properties)
                 return;
             this.updateProperties(properties, internalProperties);
         }
 
         WebInspector.RemoteObject.loadFromObject(this.object, !!this.ignoreHasOwnProperty, callback.bind(this));
     },
 
     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;
 
         if (!rootPropertyComparer)
             rootPropertyComparer = WebInspector.ObjectPropertiesSection.CompareProperties;
 
         if (this.extraProperties) {
             for (var i = 0; i < this.extraProperties.length; ++i)
                 properties.push(this.extraProperties[i]);
         }
@@ skipping 26 matching lines @@
         return -1;
     if (propertyA.symbol && !propertyB.symbol)
         return 1;
     if (propertyB.symbol && !propertyA.symbol)
         return -1;
     return String.naturalOrderComparator(a, b);
 }
 
 /**
  * @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
  */
 WebInspector.ObjectPropertyTreeElement = function(property)
 {
     this.property = property;
 
     // Pass an empty title, the title gets made later in onattach.
     TreeElement.call(this, "", null, false);
     this.toggleOnClick = true;
@@ skipping 18 matching lines @@
         if ((this.property.writable || this.property.setter) && event.target.isSelfOrDescendant(editableElement))
             this.startEditing(event);
         return false;
     },
 
     /**
      * @override
      */
     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();
     },
 
     update: function()
     {
         this.nameElement = createElementWithClass("span", "name");
         var name = this.property.name;
         if (/^\s|\s$|^$|\n/.test(name))
             this.nameElement.createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");
         else
             this.nameElement.textContent = name;
         if (!this.property.enumerable)
             this.nameElement.classList.add("dimmed");
         if (this.property.isAccessorProperty())
             this.nameElement.classList.add("properties-accessor-property-name");
         if (this.property.symbol)
             this.nameElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.symbol), false);
 
         var separatorElement = createElementWithClass("span", "separator");
         separatorElement.textContent = ": ";
 
         if (this.property.value) {
             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;
             if (this.property.wasThrown) {
                 prefix = "[Exception: ";
                 valueText = description;
                 suffix = "]";
             } else if (type === "string" && typeof description === "string") {
                 // Render \n as a nice unicode cr symbol.
                 prefix = "\"";
@@ skipping 16 matching lines @@
             } else {
                 var numberParts = valueText.split("e");
                 var mantissa = this.valueElement.createChild("span", "scientific-notation-mantissa");
                 mantissa.textContent = numberParts[0];
                 var exponent = this.valueElement.createChild("span", "scientific-notation-exponent");
                 exponent.textContent = "e" + numberParts[1];
                 this.valueElement.classList.add("scientific-notation-number");
                 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)
                 this.valueElement.classList.add("console-formatted-" + (subtype || type));
 
             this.valueElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.value), false);
             if (type === "object" && subtype === "node" && description) {
                 WebInspector.DOMPresentationUtils.createSpansForNodeTitle(this.valueElement, description);
                 this.valueElement.addEventListener("mousemove", this._mouseMove.bind(this), false);
                 this.valueElement.addEventListener("mouseleave", this._mouseLeave.bind(this), false);
@@ skipping 867 matching lines @@
 {
     WebInspector.TextPrompt.call(this, WebInspector.ExecutionContextSelector.completionsForTextPromptInCurrentContext);
     this.setSuggestBoxEnabled(true);
     if (renderAsBlock)
         this.renderAsBlock();
 }
 
 WebInspector.ObjectPropertyPrompt.prototype = {
     __proto__: WebInspector.TextPrompt.prototype
 }