DevTools: refactor and fix bugs for DOMBreakpointsSidebarPane

third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js

 /*
  * Copyright (C) 2011 Google 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:
  *
  *     * 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.BreakpointsSidebarPaneBase}
  * @implements {WebInspector.ContextFlavorListener}
  */
 WebInspector.DOMBreakpointsSidebarPane = function()
 {
     WebInspector.BreakpointsSidebarPaneBase.call(this);
-    this._domBreakpointsSetting = WebInspector.settings.createLocalSetting("domBreakpoints", []);
     this.listElement.classList.add("dom-breakpoints-list");
 
-    this._breakpointElements = {};
+    this._breakpointElements = new Map();
 
     this._breakpointTypes = {
         SubtreeModified: "subtree-modified",
         AttributeModified: "attribute-modified",
         NodeRemoved: "node-removed"
     };
     this._breakpointTypeLabels = {};
     this._breakpointTypeLabels[this._breakpointTypes.SubtreeModified] = WebInspector.UIString("Subtree Modified");
     this._breakpointTypeLabels[this._breakpointTypes.AttributeModified] = WebInspector.UIString("Attribute Modified");
     this._breakpointTypeLabels[this._breakpointTypes.NodeRemoved] = WebInspector.UIString("Node Removed");
 
     this._contextMenuLabels = {};
     this._contextMenuLabels[this._breakpointTypes.SubtreeModified] = WebInspector.UIString.capitalize("Subtree ^modifications");
     this._contextMenuLabels[this._breakpointTypes.AttributeModified] = WebInspector.UIString.capitalize("Attributes ^modifications");
     this._contextMenuLabels[this._breakpointTypes.NodeRemoved] = WebInspector.UIString.capitalize("Node ^removal");
 
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
-    WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
-    this._inspectedURL = WebInspector.targetManager.inspectedURL();

[lushnikov, 2016/08/22 18:44:25]

so now instead of relying on inspectedURL to save DOMBreakpoints you rely on
node.ownerDocument url?
Let's make this change separately!

[chenwilliam, 2016/08/22 22:01:46]

Done.

+    WebInspector.domBreakpointManager.addEventListener(WebInspector.DOMBreakpointManager.Events.BreakpointsChanged, this._reloadBreakpointElements, this);
     this._update();
 }
 
-WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
-
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
-    _inspectedURLChanged: function()
+    _reloadBreakpointElements: function()
     {
-        this._breakpointElements = {};
+        this._breakpointElements.clear();
         this.reset();
-        this._inspectedURL = WebInspector.targetManager.inspectedURL();
+        var breakpoints = WebInspector.domBreakpointManager.domBreakpoints();
+        for (var breakpoint of breakpoints) {
+            var id = this._createBreakpointId(breakpoint.node.id, breakpoint.type);
+            this._breakpointElements.set(id, this._createBreakpointElement(breakpoint.node, breakpoint.type, breakpoint.enabled));
+        }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {boolean} createSubMenu
      */
     populateNodeContextMenu: function(node, contextMenu, createSubMenu)
     {
         if (node.pseudoType())
             return;
 
         var nodeBreakpoints = this._nodeBreakpoints(node);
 
         /**
          * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-         * @this {WebInspector.DOMBreakpointsSidebarPane}
          */
         function toggleBreakpoint(type)
         {
-            if (!nodeBreakpoints[type])
-                this._setBreakpoint(node, type, true);
+            if (!nodeBreakpoints.get(type))
+                WebInspector.domBreakpointManager.setBreakpoint(node, type, true);
             else
-                this._removeBreakpoint(node, type);
-            this._saveBreakpoints();
+                WebInspector.domBreakpointManager.removeBreakpoint(node, type);
         }
 
         var breakpointsMenu = createSubMenu ? contextMenu.appendSubMenuItem(WebInspector.UIString("Break on...")) : contextMenu;
         for (var key in this._breakpointTypes) {
             var type = this._breakpointTypes[key];
             var label = this._contextMenuLabels[type];
-            breakpointsMenu.appendCheckboxItem(label, toggleBreakpoint.bind(this, type), nodeBreakpoints[type]);
+            breakpointsMenu.appendCheckboxItem(label, toggleBreakpoint.bind(null, type), nodeBreakpoints.get(type));
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
-     * @return {!Object<string, boolean>}
+     * @return {!Map<string, boolean>}
      */
     _nodeBreakpoints: function(node)
     {
-        var nodeBreakpoints = {};
-        for (var id in this._breakpointElements) {
-            var element = this._breakpointElements[id];
-            if (element._node === node && element._checkboxElement.checked)
-                nodeBreakpoints[element._type] = true;
+        var nodeBreakpoints = new Map();
+        var breakpoints = WebInspector.domBreakpointManager.domBreakpoints();
+        for (var breakpoint of breakpoints) {
+            if (breakpoint.node === node && breakpoint.enabled)
+                nodeBreakpoints.set(breakpoint.type, true);
         }
         return nodeBreakpoints;
     },
 
     /**
-     * @param {!WebInspector.DOMNode} node
-     * @return {boolean}
-     */
-    hasBreakpoints: function(node)
-    {
-        for (var id in this._breakpointElements) {
-            var element = this._breakpointElements[id];
-            if (element._node === node && element._checkboxElement.checked)
-                return true;
-        }
-        return false;
-    },
-
-    /**
      * @param {!WebInspector.DebuggerPausedDetails} details
      * @return {!Element}
      */
     createBreakpointHitStatusMessage: function(details)
     {
         var auxData = /** @type {!Object} */ (details.auxData);
         var message = "Paused on a \"%s\" breakpoint.";
         var substitutions = [];
         substitutions.push(this._breakpointTypeLabels[auxData["type"]]);
 
@@ skipping 19 matching lines @@
                 message = "Paused on a \"%s\" breakpoint set on %s, because its descendant %s was removed.";
                 substitutions.push(targetNodeLink);
             }
         } else {
             message = "Paused on a \"%s\" breakpoint set on %s.";
         }
 
         return WebInspector.formatLocalized(message, substitutions);
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
     _nodeRemoved: function(event)
     {
         var node = event.data.node;
-        this._removeBreakpointsForNode(event.data.node);
+        this._removeBreakpointsForNode(node);
         var children = node.children();
         if (!children)
             return;
-        for (var i = 0; i < children.length; ++i)
-            this._removeBreakpointsForNode(children[i]);
-        this._saveBreakpoints();
+        for (var child of children)
+            this._removeBreakpointsForNode(child);
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      */
     _removeBreakpointsForNode: function(node)
     {
-        for (var id in this._breakpointElements) {
-            var element = this._breakpointElements[id];
-            if (element._node === node)
-                this._removeBreakpoint(element._node, element._type);
+        var breakpoints = WebInspector.domBreakpointManager.domBreakpoints();
+        for (var breakpoint of breakpoints) {
+            if (breakpoint.node === node)
+                WebInspector.domBreakpointManager.removeBreakpoint(breakpoint.node, breakpoint.type);
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
      * @param {boolean} enabled
      */
-    _setBreakpoint: function(node, type, enabled)
-    {
-        var breakpointId = this._createBreakpointId(node.id, type);
-        var breakpointElement = this._breakpointElements[breakpointId];
-        if (!breakpointElement) {
-            breakpointElement = this._createBreakpointElement(node, type, enabled);
-            this._breakpointElements[breakpointId] = breakpointElement;
-        } else {
-            breakpointElement._checkboxElement.checked = enabled;
-        }
-        if (enabled)
-            node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
-        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, true);
-    },
-
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     * @param {boolean} enabled
-     */
     _createBreakpointElement: function(node, type, enabled)
     {
         var element = createElement("li");
         element._node = node;
         element._type = type;
         element.addEventListener("contextmenu", this._contextMenu.bind(this, node, type), true);
 
         var checkboxLabel = createCheckboxLabel("", enabled);
         checkboxLabel.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
         element._checkboxElement = checkboxLabel.checkboxElement;
@@ skipping 14 matching lines @@
         var currentElement = this.listElement.firstChild;
         while (currentElement) {
             if (currentElement._type && currentElement._type < element._type)
                 break;
             currentElement = currentElement.nextSibling;
         }
         this.addListElement(element, currentElement);
         return element;
     },
 
-    _removeAllBreakpoints: function()
-    {
-        for (var id in this._breakpointElements) {
-            var element = this._breakpointElements[id];
-            this._removeBreakpoint(element._node, element._type);
-        }
-        this._saveBreakpoints();
-    },
-
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     */
-    _removeBreakpoint: function(node, type)
-    {
-        var breakpointId = this._createBreakpointId(node.id, type);
-        var element = this._breakpointElements[breakpointId];
-        if (!element)
-            return;
-
-        this.removeListElement(element);
-        delete this._breakpointElements[breakpointId];
-        if (element._checkboxElement.checked)
-            node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
-        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, this.hasBreakpoints(node) ? true : null);
-    },
-
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
      * @param {!Event} event
      */
     _contextMenu: function(node, type, event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
-
-        /**
-         * @this {WebInspector.DOMBreakpointsSidebarPane}
-         */
-        function removeBreakpoint()
-        {
-            this._removeBreakpoint(node, type);
-            this._saveBreakpoints();
-        }
-        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^breakpoint"), removeBreakpoint.bind(this));
-        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^all DOM breakpoints"), this._removeAllBreakpoints.bind(this));
+        var removeBreakpoint = () => WebInspector.domBreakpointManager.removeBreakpoint(node, type);
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^breakpoint"), removeBreakpoint);
+        var removeAllBreakpoints = () => WebInspector.domBreakpointManager.removeAllBreakpoints();
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^all DOM breakpoints"), removeAllBreakpoints);
         contextMenu.show();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
      * @param {!Event} event
      */
     _checkboxClicked: function(node, type, event)
     {
-        if (event.target.checked)
-            node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
-        else
-            node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
-        this._saveBreakpoints();
+        WebInspector.domBreakpointManager.setBreakpoint(node, type, event.target["checkboxElement"].checked);
     },
 
     /**
      * @override
      * @param {?Object} object
      */
     flavorChanged: function(object)
     {
         this._update();
     },
 
     _update: function()
     {
         var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails);
         if (!details || details.reason !== WebInspector.DebuggerModel.BreakReason.DOM) {
             if (this._highlightedElement) {
                 this._highlightedElement.classList.remove("breakpoint-hit");
                 delete this._highlightedElement;
             }
             return;
         }
         var auxData = details.auxData;
         var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
-        var element = this._breakpointElements[breakpointId];
+        var element = this._breakpointElements.get(breakpointId);
         if (!element)
             return;
         WebInspector.viewManager.showView("sources.domBreakpoints");
         element.classList.add("breakpoint-hit");
         this._highlightedElement = element;
     },
 
     /**
      * @param {number} nodeId
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @return {string}
      */
     _createBreakpointId: function(nodeId, type)
     {
         return nodeId + ":" + type;
     },
 
-    _saveBreakpoints: function()
+    __proto__: WebInspector.BreakpointsSidebarPaneBase.prototype
+}
+
+/**
+ * @type {!WebInspector.DOMBreakpointsSidebarPane}
+ */
+WebInspector.domBreakpointsSidebarPane;
+
+/**
+ * @constructor
+ * @extends {WebInspector.Object}
+ * @implements {WebInspector.TargetManager.Observer}
+ */
+WebInspector.DOMBreakpointManager = function()
+{
+    /** @type {!Map<!WebInspector.Target, !Protocol.DOMDebuggerAgent>} */
+    this._agents = new Map();
+    this._domBreakpointsSetting = WebInspector.settings.createLocalSetting("domBreakpoints", []);
+    /** @type {!Map<string, !WebInspector.DOMBreakpointManager.Breakpoint>} */
+    this._breakpoints = new Map();
+    WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.DocumentUpdated, this._restoreBreakpoints, this);
+    WebInspector.targetManager.observeTargets(this);
+}
+
+WebInspector.DOMBreakpointManager.Marker = "breakpoint-marker";
+
+WebInspector.DOMBreakpointManager.Events = {
+    BreakpointsChanged: "BreakpointsChanged"
+}
+
+WebInspector.DOMBreakpointManager.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.Target} target
+     */
+    targetAdded: function(target)
     {
-        var breakpoints = [];
-        var storedBreakpoints = this._domBreakpointsSetting.get();
-        for (var i = 0; i < storedBreakpoints.length; ++i) {
-            var breakpoint = storedBreakpoints[i];
-            if (breakpoint.url !== this._inspectedURL)
-                breakpoints.push(breakpoint);
-        }
-        for (var id in this._breakpointElements) {
-            var element = this._breakpointElements[id];
-            breakpoints.push({ url: this._inspectedURL, path: element._node.path(), type: element._type, enabled: element._checkboxElement.checked });
-        }
-        this._domBreakpointsSetting.set(breakpoints);
+        if (target.hasDOMCapability())
+            this._agents.set(target, target.domdebuggerAgent());
     },
 
     /**
-     * @param {!WebInspector.DOMModel} domModel
+     * @override
+     * @param {!WebInspector.Target} target
      */
-    restoreBreakpoints: function(domModel)
+    targetRemoved: function(target)
     {
+        if (target.hasDOMCapability())
+            this._agents.delete(target);
+    },
+
+    /**
+     * @return {!Array<!WebInspector.DOMBreakpointManager.Breakpoint>}
+     */
+    domBreakpoints: function()
+    {
+        var breakpoints = [];
+        for (var breakpoint of this._breakpoints.values())
+            breakpoints.push(breakpoint);
+        return breakpoints;
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @param {boolean} enabled
+     */
+    setBreakpoint: function(node, type, enabled)
+    {
+        this._innerSetBreakpoint(node, type, enabled);

[lushnikov, 2016/08/22 18:44:25]

consider the following scenario:
1. You have a page with multiple iframes of the same website
2. You select "modification subtree" DOMBreakpoint in one of them
Q: Does it appear in another one?

From one point of view, it should not. However, you wouldn't be able to restore
breakpoint correctly (there's no way for you to differentiate between these
iframes). 
So I would say that setting breakpoint in one iframe should set it in others as
well (this is consistent with js breakpoints)

[chenwilliam, 2016/08/22 22:01:46]

I reproduced this scenario and it treats the different iframes separately
because they have different path (e.g.
"0,HTML,1,BODY,4,DIV,1,IFRAME,0,#document,0,HTML"). There's an existing bug
where on refresh, the stored breakpoints for the iframe disappear. After calling
pushNodeByPathToFrontend with the iframe node's path, the nodeId gets returned
as null. Not sure why it doesn't work, but this issue occurs in current tip of
tree. Could we tackle this later as this CL doesn't worsen this issue?

+        this._saveBreakpoints();
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @param {boolean} enabled
+     */
+    _innerSetBreakpoint: function(node, type, enabled)
+    {
+        var url = node.ownerDocument.documentURL.removeURLFragment();
+        var breakpoint = new WebInspector.DOMBreakpointManager.Breakpoint(node, type, url, enabled);
+        this._breakpoints.set(this._createBreakpointId(node, type), breakpoint);
+        var agent = this._agents.get(node.target());
+        if (enabled) {
+            agent.setDOMBreakpoint(node.id, type);
+            node.setMarker(WebInspector.DOMBreakpointManager.Marker, true);
+        } else {
+            agent.removeDOMBreakpoint(node.id, type);
+            node.setMarker(WebInspector.DOMBreakpointManager.Marker, this._hasOtherBreakpoints(node, type) ? true : null);
+        }
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     */
+    removeBreakpoint: function(node, type)
+    {
+        this._innerRemoveBreakpoint(node, type);
+        this._saveBreakpoints();
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     */
+    _innerRemoveBreakpoint: function(node, type)
+    {
+        var breakpointId = this._createBreakpointId(node, type);
+        var breakpoint = this._breakpoints.get(breakpointId);
+        if (breakpoint.enabled) {
+            var agent = this._agents.get(node.target());
+            agent.removeDOMBreakpoint(node.id, type);
+            node.setMarker(WebInspector.DOMBreakpointManager.Marker, this._hasOtherBreakpoints(node, type) ? true : null);
+        }
+        this._breakpoints.remove(breakpointId);
+    },
+
+    removeAllBreakpoints: function()
+    {
+        for (var breakpoint of this._breakpoints.values())
+            this._innerRemoveBreakpoint(breakpoint.node, breakpoint.type);
+        this._saveBreakpoints();
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _restoreBreakpoints: function(event)
+    {
+        var inspectedRootDocument = /** @type {!WebInspector.DOMDocument} */ (event.data);
+        if (!inspectedRootDocument)
+            return;
+        var domModel = /** @type {!WebInspector.DOMModel} */ (event.target);
         var pathToBreakpoints = {};
+        this._breakpoints.clear();
+        this.dispatchEventToListeners(WebInspector.DOMBreakpointManager.Events.BreakpointsChanged);

[lushnikov, 2016/08/22 18:44:25]

let's not send this event twice

[chenwilliam, 2016/08/22 22:01:46]

I included this because if there's no DOM breakpoints on the inspected page then
the dispatchEvent inside didPushNodeByPathToFrontend never gets called.

 
         /**
          * @param {string} path
          * @param {?DOMAgent.NodeId} nodeId
-         * @this {WebInspector.DOMBreakpointsSidebarPane}
+         * @this {WebInspector.DOMBreakpointManager}
          */
         function didPushNodeByPathToFrontend(path, nodeId)
         {
             var node = nodeId ? domModel.nodeForId(nodeId) : null;
             if (!node)
                 return;
 
-            var breakpoints = pathToBreakpoints[path];
-            for (var i = 0; i < breakpoints.length; ++i)
-                this._setBreakpoint(node, breakpoints[i].type, breakpoints[i].enabled);
+            for (var breakpoint of pathToBreakpoints[path])
+                this._innerSetBreakpoint(node, breakpoint.type, breakpoint.enabled);
+            this.dispatchEventToListeners(WebInspector.DOMBreakpointManager.Events.BreakpointsChanged);
         }
 
         var breakpoints = this._domBreakpointsSetting.get();
-        for (var i = 0; i < breakpoints.length; ++i) {
-            var breakpoint = breakpoints[i];
-            if (breakpoint.url !== this._inspectedURL)
+        for (var breakpoint of breakpoints) {
+            if (breakpoint.url !== WebInspector.targetManager.inspectedURL())

[lushnikov, 2016/08/22 18:44:25]

who gives you guarantee that inspectedURL is already set? This is something that
happens quite late, in the end of ResourceTreeModel cached resource processing
(see WI.ResourceTreeModel._processCachedResources)

[chenwilliam, 2016/08/22 22:01:46]

Done.

                 continue;
             var path = breakpoint.path;
             if (!pathToBreakpoints[path]) {
                 pathToBreakpoints[path] = [];
                 domModel.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
             }
             pathToBreakpoints[path].push(breakpoint);
         }
     },
 
-    __proto__: WebInspector.BreakpointsSidebarPaneBase.prototype
+    _saveBreakpoints: function()
+    {
+        var breakpoints = [];
+        var storedBreakpoints = this._domBreakpointsSetting.get();
+        for (var breakpoint of storedBreakpoints) {
+            if (breakpoint.url !== WebInspector.targetManager.inspectedURL())
+                breakpoints.push(breakpoint);
+        }
+        for (var breakpoint of this._breakpoints.values()) {
+            breakpoints.push({
+                url: breakpoint.url,
+                path: breakpoint.node.path(),
+                type: breakpoint.type,
+                enabled: breakpoint.enabled
+            });
+        }
+        this._domBreakpointsSetting.set(breakpoints);
+        this.dispatchEventToListeners(WebInspector.DOMBreakpointManager.Events.BreakpointsChanged);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @return {boolean}
+     */
+    _hasOtherBreakpoints: function(node, type)
+    {
+        for (var breakpoint of this._breakpoints.values()) {
+            if (breakpoint.node === node && breakpoint.type !== type && breakpoint.enabled)
+                return true;
+        }
+        return false;
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @return {string}
+     */
+    _createBreakpointId: function(node, type)
+    {
+        return node.id + ":" + type;
+    },
+
+    __proto__: WebInspector.Object.prototype
+};
+
+/**
+ * @constructor
+ * @param {!WebInspector.DOMNode} node
+ * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+ * @param {string} url
+ * @param {boolean} enabled
+ */
+WebInspector.DOMBreakpointManager.Breakpoint = function(node, type, url, enabled)
+{
+    this.node = node;
+    this.path = node.path();
+    this.type = type;
+    this.url = url;
+    this.enabled = enabled;
 }
 
 /**
+ * @type {!WebInspector.DOMBreakpointManager}
+ */
+WebInspector.domBreakpointManager;
+
+/**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.DOMBreakpointsSidebarPane.Proxy = function()
 {
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("components/breakpointsList.css");
 }
 
 WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
     wasShown: function()
     {
         WebInspector.SimpleView.prototype.wasShown.call(this);
         var pane = WebInspector.domBreakpointsSidebarPane;
         if (pane.element.parentNode !== this.element)
             pane.show(this.element);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
-
-/**
- * @type {!WebInspector.DOMBreakpointsSidebarPane}
- */
-WebInspector.domBreakpointsSidebarPane;