DevTools: Correctly set DOM breakpoints on every target.

Source/devtools/front_end/sources/BreakpointsSidebarPane.js

 /*
  * Copyright (C) 2008 Apple 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
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 272 matching lines @@
         }
         this._items.clear();
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.NativeBreakpointsSidebarPane}
+ * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.XHRBreakpointsSidebarPane = function()
 {
     WebInspector.NativeBreakpointsSidebarPane.call(this, WebInspector.UIString("XHR Breakpoints"));
 
-    this._breakpointElements = {};
+    // FIXME: Use StringMap.
+    this._breakpointElements = { __proto__: null };
 
     var addButton = document.createElement("button");
     addButton.className = "pane-title-button add";
     addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
     addButton.title = WebInspector.UIString("Add XHR breakpoint");
     this.titleElement.appendChild(addButton);
 
     this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true);
 
-    this._restoreBreakpoints();
+    WebInspector.targetManager.observeTargets(this);
 }
 
 WebInspector.XHRBreakpointsSidebarPane.prototype = {
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetAdded: function(target)
+    {
+        this._restoreBreakpoints(target);
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetRemoved: function(target) { },
+
     _emptyElementContextMenu: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Add breakpoint" : "Add Breakpoint"), this._addButtonClicked.bind(this));
         contextMenu.show();
     },
 
     _addButtonClicked: function(event)
     {
         if (event)
@@ skipping 22 matching lines @@
             if (accept) {
                 this._setBreakpoint(text, true);
                 this._saveBreakpoints();
             }
         }
 
         var config = new WebInspector.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
         WebInspector.InplaceEditor.startEditing(inputElement, config);
     },
 
-    _setBreakpoint: function(url, enabled)
+    /**
+     * @param {string} url
+     * @param {boolean} enabled
+     * @param {!WebInspector.Target=} target
+     */
+    _setBreakpoint: function(url, enabled, target)
     {
+        if (enabled)
+            this._updateBreakpointOnTarget(url, true, target);
+
         if (url in this._breakpointElements)
             return;
 
         var element = document.createElement("li");
         element._url = url;
         element.addEventListener("contextmenu", this._contextMenu.bind(this, url), true);
 
         var checkboxElement = document.createElement("input");
         checkboxElement.className = "checkbox-elem";
         checkboxElement.type = "checkbox";
@@ skipping 12 matching lines @@
         element.appendChild(labelElement);
 
         var currentElement = /** @type {?Element} */ (this.listElement.firstChild);
         while (currentElement) {
             if (currentElement._url && currentElement._url < element._url)
                 break;
             currentElement = /** @type {?Element} */ (currentElement.nextSibling);
         }
         this.addListElement(element, currentElement);
         this._breakpointElements[url] = element;
-        if (enabled) {
-            var targets = WebInspector.targetManager.targets();
-            for (var i = 0; i < targets.length; ++i)
-                targets[i].domdebuggerAgent().setXHRBreakpoint(url);
-        }
     },
 
-    _removeBreakpoint: function(url)
+    /**
+     * @param {string} url
+     * @param {!WebInspector.Target=} target
+     */
+    _removeBreakpoint: function(url, target)
     {
         var element = this._breakpointElements[url];
         if (!element)
             return;
 
         this.removeListElement(element);
         delete this._breakpointElements[url];
-        if (element._checkboxElement.checked) {
-            var targets = WebInspector.targetManager.targets();
-            for (var i = 0; i < targets.length; ++i)
+        if (element._checkboxElement.checked)
+            this._updateBreakpointOnTarget(url, false, target);
+    },
+
+    /**
+     * @param {string} url
+     * @param {boolean} enable
+     * @param {!WebInspector.Target=} target
+     */
+    _updateBreakpointOnTarget: function(url, enable, target)
+    {
+        var targets = target ? [target] : WebInspector.targetManager.targets();
+        for (var i = 0; i < targets.length; ++i) {
+            if (enable)
+                targets[i].domdebuggerAgent().setXHRBreakpoint(url);
+            else
                 targets[i].domdebuggerAgent().removeXHRBreakpoint(url);
         }
     },
 
     _contextMenu: function(url, event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
 
         /**
          * @this {WebInspector.XHRBreakpointsSidebarPane}
@@ skipping 16 matching lines @@
         var removeAllTitle = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Remove all breakpoints" : "Remove All Breakpoints");
 
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Add breakpoint" : "Add Breakpoint"), this._addButtonClicked.bind(this));
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Remove breakpoint" : "Remove Breakpoint"), removeBreakpoint.bind(this));
         contextMenu.appendItem(removeAllTitle, removeAllBreakpoints.bind(this));
         contextMenu.show();
     },
 
     _checkboxClicked: function(url, event)
     {
-        if (event.target.checked)
-            DOMDebuggerAgent.setXHRBreakpoint(url);
-        else
-            DOMDebuggerAgent.removeXHRBreakpoint(url);
+        this._updateBreakpointOnTarget(url, event.target.checked);
         this._saveBreakpoints();
     },
 
     _labelClicked: function(url)
     {
         var element = this._breakpointElements[url];
         var inputElement = document.createElement("span");
         inputElement.className = "breakpoint-condition editing";
         inputElement.textContent = url;
         this.listElement.insertBefore(inputElement, element);
@@ skipping 38 matching lines @@
     },
 
     _saveBreakpoints: function()
     {
         var breakpoints = [];
         for (var url in this._breakpointElements)
             breakpoints.push({ url: url, enabled: this._breakpointElements[url]._checkboxElement.checked });
         WebInspector.settings.xhrBreakpoints.set(breakpoints);
     },
 
-    _restoreBreakpoints: function()
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    _restoreBreakpoints: function(target)
     {
         var breakpoints = WebInspector.settings.xhrBreakpoints.get();
         for (var i = 0; i < breakpoints.length; ++i) {
             var breakpoint = breakpoints[i];
             if (breakpoint && typeof breakpoint.url === "string")
-                this._setBreakpoint(breakpoint.url, breakpoint.enabled);
+                this._setBreakpoint(breakpoint.url, breakpoint.enabled, target);
         }
     },
 
     __proto__: WebInspector.NativeBreakpointsSidebarPane.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
+ * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.EventListenerBreakpointsSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Event Listener Breakpoints"));
     this.registerRequiredCSS("breakpointsList.css");
 
     this.categoriesElement = document.createElement("ol");
     this.categoriesElement.tabIndex = 0;
     this.categoriesElement.classList.add("properties-tree");
     this.categoriesElement.classList.add("event-listener-breakpoints");
@@ skipping 13 matching lines @@
     this._createCategory(WebInspector.UIString("Keyboard"), ["keydown", "keyup", "keypress", "input"]);
     this._createCategory(WebInspector.UIString("Load"), ["load", "beforeunload", "unload", "abort", "error", "hashchange", "popstate"]);
     this._createCategory(WebInspector.UIString("Media"), ["play", "pause", "playing", "canplay", "canplaythrough", "seeking", "seeked", "timeupdate", "ended", "ratechange", "durationchange", "volumechange", "loadstart", "progress", "suspend", "abort", "error", "emptied", "stalled", "loadedmetadata", "loadeddata", "waiting"], false, ["audio", "video"]);
     this._createCategory(WebInspector.UIString("Mouse"), ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel", "wheel"]);
     this._createCategory(WebInspector.UIString("Timer"), ["setTimer", "clearTimer", "timerFired"], true);
     this._createCategory(WebInspector.UIString("Touch"), ["touchstart", "touchmove", "touchend", "touchcancel"]);
     this._createCategory(WebInspector.UIString("XHR"), ["readystatechange", "load", "loadstart", "loadend", "abort", "error", "progress", "timeout"], false, ["XMLHttpRequest", "XMLHttpRequestUpload"]);
     this._createCategory(WebInspector.UIString("WebGL"), ["webglErrorFired", "webglWarningFired"], true);
     this._createCategory(WebInspector.UIString("Window"), ["close"], true);
 
-    this._restoreBreakpoints();
+    WebInspector.targetManager.observeTargets(this);
 }
 
 WebInspector.EventListenerBreakpointsSidebarPane.categoryListener = "listener:";
 WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation = "instrumentation:";
 WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny = "*";
 
 /**
  * @param {string} eventName
  * @param {!Object=} auxData
  * @return {string}
@@ skipping 18 matching lines @@
             // If there is a hex code of the error, display only this.
             errorName = errorName.replace(/^.*(0x[0-9a-f]+).*$/i, "$1");
             return WebInspector.UIString("WebGL Error Fired (%s)", errorName);
         }
     }
     return WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI[eventName] || eventName.substring(eventName.indexOf(":") + 1);
 }
 
 WebInspector.EventListenerBreakpointsSidebarPane.prototype = {
     /**
+     * @param {!WebInspector.Target} target
+     */
+    targetAdded: function(target)
+    {
+        this._restoreBreakpoints(target);
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetRemoved: function(target) { },
+
+    /**
      * @param {string} name
      * @param {!Array.<string>} eventNames
      * @param {boolean=} isInstrumentationEvent
      * @param {!Array.<string>=} targetNames
      */
     _createCategory: function(name, eventNames, isInstrumentationEvent, targetNames)
     {
         var labelNode = document.createElement("label");
         labelNode.textContent = name;
 
@@ skipping 83 matching lines @@
     {
         if (event.target.checked)
             this._setBreakpoint(eventName, targetNames);
         else
             this._removeBreakpoint(eventName, targetNames);
         this._saveBreakpoints();
     },
 
     /**
      * @param {string} eventName
-     * @param {?Array.<string>=} targetNames
+     * @param {?Array.<string>=} eventTargetNames
+     * @param {!WebInspector.Target=} target
      */
-    _setBreakpoint: function(eventName, targetNames)
+    _setBreakpoint: function(eventName, eventTargetNames, target)
     {
-        targetNames = targetNames || [WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny];
-        for (var i = 0; i < targetNames.length; ++i) {
-            var targetName = targetNames[i];
-            var breakpointItem = this._findBreakpointItem(eventName, targetName);
+        eventTargetNames = eventTargetNames || [WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny];
+        for (var i = 0; i < eventTargetNames.length; ++i) {
+            var eventTargetName = eventTargetNames[i];
+            var breakpointItem = this._findBreakpointItem(eventName, eventTargetName);
             if (!breakpointItem)
                 continue;
             breakpointItem.checkbox.checked = true;
             breakpointItem.parent.dirtyCheckbox = true;
-            if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categoryListener))
-                DOMDebuggerAgent.setEventListenerBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categoryListener.length), targetName);
-            else if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation))
-                DOMDebuggerAgent.setInstrumentationBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation.length));
+            this._updateBreakpointOnTarget(eventName, eventTargetName, true, target);
         }
         this._updateCategoryCheckboxes();
     },
 
     /**
      * @param {string} eventName
-     * @param {?Array.<string>=} targetNames
+     * @param {?Array.<string>=} eventTargetNames
+     * @param {!WebInspector.Target=} target
      */
-    _removeBreakpoint: function(eventName, targetNames)
+    _removeBreakpoint: function(eventName, eventTargetNames, target)
     {
-        targetNames = targetNames || [WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny];
-        for (var i = 0; i < targetNames.length; ++i) {
-            var targetName = targetNames[i];
-            var breakpointItem = this._findBreakpointItem(eventName, targetName);
+        eventTargetNames = eventTargetNames || [WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny];
+        for (var i = 0; i < eventTargetNames.length; ++i) {
+            var eventTargetName = eventTargetNames[i];
+            var breakpointItem = this._findBreakpointItem(eventName, eventTargetName);
             if (!breakpointItem)
                 continue;
             breakpointItem.checkbox.checked = false;
             breakpointItem.parent.dirtyCheckbox = true;
-            if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categoryListener))
-                DOMDebuggerAgent.removeEventListenerBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categoryListener.length), targetName);
-            else if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation))
-                DOMDebuggerAgent.removeInstrumentationBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation.length));
+            this._updateBreakpointOnTarget(eventName, eventTargetName, false, target);
         }
         this._updateCategoryCheckboxes();
     },
 
+    /**
+     * @param {string} eventName
+     * @param {string} eventTargetName
+     * @param {boolean} enable
+     * @param {!WebInspector.Target=} target
+     */
+    _updateBreakpointOnTarget: function(eventName, eventTargetName, enable, target)
+    {
+        var targets = target ? [target] : WebInspector.targetManager.targets();
+        for (var i = 0; i < targets.length; ++i) {
+            if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categoryListener)) {
+                var protocolEventName = eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categoryListener.length);
+                if (enable)
+                    targets[i].domdebuggerAgent().setEventListenerBreakpoint(protocolEventName, eventTargetName);
+                else
+                    targets[i].domdebuggerAgent().removeEventListenerBreakpoint(protocolEventName, eventTargetName);
+            } else if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation)) {
+                var protocolEventName = eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation.length);
+                if (enable)
+                    targets[i].domdebuggerAgent().setInstrumentationBreakpoint(protocolEventName);
+                else
+                    targets[i].domdebuggerAgent().removeInstrumentationBreakpoint(protocolEventName);
+            }
+        }
+    },
+
     _updateCategoryCheckboxes: function()
     {
         for (var i = 0; i < this._categoryItems.length; ++i) {
             var categoryItem = this._categoryItems[i];
             if (!categoryItem.dirtyCheckbox)
                 continue;
             categoryItem.dirtyCheckbox = false;
             var hasEnabled = false;
             var hasDisabled = false;
             for (var eventName in categoryItem.children) {
@@ skipping 59 matching lines @@
             var categoryItem = this._categoryItems[i];
             for (var eventName in categoryItem.children) {
                 var breakpointItem = categoryItem.children[eventName];
                 if (breakpointItem.checkbox.checked)
                     breakpoints.push({ eventName: eventName, targetNames: categoryItem.targetNames });
             }
         }
         WebInspector.settings.eventListenerBreakpoints.set(breakpoints);
     },
 
-    _restoreBreakpoints: function()
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    _restoreBreakpoints: function(target)
     {
         var breakpoints = WebInspector.settings.eventListenerBreakpoints.get();
         for (var i = 0; i < breakpoints.length; ++i) {
             var breakpoint = breakpoints[i];
             if (breakpoint && typeof breakpoint.eventName === "string")
-                this._setBreakpoint(breakpoint.eventName, breakpoint.targetNames);
+                this._setBreakpoint(breakpoint.eventName, breakpoint.targetNames, target);
         }
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }