DevTools: ConsoleViewMessage builders should explicitly add classes

third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * 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 485 matching lines @@
         case "number":
         case "regexp":
         case "symbol":
         case "undefined":
             element = this._formatParameterAsValue(output);
             break;
         default:
             element = this._formatParameterAsValue(output);
             console.error("Tried to format remote object of unknown type.");
         }
-        element.className = "object-value-" + type + " source-code";
         return element;
     },
 
     /**
      * @param {!WebInspector.RemoteObject} obj
      * @return {!Element}
      */
     _formatParameterAsValue: function(obj)
     {
-        var element = createElement("span");
+        var element = createElementWithClass("span", "source-code");
+        var type = obj.subtype || obj.type;
+        if (type === "boolean")
+            element.classList.add("object-value-boolean");
+        else if (type === "null")
+            element.classList.add("object-value-null");
+        else if (type === "undefined")
+            element.classList.add("object-value-undefined");
+        else if (type === "number")
+            element.classList.add("object-value-number");
+        else if (type === "regexp" || type === "symbol")
+            element.classList.add("object-value-regexp");

[lushnikov, 2016/10/18 23:15:19]

object-value-string?

+        else if (type === "set")
+            element.classList.add("object-value-set");
         element.createTextChild(obj.description || "");
         if (obj.objectId)
             element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, obj), false);
         return element;
     },
 
     /**
      * @param {!WebInspector.RemoteObject} obj
      * @param {!WebInspector.Linkifier} linkifier
      * @param {boolean=} includePreview
      * @return {!Element}
      */
     _formatParameterAsObject: function(obj, linkifier, includePreview)
     {
-        var element = createElement("span");
+        var element = createElementWithClass("span", "source-code");
+        var type = obj.subtype || obj.type;
+        if (type === "iterator")
+            element.classList.add("object-value-iterator");
+        else if (type === "map")
+            element.classList.add("object-value-map");
+        else if (type === "object" || type === "promise")
+            element.classList.add("object-value-object");
+        else if (type === "proxy")
+            element.classList.add("object-value-proxy");
+        else if (type === "set")
+            element.classList.add("object-value-set");
         var expandableObject = this._formatAsExpandableObject(obj, linkifier, includePreview);
         element.appendChild(expandableObject);
         return element;
     },
 
     /**
      * @param {!WebInspector.RemoteObject} obj
      * @param {!WebInspector.Linkifier} linkifier
      * @param {boolean=} includePreview
      * @return {!Element}
@@ skipping 17 matching lines @@
         return section.element;
     },
 
     /**
      * @param {!WebInspector.RemoteObject} func
      * @param {boolean=} includePreview
      * @return {!Element}
      */
     _formatParameterAsFunction: function(func, includePreview)
     {
-        var element = createElement("span");
+        var element = createElementWithClass("span", "source-code");
+        var type = func.subtype || func.type;
+        if (type === "function")
+            element.classList.add("object-value-function");
+        else if (type === "generator")
+            element.classList.add("object-value-generator");
         WebInspector.RemoteFunction.objectAsFunction(func).targetFunction().then(formatTargetFunction.bind(this));
         return element;
 
         /**
          * @param {!WebInspector.RemoteObject} targetFunction
          * @this {WebInspector.ConsoleViewMessage}
          */
         function formatTargetFunction(targetFunction)
         {
             var functionElement = createElement("span");
@@ skipping 31 matching lines @@
         return this._previewFormatter.renderPropertyPreview(property.type, /** @type {string} */ (property.subtype), property.value);
     },
 
     /**
      * @param {!WebInspector.RemoteObject} object
      * @param {!WebInspector.Linkifier} linkifier
      * @return {!Element}
      */
     _formatParameterAsNode: function(object, linkifier)
     {
-        var element = createElement("span");
+        var element = createElementWithClass("span", "object-value-node source-code");
         WebInspector.Renderer.renderPromise(object).then(appendRenderer.bind(this), failedToRender.bind(this));
         return element;
 
         /**
          * @param {!Element} rendererElement
          * @this {WebInspector.ConsoleViewMessage}
          */
         function appendRenderer(rendererElement)
         {
             element.appendChild(rendererElement);
@@ skipping 15 matching lines @@
     },
 
     /**
      * @param {!WebInspector.RemoteObject} array
      * @param {!WebInspector.Linkifier} linkifier
      * @param {string} messageType
      * @return {!Element}
      */
     _formatParameterAsArray: function(array, linkifier, messageType)
     {
-        var element = createElement("span");
+        var element = createElementWithClass("span", "object-value-array source-code");
         var usePrintedArrayFormat = messageType !== WebInspector.ConsoleMessage.MessageType.DirXML && messageType !== WebInspector.ConsoleMessage.MessageType.Result;
         var isLongArray = array.arrayLength() > 100;
-        if (usePrintedArrayFormat || isLongArray)
-            return this._formatParameterAsObject(array, linkifier, usePrintedArrayFormat || !isLongArray);
+        if (usePrintedArrayFormat || isLongArray) {
+            element = this._formatParameterAsObject(array, linkifier, usePrintedArrayFormat || !isLongArray);
+            element.classList.add("object-value-array");
+            return element;
+        }
         array.getAllProperties(false, printArrayResult.bind(this));
         return element;
 
         /**
          * @param {?Array.<!WebInspector.RemoteObjectProperty>} properties
          * @this {!WebInspector.ConsoleViewMessage}
          */
         function printArrayResult(properties)
         {
             if (!properties) {
@@ skipping 52 matching lines @@
             element.appendChild(section.element);
         }
     },
 
     /**
      * @param {!WebInspector.RemoteObject} output
      * @return {!Element}
      */
     _formatParameterAsString: function(output)
     {
-        var span = createElement("span");
-        span.className = "object-value-string-inner source-code";
+        var span = createElementWithClass("span", "object-value-string source-code");
         span.appendChild(WebInspector.linkifyStringAsFragment(output.description || ""));
 
         // Make black quotes.
         var element = createElement("span");
         element.createTextChild("\"");
         element.appendChild(span);
         element.createTextChild("\"");
         return element;
     },
 
     /**
      * @param {!WebInspector.RemoteObject} output
      * @param {!WebInspector.Linkifier} linkifier
      * @return {!Element}
      */
     _formatParameterAsError: function(output, linkifier)
     {
         var element = createElement("span");
-        var span = element.createChild("span", "object-value-error source-code");
+        var span = element.createChild("span", "source-code");
         var errorSpan = this._tryFormatAsError(output.target(), linkifier, output.description || "");
         span.appendChild(errorSpan ? errorSpan : WebInspector.linkifyStringAsFragment(output.description || ""));
         return element;
     },
 
     /**
      * @param {!WebInspector.RemoteObject} output
      * @return {!Element}
      */
     _formatAsArrayEntry: function(output)
@@ skipping 534 matching lines @@
     {
         if (!this._element) {
             WebInspector.ConsoleViewMessage.prototype.toMessageElement.call(this);
             this._element.classList.toggle("collapsed", this._collapsed);
         }
         return this._element;
     },
 
     __proto__: WebInspector.ConsoleViewMessage.prototype
 }