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

Source/devtools/front_end/sources/NavigatorView.js

 /*
  * Copyright (C) 2012 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:
  *
  * 1. Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *
@@ skipping 17 matching lines @@
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.NavigatorView = function()
 {
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("navigatorView.css");
 
-    var scriptsTreeElement = document.createElement("ol");
+    this.element.classList.add("navigator-container");
+    var scriptsOutlineElement = this.element.createChild("div", "outline-disclosure navigator");
+    var scriptsTreeElement = scriptsOutlineElement.createChild("ol");
     this._scriptsTree = new WebInspector.NavigatorTreeOutline(scriptsTreeElement);
 
-    var scriptsOutlineElement = document.createElement("div");
-    scriptsOutlineElement.classList.add("outline-disclosure");
-    scriptsOutlineElement.classList.add("navigator");
-    scriptsOutlineElement.appendChild(scriptsTreeElement);
-
-    this.element.classList.add("navigator-container");
-    this.element.appendChild(scriptsOutlineElement);
     this.setDefaultFocusedElement(this._scriptsTree.element);
 
     /** @type {!Map.<!WebInspector.UISourceCode, !WebInspector.NavigatorUISourceCodeTreeNode>} */
     this._uiSourceCodeNodes = new Map();
     /** @type {!Map.<!WebInspector.NavigatorTreeNode, !StringMap.<!WebInspector.NavigatorFolderTreeNode>>} */
     this._subfolderNodes = new Map();
 
     this._rootNode = new WebInspector.NavigatorRootTreeNode(this);
     this._rootNode.populate();
 
@@ skipping 613 matching lines @@
 
 WebInspector.BaseNavigatorTreeElement.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-navigator-tree-element-title";
-        this._titleTextNode = document.createTextNode("");
-        this._titleTextNode.textContent = this._titleText;
-        this.titleElement.appendChild(this._titleTextNode);
-        this.listItemElement.appendChild(this.titleElement);
+        this.titleElement = this.listItemElement.createChild("div", "base-navigator-tree-element-title");
+        this.titleElement.textContent = this._titleText
     },
 
+    /**
+     * @param {!Array.<string>} iconClasses
+     */
     updateIconClasses: function(iconClasses)
     {
         for (var i = 0; i < this._iconClasses.length; ++i)
             this.listItemElement.classList.remove(this._iconClasses[i]);
         this._iconClasses = iconClasses;
         for (var i = 0; i < this._iconClasses.length; ++i)
             this.listItemElement.classList.add(this._iconClasses[i]);
     },
 
     onreveal: function()
@@ skipping 716 matching lines @@
 
     willRemoveChild: function(node)
     {
         if (node._isMerged || !this.isPopulated())
             return;
         this._treeElement.removeChild(node._treeElement);
     },
 
     __proto__: WebInspector.NavigatorTreeNode.prototype
 }