Bug 1271841 - Make DOM Node preview in console match syntax highlighting colors used in the markup view. r=jryans

MozReview-Commit-ID: FduYtfVMp8Q

--HG--
extra : transplant_source : 8%0E%EE%85%94%F0%16%D4HO%7D%DE%0Dp5%2B%C2c%AFs

devtools/client/webconsole/console-output.js

@@ -3125,9 +3125,9 @@ Widgets.ObjectRenderers.add({
       fragment.appendChild(this.el("span.cm-attribute", nodeName));
     }
 
-    this._text("=", fragment);
-    fragment.appendChild(this.el("span.console-string",
-                                 '"' + escapeHTML(value) + '"'));
+    this._text("=\"", fragment);
+    fragment.appendChild(this.el("span.theme-fg-color6", escapeHTML(value)));
+    this._text("\"", fragment);
 
     return fragment;
   },
@@ -3203,8 +3203,8 @@ Widgets.ObjectRenderers.add({
 
     this.element = this.el("span." + "kind-" + this.objectActor.preview.kind + ".elementNode");
 
+    this._text("<");
     let openTag = this.el("span.cm-tag");
-    openTag.textContent = "<";
     this.element.appendChild(openTag);
 
     let tagName = this._anchor(nodeName, {
@@ -3226,9 +3226,7 @@ Widgets.ObjectRenderers.add({
       }
     }
 
-    let closeTag = this.el("span.cm-tag");
-    closeTag.textContent = ">";
-    this.element.appendChild(closeTag);
+    this._text(">");
 
     // Register this widget in the owner message so that it gets destroyed when
     // the message is destroyed.