DevTools: introduce dom markers, decorate hidden, forced state and breakpoint elements using marker…

Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js

Index: Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
diff --git a/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js b/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
index d4f3bea8505303d001c98d43a864241b6a55533f..0edf6166f4a791c9306a6b968d8b790393c82daa 100644
--- a/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
@@ -59,11 +59,7 @@ WebInspector.DOMBreakpointsSidebarPane = function()
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
 }
 
-WebInspector.DOMBreakpointsSidebarPane.Events = {
-    BreakpointsChanged: "BreakpointsChanged"
-}
-
-WebInspector.DOMBreakpointsSidebarPane.BreakpointPropertyName = "BreakpointPropertyName";
+WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint";

[dgozman, 2015/08/07 23:35:05]

When I see constant, I assume that only this constant will be used everywhere.
This is not the case ("breakpoint" in module.json), so I'd rather inline instead
of constant.

[pfeldman, 2015/08/10 21:25:16]

I'd rather leave it as is. It has multiple usages.

 
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
     _inspectedURLChanged: function(event)
@@ -239,8 +235,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         } else {
             breakpointElement._checkboxElement.checked = enabled;
         }
-        node.setUserProperty(WebInspector.DOMBreakpointsSidebarPane.BreakpointPropertyName, true);
-        this.dispatchEventToListeners(WebInspector.DOMBreakpointsSidebarPane.Events.BreakpointsChanged, {node: node});
+        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, true);
     },
 
     /**
@@ -306,12 +301,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         delete this._breakpointElements[breakpointId];
         if (element._checkboxElement.checked)
             node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
-        var hasBreakpoints = this.hasBreakpoints(node);
-        if (hasBreakpoints)
-            node.setUserProperty(WebInspector.DOMBreakpointsSidebarPane.BreakpointPropertyName, true);
-        else
-            node.removeUserProperty(WebInspector.DOMBreakpointsSidebarPane.BreakpointPropertyName);
-        this.dispatchEventToListeners(WebInspector.DOMBreakpointsSidebarPane.Events.BreakpointsChanged, {node: node});
+        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, this.hasBreakpoints(node) ? true : null);
     },
 
     /**
@@ -498,6 +488,26 @@ WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
 }
 
 /**
+ * @constructor
+ * @implements {WebInspector.DOMPresentationUtils.MarkerDecorator}
+ */
+WebInspector.DOMBreakpointsSidebarPane.MarkerDecorator = function()
+{
+}
+
+WebInspector.DOMBreakpointsSidebarPane.MarkerDecorator.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.DOMNode} node
+     * @return {?string}
+     */
+    decorate: function(node)
+    {
+        return WebInspector.UIString("DOM Breakpoint");
+    }
+}
+
+/**
  * @type {!WebInspector.DOMBreakpointsSidebarPane}
  */
 WebInspector.domBreakpointsSidebarPane;