DevTools: refactor DOMBreakpointsSidebarPane to use Map and Set

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 21 matching lines @@
  * @constructor
  * @extends {WebInspector.BreakpointsSidebarPaneBase}
  * @implements {WebInspector.ContextFlavorListener}
  */
 WebInspector.DOMBreakpointsSidebarPane = function()
 {
     WebInspector.BreakpointsSidebarPaneBase.call(this);
     this._domBreakpointsSetting = WebInspector.settings.createLocalSetting("domBreakpoints", []);
     this.listElement.classList.add("dom-breakpoints-list");
 
-    this._breakpointElements = {};
+    /** @type {!Map<string, !Element>} */
+    this._breakpointElements = new Map();
 
     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");
@@ skipping 21 matching lines @@
             return;
 
         var nodeBreakpoints = this._nodeBreakpoints(node);
 
         /**
          * @param {!DOMDebuggerAgent.DOMBreakpointType} type
          * @this {WebInspector.DOMBreakpointsSidebarPane}
          */
         function toggleBreakpoint(type)
         {
-            if (!nodeBreakpoints[type])
+            if (!nodeBreakpoints.has(type))
                 this._setBreakpoint(node, type, true);
             else
                 this._removeBreakpoint(node, type);
             this._saveBreakpoints();
         }
 
         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(this, type), nodeBreakpoints.has(type));
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
-     * @return {!Object<string, boolean>}
+     * @return {!Set<!DOMDebuggerAgent.DOMBreakpointType>}
      */
     _nodeBreakpoints: function(node)
     {
-        var nodeBreakpoints = {};
-        for (var id in this._breakpointElements) {
-            var element = this._breakpointElements[id];
+        /** @type {!Set<!DOMDebuggerAgent.DOMBreakpointType>} */
+        var nodeBreakpoints = new Set();
+        for (var element of this._breakpointElements.values()) {
             if (element._node === node && element._checkboxElement.checked)
-                nodeBreakpoints[element._type] = true;
+                nodeBreakpoints.add(element._type);
         }
         return nodeBreakpoints;
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @return {boolean}
      */
     hasBreakpoints: function(node)
     {
-        for (var id in this._breakpointElements) {
-            var element = this._breakpointElements[id];
+        for (var element of this._breakpointElements.values()) {
             if (element._node === node && element._checkboxElement.checked)
                 return true;
         }
         return false;
     },
 
     /**
      * @param {!WebInspector.DebuggerPausedDetails} details
      * @return {!Element}
      */
@@ skipping 43 matching lines @@
         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];
+        for (var element of this._breakpointElements.values()) {
             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];
+        var breakpointElement = this._breakpointElements.get(breakpointId);
         if (!breakpointElement) {
             breakpointElement = this._createBreakpointElement(node, type, enabled);
-            this._breakpointElements[breakpointId] = breakpointElement;
+            this._breakpointElements.set(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
@@ skipping 30 matching lines @@
             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];
+        for (var element of this._breakpointElements.values())
             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];
+        var element = this._breakpointElements.get(breakpointId);
         if (!element)
             return;
 
         this.removeListElement(element);
-        delete this._breakpointElements[breakpointId];
+        this._breakpointElements.delete(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
      */
@@ skipping 41 matching lines @@
     {
         var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails);
         if (!details || details.reason !== WebInspector.DebuggerModel.BreakReason.DOM) {
             if (this._highlightedElement) {
                 this._highlightedElement.classList.remove("breakpoint-hit");
                 delete this._highlightedElement;
             }
             return;
         }
         var auxData = details.auxData;
         var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);

[lushnikov, 2016/08/29 22:19:30]

let's get rid of this _createBreakpointId in a follow-up; we don't need at all!

-        var element = this._breakpointElements[breakpointId];
+        var element = this._breakpointElements.get(breakpointId);
         if (!element)
             return;
         WebInspector.viewManager.showView("sources.domBreakpoints");
         element.classList.add("breakpoint-hit");
         this._highlightedElement = element;
     },
 
     /**
      * @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];
+        for (var element of this._breakpointElements.values())
             breakpoints.push({ url: this._inspectedURL, path: element._node.path(), type: element._type, enabled: element._checkboxElement.checked });
-        }
         this._domBreakpointsSetting.set(breakpoints);
     },
 
     /**
      * @param {!WebInspector.DOMDocument} domDocument
      */
     restoreBreakpoints: function(domDocument)
     {
-        this._breakpointElements = {};
+        this._breakpointElements.clear();
         this.reset();
         this._inspectedURL = domDocument.documentURL;
         var domModel = domDocument.domModel();
-        var pathToBreakpoints = {};
+        /** @type {!Map<string, !Array<!Object>>} */

[chenwilliam, 2016/08/29 20:10:43]

I'm planning on improving this type annotation by doing another CL that turns
the breakpoint into its own type/class.

+        var pathToBreakpoints = new Map();
 
         /**
          * @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];
+            var breakpoints = pathToBreakpoints.get(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] = [];
+            if (!pathToBreakpoints.has(path)) {
+                pathToBreakpoints.set(path, []);
                 domModel.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
             }
-            pathToBreakpoints[path].push(breakpoint);
+            pathToBreakpoints.get(path).push(breakpoint);
         }
     },
 
     __proto__: WebInspector.BreakpointsSidebarPaneBase.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
@@ skipping 12 matching lines @@
             pane.show(this.element);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @type {!WebInspector.DOMBreakpointsSidebarPane}
  */
 WebInspector.domBreakpointsSidebarPane;