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

Source/devtools/front_end/timeline/TimelineView.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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.
@@ skipping 132 matching lines @@
         this._timelineGrid.addEventDividers(dividers);
     },
 
     _updateFrameBars: function(frames)
     {
         var clientWidth = this._graphRowsElementWidth;
         if (this._frameContainer) {
             this._frameContainer.removeChildren();
         } else {
             const frameContainerBorderWidth = 1;
-            this._frameContainer = document.createElement("div");
-            this._frameContainer.classList.add("fill");
-            this._frameContainer.classList.add("timeline-frame-container");
+            this._frameContainer = document.createElementWithClass("div", "fill timeline-frame-container");
             this._frameContainer.style.height = WebInspector.TimelinePanel.rowHeight + frameContainerBorderWidth + "px";
             this._frameContainer.addEventListener("dblclick", this._onFrameDoubleClicked.bind(this), false);
             this._frameContainer.addEventListener("click", this._onFrameClicked.bind(this), false);
         }
         this._frameStripByFrame.clear();
 
         var dividers = [];
 
         for (var i = 0; i < frames.length; ++i) {
             var frame = frames[i];
             var frameStart = this._calculator.computePosition(frame.startTime);
             var frameEnd = this._calculator.computePosition(frame.endTime);
 
-            var frameStrip = document.createElement("div");
-            frameStrip.className = "timeline-frame-strip";
+            var frameStrip = document.createElementWithClass("div", "timeline-frame-strip");
             var actualStart = Math.max(frameStart, 0);
             var width = frameEnd - actualStart;
             frameStrip.style.left = actualStart + "px";
             frameStrip.style.width = width + "px";
             frameStrip._frame = frame;
             this._frameStripByFrame.put(frame, frameStrip);
 
             const minWidthForFrameInfo = 60;
             if (width > minWidthForFrameInfo)
                 frameStrip.textContent = Number.millisToString(frame.endTime - frame.startTime, true);
@@ skipping 892 matching lines @@
             this._dataElement.removeChildren();
 
         this._warningElement.classList.toggle("hidden", !presentationRecord.hasWarnings() && !presentationRecord.childHasWarnings());
         this._warningElement.classList.toggle("timeline-tree-item-child-warning", presentationRecord.childHasWarnings() && !presentationRecord.hasWarnings());
 
         if (presentationRecord.coalesced()) {
             this._dataElement.createTextChild(WebInspector.UIString("× %d", presentationRecord.presentationChildren().length));
         } else {
             var detailsNode = uiUtils.buildDetailsNode(record, this._linkifier, loadedFromFile);
             if (detailsNode) {
-                this._dataElement.appendChild(document.createTextNode("("));
+                this._dataElement.createTextChild("(");
                 this._dataElement.appendChild(detailsNode);
-                this._dataElement.appendChild(document.createTextNode(")"));
+                this._dataElement.createTextChild(")");
             }
         }
 
         this._expandArrowElement.classList.toggle("parent", presentationRecord.expandable());
         this._expandArrowElement.classList.toggle("expanded", !!presentationRecord.visibleChildrenCount());
         this._record.setListRow(this);
     },
 
     highlight: function(regExp, domChanges)
     {
@@ skipping 61 matching lines @@
  * @param {function()} scheduleRefresh
  */
 WebInspector.TimelineRecordGraphRow = function(graphContainer, selectRecord, scheduleRefresh)
 {
     this.element = document.createElement("div");
     this.element.row = this;
     this.element.addEventListener("mouseover", this._onMouseOver.bind(this), false);
     this.element.addEventListener("mouseout", this._onMouseOut.bind(this), false);
     this.element.addEventListener("click", this._onClick.bind(this), false);
 
-    this._barAreaElement = document.createElement("div");
-    this._barAreaElement.className = "timeline-graph-bar-area";
-    this.element.appendChild(this._barAreaElement);
+    this._barAreaElement = this.element.createChild("div", "timeline-graph-bar-area");
 
-    this._barCpuElement = document.createElement("div");
-    this._barCpuElement.className = "timeline-graph-bar cpu"
+    this._barCpuElement = this._barAreaElement.createChild("div", "timeline-graph-bar cpu");
     this._barCpuElement.row = this;
-    this._barAreaElement.appendChild(this._barCpuElement);
 
-    this._barElement = document.createElement("div");
-    this._barElement.className = "timeline-graph-bar";
+    this._barElement = this._barAreaElement.createChild("div", "timeline-graph-bar");
     this._barElement.row = this;
-    this._barAreaElement.appendChild(this._barElement);
 
     this._expandElement = new WebInspector.TimelineExpandableElement(graphContainer);
 
     this._selectRecord = selectRecord;
     this._scheduleRefresh = scheduleRefresh;
 }
 
 WebInspector.TimelineRecordGraphRow.prototype = {
     /**
      * @param {!WebInspector.TimelinePresentationModel.Record} presentationRecord
@@ skipping 98 matching lines @@
             if (!record.collapsed()) {
                 this._element.style.height = (record.visibleChildrenCount() + 1) * rowHeight + "px";
                 this._element.classList.add("timeline-expandable-expanded");
                 this._element.classList.remove("timeline-expandable-collapsed");
             } else {
                 this._element.style.height = rowHeight + "px";
                 this._element.classList.add("timeline-expandable-collapsed");
                 this._element.classList.remove("timeline-expandable-expanded");
             }
             this._element.classList.remove("hidden");
-        } else
+        } else {
             this._element.classList.add("hidden");
+        }
     },
 
     _dispose: function()
     {
         this._element.remove();
     }
 }