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 26 matching lines @@
  */
 WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, treeElementConstructor)
 {
     this._emptyPlaceholder = emptyPlaceholder;
     this.object = object;
     this.ignoreHasOwnProperty = ignoreHasOwnProperty;
     this.extraProperties = extraProperties;
     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);
 }
 
 /** @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)
     {
+        // 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;
 
         if (!rootPropertyComparer)
             rootPropertyComparer = WebInspector.ObjectPropertiesSection.CompareProperties;
 
         if (this.extraProperties) {
             for (var i = 0; i < this.extraProperties.length; ++i)
                 properties.push(this.extraProperties[i]);
         }
@@ skipping 64 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 (this.propertyPath() && this.treeOutline.section.pane && this.treeOutline.section.pane._propertyIdentifiers)
+            this.treeOutline.section.pane._propertyIdentifiers[this.propertyPath()] = 1;
+
         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;
+            // 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;
             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 (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 844 matching lines @@
 {
     WebInspector.TextPrompt.call(this, WebInspector.ExecutionContextSelector.completionsForTextPromptInCurrentContext);
     this.setSuggestBoxEnabled(true);
     if (renderAsBlock)
         this.renderAsBlock();
 }
 
 WebInspector.ObjectPropertyPrompt.prototype = {
     __proto__: WebInspector.TextPrompt.prototype
 }