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..8331c3c38b15f0b7796778fe6d8309850e518473 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
@@ -57,9 +57,7 @@ WebInspector.DOMBreakpointsSidebarPane = function()
 
     WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
-}
-
-WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
+};

[lushnikov, 2016/07/30 01:24:42]

nit: we don't put semicolons after function declaration

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

Done.

 
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
     _inspectedURLChanged: function(event)
@@ -205,7 +203,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
      */
     _setBreakpoint: function(node, type, enabled)
     {
-        var breakpointId = this._createBreakpointId(node.id, type);
+        var breakpointId = WebInspector.DOMBreakpointsModel.createBreakpointId(node.id, type);

[lushnikov, 2016/07/30 01:24:42]

breakpoint id serves only for the needs of DOMBreakpointsSidebarPane - let's
keep it in here

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

I've changed it so the use of createBreakpointId is almost all in the model.

         var breakpointElement = this._breakpointElements[breakpointId];
         if (!breakpointElement) {
             breakpointElement = this._createBreakpointElement(node, type, enabled);
@@ -213,9 +211,10 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         } else {
             breakpointElement._checkboxElement.checked = enabled;
         }
+        var domBreakpointsModel = WebInspector.DOMBreakpointsModel.fromNode(node);
         if (enabled)
-            node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
-        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, true);
+            domBreakpointsModel.setDOMBreakpoint(node.id, type);
+        domBreakpointsModel.setMarker(node, true);
     },
 
     /**
@@ -272,16 +271,17 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
      */
     _removeBreakpoint: function(node, type)
     {
-        var breakpointId = this._createBreakpointId(node.id, type);
+        var breakpointId = WebInspector.DOMBreakpointsModel.createBreakpointId(node.id, type);
         var element = this._breakpointElements[breakpointId];
         if (!element)
             return;
 
         this.removeListElement(element);
         delete this._breakpointElements[breakpointId];
+        var domBreakpointsModel = WebInspector.DOMBreakpointsModel.fromNode(node);
         if (element._checkboxElement.checked)
-            node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
-        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, this.hasBreakpoints(node) ? true : null);
+            domBreakpointsModel.removeDOMBreakpoint(node.id, type);
+        domBreakpointsModel.setMarker(node, this.hasBreakpoints(node) ? true : null);
     },
 
     /**
@@ -313,16 +313,17 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
      */
     _checkboxClicked: function(node, type, event)
     {
+        var domBreakpointsModel = WebInspector.DOMBreakpointsModel.fromNode(node);
         if (event.target.checked)
-            node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
+            domBreakpointsModel.setDOMBreakpoint(node.id, type);
         else
-            node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
+            domBreakpointsModel.removeDOMBreakpoint(node.id, type);
         this._saveBreakpoints();

[lushnikov, 2016/07/30 01:24:42]

i believe this logic should go to your model as well

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

Done.

     },
 
     highlightBreakpoint: function(auxData)
     {
-        var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
+        var breakpointId = WebInspector.DOMBreakpointsModel.createBreakpointId(auxData.nodeId, auxData.type);
         var element = this._breakpointElements[breakpointId];
         if (!element)
             return;
@@ -339,15 +340,6 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         }
     },
 
-    /**
-     * @param {number} nodeId
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     */
-    _createBreakpointId: function(nodeId, type)
-    {
-        return nodeId + ":" + type;
-    },
-
     _saveBreakpoints: function()
     {
         var breakpoints = [];