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 = {};
 
     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.targetManager.addModelListener(WebInspector.DOMDebuggerModel, WebInspector.DOMDebuggerModel.Events.BreakpointsChanged, this._reloadBreakpointElements, this);
 }
 
-WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
-
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
-    _inspectedURLChanged: function(event)
+    /**
+     * @return {!WebInspector.DOMDebuggerModel}
+     */
+    domDebuggerModel: function()

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

there should be no method domDebuggerModel(): DOMBreakpointsSidebarPane should
aggregate breakpoints across
all targets

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

Done.

     {
-        var target = /** @type {!WebInspector.Target} */ (event.data);
-        if (target !== WebInspector.targetManager.mainTarget())
-            return;
-        this._breakpointElements = {};
-        this.reset();
-        this._inspectedURL = target.inspectedURL().removeURLFragment();
+        var targets = WebInspector.targetManager.targets(WebInspector.Target.Capability.DOM);
+        var domDebuggerModels = targets.map(target => target.model(WebInspector.DOMDebuggerModel));
+        return domDebuggerModels[0];

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

This feels a bit hacky, so perhaps there's a better way. From some
experimentation, it seems that the iframe is in the same target as the primary
document. In addition, if there were more than one domDebuggerModel instance
they are all backed by the same _domBreakpointsSetting instance.

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

In future, they'll be in separate targets.
Indeed! Which means, that instead of introducing DOMDebuggerModel which operates
1-to-1 with agents, we should introduce DOMBreakpointManager (consistent here
with Breakpointmanager), which juggles multiple domdebuggerAgents inside.

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

Done.

     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {boolean} createSubMenu
      */
     populateNodeContextMenu: function(node, contextMenu, createSubMenu)
     {
         if (node.pseudoType())
             return;
 
-        var nodeBreakpoints = this._nodeBreakpoints(node);
+        var nodeBreakpoints = this.domDebuggerModel().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();
+            this.domDebuggerModel().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;
-        }
-        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();

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

This could be optimized but I did a quick check of the performance for
_reloadBreakpointElements() and it's only ~10ms with 10 DOM breakpoints. My
assumption is that most users won't have that many DOM breakpoints for a given
page.

+        var breakpoints = this.domDebuggerModel().domBreakpoints();
+        for (var id in breakpoints) {
+            var breakpoint = breakpoints[id];
+            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);
 
         var checkboxLabel = createCheckboxLabel("", enabled);
-        checkboxLabel.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
+        var checkboxClicked = this.domDebuggerModel().checkboxClicked.bind(this.domDebuggerModel(), node, type);
+        checkboxLabel.addEventListener("click", checkboxClicked, false);
         element._checkboxElement = checkboxLabel.checkboxElement;
         element.appendChild(checkboxLabel);
 
         var labelElement = createElementWithClass("div", "dom-breakpoint");
         element.appendChild(labelElement);
 
         var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
         linkifiedNode.classList.add("monospace");
         linkifiedNode.style.display = "block";
         labelElement.appendChild(linkifiedNode);
 
         var description = createElement("div");
         description.textContent = this._breakpointTypeLabels[type];
         labelElement.appendChild(description);
 
         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
-     */
-    _removeBreakpoint: function(node, type)
-    {
-        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);
-    },
-
-    /**
-     * @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 = () => this.domDebuggerModel().removeBreakpoint(node, type);
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^breakpoint"), removeBreakpoint);
+
+        /**
+         * @this {WebInspector.DOMBreakpointsSidebarPane}
+         */
+        var removeAllBreakpoints = () => this.domDebuggerModel().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 breakpointId = this.domDebuggerModel().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) {
-            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);
-        }
+        this.domDebuggerModel().restoreBreakpoints(domModel);
     },
 
     /**
      * @param {!WebInspector.Panel} panel
      * @return {!WebInspector.DOMBreakpointsSidebarPane.Proxy}
      */
     createProxy: function(panel)
     {
         var proxy = new WebInspector.DOMBreakpointsSidebarPane.Proxy(this, panel);
         if (!this._proxies)
@@ skipping 33 matching lines @@
             this._wrappedPane.show(this.element);
     },
 
     __proto__: WebInspector.View.prototype
 }
 
 /**
  * @type {!WebInspector.DOMBreakpointsSidebarPane}
  */
 WebInspector.domBreakpointsSidebarPane;