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

Source/devtools/front_end/elements/ElementsPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 91 matching lines @@
     this._dockSideChanged();
     this._loadSidebarViews();
 
     /** @type {!Array.<!WebInspector.ElementsTreeOutline>} */
     this._treeOutlines = [];
     /** @type {!Map.<!WebInspector.DOMModel, !WebInspector.ElementsTreeOutline>} */
     this._modelToTreeOutline = new Map();
     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);
+    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);
 }
 
 WebInspector.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol("title");
 
 WebInspector.ElementsPanel.prototype = {
     /**
      * @return {!WebInspector.Toolbar}
      */
     _createElementsToolbar: function()
@@ skipping 21 matching lines @@
         return toolbar;
     },
 
     _toggleHideElement: function()
     {
         var node = this.selectedDOMNode();
         var treeOutline = this._treeOutlineForNode(node);
         if (!node || !treeOutline)
             return;
         treeOutline.toggleHideElement(node);
-        this._hideElementButton.setToggled(!this._hideElementButton.toggled());
     },
 
     _updateToolbarButtons: function()
     {
         if (!Runtime.experiments.isEnabled("materialDesign"))
             return;
         var node = this.selectedDOMNode();
         if (!node)
             return;
         var classText = node.getAttribute("class");
-        this._hideElementButton.setToggled(classText && classText.match(/__web-inspector-hide/));
+        var treeOutline = this._treeOutlineForNode(node);
+        this._hideElementButton.setToggled(treeOutline && treeOutline.isToggledToHidden(node));
         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()
     {
         var node = this.selectedDOMNode();
         var treeOutline = this._treeOutlineForNode(node);
         if (!node || !treeOutline)
             return;
         var startEditing = !this._editAsHTMLButton.toggled();
         treeOutline.toggleEditAsHTML(node, startEditing, this._updateToolbarButtons.bind(this));
@@ skipping 179 matching lines @@
     },
 
     onResize: function()
     {
         this._updateTreeOutlineVisibleWidth();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
-    _decoratorsChanged: function(event)
-    {
-        var node = /** @type {!WebInspector.DOMNode} */ (event.data["node"]);
-        this._treeOutlineForNode(node).updateOpenCloseTags(node);
-        this._updateToolbarButtons();
-    },
-
-    /**
-     * @param {!WebInspector.Event} event
-     */
     _onNodePicked: function(event)
     {
         if (!this.sidebarPanes.styles.isEditingSelector())
             return;
         this.sidebarPanes.styles.updateEditingSelectorForNode(/** @type {!WebInspector.DOMNode} */(event.data));
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
@@ skipping 847 matching lines @@
      */
     handleAction: function(context, actionId)
     {
         var elementsPanel = WebInspector.ElementsPanel.instance();
         if (actionId === "elements.hide-element")
             elementsPanel._toggleHideElement();
         else if (actionId === "elements.edit-as-html")
             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");
+    }
+}