DevTools: Reduce code via using document.createElementWithClass and document.createChild.

Source/devtools/front_end/resources/ResourcesPanel.js

 /*
  * Copyright (C) 2007, 2008, 2010 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  * Copyright (C) 2013 Samsung Electronics. 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
@@ skipping 808 matching lines @@
 
 WebInspector.BaseStorageTreeElement.prototype = {
     onattach: function()
     {
         this.listItemElement.removeChildren();
         if (this._iconClasses) {
             for (var i = 0; i < this._iconClasses.length; ++i)
                 this.listItemElement.classList.add(this._iconClasses[i]);
         }
 
-        var selectionElement = document.createElement("div");
-        selectionElement.className = "selection";
-        this.listItemElement.appendChild(selectionElement);
+        this.listItemElement.createChild("div", "selection");
 
-        if (!this._noIcon) {
-            this.imageElement = document.createElement("img");
-            this.imageElement.className = "icon";
-            this.listItemElement.appendChild(this.imageElement);
-        }
+        if (!this._noIcon)
+            this.imageElement = this.listItemElement.createChild("img", "icon");
 
-        this.titleElement = document.createElement("div");
-        this.titleElement.className = "base-storage-tree-element-title";
-        this._titleTextNode = document.createTextNode("");
-        this.titleElement.appendChild(this._titleTextNode);
+        this.titleElement = this.listItemElement.createChild("div", "base-storage-tree-element-title");
+        this._titleTextNode = this.titleElement.createTextChild("");
         this._updateTitle();
         this._updateSubtitle();
-        this.listItemElement.appendChild(this.titleElement);
     },
 
     get displayName()
     {
         return this._displayName;
     },
 
     _updateDisplayName: function()
     {
         this._displayName = this._titleText || "";
@@ skipping 12 matching lines @@
     },
 
     _updateSubtitle: function()
     {
         this._updateDisplayName();
 
         if (!this.titleElement)
             return;
 
         if (this._subtitleText) {
-            if (!this._subtitleElement) {
-                this._subtitleElement = document.createElement("span");
-                this._subtitleElement.className = "base-storage-tree-element-subtitle";
-                this.titleElement.appendChild(this._subtitleElement);
-            }
+            if (!this._subtitleElement)
+                this._subtitleElement = this.titleElement.createChild("span", "base-storage-tree-element-subtitle");
             this._subtitleElement.textContent = "(" + this._subtitleText + ")";
         } else if (this._subtitleElement) {
-            this.titleElement.removeChild(this._subtitleElement);
+            this._subtitleElement.remove();
             delete this._subtitleElement;
         }
     },
 
     /**
      * @override
      * @return {boolean}
      */
     onselect: function(selectedByUser)
     {
@@ skipping 281 matching lines @@
     },
 
     /**
      * @override
      */
     onattach: function()
     {
         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
 
         if (this._resource.type === WebInspector.resourceTypes.Image) {
-            var previewImage = document.createElement("img");
-            previewImage.className = "image-resource-icon-preview";
+            var iconElement = document.createElementWithClass("div", "icon");
+            var previewImage = iconElement.createChild("img", "image-resource-icon-preview");
             this._resource.populateImageSource(previewImage);
-
-            var iconElement = document.createElement("div");
-            iconElement.className = "icon";
-            iconElement.appendChild(previewImage);
             this.listItemElement.replaceChild(iconElement, this.imageElement);
         }
 
-        this._statusElement = document.createElement("div");
-        this._statusElement.className = "status";
+        this._statusElement = document.createElementWithClass("div", "status");
         this.listItemElement.insertBefore(this._statusElement, this.titleElement);
 
         this.listItemElement.draggable = true;
         this.listItemElement.addEventListener("dragstart", this._ondragstart.bind(this), false);
         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
 
         this._updateErrorsAndWarningsBubbles();
     },
 
     /**
      * @param {!MouseEvent} event
      * @return {boolean}
      */
     _ondragstart: function(event)
     {
         event.dataTransfer.setData("text/plain", this._resource.content);
         event.dataTransfer.effectAllowed = "copy";
         return true;
     },
 
     _handleContextMenuEvent: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendApplicableItems(this._resource);
         contextMenu.show();
     },
 
+    /**
+     * @param {string} x
+     */
     _setBubbleText: function(x)
     {
-        if (!this._bubbleElement) {
-            this._bubbleElement = document.createElement("div");
-            this._bubbleElement.className = "bubble";
-            this._statusElement.appendChild(this._bubbleElement);
-        }
-
+        if (!this._bubbleElement)
+            this._bubbleElement = this._statusElement.createChild("div", "bubble");
         this._bubbleElement.textContent = x;
     },
 
     _resetBubble: function()
     {
         if (this._bubbleElement) {
             this._bubbleElement.textContent = "";
             this._bubbleElement.classList.remove("warning");
             this._bubbleElement.classList.remove("error");
         }
@@ skipping 877 matching lines @@
 }
 
 WebInspector.StorageCategoryView.prototype = {
     setText: function(text)
     {
         this._emptyView.text = text;
     },
 
     __proto__: WebInspector.VBox.prototype
 }