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

Source/devtools/front_end/ui/StatusBarButton.js

 /*
  * Copyright (C) 2009 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 146 matching lines @@
  * @param {string} title
  * @param {string} className
  * @param {number=} states
  */
 WebInspector.StatusBarButton = function(title, className, states)
 {
     WebInspector.StatusBarItem.call(this, "button");
     this.element.className = className + " status-bar-item";
     this.element.addEventListener("click", this._clicked.bind(this), false);
 
-    this.glyph = document.createElement("div");
-    this.glyph.className = "glyph";
-    this.element.appendChild(this.glyph);
-
-    this.glyphShadow = document.createElement("div");
-    this.glyphShadow.className = "glyph shadow";
-    this.element.appendChild(this.glyphShadow);
+    this.glyph = this.element.createChild("div", "glyph");
+    this.glyphShadow = this.element.createChild("div", "glyph shadow");
 
     this.states = states;
     if (!states)
         this.states = 2;
 
     if (states == 2)
         this._state = false;
     else
         this._state = 0;
 
@@ skipping 47 matching lines @@
     get state()
     {
         return this._state;
     },
 
     set state(x)
     {
         if (this._state === x)
             return;
 
-        if (this.states === 2)
+        if (this.states === 2) {
             this.element.classList.toggle("toggled-on", x);
-        else {
+        } else {
             this.element.classList.remove("toggled-" + this._state);
             if (x !== 0)
                 this.element.classList.add("toggled-" + x);
         }
         this._state = x;
     },
 
     get toggled()
     {
         if (this.states !== 2)
@@ skipping 69 matching lines @@
 
     /**
      * @param {?function():!Array.<!WebInspector.StatusBarButton>} buttonsProvider
      */
     setLongClickOptionsEnabled: function(buttonsProvider)
     {
         if (buttonsProvider) {
             if (!this._longClickOptionsData) {
                 this.makeLongClickEnabled();
 
-                this.longClickGlyph = document.createElement("div");
-                this.longClickGlyph.className = "fill long-click-glyph";
-                this.element.appendChild(this.longClickGlyph);
-
-                this.longClickGlyphShadow = document.createElement("div");
-                this.longClickGlyphShadow.className = "fill long-click-glyph shadow";
-                this.element.appendChild(this.longClickGlyphShadow);
+                this.longClickGlyph = this.element.createChild("div", "fill long-click-glyph");
+                this.longClickGlyphShadow = this.element.createChild("div", "fill long-click-glyph shadow");
 
                 var longClickDownListener = this._showOptions.bind(this);
                 this.addEventListener("longClickDown", longClickDownListener, this);
 
                 this._longClickOptionsData = {
                     glyphElement: this.longClickGlyph,
                     glyphShadowElement: this.longClickGlyphShadow,
                     longClickDownListener: longClickDownListener
                 };
             }
@@ skipping 329 matching lines @@
         var options = [];
         for (var index = 0; index < this._states.length; index++) {
             if (this._states[index] !== this.state && this._states[index] !== this._currentState)
                 options.push(this._buttons[index]);
         }
         return options;
     },
 
     __proto__: WebInspector.StatusBarButton.prototype
 }