[Devtools] Cleanup DataGrid.js

third_party/WebKit/Source/devtools/front_end/ui_lazy/DataGrid.js

 /*
  * Copyright (C) 2008 Apple 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.
  * 2. Redistributions in binary form must reproduce the above copyright
  *        notice, this list of conditions and the following disclaimer in the
@@ skipping 21 matching lines @@
  * @param {function()=} refreshCallback
  * @param {function(!WebInspector.ContextMenu, !WebInspector.DataGridNode)=} contextMenuCallback
  */
 WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, refreshCallback, contextMenuCallback)
 {
     this.element = createElementWithClass("div", "data-grid");
     WebInspector.appendStyle(this.element, "ui_lazy/dataGrid.css");
     this.element.tabIndex = 0;
     this.element.addEventListener("keydown", this._keyDown.bind(this), false);
 
-    var headerContainer = createElementWithClass("div", "header-container");
-    /** @type {!Element} */
-    this._headerTable = headerContainer.createChild("table", "header");
-    /** @type {!Object.<string, !Element>} */
-    this._headerTableHeaders = {};
-
-    /** @type {!Element} */
-    this._scrollContainer = createElementWithClass("div", "data-container");
-    /** @type {!Element} */
-    this._dataTable = this._scrollContainer.createChild("table", "data");
-
-    this._dataTable.addEventListener("mousedown", this._mouseDownInDataTable.bind(this));
-    this._dataTable.addEventListener("click", this._clickInDataTable.bind(this), true);
-
-    this._dataTable.addEventListener("contextmenu", this._contextMenuInDataTable.bind(this), true);
-
-    // FIXME: Add a createCallback which is different from editCallback and has different
-    // behavior when creating a new node.
-    if (editCallback)
-        this._dataTable.addEventListener("dblclick", this._ondblclick.bind(this), false);
     /** @type {function(!WebInspector.DataGridNode, string, string, string)|undefined} */
     this._editCallback = editCallback;
     /** @type {function(!WebInspector.DataGridNode)|undefined} */
     this._deleteCallback = deleteCallback;
     /** @type {function()|undefined} */
     this._refreshCallback = refreshCallback;
     /** @type {function(!WebInspector.ContextMenu, !WebInspector.DataGridNode)|undefined} */
     this._contextMenuCallback = contextMenuCallback;
 
-    this.element.appendChild(headerContainer);
-    this.element.appendChild(this._scrollContainer);
+    var headerContainer = this.element.createChild("div", "header-container");
+    /** @type {!Element} */
+    this._headerTable = headerContainer.createChild("table", "header");
+    /** @type {!Object.<string, !Element>} */
+    this._headerTableHeaders = {};
+    /** @type {!Element} */
+    this._scrollContainer = this.element.createChild("div", "data-container");
+    /** @type {!Element} */
+    this._dataTable = this._scrollContainer.createChild("table", "data");
 
-    /** @type {!Element} */
-    this._headerRow = createElement("tr");
-    /** @type {!Element} */
-    this._headerTableColumnGroup = createElement("colgroup");
-    /** @type {!Element} */
-    this._dataTableColumnGroup = createElement("colgroup");
-
-    /** @type {!Element} */
-    this._topFillerRow = createElementWithClass("tr", "data-grid-filler-row revealed");
-    /** @type {!Element} */
-    this._bottomFillerRow = createElementWithClass("tr", "data-grid-filler-row revealed");
-    this.setVerticalPadding(0, 0);
+    // FIXME: Add a createCallback which is different from editCallback and has different
+    // behavior when creating a new node.
+    if (editCallback)
+        this._dataTable.addEventListener("dblclick", this._ondblclick.bind(this), false);
+    this._dataTable.addEventListener("mousedown", this._mouseDownInDataTable.bind(this));
+    this._dataTable.addEventListener("click", this._clickInDataTable.bind(this), true);
+    this._dataTable.addEventListener("contextmenu", this._contextMenuInDataTable.bind(this), true);
 
     /** @type {boolean} */
     this._inline = false;
 
     /** @type {!Array.<!WebInspector.DataGrid.ColumnDescriptor>} */
     this._columnsArray = [];
     /** @type {!Object.<string, !WebInspector.DataGrid.ColumnDescriptor>} */
     this._columns = {};
     /** @type {!Array.<!WebInspector.DataGrid.ColumnDescriptor>} */
     this._visibleColumnsArray = columnsArray;
 
     columnsArray.forEach(column => this._innerAddColumn(column));
 
     /** @type {?string} */
     this._cellClass = null;
 
-    this._headerTable.appendChild(this._headerTableColumnGroup);
-    this.headerTableBody.appendChild(this._headerRow);
+    /** @type {!Element} */
+    this._headerTableColumnGroup = this._headerTable.createChild("colgroup");
+    /** @type {!Element} */
+    this._headerTableBody = this._headerTable.createChild("tbody");
+    /** @type {!Element} */
+    this._headerRow = this._headerTableBody.createChild("tr");
 
-    this._dataTable.appendChild(this._dataTableColumnGroup);
-    this.dataTableBody.appendChild(this._topFillerRow);
-    this.dataTableBody.appendChild(this._bottomFillerRow);
+    /** @type {!Element} */
+    this._dataTableColumnGroup = this._dataTable.createChild("colgroup");
+    /**
+     * @protected
+     * @type {!Element}
+     */
+    this.dataTableBody = this._dataTable.createChild("tbody");
+    /** @type {!Element} */
+    this._topFillerRow = this.dataTableBody.createChild("tr", "data-grid-filler-row revealed");
+    /** @type {!Element} */
+    this._bottomFillerRow = this.dataTableBody.createChild("tr", "data-grid-filler-row revealed");
 
+    this.setVerticalPadding(0, 0);
     this._refreshHeader();
 
     /** @type {boolean} */
     this._editing = false;
     /** @type {?WebInspector.DataGridNode} */
     this.selectedNode = null;
     /** @type {boolean} */
     this.expandNodesWhenArrowing = false;
     this.setRootNode(new WebInspector.DataGridNode());
     /** @type {number} */
@@ skipping 48 matching lines @@
 /** @enum {string} */
 WebInspector.DataGrid.Align = {
     Center: "center",
     Right: "right"
 }
 
 WebInspector.DataGrid._preferredWidthSymbol = Symbol("preferredWidth");
 
 WebInspector.DataGrid.prototype = {
     /**
+     * @return {!Element}
+     */
+    headerTableBody: function()
+    {
+        return this._headerTableBody;
+    },
+
+    /**
      * @param {!WebInspector.DataGrid.ColumnDescriptor} column
      * @param {number=} position
      */
     _innerAddColumn: function(column, position)
     {
         var columnIdentifier = column.identifier = column.id || String(Object.keys(this._columns).length);
         if (columnIdentifier in this._columns)
             this._innerRemoveColumn(columnIdentifier);
 
         if (position === undefined)
@@ skipping 324 matching lines @@
     },
 
     /**
      * @return {boolean}
      */
     isSortOrderAscending: function()
     {
         return !this._sortColumnCell || this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Ascending);
     },
 
-    get headerTableBody()
-    {
-        if ("_headerTableBody" in this)
-            return this._headerTableBody;
-
-        this._headerTableBody = this._headerTable.getElementsByTagName("tbody")[0];
-        if (!this._headerTableBody) {
-            this._headerTableBody = this.element.ownerDocument.createElement("tbody");
-            this._headerTable.insertBefore(this._headerTableBody, this._headerTable.tFoot);
-        }
-
-        return this._headerTableBody;
-    },
-
-    get dataTableBody()
-    {
-        if ("_dataTableBody" in this)
-            return this._dataTableBody;
-
-        this._dataTableBody = this._dataTable.getElementsByTagName("tbody")[0];
-        if (!this._dataTableBody) {
-            this._dataTableBody = this.element.ownerDocument.createElement("tbody");
-            this._dataTable.insertBefore(this._dataTableBody, this._dataTable.tFoot);
-        }
-
-        return this._dataTableBody;
-    },
-
     /**
      * @param {!Array.<number>} widths
      * @param {number} minPercent
      * @param {number=} maxPercent
      * @return {!Array.<number>}
      */
     _autoSizeWidths: function(widths, minPercent, maxPercent)
     {
         if (minPercent)
             minPercent = Math.min(minPercent, Math.floor(100 / widths.length));
@@ skipping 88 matching lines @@
     //
     // IMPORTANT: This function MUST be called once after the element of the
     // DataGrid is attached to its parent element and every subsequent time the
     // width of the parent element is changed in order to make it possible to
     // resize the columns.
     //
     // If this function is not called after the DataGrid is attached to its
     // parent element, then the DataGrid's columns will not be resizable.
     updateWidths: function()
     {
-        var headerTableColumns = this._headerTableColumnGroup.children;
-
-        // Use container size to avoid changes of table width caused by change of column widths.
-        var tableWidth = this.element.offsetWidth - this._cornerWidth;
-        var numColumns = headerTableColumns.length - 1; // Do not process corner column.
-
         // Do not attempt to use offsetes if we're not attached to the document tree yet.
         if (!this._columnWidthsInitialized && this.element.offsetWidth) {
             // Give all the columns initial widths now so that during a resize,
             // when the two columns that get resized get a percent value for
             // their widths, all the other columns already have percent values
             // for their widths.
+            var headerTableColumns = this._headerTableColumnGroup.children;
+
+            // Use container size to avoid changes of table width caused by change of column widths.
+            var tableWidth = this.element.offsetWidth - this._cornerWidth;
+            var cells = this._headerTableBody.rows[0].cells;
+            var numColumns = cells.length - 1; // Do not process corner column.
             for (var i = 0; i < numColumns; i++) {
-                var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWidth;
                 var column = this._visibleColumnsArray[i];
                 if (!column.weight)
-                    column.weight = 100 * columnWidth / tableWidth;
+                    column.weight = 100 * cells[i].offsetWidth / tableWidth;
             }
             this._columnWidthsInitialized = true;
         }
         this._applyColumnWeights();
     },
 
     /**
      * @param {string} name
      */
     setName: function(name)
@@ skipping 41 matching lines @@
     {
         var tableWidth = this.element.offsetWidth - this._cornerWidth;
         if (tableWidth <= 0)
             return;
 
         var sumOfWeights = 0.0;
         var fixedColumnWidths = [];
         for (var i = 0; i < this._visibleColumnsArray.length; ++i) {
             var column = this._visibleColumnsArray[i];
             if (column.fixedWidth) {
-                var width = this._headerTableColumnGroup.children[i][WebInspector.DataGrid._preferredWidthSymbol] || this.headerTableBody.rows[0].cells[i].offsetWidth;
+                var width = this._headerTableColumnGroup.children[i][WebInspector.DataGrid._preferredWidthSymbol] || this._headerTableBody.rows[0].cells[i].offsetWidth;
                 fixedColumnWidths[i] = width;
                 tableWidth -= width;
             } else {
                 sumOfWeights += this._visibleColumnsArray[i].weight;
             }
         }
         var sum = 0;
         var lastOffset = 0;
 
         for (var i = 0; i < this._visibleColumnsArray.length; ++i) {
@@ skipping 44 matching lines @@
         var left = [];
         var resizers = this._resizers;
 
         while (resizers.length > numColumns - 1)
             resizers.pop().remove();
 
         for (var i = 0; i < numColumns - 1; i++) {
             // Get the width of the cell in the first (and only) row of the
             // header table in order to determine the width of the column, since
             // it is not possible to query a column for its width.
-            left[i] = (left[i - 1] || 0) + this.headerTableBody.rows[0].cells[i].offsetWidth;
+            left[i] = (left[i - 1] || 0) + this._headerTableBody.rows[0].cells[i].offsetWidth;
         }
 
         // Make n - 1 resizers for n columns.
         for (var i = 0; i < numColumns - 1; i++) {
             var resizer = resizers[i];
             if (!resizer) {
                 // This is the first call to updateWidth, so the resizers need
                 // to be created.
                 resizer = createElement("div");
                 resizer.__index = i;
@@ skipping 274 matching lines @@
 
     _resizerDragging: function(event)
     {
         var resizer = this._currentResizer;
         if (!resizer)
             return;
 
         // Constrain the dragpoint to be within the containing div of the
         // datagrid.
         var dragPoint = event.clientX - this.element.totalOffsetLeft();
-        var firstRowCells = this.headerTableBody.rows[0].cells;
+        var firstRowCells = this._headerTableBody.rows[0].cells;
         var leftEdgeOfPreviousColumn = 0;
         // Constrain the dragpoint to be within the space made up by the
         // column directly to the left and the column directly to the right.
         var leftCellIndex = resizer.__index;
         var rightCellIndex = leftCellIndex + 1;
         for (var i = 0; i < leftCellIndex; i++)
             leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
 
         // Differences for other resize methods
         if (this._resizeMethod === WebInspector.DataGrid.ResizeMethod.Last) {
@@ skipping 856 matching lines @@
     detachChildWidgets: function()
     {
         WebInspector.Widget.prototype.detachChildWidgets.call(this);
         for (var dataGrid of this._dataGrids)
             this.element.removeChild(dataGrid.element);
         this._dataGrids = [];
     },
 
     __proto__: WebInspector.VBox.prototype
 }