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 35d0bbf68a1888782ac789bcd020829a19effb33..89b126a838fbb567cff9e6327ada6dd31cf8bae6 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 = {};

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

let's use Map and type-annotate it

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

Done.

@@ -45,6 +44,7 @@ WebInspector.DOMBreakpointsSidebarPane = function()
         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");
@@ -55,23 +55,10 @@ WebInspector.DOMBreakpointsSidebarPane = function()
     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
@@ -82,56 +69,22 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         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]);
-        }
-    },
-
-    /**
-     * @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;
+            breakpointsMenu.appendCheckboxItem(label, toggleBreakpoint.bind(null, type), nodeBreakpoints[type]);
         }
-        return false;
     },
 
     /**
@@ -174,48 +127,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();
+        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);
         }
-        if (enabled)
-            node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
-        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, true);
     },
 
     /**
@@ -257,31 +177,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,34 +195,13 @@ 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();
-    },
-
     highlightBreakpoint: function(auxData)
     {
         var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
@@ -342,63 +224,11 @@ 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);
-        }
+        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