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

Source/devtools/front_end/elements/ElementsTreeOutline.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 55 matching lines @@
     this._includeRootDOMNode = !omitRootDOMNode;
     this._selectEnabled = selectEnabled;
     /** @type {?WebInspector.DOMNode} */
     this._rootDOMNode = null;
     /** @type {?WebInspector.DOMNode} */
     this._selectedDOMNode = null;
 
     this._visible = false;
     this._pickNodeMode = false;
 
-    this._createNodeDecorators();
-
     this._popoverHelper = new WebInspector.PopoverHelper(this._element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(0);
 
     /** @type {!Map<!WebInspector.DOMNode, !WebInspector.ElementsTreeOutline.UpdateRecord>} */
     this._updateRecords = new Map();
     /** @type {!Set<!WebInspector.ElementsTreeElement>} */
     this._treeElementsBeingUpdated = new Set();
+
+    this._domModel.addEventListener(WebInspector.DOMModel.Events.MarkersChanged, this._markersChanged, this);
 }
 
 /** @typedef {{node: !WebInspector.DOMNode, isCut: boolean}} */
 WebInspector.ElementsTreeOutline.ClipboardData;
 
 /**
  * @enum {string}
  */
 WebInspector.ElementsTreeOutline.Events = {
     NodePicked: "NodePicked",
@@ skipping 128 matching lines @@
      * @param {number} width
      */
     setVisibleWidth: function(width)
     {
         this._visibleWidth = width;
         if (this._multilineEditing)
             this._multilineEditing.setWidth(this._visibleWidth);
     },
 
     /**
-     * @return {!Array<!WebInspector.ElementsTreeOutline.ElementDecorator>}
-     */
-    nodeDecorators: function()
-    {
-        return this._nodeDecorators;
-    },
-
-    _createNodeDecorators: function()
-    {
-        this._nodeDecorators = [];
-        this._nodeDecorators.push(new WebInspector.ElementsTreeOutline.PseudoStateDecorator());
-        this._nodeDecorators.push(new WebInspector.ElementsTreeOutline.BreakpointDecorator());
-    },
-
-    /**
      * @param {?WebInspector.ElementsTreeOutline.ClipboardData} data
      */
     _setClipboardData: function(data)
     {
         if (this._clipboardNodeData) {
             var treeElement = this.findTreeElement(this._clipboardNodeData.node);
             if (treeElement)
                 treeElement.setInClipboard(false);
             delete this._clipboardNodeData;
         }
@@ skipping 783 matching lines @@
      * @param {!WebInspector.DOMNode} node
      * @param {function(?WebInspector.RemoteObject, boolean=)=} userCallback
      */
     toggleHideElement: function(node, userCallback)
     {
         var pseudoType = node.pseudoType();
         var effectiveNode = pseudoType ? node.parentNode : node;
         if (!effectiveNode)
             return;
 
+        var hidden = node.marker("hidden");
+
         function resolvedNode(object)
         {
             if (!object)
                 return;
 
             /**
              * @param {?string} pseudoType
+             * @param {boolean} hidden
              * @suppressGlobalPropertiesCheck
              * @suppressReceiverCheck
              * @this {!Element}
              */
-            function toggleClassAndInjectStyleRule(pseudoType)
+            function toggleClassAndInjectStyleRule(pseudoType, hidden)
             {
                 const classNamePrefix = "__web-inspector-hide";
                 const classNameSuffix = "-shortcut__";
                 const styleTagId = "__web-inspector-hide-shortcut-style__";
                 var selectors = [];
                 selectors.push(".__web-inspector-hide-shortcut__");
                 selectors.push(".__web-inspector-hide-shortcut__ *");
                 selectors.push(".__web-inspector-hidebefore-shortcut__::before");
                 selectors.push(".__web-inspector-hideafter-shortcut__::after");
                 var selector = selectors.join(", ");
                 var ruleBody = "    visibility: hidden !important;";
                 var rule = "\n" + selector + "\n{\n" + ruleBody + "\n}\n";
                 var className = classNamePrefix + (pseudoType || "") + classNameSuffix;
-                this.classList.toggle(className);
+                this.classList.toggle(className, hidden);
 
                 var localRoot = this;
                 while (localRoot.parentNode)
                     localRoot = localRoot.parentNode;
                 if (localRoot.nodeType === Node.DOCUMENT_NODE)
                     localRoot = document.head;
 
                 var style = localRoot.querySelector("style#" + styleTagId);
                 if (style)
                     return;
 
                 style = document.createElement("style");
                 style.id = styleTagId;
                 style.type = "text/css";
                 style.textContent = rule;
 
                 localRoot.appendChild(style);
             }
 
-            object.callFunction(toggleClassAndInjectStyleRule, [{ value: pseudoType }], userCallback);
+            object.callFunction(toggleClassAndInjectStyleRule, [{ value: pseudoType }, { value: !hidden}], userCallback);
             object.release();
+            node.setMarker("hidden", hidden ? null : true);
         }
 
         effectiveNode.resolveToObject("", resolvedNode);
     },
 
     _reset: function()
     {
         this.rootDOMNode = null;
         this.selectDOMNode(null, false);
         this._popoverHelper.hidePopover();
@@ skipping 468 matching lines @@
                 treeElement.appendChild(new WebInspector.ElementsTreeOutline.ShortcutTreeElement(distributedNode));
         }
 
         // Insert close tag.
         if (node.nodeType() === Node.ELEMENT_NODE && treeElement.isExpandable())
             this.insertChildElement(treeElement, node, treeElement.childCount(), true);
 
         this._treeElementsBeingUpdated.delete(treeElement);
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _markersChanged: function(event)
+    {
+        var node = /** @type {!WebInspector.DOMNode} */ (event.data);
+        var treeElement = node[this._treeElementSymbol];
+        if (treeElement)
+            treeElement.updateDecorations();
+    },
+
     __proto__: TreeOutline.prototype
 }
 
 /**
- * @interface
- */
-WebInspector.ElementsTreeOutline.ElementDecorator = function()
-{
-}
-
-WebInspector.ElementsTreeOutline.ElementDecorator.prototype = {
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @return {?string}
-     */
-    decorate: function(node)
-    {
-    },
-
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @return {?string}
-     */
-    decorateAncestor: function(node)
-    {
-    }
-}
-
-/**
- * @constructor
- * @implements {WebInspector.ElementsTreeOutline.ElementDecorator}
- */
-WebInspector.ElementsTreeOutline.PseudoStateDecorator = function()
-{
-    WebInspector.ElementsTreeOutline.ElementDecorator.call(this);
-}
-
-WebInspector.ElementsTreeOutline.PseudoStateDecorator.prototype = {
-    /**
-     * @override
-     * @param {!WebInspector.DOMNode} node
-     * @return {?string}
-     */
-    decorate: function(node)
-    {
-        if (node.nodeType() !== Node.ELEMENT_NODE)
-            return null;
-        var propertyValue = node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName);
-        if (!propertyValue)
-            return null;
-        return WebInspector.UIString("Element state: %s", ":" + propertyValue.join(", :"));
-    },
-
-    /**
-     * @override
-     * @param {!WebInspector.DOMNode} node
-     * @return {?string}
-     */
-    decorateAncestor: function(node)
-    {
-        if (node.nodeType() !== Node.ELEMENT_NODE)
-            return null;
-
-        var descendantCount = node.descendantUserPropertyCount(WebInspector.CSSStyleModel.PseudoStatePropertyName);
-        if (!descendantCount)
-            return null;
-        if (descendantCount === 1)
-            return WebInspector.UIString("%d descendant with forced state", descendantCount);
-        return WebInspector.UIString("%d descendants with forced state", descendantCount);
-    }
-}
-
-/**
- * @constructor
- * @implements {WebInspector.ElementsTreeOutline.ElementDecorator}
- */
-WebInspector.ElementsTreeOutline.BreakpointDecorator = function()
-{
-    WebInspector.ElementsTreeOutline.ElementDecorator.call(this);
-}
-
-WebInspector.ElementsTreeOutline.BreakpointDecorator.prototype = {
-    /**
-     * @override
-     * @param {!WebInspector.DOMNode} node
-     * @return {?string}
-     */
-    decorate: function(node)
-    {
-        if (node.nodeType() !== Node.ELEMENT_NODE)
-            return null;
-        var propertyValue = node.getUserProperty(WebInspector.DOMBreakpointsSidebarPane.BreakpointPropertyName);
-        if (!propertyValue)
-            return null;
-        return WebInspector.UIString("DOM breakpoint is set");
-    },
-
-    /**
-     * @override
-     * @param {!WebInspector.DOMNode} node
-     * @return {?string}
-     */
-    decorateAncestor: function(node)
-    {
-        if (node.nodeType() !== Node.ELEMENT_NODE)
-            return null;
-
-        var descendantCount = node.descendantUserPropertyCount(WebInspector.DOMBreakpointsSidebarPane.BreakpointPropertyName);
-        if (!descendantCount)
-            return null;
-        if (descendantCount === 1)
-            return WebInspector.UIString("%d descendant with breakpoints", descendantCount);
-        return WebInspector.UIString("%d descendants with breakpoints", descendantCount);
-    }
-}
-
-/**
  * @constructor
  */
 WebInspector.ElementsTreeOutline.UpdateRecord = function()
 {
 }
 
 WebInspector.ElementsTreeOutline.UpdateRecord.prototype = {
     /**
      * @param {string} attrName
      */
@@ skipping 215 matching lines @@
             if (node) {
                 this.treeOutline._selectedDOMNode = node;
                 this.treeOutline._selectedNodeChanged();
             }
         }
         return true;
     },
 
     __proto__: TreeElement.prototype
 }