DevTools: extract model from 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 39 matching lines @@
     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.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)
     {
         var target = /** @type {!WebInspector.Target} */ (event.data);
         if (target !== WebInspector.targetManager.mainTarget())
             return;
         this._breakpointElements = {};
         this.reset();
         this._inspectedURL = target.inspectedURL().removeURLFragment();
@@ skipping 125 matching lines @@
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
      * @param {boolean} enabled
      */
     _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);
             this._breakpointElements[breakpointId] = breakpointElement;
         } 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);
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
      * @param {boolean} enabled
      */
     _createBreakpointElement: function(node, type, enabled)
     {
         var element = createElement("li");
@@ skipping 36 matching lines @@
         }
         this._saveBreakpoints();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
      */
     _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);
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
      * @param {!Event} event
      */
     _contextMenu: function(node, type, event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
@@ skipping 11 matching lines @@
         contextMenu.show();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
      * @param {!Event} event
      */
     _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;
         this.revealWidget();
         element.classList.add("breakpoint-hit");
         this._highlightedElement = element;
     },
 
     clearBreakpointHighlight: function()
     {
         if (this._highlightedElement) {
             this._highlightedElement.classList.remove("breakpoint-hit");
             delete this._highlightedElement;
         }
     },
 
-    /**
-     * @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) {
@@ skipping 84 matching lines @@
             this._wrappedPane.show(this.element);
     },
 
     __proto__: WebInspector.View.prototype
 }
 
 /**
  * @type {!WebInspector.DOMBreakpointsSidebarPane}
  */
 WebInspector.domBreakpointsSidebarPane;