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 7f7b6ccc1f6afe13c5344f6ba9844150966d6b98..41968758ab97a6de9159043aa09ad2fd6bf133f1 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
@@ -35,7 +35,6 @@
 WebInspector.DOMBreakpointsSidebarPane = function()
 {
     WebInspector.BreakpointsSidebarPaneBase.call(this, WebInspector.UIString("DOM Breakpoints"));
-    this._domBreakpointsSetting = WebInspector.settings.createLocalSetting("domBreakpoints", []);
     this.listElement.classList.add("dom-breakpoints-list");
 
     this._breakpointElements = {};
@@ -54,22 +53,18 @@ WebInspector.DOMBreakpointsSidebarPane = function()
     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.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
-    WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
+    WebInspector.targetManager.addModelListener(WebInspector.DOMDebuggerModel, WebInspector.DOMDebuggerModel.Events.BreakpointsChanged, this._reloadBreakpointElements, this);
 }
 
-WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
-
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
-    _inspectedURLChanged: function(event)
+    /**
+     * @return {!WebInspector.DOMDebuggerModel}
+     */
+    domDebuggerModel: function()

[lushnikov, 2016/08/08 19:53:07]

there should be no method domDebuggerModel(): DOMBreakpointsSidebarPane should
aggregate breakpoints across
all targets

[chenwilliam, 2016/08/10 19:48:35]

Done.

     {
-        var target = /** @type {!WebInspector.Target} */ (event.data);
-        if (target !== WebInspector.targetManager.mainTarget())
-            return;
-        this._breakpointElements = {};
-        this.reset();
-        this._inspectedURL = target.inspectedURL().removeURLFragment();
+        var targets = WebInspector.targetManager.targets(WebInspector.Target.Capability.DOM);
+        var domDebuggerModels = targets.map(target => target.model(WebInspector.DOMDebuggerModel));
+        return domDebuggerModels[0];

[chenwilliam, 2016/08/06 00:28:22]

This feels a bit hacky, so perhaps there's a better way. From some
experimentation, it seems that the iframe is in the same target as the primary
document. In addition, if there were more than one domDebuggerModel instance
they are all backed by the same _domBreakpointsSetting instance.

[lushnikov, 2016/08/08 19:53:06]

In future, they'll be in separate targets.
Indeed! Which means, that instead of introducing DOMDebuggerModel which operates
1-to-1 with agents, we should introduce DOMBreakpointManager (consistent here
with Breakpointmanager), which juggles multiple domdebuggerAgents inside.

[chenwilliam, 2016/08/10 19:48:35]

Done.

     },
 
     /**
@@ -82,7 +77,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         if (node.pseudoType())
             return;
 
-        var nodeBreakpoints = this._nodeBreakpoints(node);
+        var nodeBreakpoints = this.domDebuggerModel().nodeBreakpoints(node);
 
         /**
          * @param {!DOMDebuggerAgent.DOMBreakpointType} type
@@ -90,11 +85,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
          */
         function toggleBreakpoint(type)
         {
-            if (!nodeBreakpoints[type])
-                this._setBreakpoint(node, type, true);
-            else
-                this._removeBreakpoint(node, type);
-            this._saveBreakpoints();
+            this.domDebuggerModel().toggleBreakpoint(node, type);
         }
 
         var breakpointsMenu = createSubMenu ? contextMenu.appendSubMenuItem(WebInspector.UIString("Break on...")) : contextMenu;
@@ -106,35 +97,6 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
     },
 
     /**
-     * @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}
      */
@@ -174,48 +136,15 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         return WebInspector.formatLocalized(message, substitutions);
     },
 
-    _nodeRemoved: function(event)
+    _reloadBreakpointElements: function()
     {
-        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);
-        }
-    },
-
-    /**
-     * @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;
+        this._breakpointElements = {};
+        this.reset();

[chenwilliam, 2016/08/06 00:28:22]

This could be optimized but I did a quick check of the performance for
_reloadBreakpointElements() and it's only ~10ms with 10 DOM breakpoints. My
assumption is that most users won't have that many DOM breakpoints for a given
page.

+        var breakpoints = this.domDebuggerModel().domBreakpoints();
+        for (var id in breakpoints) {
+            var breakpoint = breakpoints[id];
+            this._breakpointElements[id] = this._createBreakpointElement(breakpoint.node, breakpoint.type, breakpoint.enabled);
         }
-        if (enabled)
-            node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
-        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, true);
     },
 
     /**
@@ -231,7 +160,8 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         element.addEventListener("contextmenu", this._contextMenu.bind(this, node, type), true);
 
         var checkboxLabel = createCheckboxLabel("", enabled);
-        checkboxLabel.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
+        var checkboxClicked = this.domDebuggerModel().checkboxClicked.bind(this.domDebuggerModel(), node, type);
+        checkboxLabel.addEventListener("click", checkboxClicked, false);
         element._checkboxElement = checkboxLabel.checkboxElement;
         element.appendChild(checkboxLabel);
 
@@ -257,33 +187,6 @@ 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
-     */
-    _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
@@ -296,33 +199,20 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         /**
          * @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));
-        contextMenu.show();
-    },
+        var removeBreakpoint = () => this.domDebuggerModel().removeBreakpoint(node, type);
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^breakpoint"), removeBreakpoint);
 
-    /**
-     * @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();
+        /**
+         * @this {WebInspector.DOMBreakpointsSidebarPane}
+         */
+        var removeAllBreakpoints = () => this.domDebuggerModel().removeAllBreakpoints();
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^all DOM breakpoints"), removeAllBreakpoints);
+        contextMenu.show();
     },
 
     highlightBreakpoint: function(auxData)
     {
-        var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
+        var breakpointId = this.domDebuggerModel().createBreakpointId(auxData.nodeId, auxData.type);
         var element = this._breakpointElements[breakpointId];
         if (!element)
             return;
@@ -340,65 +230,11 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
     },
 
     /**
-     * @param {number} nodeId
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     */
-    _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);
-        }
+        this.domDebuggerModel().restoreBreakpoints(domModel);
     },
 
     /**