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 d44431b77e0013b2fbb31af9e419856bf00199b2..3eba21b2e23cedfa5ecbfe41cb5890e1ace741cd 100644
--- a/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
@@ -59,6 +59,8 @@ WebInspector.DOMBreakpointsSidebarPane = function()
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
 }
 
+WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
+
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
     _inspectedURLChanged: function(event)
     {
@@ -78,12 +80,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         if (node.pseudoType())
             return;
 
-        var nodeBreakpoints = {};
-        for (var id in this._breakpointElements) {
-            var element = this._breakpointElements[id];
-            if (element._node === node && element._checkboxElement.checked)
-                nodeBreakpoints[element._type] = true;
-        }
+        var nodeBreakpoints = this._nodeBreakpoints(node);
 
         /**
          * @param {!DOMDebuggerAgent.DOMBreakpointType} type
@@ -107,6 +104,35 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
     },
 
     /**
+     * @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
      * @param {function(!Element)} callback
      */
@@ -211,6 +237,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         }
         if (enabled)
             node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
+        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, true);
     },
 
     /**
@@ -276,6 +303,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         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);
     },
 
     /**
@@ -462,6 +490,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;