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.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)
     {
         this._breakpointElements = {};
         this.reset();
         var url = /** @type {string} */ (event.data);
         this._inspectedURL = url.removeURLFragment();
     },
 
@@ skipping 155 matching lines @@
     _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;
         }
-        node.setUserProperty(WebInspector.DOMBreakpointsSidebarPane.BreakpointPropertyName, true);
-        this.dispatchEventToListeners(WebInspector.DOMBreakpointsSidebarPane.Events.BreakpointsChanged, {node: node});
+        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);
-        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);
     },
 
     /**
      * @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;