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;
+    /**
+     * @private
+     */
+    this.memento = memento;
 
     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)
+            this.memento.forgetProperties();
+
         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()
+{
+    this._expandedProperties = new Set();
+    this._lastDescriptions = {};
+    this._propertyIdentifiers = {};
+}
+
+WebInspector.ObjectPropertiesMemento.prototype = {
+    /**
+     * @return {boolean}
+     */
+    isPropertyPathExpanded: function(propertyPath)
+    {
+        return this._expandedProperties.has(propertyPath);
+    },
+    addExpandedPropertyPath: function(propertyPath)
+    {
+        this._expandedProperties.add(propertyPath);
+    },
+    deleteExpandedPropertyPath: function(propertyPath)
+    {
+        this._expandedProperties['delete'](propertyPath);
+    },
+    forgetProperties: function()
+    {
+        for (var pi in this._lastDescriptions)
+        {
+            if (!(pi in this._propertyIdentifiers))
+                delete this._lastDescriptions[pi];
+        }
+        this._propertyIdentifiers = {};
+    },
+    /**
+     * @param {!WebInspector.ObjectPropertyTreeElement} objectPropertyTreeElement
+     */
+    recordAndDecorate: function(objectPropertyTreeElement)
+    {
+        var propertyPath = objectPropertyTreeElement.propertyPath();
+        if (Runtime.experiments.isEnabled("highlightChangedProperties") && propertyPath) {
+            this._propertyIdentifiers[propertyPath] = 1;
+            var lastDesription = this._lastDescriptions[propertyPath];
+            var hadProperty = (lastDesription != undefined);
+            var description = (objectPropertyTreeElement.property.value.type + ":" +
+                    (objectPropertyTreeElement.property.value.subtype? objectPropertyTreeElement.property.value.subtype : "") + ":" +
+                    /* (objectPropertyTreeElement.property.value.objectId ? objectPropertyTreeElement.property.value.objectId : "") + ":" + */
+                    objectPropertyTreeElement.property.value.description);
+            var descriptionChanged = (!hadProperty) || (description != lastDesription);
+            this._lastDescriptions[propertyPath] = description;
+
+            if (descriptionChanged)
+                objectPropertyTreeElement.valueElement.classList.add("highlighted-search-result");
+            if (!hadProperty)
+                objectPropertyTreeElement.nameElement.classList.add("highlighted-search-result");
+        }
+    }
+}
+
+/**
+ * @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 380 matching lines @@
  * @param {?Array.<!WebInspector.RemoteObjectProperty>} internalProperties
  * @param {function(new:TreeElement, !WebInspector.RemoteObjectProperty)} treeElementConstructor
  * @param {function(!WebInspector.RemoteObjectProperty, !WebInspector.RemoteObjectProperty): number} comparator
  * @param {boolean} skipProto
  * @param {?WebInspector.RemoteObject} value
  * @param {?string=} emptyPlaceholder
  */
 WebInspector.ObjectPropertyTreeElement.populateWithProperties = function(treeNode, properties, internalProperties, treeElementConstructor, comparator, skipProto, value, emptyPlaceholder) {
     properties.sort(comparator);
 
+    function appendChild(treeElement) {
+        treeNode.appendChild(treeElement);
+        if (treeElement instanceof WebInspector.ObjectPropertyTreeElement) {
+            var treeElementPropertyPath = treeElement.propertyPath();
+            if (Runtime.experiments.isEnabled("highlightChangedProperties") &&
+                    treeElementPropertyPath &&
+                    treeNode.treeOutline.section.memento)
+                treeNode.treeOutline.section.memento.recordAndDecorate(treeElement);
+        }
+    }
+
     for (var i = 0; i < properties.length; ++i) {
         var property = properties[i];
         if (skipProto && property.name === "__proto__")
             continue;
         if (property.isAccessorProperty()) {
             if (property.name !== "__proto__" && property.getter) {
                 property.parentObject = value;
-                treeNode.appendChild(new treeElementConstructor(property));
+                appendChild(new treeElementConstructor(property));
             }
             if (property.isOwn) {
                 if (property.getter) {
                     var getterProperty = new WebInspector.RemoteObjectProperty("get " + property.name, property.getter);
                     getterProperty.parentObject = value;
-                    treeNode.appendChild(new treeElementConstructor(getterProperty));
+                    appendChild(new treeElementConstructor(getterProperty));
                 }
                 if (property.setter) {
                     var setterProperty = new WebInspector.RemoteObjectProperty("set " + property.name, property.setter);
                     setterProperty.parentObject = value;
-                    treeNode.appendChild(new treeElementConstructor(setterProperty));
+                    appendChild(new treeElementConstructor(setterProperty));
                 }
             }
         } else {
             property.parentObject = value;
-            treeNode.appendChild(new treeElementConstructor(property));
+            appendChild(new treeElementConstructor(property));
         }
     }
     if (internalProperties) {
         for (var i = 0; i < internalProperties.length; i++) {
             internalProperties[i].parentObject = value;
-            treeNode.appendChild(new treeElementConstructor(internalProperties[i]));
+            appendChild(new treeElementConstructor(internalProperties[i]));
         }
     }
     if (value && value.type === "function") {
         // Whether function has TargetFunction internal property.
         // This is a simple way to tell that the function is actually a bound function (we are not told).
         // Bound function never has inner scope and doesn't need corresponding UI node.
         var hasTargetFunction = false;
 
         if (internalProperties) {
             for (var i = 0; i < internalProperties.length; i++) {
                 if (internalProperties[i].name == "[[TargetFunction]]") {
                     hasTargetFunction = true;
                     break;
                 }
             }
         }
         if (!hasTargetFunction)
-            treeNode.appendChild(new WebInspector.FunctionScopeMainTreeElement(value));
+            appendChild(new WebInspector.FunctionScopeMainTreeElement(value));
     }
     if (value && value.type === "object" && (value.subtype === "map" || value.subtype === "set" || value.subtype === "iterator"))
-        treeNode.appendChild(new WebInspector.CollectionEntriesMainTreeElement(value));
+        appendChild(new WebInspector.CollectionEntriesMainTreeElement(value));
 
     WebInspector.ObjectPropertyTreeElement._appendEmptyPlaceholderIfNeeded(treeNode, emptyPlaceholder);
 }
 
 /**
  * @param {!TreeContainerNode} treeNode
  * @param {?string=} emptyPlaceholder
  */
 WebInspector.ObjectPropertyTreeElement._appendEmptyPlaceholderIfNeeded = function(treeNode, emptyPlaceholder)
 {
@@ skipping 516 matching lines @@
 {
     WebInspector.TextPrompt.call(this, WebInspector.ExecutionContextSelector.completionsForTextPromptInCurrentContext);
     this.setSuggestBoxEnabled(true);
     if (renderAsBlock)
         this.renderAsBlock();
 }
 
 WebInspector.ObjectPropertyPrompt.prototype = {
     __proto__: WebInspector.TextPrompt.prototype
 }