DevTools: Highlight changed scope variables as they change

Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js

 /*
  * Copyright (C) IBM Corp. 2009  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 18 matching lines @@
  */
 
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
  */
 WebInspector.WatchExpressionsSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Watch Expressions"));
 
-    this.section = new WebInspector.WatchExpressionsSection();
+    /** @type {!WebInspector.ObjectPropertiesMemento} */
+    this.memento = new WebInspector.ObjectPropertiesMemento();
+
+    this.section = new WebInspector.WatchExpressionsSection(this.memento);
     this.bodyElement.appendChild(this.section.element);
 
     var refreshButton = this.titleElement.createChild("button", "pane-title-button refresh");
     refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this), false);
     refreshButton.title = WebInspector.UIString("Refresh");
 
     var addButton = this.titleElement.createChild("button", "pane-title-button add");
     addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
     addButton.title = WebInspector.UIString("Add watch expression");
 
@@ skipping 43 matching lines @@
         event.consume();
         this.refreshExpressions();
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.PropertiesSection}
+ * @param {!WebInspector.ObjectPropertiesMemento} memento
  */
-WebInspector.WatchExpressionsSection = function()
+WebInspector.WatchExpressionsSection = function(memento)
 {
     this._watchObjectGroupId = "watch-group";
 
     WebInspector.PropertiesSection.call(this, "");
+
+    this.memento = memento;
+
     this.treeElementConstructor = WebInspector.ObjectPropertyTreeElement;
     this.skipProto = false;
 
     this.emptyElement = createElementWithClass("div", "info");
     this.emptyElement.textContent = WebInspector.UIString("No Watch Expressions");
 
     /** @type {!Array.<string>} */
     this.watchExpressions = WebInspector.settings.watchExpressions.get();
 
     this.headerElement.className = "hidden";
@@ skipping 96 matching lines @@
             this.element.appendChild(this.propertiesElement);
             this.emptyElement.remove();
         }
     },
 
     /**
      * @param {!Array.<!WebInspector.RemoteObjectProperty>} properties
      */
     updateProperties: function(properties)
     {
+        this.memento.forgetProperties();
+
         this.propertiesTreeOutline.removeChildren();
         WebInspector.ObjectPropertyTreeElement.populateWithProperties(this.propertiesTreeOutline, properties, [],
             WebInspector.WatchExpressionTreeElement, WebInspector.WatchExpressionsSection.CompareProperties, false, null);
 
         this.propertiesForTest = properties;
     },
 
     /**
      * @param {string} expression
      */
@@ skipping 245 matching lines @@
      */
     applyExpression: function(expression)
     {
         expression = expression.trim();
         this.property.name = expression || null;
         this.treeOutline.section.updateExpression(this, expression);
     },
 
     __proto__: WebInspector.ObjectPropertyTreeElement.prototype
 }