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();
+    this.section = new WebInspector.WatchExpressionsSection(this);
     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.Section}
+ * @param {!WebInspector.SidebarPane} sidebarPane
  */
-WebInspector.WatchExpressionsSection = function()
+WebInspector.WatchExpressionsSection = function(sidebarPane)
 {
     this._watchObjectGroupId = "watch-group";
 
     WebInspector.Section.call(this, "");
     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";
     this.editable = true;
     this.expand();
     this.propertiesElement.classList.add("watch-expressions");
 
     this.element.addEventListener("mousemove", this._mouseMove.bind(this), true);
     this.element.addEventListener("mouseleave", this._mouseLeave.bind(this), true);
     this.element.addEventListener("dblclick", this._sectionDoubleClick.bind(this), false);
     this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), false);
+    this.pane = sidebarPane;
 }
 
 WebInspector.WatchExpressionsSection.NewWatchExpression = "\xA0";
 
 WebInspector.WatchExpressionsSection.prototype = {
     /**
      * @param {!Event=} e
      */
     update: function(e)
     {
@@ skipping 343 matching lines @@
      */
     applyExpression: function(expression)
     {
         expression = expression.trim();
         this.property.name = expression || null;
         this.treeOutline.section.updateExpression(this, expression);
     },
 
     __proto__: WebInspector.ObjectPropertyTreeElement.prototype
 }