DevTools: More code reduce via using document.createElementWithClass and document.createChild.

Source/devtools/front_end/elements/Spectrum.js

 /*
  * Copyright (C) 2011 Brian Grinstead All rights reserved.
  *
  * 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
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 41 matching lines @@
     var alphaLabel = rangeContainer.createChild("label");
     alphaLabel.textContent = WebInspector.UIString("\u03B1:");
 
     this._alphaElement = rangeContainer.createChild("input", "spectrum-range");
     this._alphaElement.setAttribute("type", "range");
     this._alphaElement.setAttribute("min", "0");
     this._alphaElement.setAttribute("max", "100");
     this._alphaElement.addEventListener("input", alphaDrag.bind(this), false);
     this._alphaElement.addEventListener("change", alphaDrag.bind(this), false);
 
-    var swatchElement = document.createElement("span");
-    swatchElement.className = "swatch";
+    var displayContainer = this.element.createChild("div");
+    var swatchElement = displayContainer.createChild("span", "swatch");
     this._swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
-
-    var displayContainer = this.element.createChild("div");
-    displayContainer.appendChild(swatchElement);
     this._displayElement = displayContainer.createChild("span", "source-code spectrum-display-value");
 
     WebInspector.Spectrum.draggable(this._sliderElement, hueDrag.bind(this));
     WebInspector.Spectrum.draggable(this._draggerElement, colorDrag.bind(this), colorDragStart.bind(this));
 
     /**
      * @param {!Element} element
      * @param {number} dragX
      * @param {number} dragY
      * @this {WebInspector.Spectrum}
@@ skipping 348 matching lines @@
 
     __proto__: WebInspector.Object.prototype
 }
 
 /**
  * @constructor
  * @param {boolean=} readOnly
  */
 WebInspector.ColorSwatch = function(readOnly)
 {
-    this.element = document.createElement("span");
+    this.element = document.createElementWithClass("span", "swatch");
     this._swatchInnerElement = this.element.createChild("span", "swatch-inner");
     var shiftClickMessage = WebInspector.UIString("Shift-click to change color format.");
     this.element.title = readOnly ? shiftClickMessage : String.sprintf("%s\n%s", WebInspector.UIString("Click to open a colorpicker."), shiftClickMessage);
-    this.element.className = "swatch";
     this.element.addEventListener("mousedown", consumeEvent, false);
     this.element.addEventListener("dblclick", consumeEvent, false);
 }
 
 WebInspector.ColorSwatch.prototype = {
     /**
      * @param {string} colorString
      */
     setColorString: function(colorString)
     {
         this._swatchInnerElement.style.backgroundColor = colorString;
     }
 }