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

Source/devtools/front_end/elements/ElementsPanel.js

Index: Source/devtools/front_end/elements/ElementsPanel.js
diff --git a/Source/devtools/front_end/elements/ElementsPanel.js b/Source/devtools/front_end/elements/ElementsPanel.js
index cf9c72d95bc3d8f0fd10cf6a9d2c41233bdc2cf0..36559ae0f757ef85450dbbbd43b8a7beaffc3068 100644
--- a/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/Source/devtools/front_end/elements/ElementsPanel.js
@@ -106,8 +106,8 @@ WebInspector.ElementsPanel = function()
     WebInspector.targetManager.observeTargets(this);
     WebInspector.moduleSetting("showUAShadowDOM").addChangeListener(this._showUAShadowDOMChanged.bind(this));
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
-    WebInspector.targetManager.addModelListener(WebInspector.CSSStyleModel, WebInspector.CSSStyleModel.Events.PseudoStateForced, this._decoratorsChanged, this);
-    WebInspector.domBreakpointsSidebarPane.addEventListener(WebInspector.DOMBreakpointsSidebarPane.Events.BreakpointsChanged, this._decoratorsChanged, this);
+    if (Runtime.experiments.isEnabled("materialDesign"))
+        WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.MarkersChanged, this._updateToolbarButtons, this);
     WebInspector.extensionServer.addEventListener(WebInspector.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this);
 }
 
@@ -146,7 +146,6 @@ WebInspector.ElementsPanel.prototype = {
         if (!node || !treeOutline)
             return;
         treeOutline.toggleHideElement(node);
-        this._hideElementButton.setToggled(!this._hideElementButton.toggled());
     },
 
     _updateToolbarButtons: function()
@@ -155,12 +154,12 @@ WebInspector.ElementsPanel.prototype = {
         if (!node)
             return;
         var classText = node.getAttribute("class");
-        this._hideElementButton.setToggled(classText && classText.match(/__web-inspector-hide/));
+        this._hideElementButton.setToggled(!!node.marker(WebInspector.DOMPresentationUtils.GenericMarkers.Hidden));
         this._editAsHTMLButton.setToggled(false);
         this._breakpointsButton.setEnabled(!node.pseudoType());
         this._breakpointsButton.setToggled(WebInspector.domBreakpointsSidebarPane.hasBreakpoints(node));
         this._forceElementStateButton.setEnabled(node.nodeType() === Node.ELEMENT_NODE && !node.pseudoType());
-        this._forceElementStateButton.setToggled(!!node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName));
+        this._forceElementStateButton.setToggled(!!WebInspector.CSSStyleModel.fromNode(node).pseudoState(node).length);
     },
 
     _toggleEditAsHTML: function()
@@ -355,16 +354,6 @@ WebInspector.ElementsPanel.prototype = {
     /**
      * @param {!WebInspector.Event} event
      */
-    _decoratorsChanged: function(event)
-    {
-        var node = /** @type {!WebInspector.DOMNode} */ (event.data["node"]);
-        this._treeOutlineForNode(node).updateOpenCloseTags(node);

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

This call disappeared. I don't really understand it, but I suspect regression
here.

[pfeldman, 2015/08/10 21:35:17]

This was indirectly triggering decorators which are now triggered from the
elementreeelement.

-        this._updateToolbarButtons();
-    },
-
-    /**
-     * @param {!WebInspector.Event} event
-     */
     _onNodePicked: function(event)
     {
         if (!this.sidebarPanes.styles.isEditingSelector())
@@ -1226,3 +1215,43 @@ WebInspector.ElementsActionDelegate.prototype = {
             elementsPanel._toggleEditAsHTML();
     }
 }
+
+/**
+ * @constructor
+ * @implements {WebInspector.DOMPresentationUtils.MarkerDecorator}
+ */
+WebInspector.ElementsPanel.PseudoStateMarkerDecorator = function()
+{
+}
+
+WebInspector.ElementsPanel.PseudoStateMarkerDecorator.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.DOMNode} node
+     * @return {?string}
+     */
+    decorate: function(node)
+    {
+        return WebInspector.UIString("Element state: %s", ":" + WebInspector.CSSStyleModel.fromNode(node).pseudoState(node).join(", :"));
+    }
+}
+
+/**
+ * @constructor
+ * @implements {WebInspector.DOMPresentationUtils.MarkerDecorator}
+ */
+WebInspector.ElementsPanel.HiddenMarkerDecorator = function()
+{
+}
+
+WebInspector.ElementsPanel.HiddenMarkerDecorator.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.DOMNode} node
+     * @return {?string}
+     */
+    decorate: function(node)
+    {
+        return WebInspector.UIString("Element is hidden");
+    }
+}