DevTools: Support XHR event listener breakpoints on frontend.

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 503 matching lines @@
     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");
     this.categoriesTreeOutline = new TreeOutline(this.categoriesElement);
     this.bodyElement.appendChild(this.categoriesElement);
 
-    this._breakpointItems = {};
+    this._categoryItems = [];
     // FIXME: uncomment following once inspector stops being drop targer in major ports.
     // Otherwise, inspector page reacts on drop event and tries to load the event data.
-    // this._createCategory(WebInspector.UIString("Drag"), true, ["drag", "drop", "dragstart", "dragend", "dragenter", "dragleave", "dragover"]);
-    this._createCategory(WebInspector.UIString("Animation"), false, ["requestAnimationFrame", "cancelAnimationFrame", "animationFrameFired"]);
-    this._createCategory(WebInspector.UIString("Control"), true, ["resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"]);
-    this._createCategory(WebInspector.UIString("Clipboard"), true, ["copy", "cut", "paste", "beforecopy", "beforecut", "beforepaste"]);
-    this._createCategory(WebInspector.UIString("DOM Mutation"), true, ["DOMActivate", "DOMFocusIn", "DOMFocusOut", "DOMAttrModified", "DOMCharacterDataModified", "DOMNodeInserted", "DOMNodeInsertedIntoDocument", "DOMNodeRemoved", "DOMNodeRemovedFromDocument", "DOMSubtreeModified", "DOMContentLoaded"]);
-    this._createCategory(WebInspector.UIString("Device"), true, ["deviceorientation", "devicemotion"]);
-    this._createCategory(WebInspector.UIString("Drag / drop"), true, ["dragenter", "dragover", "dragleave", "drop"]);
-    this._createCategory(WebInspector.UIString("Keyboard"), true, ["keydown", "keyup", "keypress", "input"]);
-    this._createCategory(WebInspector.UIString("Load"), true, ["load", "beforeunload", "unload", "abort", "error", "hashchange", "popstate"]);
-    this._createCategory(WebInspector.UIString("Mouse"), true, ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel", "wheel"]);
-    this._createCategory(WebInspector.UIString("Timer"), false, ["setTimer", "clearTimer", "timerFired"]);
-    this._createCategory(WebInspector.UIString("Touch"), true, ["touchstart", "touchmove", "touchend", "touchcancel"]);
-    this._createCategory(WebInspector.UIString("WebGL"), false, ["webglErrorFired", "webglWarningFired"]);
+    // this._createCategory(WebInspector.UIString("Drag"), ["drag", "drop", "dragstart", "dragend", "dragenter", "dragleave", "dragover"]);
+    this._createCategory(WebInspector.UIString("Animation"), ["requestAnimationFrame", "cancelAnimationFrame", "animationFrameFired"], true);
+    this._createCategory(WebInspector.UIString("Control"), ["resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"]);
+    this._createCategory(WebInspector.UIString("Clipboard"), ["copy", "cut", "paste", "beforecopy", "beforecut", "beforepaste"]);
+    this._createCategory(WebInspector.UIString("DOM Mutation"), ["DOMActivate", "DOMFocusIn", "DOMFocusOut", "DOMAttrModified", "DOMCharacterDataModified", "DOMNodeInserted", "DOMNodeInsertedIntoDocument", "DOMNodeRemoved", "DOMNodeRemovedFromDocument", "DOMSubtreeModified", "DOMContentLoaded"]);
+    this._createCategory(WebInspector.UIString("Device"), ["deviceorientation", "devicemotion"]);
+    this._createCategory(WebInspector.UIString("Drag / drop"), ["dragenter", "dragover", "dragleave", "drop"]);
+    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("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"]);

[yurys, 2014/06/16 12:22:10]

It is a bit confusing that we mix categories and targets on the same level. We
may want a better separation in UI, e.g. first all events are grouped by
targets, under each target events grouped by categories. Can be addressed in a
separate change.

+    this._createCategory(WebInspector.UIString("WebGL"), ["webglErrorFired", "webglWarningFired"], true);
 
     this._restoreBreakpoints();
 }
 
-WebInspector.EventListenerBreakpointsSidebarPane.categotyListener = "listener:";
-WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation = "instrumentation:";
+WebInspector.EventListenerBreakpointsSidebarPane.categoryListener = "listener:";
+WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation = "instrumentation:";
+WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny = "*";
 
 /**
  * @param {string} eventName
  * @param {!Object=} auxData
  * @return {string}
  */
 WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI = function(eventName, auxData)
 {
     if (!WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI) {
         WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI = {
@@ skipping 12 matching lines @@
             var errorName = auxData["webglErrorName"];
             // 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 = {
-    _createCategory: function(name, isDOMEvent, eventNames)
+    /**
+     * @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;
 
         var categoryItem = {};
         categoryItem.element = new TreeElement(labelNode);
         this.categoriesTreeOutline.appendChild(categoryItem.element);
         categoryItem.element.listItemElement.classList.add("event-category");
         categoryItem.element.selectable = true;
 
         categoryItem.checkbox = this._createCheckbox(labelNode);
         categoryItem.checkbox.addEventListener("click", this._categoryCheckboxClicked.bind(this, categoryItem), true);
 
+        categoryItem.targetNames = this._stringArrayToLowerCase(targetNames || [WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny]);
         categoryItem.children = {};
+        var category = (isInstrumentationEvent ? WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation :  WebInspector.EventListenerBreakpointsSidebarPane.categoryListener);
         for (var i = 0; i < eventNames.length; ++i) {
-            var eventName = (isDOMEvent ? WebInspector.EventListenerBreakpointsSidebarPane.categotyListener :  WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation) + eventNames[i];
+            var eventName = category + eventNames[i];
 
             var breakpointItem = {};
             var title = WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI(eventName);
 
             labelNode = document.createElement("label");
             labelNode.textContent = title;
 
             breakpointItem.element = new TreeElement(labelNode);
             categoryItem.element.appendChild(breakpointItem.element);
 
-            var hitMarker = document.createElement("div");
-            hitMarker.className = "breakpoint-hit-marker";
-            breakpointItem.element.listItemElement.appendChild(hitMarker);
+            breakpointItem.element.listItemElement.createChild("div", "breakpoint-hit-marker");
             breakpointItem.element.listItemElement.classList.add("source-code");
             breakpointItem.element.selectable = false;
 
             breakpointItem.checkbox = this._createCheckbox(labelNode);
-            breakpointItem.checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, eventName), true);
+            breakpointItem.checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, eventName, categoryItem.targetNames), true);
             breakpointItem.parent = categoryItem;
 
-            this._breakpointItems[eventName] = breakpointItem;
             categoryItem.children[eventName] = breakpointItem;
         }
+        this._categoryItems.push(categoryItem);
     },
 
+    /**
+     * @param {!Array.<string>} array
+     * @return {!Array.<string>}
+     */
+    _stringArrayToLowerCase: function(array)
+    {
+        return array.map(function(value) {
+            return value.toLowerCase();
+        });
+    },
+
+    /**
+     * @param {!Element} labelNode
+     * @return {!Element}
+     */
     _createCheckbox: function(labelNode)
     {
         var checkbox = document.createElement("input");
         checkbox.className = "checkbox-elem";
         checkbox.type = "checkbox";
 
         labelNode.insertBefore(checkbox, labelNode.firstChild);
         return checkbox;
     },
 
     _categoryCheckboxClicked: function(categoryItem)
     {
         var checked = categoryItem.checkbox.checked;
         for (var eventName in categoryItem.children) {
             var breakpointItem = categoryItem.children[eventName];
             if (breakpointItem.checkbox.checked === checked)
                 continue;
             if (checked)
-                this._setBreakpoint(eventName);
+                this._setBreakpoint(eventName, categoryItem.targetNames);
             else
-                this._removeBreakpoint(eventName);
+                this._removeBreakpoint(eventName, categoryItem.targetNames);
         }
         this._saveBreakpoints();
     },
 
-    _breakpointCheckboxClicked: function(eventName, event)
+    /**
+     * @param {string} eventName
+     * @param {!Array.<string>} targetNames
+     * @param {?Event} event
+     */
+    _breakpointCheckboxClicked: function(eventName, targetNames, event)
     {
         if (event.target.checked)
-            this._setBreakpoint(eventName);
+            this._setBreakpoint(eventName, targetNames);
         else
-            this._removeBreakpoint(eventName);
+            this._removeBreakpoint(eventName, targetNames);
         this._saveBreakpoints();
     },
 
-    _setBreakpoint: function(eventName)
+    /**
+     * @param {string} eventName
+     * @param {?Array.<string>=} targetNames
+     */
+    _setBreakpoint: function(eventName, targetNames)
     {
-        var breakpointItem = this._breakpointItems[eventName];
-        if (!breakpointItem)
-            return;
-        breakpointItem.checkbox.checked = true;
-        if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categotyListener))
-            DOMDebuggerAgent.setEventListenerBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categotyListener.length));
-        else if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation))
-            DOMDebuggerAgent.setInstrumentationBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation.length));
-        this._updateCategoryCheckbox(breakpointItem.parent);
+        targetNames = targetNames || [WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny];
+        for (var i = 0; i < targetNames.length; ++i) {
+            var targetName = targetNames[i];
+            var breakpointItem = this._findBreakpointItem(eventName, targetName);
+            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._updateCategoryCheckboxes();
     },
 
-    _removeBreakpoint: function(eventName)
+    /**
+     * @param {string} eventName
+     * @param {?Array.<string>=} targetNames
+     */
+    _removeBreakpoint: function(eventName, targetNames)
     {
-        var breakpointItem = this._breakpointItems[eventName];
-        if (!breakpointItem)
-            return;
-        breakpointItem.checkbox.checked = false;
-        if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categotyListener))
-            DOMDebuggerAgent.removeEventListenerBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categotyListener.length));
-        else if (eventName.startsWith(WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation))
-            DOMDebuggerAgent.removeInstrumentationBreakpoint(eventName.substring(WebInspector.EventListenerBreakpointsSidebarPane.categotyInstrumentation.length));
-        this._updateCategoryCheckbox(breakpointItem.parent);
+        targetNames = targetNames || [WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny];
+        for (var i = 0; i < targetNames.length; ++i) {
+            var targetName = targetNames[i];
+            var breakpointItem = this._findBreakpointItem(eventName, targetName);
+            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._updateCategoryCheckboxes();
     },
 
-    _updateCategoryCheckbox: function(categoryItem)
+    _updateCategoryCheckboxes: function()
     {
-        var hasEnabled = false, hasDisabled = false;
-        for (var eventName in categoryItem.children) {
-            var breakpointItem = categoryItem.children[eventName];
-            if (breakpointItem.checkbox.checked)
-                hasEnabled = true;
-            else
-                hasDisabled = true;
+        for (var i = 0; i < this._categoryItems.length; ++i) {
+            var categoryItem = this._categoryItems[i];
+            if (!categoryItem.dirtyCheckbox)
+                continue;
+            delete categoryItem.dirtyCheckbox;

[yurys, 2014/06/16 12:07:24]

 categoryItem.dirtyCheckbox = false;

[aandrey, 2014/06/16 12:23:39]

Done.

+            var hasEnabled = false, hasDisabled = false;

[yurys, 2014/06/16 12:07:24]

one assignment per line please

[aandrey, 2014/06/16 12:23:39]

Done.

+            for (var eventName in categoryItem.children) {
+                var breakpointItem = categoryItem.children[eventName];
+                if (breakpointItem.checkbox.checked)
+                    hasEnabled = true;
+                else
+                    hasDisabled = true;
+            }
+            categoryItem.checkbox.checked = hasEnabled;
+            categoryItem.checkbox.indeterminate = hasEnabled && hasDisabled;
         }
-        categoryItem.checkbox.checked = hasEnabled;
-        categoryItem.checkbox.indeterminate = hasEnabled && hasDisabled;
     },
 
-    highlightBreakpoint: function(eventName)
+    /**
+     * @param {string} eventName
+     * @param {string=} targetName
+     * @return {?Object}
+     */
+    _findBreakpointItem: function(eventName, targetName)
     {
-        var breakpointItem = this._breakpointItems[eventName];
+        targetName = (targetName || WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny).toLowerCase();
+        for (var i = 0; i < this._categoryItems.length; ++i) {
+            var categoryItem = this._categoryItems[i];
+            if (categoryItem.targetNames.indexOf(targetName) === -1)
+                continue;
+            var breakpointItem = categoryItem.children[eventName];
+            if (breakpointItem)
+                return breakpointItem;

[yurys, 2014/06/16 12:07:24]

Consider doing "return breakpointItem || null;" unconditionally?

[aandrey, 2014/06/16 12:23:39]

depending on the condition, we may have to proceed the loop interation

+        }
+        return null;
+    },
+
+    /**
+     * @param {string} eventName
+     * @param {string=} targetName
+     */
+    highlightBreakpoint: function(eventName, targetName)
+    {
+        var breakpointItem = this._findBreakpointItem(eventName, targetName);
+        if (!breakpointItem || !breakpointItem.checkbox.checked)
+            breakpointItem = this._findBreakpointItem(eventName, WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny);
         if (!breakpointItem)
             return;
         this.expand();
         breakpointItem.parent.element.expand();
         breakpointItem.element.listItemElement.classList.add("breakpoint-hit");
         this._highlightedElement = breakpointItem.element.listItemElement;
     },
 
     clearBreakpointHighlight: function()
     {
         if (this._highlightedElement) {
             this._highlightedElement.classList.remove("breakpoint-hit");
             delete this._highlightedElement;
         }
     },
 
     _saveBreakpoints: function()
     {
         var breakpoints = [];
-        for (var eventName in this._breakpointItems) {
-            if (this._breakpointItems[eventName].checkbox.checked)
-                breakpoints.push({ eventName: eventName });
+        for (var i = 0; i < this._categoryItems.length; ++i) {
+            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()
     {
         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);
+                this._setBreakpoint(breakpoint.eventName, breakpoint.targetNames);
         }
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }