Devtools UI: Colorize node links and make pseudo links clearer

third_party/WebKit/Source/devtools/front_end/components/DOMPresentationUtils.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * 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:
  *
@@ skipping 13 matching lines @@
  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 WebInspector.DOMPresentationUtils = {}
 
+/**
+ * @param {!WebInspector.DOMNode} node
+ * @param {!Element} parentElement
+ */
 WebInspector.DOMPresentationUtils.decorateNodeLabel = function(node, parentElement)
 {
+    var originalNode = node;
+    var isPseudo = node.nodeType() === Node.ELEMENT_NODE && node.pseudoType();
+    if (isPseudo && node.parentNode)
+        node = node.parentNode;
+
     var title = node.nodeNameInCorrectCase();
 
-    var nameElement = createElement("span");
+    var nameElement = parentElement.createChild("span", "node-label-name");
     nameElement.textContent = title;
-    parentElement.appendChild(nameElement);
 
     var idAttribute = node.getAttribute("id");
     if (idAttribute) {
-        var idElement = createElement("span");
-        parentElement.appendChild(idElement);
-
+        var idElement = parentElement.createChild("span", "node-label-id");
         var part = "#" + idAttribute;
         title += part;
         idElement.createTextChild(part);
 
         // Mark the name as extra, since the ID is more important.
-        nameElement.className = "extra";
+        nameElement.classList.add("extra");
     }
 
     var classAttribute = node.getAttribute("class");
     if (classAttribute) {
         var classes = classAttribute.split(/\s+/);
         var foundClasses = {};
 
         if (classes.length) {
-            var classesElement = createElement("span");
-            classesElement.className = "extra";
-            parentElement.appendChild(classesElement);
-
+            var classesElement = parentElement.createChild("span", "extra node-label-class");
             for (var i = 0; i < classes.length; ++i) {
                 var className = classes[i];
                 if (className && !(className in foundClasses)) {
                     var part = "." + className;
                     title += part;
                     classesElement.createTextChild(part);
                     foundClasses[className] = true;
                 }
             }
         }
     }
+
+    if (isPseudo) {
+        var pseudoElement = parentElement.createChild("span", "extra node-label-pseudo");
+        var pseudoText = "::" + originalNode.pseudoType();
+        pseudoElement.createTextChild(pseudoText);
+        title += pseudoText;
+    }
     parentElement.title = title;
 }
 
 /**
  * @param {!Element} container
  * @param {string} nodeTitle
  */
 WebInspector.DOMPresentationUtils.createSpansForNodeTitle = function(container, nodeTitle)
 {
     var match = nodeTitle.match(/([^#.]+)(#[^.]+)?(\..*)?/);
     container.createChild("span", "webkit-html-tag-name").textContent = match[1];
     if (match[2])
         container.createChild("span", "webkit-html-attribute-value").textContent = match[2];
     if (match[3])
         container.createChild("span", "webkit-html-attribute-name").textContent = match[3];
 }
 
 /**
  * @param {?WebInspector.DOMNode} node
  * @return {!Node}
  */
 WebInspector.DOMPresentationUtils.linkifyNodeReference = function(node)
 {
     if (!node)
         return createTextNode(WebInspector.UIString("<node>"));
 
-    var root = createElement("span");
+    var root = createElementWithClass("span", "monospace");
     var shadowRoot = WebInspector.createShadowRootWithCoreStyles(root);
     shadowRoot.appendChild(WebInspector.Widget.createStyleElement("components/domUtils.css"));
     var link = shadowRoot.createChild("div", "node-link");
 
     WebInspector.DOMPresentationUtils.decorateNodeLabel(node, link);
 
     link.addEventListener("click", WebInspector.Revealer.reveal.bind(WebInspector.Revealer, node, undefined), false);
     link.addEventListener("mouseover", node.highlight.bind(node, undefined, undefined), false);
     link.addEventListener("mouseleave", WebInspector.DOMModel.hideDOMNodeHighlight.bind(WebInspector.DOMModel), false);
 
@@ skipping 527 matching lines @@
     /**
      * @override
      * @param {!WebInspector.DOMNode} node
      * @return {?{title: string, color: string}}
      */
     decorate: function(node)
     {
         return { title: this._title, color: this._color };
     }
 }