DevTools: extract model from DOMBreakpointsSidebarPane

third_party/WebKit/Source/devtools/front_end/sdk/DOMDebuggerModel.js

+// Copyright (c) 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ * @extends {WebInspector.SDKModel}
+ * @param {!WebInspector.Target} target
+ */
+WebInspector.DOMDebuggerModel = function(target)

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

the class has many similar API methods. Let's reduce the interface down to the
essential methods only

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

Done.

+{
+    WebInspector.SDKModel.call(this, WebInspector.DOMDebuggerModel, target);
+    this._agent = target.domdebuggerAgent();
+    this._domBreakpointsSetting = WebInspector.settings.createLocalSetting("domBreakpoints", []);
+    this._breakpoints = {};

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

/** @type {!Map<.., ...>} */
this._breakpoints = new Map();

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

Done.

+    WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
+    WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
+}
+
+WebInspector.DOMDebuggerModel.Marker = "breakpoint-marker";
+
+WebInspector.DOMDebuggerModel.Events = {
+    BreakpointsChanged: "BreakpointsChanged"
+};
+
+WebInspector.DOMDebuggerModel.prototype = {
+    /**
+     * @return {!Object}

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

please annotate with proper type 

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

Done.

+     */
+    domBreakpoints: function()
+    {
+        return this._breakpoints;
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @param {boolean} enabled
+     */
+    setBreakpoint: function(node, type, enabled)
+    {
+        this._setBreakpointWithoutSave(node, type, enabled);
+        this._saveBreakpoints();
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @param {boolean} enabled
+     */
+    _setBreakpointWithoutSave: function(node, type, enabled)

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

_innerSetBreakpoint

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

Done.

+    {
+        var breakpointId = this.createBreakpointId(node.id, type);
+        this._breakpoints[breakpointId] = {
+            node: node,

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

let's create a type for this

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

Done.

+            type: type,
+            url: this._inspectedURL,
+            path: node.path(),
+            enabled: enabled
+        };
+        if (enabled)
+            this._setDOMBreakpoint(node, type);
+        else
+            this._removeDOMBreakpoint(node, type);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     */
+    removeBreakpoint: function(node, type)
+    {
+        this._removeBreakpointWithoutSave(node, type);
+        this._saveBreakpoints();
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     */
+    _removeBreakpointWithoutSave: function(node, type)
+    {
+        var breakpointId = this.createBreakpointId(node.id, type);
+        if (this._breakpoints[breakpointId].enabled)
+            this._removeDOMBreakpoint(node, type);
+        delete this._breakpoints[breakpointId];
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @param {!Event} event
+     */
+    checkboxClicked: function(node, type, event)

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

the model should not talk in UI terms; this method should be a part of
DOMBreakpointsSIdebarPane

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

Done.

+    {
+        this.setBreakpoint(node, type, event.target["checkboxElement"].checked);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     */
+    toggleBreakpoint: function(node, type)
+    {
+        var nodeBreakpoints = this.nodeBreakpoints(node);
+        if (!nodeBreakpoints[type])
+            this.setBreakpoint(node, type, true);
+        else
+            this.removeBreakpoint(node, type);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     */
+    removeBreakpointsForNode: function(node)
+    {
+        for (var id in this._breakpoints) {
+            var breakpoint = this._breakpoints[id];
+            if (breakpoint.node === node)
+                this._removeBreakpointWithoutSave(breakpoint.node, breakpoint.type);
+        }
+        this._saveBreakpoints();
+    },
+
+    removeAllBreakpoints: function()
+    {
+        for (var id in this._breakpoints) {
+            var breakpoint = this._breakpoints[id];
+            this._removeBreakpointWithoutSave(breakpoint.node, breakpoint.type);
+        }
+        this._saveBreakpoints();
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @return {!Object<string, boolean>}
+     */
+    nodeBreakpoints: function(node)
+    {
+        var nodeBreakpoints = {};
+        for (var id in this._breakpoints) {
+            var breakpoint = this._breakpoints[id];
+            if (breakpoint.node === node && breakpoint.enabled)
+                nodeBreakpoints[breakpoint.type] = true;
+        }
+        return nodeBreakpoints;
+    },
+
+    /**
+     * @param {!WebInspector.DOMModel} domModel
+     */
+    restoreBreakpoints: function(domModel)
+    {
+        var pathToBreakpoints = {};
+
+        /**
+         * @param {string} path
+         * @param {?DOMAgent.NodeId} nodeId
+         * @this {WebInspector.DOMDebuggerModel}
+         */
+        function didPushNodeByPathToFrontend(path, nodeId)
+        {
+            var node = nodeId ? domModel.nodeForId(nodeId) : null;
+            if (!node)
+                return;
+
+            for (var breakpoint of pathToBreakpoints[path])
+                this._setBreakpointWithoutSave(node, breakpoint.type, breakpoint.enabled);
+            this.dispatchEventToListeners(WebInspector.DOMDebuggerModel.Events.BreakpointsChanged);
+        }
+
+        var breakpoints = this._domBreakpointsSetting.get();
+        for (var breakpoint of breakpoints) {
+            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);
+        }
+    },
+
+    _saveBreakpoints: function()
+    {
+        var breakpoints = [];
+        var storedBreakpoints = this._domBreakpointsSetting.get();
+        for (var breakpoint of storedBreakpoints) {
+            if (breakpoint.url !== this._inspectedURL)
+                breakpoints.push(breakpoint);
+        }
+        for (var id in this._breakpoints) {
+            var breakpoint = this._breakpoints[id];
+            breakpoints.push({
+                url: this._inspectedURL,
+                path: breakpoint.node.path(),
+                type: breakpoint.type,
+                enabled: breakpoint.enabled
+            });
+        }
+        this._domBreakpointsSetting.set(breakpoints);
+        this.dispatchEventToListeners(WebInspector.DOMDebuggerModel.Events.BreakpointsChanged);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     */
+    _setDOMBreakpoint: function(node, type)

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

let's inline

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

Done.

+    {
+        this._agent.setDOMBreakpoint(node.id, type);
+        node.setMarker(WebInspector.DOMDebuggerModel.Marker, true);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     */
+    _removeDOMBreakpoint: function(node, type)

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

let's inline

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

Done.

+    {
+        this._agent.removeDOMBreakpoint(node.id, type);
+        node.setMarker(WebInspector.DOMDebuggerModel.Marker, this._hasOtherBreakpoints(node, type) ? true : null);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @return {boolean}
+     */
+    _hasOtherBreakpoints: function(node, type)
+    {
+        for (var id in this._breakpoints) {
+            var breakpoint = this._breakpoints[id];
+            if (breakpoint.node === node && breakpoint.type !== type && breakpoint.enabled)
+                return true;
+        }
+        return false;
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _nodeRemoved: function(event)

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

this method is not used?

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

It's used as a model listener.

WebInspector.targetManager.addModelListener(WebInspector.DOMModel,
WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);

+    {
+        var node = event.data.node;
+        this.removeBreakpointsForNode(node);
+        var children = node.children();
+        if (!children)
+            return;
+        for (var child of children)
+            this.removeBreakpointsForNode(child);
+        this._saveBreakpoints();
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _inspectedURLChanged: function(event)
+    {
+        var target = /** @type {!WebInspector.Target} */ (event.data);
+        if (target !== WebInspector.targetManager.mainTarget())
+            return;
+        this._inspectedURL = target.inspectedURL().removeURLFragment();
+        this._breakpoints = {};
+        this.dispatchEventToListeners(WebInspector.DOMDebuggerModel.Events.BreakpointsChanged);
+    },
+
+    /**
+     * @param {number} nodeId
+     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @return {string}
+     */
+    createBreakpointId: function(nodeId, type)

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

this is used only by the DOMBreakpointsSidebarPane and only to support it's
rendering -> there's no good reason to add this into model interface

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

OK, I have moved this method to DOMBreakpointsSidebarPane. There's a similar
method in DOMBreakpointManager called _breakpointId since we need to create a
key for our map this._breakpoints, but the two implementations are not coupled
together. I.e., pane makes no assumption on how the ids are created in manager.

+    {
+        return `${nodeId}:${type}`;
+    },
+
+    __proto__: WebInspector.SDKModel.prototype
+};