DevTools: extract model from DOMBreakpointsSidebarPane

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

Index: third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
index fe4246383828943b93ef1a2347834d3ed0f61e9d..0fd44be807054ad300bd3a16c31e27259ee6a2eb 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
@@ -36,165 +36,27 @@
 WebInspector.DOMBreakpointsSidebarPane = function()
 {
     WebInspector.BreakpointsSidebarPaneBase.call(this);
+    this.registerRequiredCSS("components/breakpointsList.css");
     this._domBreakpointsSetting = WebInspector.settings.createLocalSetting("domBreakpoints", []);
     this.listElement.classList.add("dom-breakpoints-list");
 
-    this._breakpointElements = {};
-
-    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");
+    /** @type {!Map<string, !Element>} */
+    this._breakpointElements = new Map();
 
-    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();
+    WebInspector.domBreakpointManager.addEventListener(WebInspector.DOMBreakpointManager.Events.BreakpointsChanged, this._reloadBreakpointElements, this);
     this._update();
+    this._reloadBreakpointElements();
 }
 
-WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
-
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
-    _inspectedURLChanged: function()
+    _reloadBreakpointElements: function()
     {
-        this._breakpointElements = {};
+        this._breakpointElements.clear();
         this.reset();
-        this._inspectedURL = WebInspector.targetManager.inspectedURL();
-    },
-
-    /**
-     * @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);
-            else
-                this._removeBreakpoint(node, type);
-            this._saveBreakpoints();
-        }
-
-        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]);
-        }
-    },
-
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @return {!Object<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;
-        }
-        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"]]);
-
-        var domModel = WebInspector.DOMModel.fromTarget(details.target());
-        if (!domModel)
-            return WebInspector.formatLocalized(message, substitutions);
-
-        var node = domModel.nodeForId(auxData["nodeId"]);
-        var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
-        substitutions.push(linkifiedNode);
-
-        var targetNode = auxData["targetNodeId"] ? domModel.nodeForId(auxData["targetNodeId"]) : null;
-        var targetNodeLink = targetNode ? WebInspector.DOMPresentationUtils.linkifyNodeReference(targetNode) : "";
-
-        if (auxData.type === this._breakpointTypes.SubtreeModified) {
-            if (auxData["insertion"]) {
-                if (targetNode !== node) {
-                    message = "Paused on a \"%s\" breakpoint set on %s, because a new child was added to its descendant %s.";
-                    substitutions.push(targetNodeLink);
-                } else
-                    message = "Paused on a \"%s\" breakpoint set on %s, because a new child was added to that node.";
-            } else {
-                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);
-    },
-
-    _nodeRemoved: function(event)
-    {
-        var node = event.data.node;
-        this._removeBreakpointsForNode(event.data.node);
-        var children = node.children();
-        if (!children)
-            return;
-        for (var i = 0; i < children.length; ++i)
-            this._removeBreakpointsForNode(children[i]);
-        this._saveBreakpoints();
-    },
-
-    /**
-     * @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) {
+            var id = this._createBreakpointId(breakpoint.node.id, breakpoint.type);
+            this._breakpointElements.set(id, this._createBreakpointElement(breakpoint.node, breakpoint.type, breakpoint.enabled));
         }
     },
 
@@ -203,26 +65,6 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
      * @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");
@@ -244,7 +86,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         labelElement.appendChild(linkifiedNode);
 
         var description = createElement("div");
-        description.textContent = this._breakpointTypeLabels[type];
+        description.textContent = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeLabels[type];
         labelElement.appendChild(description);
 
         var currentElement = this.listElement.firstChild;
@@ -257,31 +99,14 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         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
+     * @param {!Event} event
      */
-    _removeBreakpoint: function(node, type)
+    _checkboxClicked: function(node, type, event)
     {
-        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);
+        WebInspector.domBreakpointManager.setBreakpoint(node, type, event.target["checkboxElement"].checked);
     },
 
     /**
@@ -292,35 +117,14 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
     _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();
-    },
-
-    /**
      * @override
      * @param {?Object} object
      */
@@ -341,7 +145,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         }
         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");
@@ -352,91 +156,30 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
     /**
      * @param {number} nodeId
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @return {string}
      */
     _createBreakpointId: function(nodeId, type)
     {
         return nodeId + ":" + type;
     },
 
-    _saveBreakpoints: function()
-    {
-        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);
-    },
-
-    /**
-     * @param {!WebInspector.DOMModel} domModel
-     */
-    restoreBreakpoints: function(domModel)
-    {
-        var pathToBreakpoints = {};
-
-        /**
-         * @param {string} path
-         * @param {?DOMAgent.NodeId} nodeId
-         * @this {WebInspector.DOMBreakpointsSidebarPane}
-         */
-        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);
-        }
-
-        var breakpoints = this._domBreakpointsSetting.get();
-        for (var i = 0; i < breakpoints.length; ++i) {
-            var breakpoint = breakpoints[i];
-            if (breakpoint.url !== this._inspectedURL)
-                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
 }
 
-/**
- * @constructor
- * @extends {WebInspector.VBox}
- */
-WebInspector.DOMBreakpointsSidebarPane.Proxy = function()
-{
-    WebInspector.VBox.call(this);
-    this.registerRequiredCSS("components/breakpointsList.css");
+WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes = {
+    SubtreeModified: "subtree-modified",
+    AttributeModified: "attribute-modified",
+    NodeRemoved: "node-removed"
 }
 
-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
+WebInspector.DOMBreakpointsSidebarPane.ContextMenuLabels = {
+    [WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified]: WebInspector.UIString.capitalize("Subtree ^modifications"),
+    [WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified]: WebInspector.UIString.capitalize("Attributes ^modifications"),
+    [WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.NodeRemoved]: WebInspector.UIString.capitalize("Node ^removal")
 }
 
-/**
- * @type {!WebInspector.DOMBreakpointsSidebarPane}
- */
-WebInspector.domBreakpointsSidebarPane;
+WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeLabels = {
+    [WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.AttributeModified]: WebInspector.UIString("Attribute Modified"),
+    [WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified]: WebInspector.UIString("Subtree Modified"),
+    [WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.NodeRemoved]: WebInspector.UIString("Node Removed")
+}