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

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 41 matching lines @@
 
     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.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
+
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
     _inspectedURLChanged: function(event)
     {
         this._breakpointElements = {};
         this.reset();
         var url = /** @type {string} */ (event.data);
         this._inspectedURL = url.removeURLFragment();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {boolean} createSubMenu
      */
     populateNodeContextMenu: function(node, contextMenu, createSubMenu)
     {
         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
          * @this {WebInspector.DOMBreakpointsSidebarPane}
          */
         function toggleBreakpoint(type)
         {
             if (!nodeBreakpoints[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]);
         }
     },
 
     /**
+     * @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
      */
     createBreakpointHitStatusMessage: function(details, callback)
     {
         var auxData = /** @type {!Object} */ (details.auxData);
         var domModel = WebInspector.DOMModel.fromTarget(details.target());
         if (!domModel)
             return;
         if (auxData.type === this._breakpointTypes.SubtreeModified) {
@@ skipping 84 matching lines @@
         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");
@@ skipping 45 matching lines @@
     {
         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);
@@ skipping 166 matching lines @@
     _reattachBody: function()
     {
         if (this._wrappedPane.element.parentNode !== this.element)
             this._wrappedPane.show(this.element);
     },
 
     __proto__: WebInspector.SidebarPane.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;