2010-08-24 Pavel Podivilov <podivilov@chromium.org>
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 24 Aug 2010 22:16:55 +0000 (22:16 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 24 Aug 2010 22:16:55 +0000 (22:16 +0000)
        Reviewed by Yury Semikhatsky.

        Web Inspector: show DOM breakpoints in sidebar pane
        https://bugs.webkit.org/show_bug.cgi?id=44424

        * inspector/dom-breakpoints.html:
2010-08-24  Pavel Podivilov  <podivilov@chromium.org>

        Reviewed by Yury Semikhatsky.

        Web Inspector: show DOM breakpoints in sidebar pane
        https://bugs.webkit.org/show_bug.cgi?id=44424

        * inspector/front-end/BreakpointManager.js:
        (WebInspector.BreakpointManager.prototype._setBreakpoint):
        (WebInspector.BreakpointManager.prototype._breakpointRemoved):
        (WebInspector.BreakpointManager.prototype._setBreakpointOnBackend):
        (WebInspector.Breakpoint.prototype.set enabled):
        (WebInspector.Breakpoint.prototype.set condition):
        (WebInspector.Breakpoint.prototype.remove):
        * inspector/front-end/BreakpointsSidebarPane.js:
        (WebInspector.BreakpointsSidebarPane):
        (WebInspector.BreakpointsSidebarPane.prototype.addBreakpoint):
        (WebInspector.BreakpointsSidebarPane.prototype._breakpointRemoved):
        (WebInspector.BreakpointsSidebarPane.prototype._contextMenuEventFired):
        (WebInspector.BreakpointItem):
        (WebInspector.BreakpointItem.prototype.element):
        (WebInspector.BreakpointItem.prototype.remove):
        (WebInspector.BreakpointItem.prototype._checkboxClicked):
        (WebInspector.BreakpointItem.prototype._enableChanged):
        (WebInspector.BreakpointItem.prototype._removed):
        (WebInspector.JSBreakpointItem):
        (WebInspector.JSBreakpointItem.prototype._textChanged):
        (WebInspector.DOMBreakpointItem):
        (WebInspector.DOMBreakpointItem.prototype.compareTo):
        * inspector/front-end/DOMAgent.js:
        (WebInspector.DOMBreakpointManager):
        (WebInspector.DOMBreakpointManager.prototype.setBreakpoint):
        (WebInspector.DOMBreakpointManager.prototype.removeBreakpointsForNode):
        (WebInspector.DOMBreakpointManager.prototype._breakpointRemoved):
        (WebInspector.DOMBreakpoint):
        (WebInspector.DOMBreakpoint.prototype.get enabled):
        (WebInspector.DOMBreakpoint.prototype.set enabled):
        (WebInspector.DOMBreakpoint.prototype.remove):
        * inspector/front-end/ElementsPanel.js:
        (WebInspector.ElementsPanel):
        (WebInspector.ElementsPanel.prototype.reset):
        * inspector/front-end/ElementsTreeOutline.js:
        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu):
        * inspector/front-end/ScriptView.js:
        (WebInspector.ScriptView):
        * inspector/front-end/ScriptsPanel.js:
        (WebInspector.ScriptsPanel):
        (WebInspector.ScriptsPanel.prototype._breakpointAdded):
        (WebInspector.ScriptsPanel.prototype.reset):
        * inspector/front-end/SourceFrame.js:
        (WebInspector.SourceFrame):
        (WebInspector.SourceFrame.prototype.set visible):
        (WebInspector.SourceFrame.prototype.addBreakpoint):
        (WebInspector.SourceFrame.prototype._breakpointRemoved):
        (WebInspector.SourceFrame.prototype._addBreakpointToSource):
        (WebInspector.SourceFrame.prototype._removeBreakpointFromSource):
        (WebInspector.SourceFrame.prototype._contextMenu.addConditionalBreakpoint):
        (WebInspector.SourceFrame.prototype._contextMenu):
        (WebInspector.SourceFrame.prototype._mouseDown):
        * inspector/front-end/SourceView.js:
        (WebInspector.SourceView):
        (WebInspector.SourceView.prototype.updateLocalContent):
        * inspector/front-end/inspector.js:
        (WebInspector.createJSBreakpointsSidebarPane.breakpointAdded):
        (WebInspector.createJSBreakpointsSidebarPane):
        (WebInspector.createDOMBreakpointsSidebarPane.breakpointAdded):
        (WebInspector.createDOMBreakpointsSidebarPane):
        (WebInspector.doLoadedDone):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@65939 268f45cc-cd09-0410-ab3c-d52691b4dbfc

13 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/dom-breakpoints.html
WebCore/ChangeLog
WebCore/inspector/front-end/BreakpointManager.js
WebCore/inspector/front-end/BreakpointsSidebarPane.js
WebCore/inspector/front-end/DOMAgent.js
WebCore/inspector/front-end/ElementsPanel.js
WebCore/inspector/front-end/ElementsTreeOutline.js
WebCore/inspector/front-end/ScriptView.js
WebCore/inspector/front-end/ScriptsPanel.js
WebCore/inspector/front-end/SourceFrame.js
WebCore/inspector/front-end/SourceView.js
WebCore/inspector/front-end/inspector.js

index fde0974..00dd636 100644 (file)
@@ -1,3 +1,12 @@
+2010-08-24  Pavel Podivilov  <podivilov@chromium.org>
+
+        Reviewed by Yury Semikhatsky.
+
+        Web Inspector: show DOM breakpoints in sidebar pane
+        https://bugs.webkit.org/show_bug.cgi?id=44424
+
+        * inspector/dom-breakpoints.html:
+
 2010-08-24  Dumitru Daniliuc  <dumi@chromium.org>
 
         Reviewed by Dimitri Glazkov.
index 02f3514..40fd2a9 100644 (file)
@@ -24,7 +24,7 @@ var test = function()
     function findDOMNodeCallback(node)
     {
         InspectorTest.addResult("Found div element.");
-        InspectorBackend.setDOMBreakpoint(node.id, WebInspector.ElementsTreeElement.DOMBreakpointTypeSubtreeModified);
+        WebInspector.domBreakpointManager.setBreakpoint(node, WebInspector.DOMBreakpoint.Types.SubtreeModified);
         InspectorTest.addResult("Set DOM breakpoint.");
         InspectorTest.evaluateInConsole("appendElement()");
         InspectorTest.waitUntilPaused(waitUntilPausedCallback);
index 2355ce4..123cf2b 100644 (file)
@@ -1,3 +1,72 @@
+2010-08-24  Pavel Podivilov  <podivilov@chromium.org>
+
+        Reviewed by Yury Semikhatsky.
+
+        Web Inspector: show DOM breakpoints in sidebar pane
+        https://bugs.webkit.org/show_bug.cgi?id=44424
+
+        * inspector/front-end/BreakpointManager.js:
+        (WebInspector.BreakpointManager.prototype._setBreakpoint):
+        (WebInspector.BreakpointManager.prototype._breakpointRemoved):
+        (WebInspector.BreakpointManager.prototype._setBreakpointOnBackend):
+        (WebInspector.Breakpoint.prototype.set enabled):
+        (WebInspector.Breakpoint.prototype.set condition):
+        (WebInspector.Breakpoint.prototype.remove):
+        * inspector/front-end/BreakpointsSidebarPane.js:
+        (WebInspector.BreakpointsSidebarPane):
+        (WebInspector.BreakpointsSidebarPane.prototype.addBreakpoint):
+        (WebInspector.BreakpointsSidebarPane.prototype._breakpointRemoved):
+        (WebInspector.BreakpointsSidebarPane.prototype._contextMenuEventFired):
+        (WebInspector.BreakpointItem):
+        (WebInspector.BreakpointItem.prototype.element):
+        (WebInspector.BreakpointItem.prototype.remove):
+        (WebInspector.BreakpointItem.prototype._checkboxClicked):
+        (WebInspector.BreakpointItem.prototype._enableChanged):
+        (WebInspector.BreakpointItem.prototype._removed):
+        (WebInspector.JSBreakpointItem):
+        (WebInspector.JSBreakpointItem.prototype._textChanged):
+        (WebInspector.DOMBreakpointItem):
+        (WebInspector.DOMBreakpointItem.prototype.compareTo):
+        * inspector/front-end/DOMAgent.js:
+        (WebInspector.DOMBreakpointManager):
+        (WebInspector.DOMBreakpointManager.prototype.setBreakpoint):
+        (WebInspector.DOMBreakpointManager.prototype.removeBreakpointsForNode):
+        (WebInspector.DOMBreakpointManager.prototype._breakpointRemoved):
+        (WebInspector.DOMBreakpoint):
+        (WebInspector.DOMBreakpoint.prototype.get enabled):
+        (WebInspector.DOMBreakpoint.prototype.set enabled):
+        (WebInspector.DOMBreakpoint.prototype.remove):
+        * inspector/front-end/ElementsPanel.js:
+        (WebInspector.ElementsPanel):
+        (WebInspector.ElementsPanel.prototype.reset):
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu):
+        * inspector/front-end/ScriptView.js:
+        (WebInspector.ScriptView):
+        * inspector/front-end/ScriptsPanel.js:
+        (WebInspector.ScriptsPanel):
+        (WebInspector.ScriptsPanel.prototype._breakpointAdded):
+        (WebInspector.ScriptsPanel.prototype.reset):
+        * inspector/front-end/SourceFrame.js:
+        (WebInspector.SourceFrame):
+        (WebInspector.SourceFrame.prototype.set visible):
+        (WebInspector.SourceFrame.prototype.addBreakpoint):
+        (WebInspector.SourceFrame.prototype._breakpointRemoved):
+        (WebInspector.SourceFrame.prototype._addBreakpointToSource):
+        (WebInspector.SourceFrame.prototype._removeBreakpointFromSource):
+        (WebInspector.SourceFrame.prototype._contextMenu.addConditionalBreakpoint):
+        (WebInspector.SourceFrame.prototype._contextMenu):
+        (WebInspector.SourceFrame.prototype._mouseDown):
+        * inspector/front-end/SourceView.js:
+        (WebInspector.SourceView):
+        (WebInspector.SourceView.prototype.updateLocalContent):
+        * inspector/front-end/inspector.js:
+        (WebInspector.createJSBreakpointsSidebarPane.breakpointAdded):
+        (WebInspector.createJSBreakpointsSidebarPane):
+        (WebInspector.createDOMBreakpointsSidebarPane.breakpointAdded):
+        (WebInspector.createDOMBreakpointsSidebarPane):
+        (WebInspector.doLoadedDone):
+
 2010-08-24  Stephen White  <senorblanco@chromium.org>
 
         Reviewed by Dumitru Daniliuc.
index 2aff87f..824bc31 100644 (file)
@@ -62,12 +62,6 @@ WebInspector.BreakpointManager.prototype = {
         this._setBreakpoint(sourceID, url, line, enabled, condition);
     },
 
-    removeBreakpoint: function(breakpoint)
-    {
-        if (this._removeBreakpoint(breakpoint))
-            InspectorBackend.removeBreakpoint(breakpoint.sourceID, breakpoint.line);
-    },
-
     breakpointsForSourceID: function(sourceID)
     {
         var breakpoints = [];
@@ -102,19 +96,14 @@ WebInspector.BreakpointManager.prototype = {
         if (this._oneTimeBreakpoint && (this._oneTimeBreakpoint.id == breakpoint.id))
             delete this._oneTimeBreakpoint;
         this._breakpoints[breakpoint.id] = breakpoint;
+        breakpoint.addEventListener("removed", this._breakpointRemoved, this);
         this.dispatchEventToListeners("breakpoint-added", breakpoint);
         return breakpoint;
     },
 
-    _removeBreakpoint: function(breakpoint)
+    _breakpointRemoved: function(event)
     {
-        if (!(breakpoint.id in this._breakpoints))
-            return false;
-        breakpoint.dispatchEventToListeners("removed");
-        breakpoint.removeAllListeners();
-        delete breakpoint._breakpointManager;
-        delete this._breakpoints[breakpoint.id];
-        return true;
+        delete this._breakpoints[event.target.id];
     },
 
     _setBreakpointOnBackend: function(breakpoint, isOneTime)
@@ -129,7 +118,7 @@ WebInspector.BreakpointManager.prototype = {
                 else
                     delete this._oneTimeBreakpoint;
             } else {
-                this._removeBreakpoint(breakpoint);
+                breakpoint.remove();
                 if (success)
                     this._setBreakpoint(breakpoint.sourceID, breakpoint.url, line, breakpoint.enabled, breakpoint.condition);
             }
@@ -165,10 +154,7 @@ WebInspector.Breakpoint.prototype = {
 
         this._enabled = x;
         this._breakpointManager._setBreakpointOnBackend(this);
-        if (this._enabled)
-            this.dispatchEventToListeners("enabled");
-        else
-            this.dispatchEventToListeners("disabled");
+        this.dispatchEventToListeners("enable-changed");
     },
 
     get sourceText()
@@ -202,6 +188,14 @@ WebInspector.Breakpoint.prototype = {
         if (this.enabled)
             this._breakpointManager._setBreakpointOnBackend(this);
         this.dispatchEventToListeners("condition-changed");
+    },
+
+    remove: function()
+    {
+        InspectorBackend.removeBreakpoint(this.sourceID, this.line);
+        this.dispatchEventToListeners("removed");
+        this.removeAllListeners();
+        delete this._breakpointManager;
     }
 }
 
index d88024d..ccf45b6 100644 (file)
@@ -23,9 +23,9 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.BreakpointsSidebarPane = function()
+WebInspector.BreakpointsSidebarPane = function(title)
 {
-    WebInspector.SidebarPane.call(this, WebInspector.UIString("Breakpoints"));
+    WebInspector.SidebarPane.call(this, title);
 
     this.listElement = document.createElement("ol");
     this.listElement.className = "breakpoint-list";
@@ -47,23 +47,25 @@ WebInspector.BreakpointsSidebarPane.prototype = {
         }
     },
 
-    addBreakpoint: function(breakpoint)
+    addBreakpoint: function(breakpointItem)
     {
-        breakpoint.addEventListener("removed", this._breakpointRemoved, this);
+        breakpointItem.addEventListener("removed", this._breakpointRemoved, this);
 
-        var breakpointElement = breakpoint.element();
-        breakpointElement._breakpointObject = breakpoint;
+        var element = breakpointItem.element();
+        element._breakpointItem = breakpointItem;
 
         var currentElement = this.listElement.firstChild;
         while (currentElement) {
-             if (currentElement._breakpointObject.compareTo(breakpointElement._breakpointObject) > 0) {
-                this.listElement.insertBefore(breakpointElement, currentElement);
+             if (currentElement._breakpointItem.compareTo(element._breakpointItem) > 0) {
+                this.listElement.insertBefore(element, currentElement);
                 break;
             }
             currentElement = currentElement.nextSibling;
         }
         if (!currentElement)
-            this.listElement.appendChild(breakpointElement);
+            this.listElement.appendChild(element);
+
+        element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, breakpointItem), true);
 
         if (this.emptyElement.parentElement) {
             this.bodyElement.removeChild(this.emptyElement);
@@ -78,17 +80,23 @@ WebInspector.BreakpointsSidebarPane.prototype = {
             this.bodyElement.removeChild(this.listElement);
             this.bodyElement.appendChild(this.emptyElement);
         }
+    },
+
+    _contextMenuEventFired: function(breakpointItem, event)
+    {
+        var contextMenu = new WebInspector.ContextMenu();
+        contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpointItem.remove.bind(breakpointItem));
+        contextMenu.show(event);
     }
 }
 
 WebInspector.BreakpointsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
 
-WebInspector.JSBreakpointItem = function(breakpoint)
+WebInspector.BreakpointItem = function(breakpoint)
 {
     this._breakpoint = breakpoint;
 
     this._element = document.createElement("li");
-    this._element.addEventListener("click", this._breakpointClicked.bind(this), false);
 
     var checkboxElement = document.createElement("input");
     checkboxElement.className = "checkbox-elem";
@@ -97,6 +105,49 @@ WebInspector.JSBreakpointItem = function(breakpoint)
     checkboxElement.addEventListener("click", this._checkboxClicked.bind(this), false);
     this._element.appendChild(checkboxElement);
 
+    this._breakpoint.addEventListener("enable-changed", this._enableChanged, this);
+    this._breakpoint.addEventListener("removed", this._removed, this);
+}
+
+WebInspector.BreakpointItem.prototype = {
+    element: function()
+    {
+        return this._element;
+    },
+
+    remove: function()
+    {
+        this._breakpoint.remove();
+    },
+
+    _checkboxClicked: function(event)
+    {
+        this._breakpoint.enabled = !this._breakpoint.enabled;
+
+        // without this, we'd switch to the source of the clicked breakpoint
+        event.stopPropagation();
+    },
+
+    _enableChanged: function()
+    {
+        var checkbox = this._element.firstChild;
+        checkbox.checked = this._breakpoint.enabled;
+    },
+
+    _removed: function()
+    {
+        this.dispatchEventToListeners("removed");
+    }
+}
+
+WebInspector.BreakpointItem.prototype.__proto__ = WebInspector.Object.prototype;
+
+WebInspector.JSBreakpointItem = function(breakpoint)
+{
+    WebInspector.BreakpointItem.call(this, breakpoint);
+
+    this._element.addEventListener("click", this._breakpointClicked.bind(this), false);
+
     var displayName = this._breakpoint.url ? WebInspector.displayNameForURL(this._breakpoint.url) : WebInspector.UIString("(program)");
     var labelElement = document.createTextNode(displayName + ":" + this._breakpoint.line);
     this._element.appendChild(labelElement);
@@ -106,10 +157,7 @@ WebInspector.JSBreakpointItem = function(breakpoint)
     sourceTextElement.className = "source-text monospace";
     this._element.appendChild(sourceTextElement);
 
-    this._breakpoint.addEventListener("enabled", this._enableChanged, this);
-    this._breakpoint.addEventListener("disabled", this._enableChanged, this);
     this._breakpoint.addEventListener("text-changed", this._textChanged, this);
-    this._breakpoint.addEventListener("removed", this._removed, this);
 }
 
 WebInspector.JSBreakpointItem.prototype = {
@@ -122,40 +170,39 @@ WebInspector.JSBreakpointItem.prototype = {
         return 0;
     },
 
-    element: function()
-    {
-        return this._element;
-    },
-
     _breakpointClicked: function()
     {
         WebInspector.panels.scripts.showSourceLine(this._breakpoint.url, this._breakpoint.line);
     },
 
-    _checkboxClicked: function(event)
-    {
-        this._breakpoint.enabled = !this._breakpoint.enabled;
-
-        // without this, we'd switch to the source of the clicked breakpoint
-        event.stopPropagation();
-    },
-
-    _enableChanged: function()
-    {
-        var checkbox = this._element.firstChild;
-        checkbox.checked = this._breakpoint.enabled;
-    },
-
     _textChanged: function()
     {
         var sourceTextElement = this._element.firstChild.nextSibling.nextSibling;
         sourceTextElement.textContent = this._breakpoint.sourceText;
-    },
+    }
+}
 
-    _removed: function()
+WebInspector.JSBreakpointItem.prototype.__proto__ = WebInspector.BreakpointItem.prototype;
+
+WebInspector.DOMBreakpointItem = function(breakpoint)
+{
+    WebInspector.BreakpointItem.call(this, breakpoint);
+
+    var link = WebInspector.panels.elements.linkifyNodeReference(this._breakpoint.node);
+    this._element.appendChild(link);
+
+    var type = WebInspector.DOMBreakpoint.Labels[this._breakpoint.type];
+    var typeElement = document.createTextNode(" - " + type);
+    this._element.appendChild(typeElement);
+}
+
+WebInspector.DOMBreakpointItem.prototype = {
+    compareTo: function(other)
     {
-        this.dispatchEventToListeners("removed");
+        if (this._breakpoint.type != other._breakpoint.type)
+            return this._breakpoint.type < other._breakpoint.type ? -1 : 1;
+        return 0;
     }
 }
 
-WebInspector.JSBreakpointItem.prototype.__proto__ = WebInspector.Object.prototype;
\ No newline at end of file
+WebInspector.DOMBreakpointItem.prototype.__proto__ = WebInspector.BreakpointItem.prototype;
index 57422f6..d119680 100644 (file)
@@ -677,3 +677,90 @@ WebInspector.childNodeRemoved = function()
     this.domAgent._childNodeRemoved.apply(this.domAgent, arguments);
 }
 
+WebInspector.DOMBreakpointManager = function()
+{
+    this._breakpoints = {};
+}
+
+WebInspector.DOMBreakpointManager.prototype = {
+    setBreakpoint: function(node, type)
+    {
+        if (!(node.id in this._breakpoints))
+            this._breakpoints[node.id] = {};
+        else if (type in this._breakpoints[node.id])
+            return;
+
+        var breakpoint = new WebInspector.DOMBreakpoint(node, type);
+        this._breakpoints[node.id][type] = breakpoint;
+        breakpoint.addEventListener("removed", this._breakpointRemoved, this);
+
+        this.dispatchEventToListeners("dom-breakpoint-added", breakpoint);
+    },
+
+    removeBreakpointsForNode: function(node)
+    {
+        var nodeBreakpoints = this._breakpoints[node.id];
+        for (var type in nodeBreakpoints)
+            nodeBreakpoints[type].remove();
+    },
+
+    _breakpointRemoved: function(event)
+    {
+        var breakpoint = event.target;
+
+        var nodeBreakpoints = this._breakpoints[breakpoint.node.id];
+        delete nodeBreakpoints[breakpoint.type];
+        for (var type in nodeBreakpoints)
+            return;
+        delete this._breakpoints[breakpoint.node.id];
+    }
+}
+
+WebInspector.DOMBreakpointManager.prototype.__proto__ = WebInspector.Object.prototype;
+
+WebInspector.DOMBreakpoint = function(node, type)
+{
+    this.node = node;
+    this.type = type;
+    this._enabled = true;
+
+    InspectorBackend.setDOMBreakpoint(this.node.id, this.type);
+}
+
+WebInspector.DOMBreakpoint.Types = {
+    SubtreeModified: 0
+};
+
+WebInspector.DOMBreakpoint.Labels = {};
+WebInspector.DOMBreakpoint.Labels[WebInspector.DOMBreakpoint.Types.SubtreeModified] = WebInspector.UIString("Subtree Modified");
+
+WebInspector.DOMBreakpoint.prototype = {
+    get enabled()
+    {
+        return this._enabled;
+    },
+
+    set enabled(enabled)
+    {
+        if (this._enabled === enabled)
+            return;
+
+        this._enabled = enabled;
+        if (this._enabled)
+            InspectorBackend.setDOMBreakpoint(this.node.id, this.type);
+        else
+            InspectorBackend.removeDOMBreakpoint(this.node.id, this.type);
+
+        this.dispatchEventToListeners("enable-changed");
+    },
+
+    remove: function()
+    {
+        if (this._enabled)
+            InspectorBackend.removeDOMBreakpoint(this.node.id, this.type);
+        this.dispatchEventToListeners("removed");
+    }
+}
+
+WebInspector.DOMBreakpoint.prototype.__proto__ = WebInspector.Object.prototype;
+
index 0296737..f18299a 100644 (file)
@@ -74,6 +74,8 @@ WebInspector.ElementsPanel = function()
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle);
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
     this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();
+    if (Preferences.domBreakpointsEnabled)
+        this.sidebarPanes.domBreakpoints = WebInspector.createDOMBreakpointsSidebarPane();
     this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane();
 
     this.sidebarPanes.styles.onexpand = this.updateStyles.bind(this);
@@ -90,11 +92,8 @@ WebInspector.ElementsPanel = function()
     this.sidebarElement = document.createElement("div");
     this.sidebarElement.id = "elements-sidebar";
 
-    this.sidebarElement.appendChild(this.sidebarPanes.computedStyle.element);
-    this.sidebarElement.appendChild(this.sidebarPanes.styles.element);
-    this.sidebarElement.appendChild(this.sidebarPanes.metrics.element);
-    this.sidebarElement.appendChild(this.sidebarPanes.properties.element);
-    this.sidebarElement.appendChild(this.sidebarPanes.eventListeners.element);
+    for (var pane in this.sidebarPanes)
+        this.sidebarElement.appendChild(this.sidebarPanes[pane].element);
 
     this.sidebarResizeElement = document.createElement("div");
     this.sidebarResizeElement.className = "sidebar-resizer-vertical";
@@ -179,6 +178,9 @@ WebInspector.ElementsPanel.prototype = {
         this.recentlyModifiedNodes = [];
 
         delete this.currentQuery;
+
+        if (Preferences.domBreakpointsEnabled)
+            this.sidebarPanes.domBreakpoints.reset();
     },
 
     setDocument: function(inspectedRootDocument)
index 2ad0bf2..0ec1eb3 100644 (file)
@@ -326,8 +326,6 @@ WebInspector.ElementsTreeElement.EditTagBlacklist = [
     "html", "head", "body"
 ].keySet();
 
-WebInspector.ElementsTreeElement.DOMBreakpointTypeSubtreeModified = 0;
-
 WebInspector.ElementsTreeElement.prototype = {
     highlightSearchResults: function(searchQuery)
     {
@@ -767,10 +765,12 @@ WebInspector.ElementsTreeElement.prototype = {
         if (Preferences.domBreakpointsEnabled) {
             // Add debbuging-related actions
             contextMenu.appendSeparator();
+
             contextMenu.appendItem(WebInspector.UIString("Stop on subtree modifications"),
-                InspectorBackend.setDOMBreakpoint.bind(InspectorBackend, this.representedObject.id, WebInspector.ElementsTreeElement.DOMBreakpointTypeSubtreeModified));
+                WebInspector.domBreakpointManager.setBreakpoint.bind(WebInspector.domBreakpointManager, this.representedObject, WebInspector.DOMBreakpoint.Types.SubtreeModified));
+
             contextMenu.appendItem(WebInspector.UIString("Remove Breakpoints"),
-                InspectorBackend.removeDOMBreakpoint.bind(InspectorBackend, this.representedObject.id, WebInspector.ElementsTreeElement.DOMBreakpointTypeSubtreeModified));
+                WebInspector.domBreakpointManager.removeBreakpointsForNode.bind(WebInspector.domBreakpointManager, this.representedObject));
         }
     },
 
index 5598577..74dc30a 100644 (file)
@@ -34,7 +34,7 @@ WebInspector.ScriptView = function(script)
     this._frameNeedsSetup = true;
     this._sourceFrameSetup = false;
     var canEditScripts = WebInspector.panels.scripts.canEditScripts();
-    this.sourceFrame = new WebInspector.SourceFrame(this.element, this._addBreakpoint.bind(this), this._removeBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this));
+    this.sourceFrame = new WebInspector.SourceFrame(this.element, this._addBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this));
 }
 
 WebInspector.ScriptView.prototype = {
@@ -129,7 +129,6 @@ WebInspector.ScriptView.prototype = {
     showingFirstSearchResult: WebInspector.SourceView.prototype.showingFirstSearchResult,
     showingLastSearchResult: WebInspector.SourceView.prototype.showingLastSearchResult,
     _jumpToSearchResult: WebInspector.SourceView.prototype._jumpToSearchResult,
-    _removeBreakpoint: WebInspector.SourceView.prototype._removeBreakpoint,
     _editLine: WebInspector.SourceView.prototype._editLine,
     resize: WebInspector.SourceView.prototype.resize
 }
index faed7c6..ae85e13 100644 (file)
@@ -132,7 +132,9 @@ WebInspector.ScriptsPanel = function()
     this.sidebarPanes.watchExpressions = new WebInspector.WatchExpressionsSidebarPane();
     this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane();
     this.sidebarPanes.scopechain = new WebInspector.ScopeChainSidebarPane();
-    this.sidebarPanes.breakpoints = new WebInspector.BreakpointsSidebarPane();
+    this.sidebarPanes.jsBreakpoints = WebInspector.createJSBreakpointsSidebarPane();
+    if (Preferences.domBreakpointsEnabled)
+        this.sidebarPanes.domBreakpoints = WebInspector.createDOMBreakpointsSidebarPane();
     this.sidebarPanes.workers = new WebInspector.WorkersSidebarPane();
 
     for (var pane in this.sidebarPanes)
@@ -142,7 +144,9 @@ WebInspector.ScriptsPanel = function()
     this.sidebarPanes.callstack.addEventListener("call frame selected", this._callFrameSelected, this);
 
     this.sidebarPanes.scopechain.expanded = true;
-    this.sidebarPanes.breakpoints.expanded = true;
+    this.sidebarPanes.jsBreakpoints.expanded = true;
+    if (Preferences.domBreakpointsEnabled)
+        this.sidebarPanes.domBreakpoints.expanded = true;
 
     var panelEnablerHeading = WebInspector.UIString("You need to enable debugging before you can use the Scripts panel.");
     var panelEnablerDisclaimer = WebInspector.UIString("Enabling debugging will make scripts run slower.");
@@ -295,9 +299,6 @@ WebInspector.ScriptsPanel.prototype = {
     {
         var breakpoint = event.data;
 
-        breakpoint.addEventListener("removed", this._breakpointRemoved, this);
-        this.sidebarPanes.breakpoints.addBreakpoint(new WebInspector.JSBreakpointItem(event.data));
-
         var sourceFrame;
         if (breakpoint.url) {
             var resource = WebInspector.resourceURLMap[breakpoint.url];
@@ -314,26 +315,6 @@ WebInspector.ScriptsPanel.prototype = {
             sourceFrame.addBreakpoint(breakpoint);
     },
 
-    _breakpointRemoved: function(event)
-    {
-        var breakpoint = event.target;
-
-        var sourceFrame;
-        if (breakpoint.url) {
-            var resource = WebInspector.resourceURLMap[breakpoint.url];
-            if (resource && resource.finished)
-                sourceFrame = this._sourceFrameForScriptOrResource(resource);
-        }
-
-        if (breakpoint.sourceID && !sourceFrame) {
-            var object = this._sourceIDMap[breakpoint.sourceID]
-            sourceFrame = this._sourceFrameForScriptOrResource(object);
-        }
-
-        if (sourceFrame)
-            sourceFrame.removeBreakpoint(breakpoint);
-    },
-
     canEditScripts: function()
     {
         return Preferences.canEditScriptSource;
@@ -347,7 +328,7 @@ WebInspector.ScriptsPanel.prototype = {
         // Need to clear breakpoints and re-create them later when editing source.
         var breakpoints = WebInspector.breakpointManager.breakpointsForSourceID(sourceID);
         for (var i = 0; i < breakpoints.length; ++i)
-            WebInspector.breakpointManager.removeBreakpoint(breakpoints[i]);
+            breakpoints[i].remove();
 
         function mycallback(success, newBodyOrErrorMessage, callFrames)
         {
@@ -496,7 +477,9 @@ WebInspector.ScriptsPanel.prototype = {
 
         this.sidebarPanes.watchExpressions.refreshExpressions();
         if (!preserveItems) {
-            this.sidebarPanes.breakpoints.reset();
+            this.sidebarPanes.jsBreakpoints.reset();
+            if (Preferences.domBreakpointsEnabled)
+                this.sidebarPanes.domBreakpoints.reset();
             this.sidebarPanes.workers.reset();
         }
     },
index bd46c62..16b8e8d 100644 (file)
@@ -28,7 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.SourceFrame = function(parentElement, addBreakpointDelegate, removeBreakpointDelegate, editDelegate, continueToHereDelegate)
+WebInspector.SourceFrame = function(parentElement, addBreakpointDelegate, editDelegate, continueToHereDelegate)
 {
     this._parentElement = parentElement;
 
@@ -44,7 +44,6 @@ WebInspector.SourceFrame = function(parentElement, addBreakpointDelegate, remove
 
     this._continueToHereDelegate = continueToHereDelegate;
     this._addBreakpointDelegate = addBreakpointDelegate;
-    this._removeBreakpointDelegate = removeBreakpointDelegate;
     this._editDelegate = editDelegate;
     this._popoverObjectGroup = "popover";
 }
@@ -55,7 +54,7 @@ WebInspector.SourceFrame.prototype = {
     {
         this._visible = visible;
         this._createViewerIfNeeded();
-        
+
         if (visible) {
             if (this._textViewer && this._scrollTop)
                 this._textViewer.element.scrollTop = this._scrollTop;
@@ -99,16 +98,16 @@ WebInspector.SourceFrame.prototype = {
     addBreakpoint: function(breakpoint)
     {
         this.breakpoints.push(breakpoint);
+        breakpoint.addEventListener("removed", this._breakpointRemoved, this);
         if (this._textViewer)
             this._addBreakpointToSource(breakpoint);
     },
 
-    removeBreakpoint: function(breakpoint)
+    _breakpointRemoved: function(event)
     {
+        var breakpoint = event.target;
+
         this.breakpoints.remove(breakpoint);
-        breakpoint.removeEventListener("enabled", null, this);
-        breakpoint.removeEventListener("disabled", null, this);
-        breakpoint.removeEventListener("condition-changed", null, this);
         if (this._textViewer)
             this._removeBreakpointFromSource(breakpoint);
     },
@@ -381,8 +380,7 @@ WebInspector.SourceFrame.prototype = {
 
     _addBreakpointToSource: function(breakpoint)
     {
-        breakpoint.addEventListener("enabled", this._breakpointChanged, this);
-        breakpoint.addEventListener("disabled", this._breakpointChanged, this);
+        breakpoint.addEventListener("enable-changed", this._breakpointChanged, this);
         breakpoint.addEventListener("condition-changed", this._breakpointChanged, this);
 
         var lineNumber = breakpoint.line - 1;
@@ -403,6 +401,9 @@ WebInspector.SourceFrame.prototype = {
 
     _removeBreakpointFromSource: function(breakpoint)
     {
+        breakpoint.removeEventListener("enable-changed", null, this);
+        breakpoint.removeEventListener("condition-changed", null, this);
+
         var lineNumber = breakpoint.line - 1;
         this._textViewer.beginUpdates();
         this._textModel.removeAttribute(lineNumber, "breakpoint");
@@ -432,7 +433,7 @@ WebInspector.SourceFrame.prototype = {
             // This row doesn't have a breakpoint: We want to show Add Breakpoint and Add and Edit Breakpoint.
             contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), this._addBreakpointDelegate.bind(this, lineNumber + 1));
 
-            function addConditionalBreakpoint() 
+            function addConditionalBreakpoint()
             {
                 this._addBreakpointDelegate(lineNumber + 1);
                 var breakpoint = this._textModel.getAttribute(lineNumber, "breakpoint");
@@ -443,7 +444,7 @@ WebInspector.SourceFrame.prototype = {
             contextMenu.appendItem(WebInspector.UIString("Add Conditional Breakpoint…"), addConditionalBreakpoint.bind(this));
         } else {
             // This row has a breakpoint, we want to show edit and remove breakpoint, and either disable or enable.
-            contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), this._removeBreakpointDelegate.bind(this, breakpoint));
+            contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpoint.remove.bind(breakpoint));
             contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), this._editBreakpointCondition.bind(this, breakpoint));
             if (breakpoint.enabled)
                 contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), function() { breakpoint.enabled = false; });
@@ -476,7 +477,7 @@ WebInspector.SourceFrame.prototype = {
             if (event.shiftKey)
                 breakpoint.enabled = !breakpoint.enabled;
             else
-                this._removeBreakpointDelegate(breakpoint);
+                breakpoint.remove();
         } else
             this._addBreakpointDelegate(lineNumber + 1);
         event.preventDefault();
index 4d03ecd..240dca1 100644 (file)
@@ -33,7 +33,7 @@ WebInspector.SourceView = function(resource)
     this.element.addStyleClass("source");
 
     var canEditScripts = WebInspector.panels.scripts && WebInspector.panels.scripts.canEditScripts() && resource.type === WebInspector.Resource.Type.Script;
-    this.sourceFrame = new WebInspector.SourceFrame(this.contentElement, this._addBreakpoint.bind(this), this._removeBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this));
+    this.sourceFrame = new WebInspector.SourceFrame(this.contentElement, this._addBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this));
     resource.addEventListener("finished", this._resourceLoadingFinished, this);
     this._frameNeedsSetup = true;
 }
@@ -132,11 +132,6 @@ WebInspector.SourceView.prototype = {
             WebInspector.panels.scripts.toggleBreakpointsClicked();
     },
 
-    _removeBreakpoint: function(breakpoint)
-    {
-        WebInspector.breakpointManager.removeBreakpoint(breakpoint);
-    },
-
     _editLine: function(line, newContent, cancelEditingCallback)
     {
         var lines = [];
@@ -213,7 +208,7 @@ WebInspector.SourceView.prototype = {
             this.localContentElement = document.createElement("div");
             this.localContentElement.className = "resource-view-content";
             this.tabbedPane.appendTab("local", WebInspector.UIString("Local"), this.localContentElement, this.selectLocalContentTab.bind(this));
-            this.localSourceFrame = new WebInspector.SourceFrame(this.localContentElement, this._addBreakpoint.bind(this), this._removeBreakpoint.bind(this), null, this._continueToLine.bind(this));
+            this.localSourceFrame = new WebInspector.SourceFrame(this.localContentElement, this._addBreakpoint.bind(this), null, this._continueToLine.bind(this));
         }
         this.localSourceFrame.setContent(mimeType, content, "");
     },
index 8475804..1a135e6 100644 (file)
@@ -197,6 +197,28 @@ var WebInspector = {
         }
     },
 
+    createJSBreakpointsSidebarPane: function()
+    {
+        var pane = new WebInspector.BreakpointsSidebarPane(WebInspector.UIString("Breakpoints"));
+        function breakpointAdded(event)
+        {
+            pane.addBreakpoint(new WebInspector.JSBreakpointItem(event.data));
+        }
+        WebInspector.breakpointManager.addEventListener("breakpoint-added", breakpointAdded);
+        return pane;
+    },
+
+    createDOMBreakpointsSidebarPane: function()
+    {
+        var pane = new WebInspector.BreakpointsSidebarPane(WebInspector.UIString("DOM Breakpoints"));
+        function breakpointAdded(event)
+        {
+            pane.addBreakpoint(new WebInspector.DOMBreakpointItem(event.data));
+        }
+        WebInspector.domBreakpointManager.addEventListener("dom-breakpoint-added", breakpointAdded);
+        return pane;
+    },
+
     _createPanels: function()
     {
         var hiddenPanels = (InspectorFrontendHost.hiddenPanels() || "").split(',');
@@ -496,6 +518,7 @@ WebInspector.doLoadedDone = function()
     };
 
     this.breakpointManager = new WebInspector.BreakpointManager();
+    this.domBreakpointManager = new WebInspector.DOMBreakpointManager();
     this.cssModel = new WebInspector.CSSStyleModel();
 
     this.panels = {};