DevTools: Highlight changed scope variables as they change

Source/devtools/front_end/sources/ScopeChainSidebarPane.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * 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.SidebarPane}
  */
 WebInspector.ScopeChainSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Scope Variables"));
     this._sections = [];
     /** @type {!Set.<?string>} */
     this._expandedSections = new Set();
-    /** @type {!Set.<string>} */
-    this._expandedProperties = new Set();
+    /** @type {!WebInspector.ObjectPropertiesMemento} */
+    this.memento = new WebInspector.ObjectPropertiesMemento();
 }
 
 WebInspector.ScopeChainSidebarPane.prototype = {
     /**
      * @param {?WebInspector.DebuggerModel.CallFrame} callFrame
      */
     update: function(callFrame)
     {
         this.bodyElement.removeChildren();
 
@@ skipping 72 matching lines @@
             var subtitle = declarativeScope ? undefined : scope.object.description;
             if (!title || title === subtitle)
                 subtitle = undefined;
 
             var runtimeModel = callFrame.target().runtimeModel;
             if (declarativeScope)
                 var scopeObject = runtimeModel.createScopeRemoteObject(scope.object, new WebInspector.ScopeRef(i, callFrame.id, undefined));
             else
                 var scopeObject = runtimeModel.createRemoteObject(scope.object);
 
-            var section = new WebInspector.ObjectPropertiesSection(scopeObject, title, subtitle, emptyPlaceholder, true, extraProperties, WebInspector.ScopeVariableTreeElement);
+            var section = new WebInspector.ObjectPropertiesSection(scopeObject, title, subtitle, emptyPlaceholder, true, extraProperties, WebInspector.ScopeVariableTreeElement, this.memento);
             section.editInSelectedCallFrameWhenPaused = true;
-            section.pane = this;
 
             if (scope.type === DebuggerAgent.ScopeType.Global)
                 section.collapse();
             else if (!foundLocalScope || scope.type === DebuggerAgent.ScopeType.Local || this._expandedSections.has(title))
                 section.expand();
 
             this._sections.push(section);
             this.bodyElement.appendChild(section.element);
         }
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }
 
+
 /**
  * @constructor
  * @extends {WebInspector.ObjectPropertyTreeElement}
  * @param {!WebInspector.RemoteObjectProperty} property
  */
 WebInspector.ScopeVariableTreeElement = function(property)
 {
     WebInspector.ObjectPropertyTreeElement.call(this, property);
 }
 
 WebInspector.ScopeVariableTreeElement.prototype = {
     onattach: function()
     {
         WebInspector.ObjectPropertyTreeElement.prototype.onattach.call(this);
-        if (this.hasChildren && this.treeOutline.section.pane._expandedProperties.has(this.propertyPath()))
+        if (this.hasChildren && this.treeOutline.section.memento.isPropertyPathExpanded(this.propertyPath()))
             this.expand();
     },
 
     onexpand: function()
     {
-        this.treeOutline.section.pane._expandedProperties.add(this.propertyPath());
+        this.treeOutline.section.memento.addExpandedPropertyPath(this.propertyPath());
     },
 
     oncollapse: function()
     {
-        this.treeOutline.section.pane._expandedProperties.delete(this.propertyPath());
+        this.treeOutline.section.memento.deleteExpandedPropertyPath(this.propertyPath());
     },
 
     /**
      * @override
      * @return {string|undefined}
      */
     propertyPath: function()
     {
         if (!this._propertyIdentifier) {
             var section = this.treeOutline.section;
             this._propertyIdentifier = section.title + ":" + (section.subtitle ? section.subtitle + ":" : "") + WebInspector.ObjectPropertyTreeElement.prototype.propertyPath.call(this);
         }
         return this._propertyIdentifier;
     },
 
     __proto__: WebInspector.ObjectPropertyTreeElement.prototype
 }