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 17 matching lines @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {WebInspector.BreakpointsSidebarPaneBase}
  */
 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 = {};

[lushnikov, 2016/08/11 18:40:18]

let's use Map and type-annotate it

[chenwilliam, 2016/08/17 01:20:11]

Done.

 
     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.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
-    WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
+    WebInspector.domBreakpointManager.addEventListener(WebInspector.DOMBreakpointManager.Events.BreakpointsChanged, this._reloadBreakpointElements, this);
 }
 
-WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
-
 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();
-    },
-
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {boolean} createSubMenu
      */
     populateNodeContextMenu: function(node, contextMenu, createSubMenu)

[lushnikov, 2016/08/11 18:40:18]

let's move this to the elements's panel

[chenwilliam, 2016/08/17 01:20:11]

Done.

     {
         if (node.pseudoType())
             return;
 
-        var nodeBreakpoints = this._nodeBreakpoints(node);
+        var nodeBreakpoints = WebInspector.domBreakpointManager.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();
+            WebInspector.domBreakpointManager.toggleBreakpoint(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[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"]]);
 
@@ 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);
     },
 
-    _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);
+        this._breakpointElements = {};
+        this.reset();
+        var breakpoints = WebInspector.domBreakpointManager.domBreakpoints();
+        for (var breakpoint of breakpoints.values()) {
+            var id = this._createBreakpointId(breakpoint.node.id, breakpoint.type);
+            this._breakpointElements[id] = this._createBreakpointElement(breakpoint.node, breakpoint.type, breakpoint.enabled);
         }
     },
 
     /**
-     * @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);
@@ skipping 18 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
+     * @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);
     },
 
     /**
      * @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();
-    },
-
     highlightBreakpoint: function(auxData)
     {
         var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
         var element = this._breakpointElements[breakpointId];
         if (!element)
             return;
         this.revealView();
         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
+     * @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);
-        }
+        return `${nodeId}:${type}`;

[lushnikov, 2016/08/11 18:40:18]

nit: The former was easier to understand

[chenwilliam, 2016/08/17 01:20:11]

Done.

     },
 
     __proto__: WebInspector.BreakpointsSidebarPaneBase.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.DOMBreakpointsSidebarPane.Proxy = function()
@@ skipping 11 matching lines @@
             pane.show(this.element);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @type {!WebInspector.DOMBreakpointsSidebarPane}
  */
 WebInspector.domBreakpointsSidebarPane;