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

Source/devtools/front_end/elements/ElementsTreeElement.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 22 matching lines @@
  * @extends {TreeElement}
  * @param {!WebInspector.DOMNode} node
  * @param {boolean=} elementCloseTag
  */
 WebInspector.ElementsTreeElement = function(node, elementCloseTag)
 {
     // The title will be updated in onattach.
     TreeElement.call(this);
     this._node = node;
 
+    this._decorationsElement = createElementWithClass("div");
+    this.listItemElement.appendChild(this._decorationsElement);
+
     this._elementCloseTag = elementCloseTag;
 
     if (this._node.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
         this._canAddAttributes = true;
     this._searchQuery = null;
     this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
 }
 
 WebInspector.ElementsTreeElement.InitialChildrenLimit = 500;
 
@@ skipping 57 matching lines @@
     return false;
 }
 
 /**
  * @param {!WebInspector.ContextSubMenuItem} subMenu
  * @param {!WebInspector.DOMNode} node
  */
 WebInspector.ElementsTreeElement.populateForcedPseudoStateItems = function(subMenu, node)
 {
     const pseudoClasses = ["active", "hover", "focus", "visited"];
-    var forcedPseudoState = node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName) || [];
+    var forcedPseudoState = WebInspector.CSSStyleModel.fromNode(node).pseudoState(node);
     for (var i = 0; i < pseudoClasses.length; ++i) {
         var pseudoClassForced = forcedPseudoState.indexOf(pseudoClasses[i]) >= 0;
         subMenu.appendCheckboxItem(":" + pseudoClasses[i], setPseudoStateCallback.bind(null, pseudoClasses[i], !pseudoClassForced), pseudoClassForced, false);
     }
 
     /**
      * @param {string} pseudoState
      * @param {boolean} enabled
      */
     function setPseudoStateCallback(pseudoState, enabled)
@@ skipping 923 matching lines @@
                 }
                 if (!depth)
                     this.childrenListElement.classList.add("shadow-root-deep");
                 else
                     this.childrenListElement.classList.add("shadow-root-depth-" + depth);
             }
             var highlightElement = createElement("span");
             highlightElement.className = "highlight";
             highlightElement.appendChild(nodeInfo);
             this.title = highlightElement;
-            this._updateDecorations();
+            this.updateDecorations();
+            this.listItemElement.insertBefore(this._decorationsElement, this.listItemElement.firstChild);
             delete this._highlightResult;
         }
 
         delete this.selectionElement;
         if (this.selected)
             this.updateSelection();
         this._preventFollowingLinksOnDoubleClick();
         this._highlightSearchResults();
     },
 
-    /**
-     * @return {?Element}
-     */
-    _createDecoratorElement: function()
+    updateDecorations: function()
     {
+        if (this.isClosingTag())
+            return;
         var node = this._node;
-        var decoratorMessages = [];
-        var parentDecoratorMessages = [];
-        var decorators = this.treeOutline.nodeDecorators();
-        for (var i = 0; i < decorators.length; ++i) {
-            var decorator = decorators[i];
-            var message = decorator.decorate(node);
-            if (message) {
-                decoratorMessages.push(message);
-                continue;
-            }
+        if (node.nodeType() !== Node.ELEMENT_NODE)
+            return;
 
-            if (this.expanded || this._elementCloseTag)
-                continue;
+        var extensions = runtime.extensions(WebInspector.DOMPresentationUtils.MarkerDecorator);
+        var markerToExtension = new Map();
+        for (var extension of extensions)
+            markerToExtension.set(extension.descriptor()["marker"], extension);
 
-            message = decorator.decorateAncestor(node);
-            if (message)
-                parentDecoratorMessages.push(message)
+        var promises = [];
+        var decorations = [];
+        var descendantDecorations = [];
+        node.traverseMarkers(visitor);
+
+        /**
+         * @param {!WebInspector.DOMNode} n
+         * @param {string} marker
+         */
+        function visitor(n, marker)
+        {
+            var extension = markerToExtension.get(marker);
+            if (!extension)
+                return;
+            promises.push(extension.instancePromise().then(collectDecoration.bind(null, n)));
         }
-        if (!decoratorMessages.length && !parentDecoratorMessages.length)
-            return null;
 
-        var decoratorElement = createElement("div");
-        decoratorElement.classList.add("elements-gutter-decoration");
-        if (!decoratorMessages.length)
-            decoratorElement.classList.add("elements-has-decorated-children");
-        decoratorElement.title = decoratorMessages.concat(parentDecoratorMessages).join("\n");
-        return decoratorElement;
-    },
+        /**
+         * @param {!WebInspector.DOMNode} n
+         * @param {!WebInspector.DOMPresentationUtils.MarkerDecorator} decorator
+         */
+        function collectDecoration(n, decorator)
+        {
+            var decoration = decorator.decorate(n);
+            if (!decoration)
+                return;
+            (n === node ? decorations : descendantDecorations).push(decoration);
+        }
 
-    _updateDecorations: function()
-    {
-        if (this._decoratorElement)
-            this._decoratorElement.remove();
-        this._decoratorElement = this._createDecoratorElement();
-        if (this._decoratorElement && this.listItemElement)
-            this.listItemElement.insertBefore(this._decoratorElement, this.listItemElement.firstChild);
+        Promise.all(promises).then(setTitle.bind(this));
+
+        /**
+         * @this {WebInspector.ElementsTreeElement}
+         */
+        function setTitle()
+        {
+            this._decorationsElement.classList.toggle("elements-gutter-decoration", decorations.length || (descendantDecorations.length && !this.expanded));
+            this._decorationsElement.classList.toggle("elements-has-decorated-children", descendantDecorations.length && !this.expanded);
+            var title = decorations.join("\n");
+            if (descendantDecorations.length)
+                title += WebInspector.UIString("\nChildren:\n") + descendantDecorations.join("\n");
+            this._decorationsElement.title = title;
+        }
     },
 
     /**
      * @param {!Node} parentElement
      * @param {string} name
      * @param {string} value
      * @param {?WebInspector.ElementsTreeOutline.UpdateRecord} updateRecord
      * @param {boolean=} forceValue
      * @param {!WebInspector.DOMNode=} node
      */
@@ skipping 394 matching lines @@
 
             if (object)
                 object.callFunction(scrollIntoView);
         }
 
         this._node.resolveToObject("", scrollIntoViewCallback);
     },
 
     __proto__: TreeElement.prototype
 }