[Devtools] Cleanup DataGrid's typecast and identifier naming

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 120 matching lines @@
  *   title: (string|undefined),
  *   titleDOMFragment: (?DocumentFragment|undefined),
  *   sortable: boolean,
  *   sort: (?WebInspector.DataGrid.Order|undefined),
  *   align: (?WebInspector.DataGrid.Align|undefined),
  *   fixedWidth: (boolean|undefined),
  *   editable: (boolean|undefined),
  *   nonSelectable: (boolean|undefined),
  *   longText: (boolean|undefined),
  *   disclosure: (boolean|undefined),
- *   identifier: (string|undefined),
  *   weight: (number|undefined)
  * }}
  */
 WebInspector.DataGrid.ColumnDescriptor;
 
 /** @enum {symbol} */
 WebInspector.DataGrid.Events = {
     SelectedNode: Symbol("SelectedNode"),
     DeselectedNode: Symbol("DeselectedNode"),
     SortingChanged: Symbol("SortingChanged"),
     ColumnsResized: Symbol("ColumnsResized"),
     PaddingChanged: Symbol("PaddingChanged")
 };
 
 /** @enum {string} */
 WebInspector.DataGrid.Order = {
     Ascending: "sort-ascending",
     Descending: "sort-descending"
 };
 
 /** @enum {string} */
 WebInspector.DataGrid.Align = {
     Center: "center",
     Right: "right"
 };
 
 WebInspector.DataGrid._preferredWidthSymbol = Symbol("preferredWidth");
+WebInspector.DataGrid._columnIdSymbol = Symbol("columnId");
 
 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);
+        var columnId = column.id;
+        if (columnId in this._columns)
+            this._innerRemoveColumn(columnId);
 
         if (position === undefined)
             position = this._columnsArray.length;
 
         this._columnsArray.splice(position, 0, column);
-        this._columns[columnIdentifier] = column;
+        this._columns[columnId] = column;
         if (column.disclosure)
-            this.disclosureColumnIdentifier = columnIdentifier;
+            this.disclosureColumnId = columnId;
 
         var cell = createElement("th");
-        cell.className = columnIdentifier + "-column";
-        cell.columnIdentifier = String(columnIdentifier);
-        this._headerTableHeaders[columnIdentifier] = cell;
+        cell.className = columnId + "-column";
+        cell[WebInspector.DataGrid._columnIdSymbol] = columnId;
+        this._headerTableHeaders[columnId] = cell;
 
         var div = createElement("div");
         if (column.titleDOMFragment)
             div.appendChild(column.titleDOMFragment);
         else
             div.textContent = column.title;
         cell.appendChild(div);
 
         if (column.sort) {
             cell.classList.add(column.sort);
@@ skipping 10 matching lines @@
     /**
      * @param {!WebInspector.DataGrid.ColumnDescriptor} column
      * @param {number=} position
      */
     addColumn: function(column, position)
     {
         this._innerAddColumn(column, position);
     },
 
     /**
-     * @param {string} columnIdentifier
+     * @param {string} columnId
      */
-    _innerRemoveColumn: function(columnIdentifier)
+    _innerRemoveColumn: function(columnId)
     {
-        var column = this._columns[columnIdentifier];
+        var column = this._columns[columnId];
         if (!column)
             return;
-        delete this._columns[columnIdentifier];
-        var index = this._columnsArray.findIndex(columnConfig => columnConfig.identifier === columnIdentifier);
+        delete this._columns[columnId];
+        var index = this._columnsArray.findIndex(columnConfig => columnConfig.id === columnId);
         this._columnsArray.splice(index, 1);
-        var cell = this._headerTableHeaders[columnIdentifier];
+        var cell = this._headerTableHeaders[columnId];
         if (cell.parentElement)
             cell.parentElement.removeChild(cell);
-        delete this._headerTableHeaders[columnIdentifier];
+        delete this._headerTableHeaders[columnId];
     },
 
     /**
-     * @param {string} columnIdentifier
+     * @param {string} columnId
      */
-    removeColumn: function(columnIdentifier)
+    removeColumn: function(columnId)
     {
-        this._innerRemoveColumn(columnIdentifier);
+        this._innerRemoveColumn(columnId);
     },
 
     /**
      * @param {string} cellClass
      */
     setCellClass: function(cellClass)
     {
         this._cellClass = cellClass;
     },
 
     _refreshHeader: function()
     {
         this._headerTableColumnGroup.removeChildren();
         this._dataTableColumnGroup.removeChildren();
         this._headerRow.removeChildren();
         this._topFillerRow.removeChildren();
         this._bottomFillerRow.removeChildren();
 
         for (var i = 0; i < this._visibleColumnsArray.length; ++i) {
             var column = this._visibleColumnsArray[i];
-            var columnIdentifier = column.identifier || String(i);
+            var columnId = column.id;
             var headerColumn = this._headerTableColumnGroup.createChild("col");
             var dataColumn = this._dataTableColumnGroup.createChild("col");
             if (column.width) {
                 headerColumn.style.width = column.width;
                 dataColumn.style.width = column.width;
             }
-            this._headerRow.appendChild(this._headerTableHeaders[columnIdentifier]);
+            this._headerRow.appendChild(this._headerTableHeaders[columnId]);
             this._topFillerRow.createChild("td", "top-filler-td");
-            this._bottomFillerRow.createChild("td", "bottom-filler-td").columnIdentifier_ = columnIdentifier;
+            this._bottomFillerRow.createChild("td", "bottom-filler-td")[WebInspector.DataGrid._columnIdSymbol] = columnId;
         }
 
         this._headerRow.createChild("th", "corner");
         this._topFillerRow.createChild("td", "corner").classList.add("top-filler-td");
         this._bottomFillerRow.createChild("td", "corner").classList.add("bottom-filler-td");
         this._headerTableColumnGroup.createChild("col", "corner");
         this._dataTableColumnGroup.createChild("col", "corner");
     },
 
     /**
@@ skipping 38 matching lines @@
     rootNode: function()
     {
         return this._rootNode;
     },
 
     _ondblclick: function(event)
     {
         if (this._editing || this._editingNode)
             return;
 
-        var columnIdentifier = this.columnIdentifierFromNode(event.target);
-        if (!columnIdentifier || !this._columns[columnIdentifier].editable)
+        var columnId = this.columnIdFromNode(event.target);
+        if (!columnId || !this._columns[columnId].editable)
             return;
         this._startEditing(event.target);
     },
 
     /**
      * @param {!WebInspector.DataGridNode} node
      * @param {number} cellIndex
      */
     _startEditingColumnOfDataGridNode: function(node, cellIndex)
     {
@@ skipping 38 matching lines @@
         this.updateWidths();
     },
 
     _startEditingConfig: function(element)
     {
         return new WebInspector.InplaceEditor.Config(this._editingCommitted.bind(this), this._editingCancelled.bind(this), element.textContent);
     },
 
     _editingCommitted: function(element, newText, oldText, context, moveDirection)
     {
-        var columnIdentifier = this.columnIdentifierFromNode(element);
-        if (!columnIdentifier) {
+        var columnId = this.columnIdFromNode(element);
+        if (!columnId) {
             this._editingCancelled(element);
             return;
         }
-        var column = this._columns[columnIdentifier];
+        var column = this._columns[columnId];
         var cellIndex = this._visibleColumnsArray.indexOf(column);
-        var textBeforeEditing = this._editingNode.data[columnIdentifier];
+        var textBeforeEditing = this._editingNode.data[columnId];
         var currentEditingNode = this._editingNode;
 
         /**
          * @param {boolean} wasChange
          * @this {WebInspector.DataGrid}
          */
         function moveToNextIfNeeded(wasChange)
         {
             if (!moveDirection)
                 return;
@@ skipping 30 matching lines @@
             }
         }
 
         if (textBeforeEditing === newText) {
             this._editingCancelled(element);
             moveToNextIfNeeded.call(this, false);
             return;
         }
 
         // Update the text in the datagrid that we typed
-        this._editingNode.data[columnIdentifier] = newText;
+        this._editingNode.data[columnId] = newText;
 
         // Make the callback - expects an editing node (table row), the column number that is being edited,
         // the text that used to be there, and the new text.
-        this._editCallback(this._editingNode, columnIdentifier, textBeforeEditing, newText);
+        this._editCallback(this._editingNode, columnId, textBeforeEditing, newText);
 
         if (this._editingNode.isCreationNode)
             this.addCreationNode(false);
 
         this._editingCancelled(element);
         moveToNextIfNeeded.call(this, true);
     },
 
     _editingCancelled: function(element)
     {
@@ skipping 13 matching lines @@
         for (var i = cellIndex + increment; (i >= 0) && (i < columns.length); i += increment) {
             if (columns[i].editable)
                 return i;
         }
         return -1;
     },
 
     /**
      * @return {?string}
      */
-    sortColumnIdentifier: function()
+    sortColumnId: function()
     {
         if (!this._sortColumnCell)
             return null;
-        return this._sortColumnCell.columnIdentifier;
+        return this._sortColumnCell[WebInspector.DataGrid._columnIdSymbol];
     },
 
     /**
      * @return {?string}
      */
     sortOrder: function()
     {
         if (!this._sortColumnCell || this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Ascending))
             return WebInspector.DataGrid.Order.Ascending;
         if (this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Descending))
@@ skipping 68 matching lines @@
     {
         var widths = [];
         for (var i = 0; i < this._columnsArray.length; ++i)
             widths.push((this._columnsArray[i].title || "").length);
 
         maxDescentLevel = maxDescentLevel || 0;
         var children = this._enumerateChildren(this._rootNode, [], maxDescentLevel + 1);
         for (var i = 0; i < children.length; ++i) {
             var node = children[i];
             for (var j = 0; j < this._columnsArray.length; ++j) {
-                var text = node.data[this._columnsArray[j].identifier] || "";
+                var text = node.data[this._columnsArray[j].id];
                 if (text.length > widths[j])
                     widths[j] = text.length;
             }
         }
 
         widths = this._autoSizeWidths(widths, minPercent, maxPercent);
 
         for (var i = 0; i < this._columnsArray.length; ++i)
             this._columnsArray[i].weight = widths[i];
         this._columnWidthsInitialized = false;
@@ skipping 59 matching lines @@
         this._loadColumnWeights();
     },
 
     _loadColumnWeights: function()
     {
         if (!this._columnWeightsSetting)
             return;
         var weights = this._columnWeightsSetting.get();
         for (var i = 0; i < this._columnsArray.length; ++i) {
             var column = this._columnsArray[i];
-            var weight = weights[column.identifier];
+            var weight = weights[column.id];
             if (weight)
                 column.weight = weight;
         }
         this._applyColumnWeights();
     },
 
     _saveColumnWeights: function()
     {
         if (!this._columnWeightsSetting)
             return;
         var weights = {};
         for (var i = 0; i < this._columnsArray.length; ++i) {
             var column = this._columnsArray[i];
-            weights[column.identifier] = column.weight;
+            weights[column.id] = column.weight;
         }
         this._columnWeightsSetting.set(weights);
     },
 
     wasShown: function()
     {
         this._loadColumnWeights();
     },
 
     willHide: function()
@@ skipping 40 matching lines @@
     },
 
     /**
      * @param {!Object.<string, boolean>} columnsVisibility
      */
     setColumnsVisiblity: function(columnsVisibility)
     {
         this._visibleColumnsArray = [];
         for (var i = 0; i < this._columnsArray.length; ++i) {
             var column = this._columnsArray[i];
-            if (columnsVisibility[column.identifier || String(i)])
+            if (columnsVisibility[column.id])
                 this._visibleColumnsArray.push(column);
         }
         this._refreshHeader();
         this._applyColumnWeights();
         var nodes = this._enumerateChildren(this.rootNode(), [], -1);
         for (var i = 0; i < nodes.length; ++i)
             nodes[i].refresh();
     },
 
     get scrollContainer()
@@ skipping 160 matching lines @@
     dataGridNodeFromNode: function(target)
     {
         var rowElement = target.enclosingNodeOrSelfWithNodeName("tr");
         return rowElement && rowElement._dataGridNode;
     },
 
     /**
      * @param {!Node} target
      * @return {?string}
      */
-    columnIdentifierFromNode: function(target)
+    columnIdFromNode: function(target)
     {
         var cellElement = target.enclosingNodeOrSelfWithNodeName("td");
-        return cellElement && cellElement.columnIdentifier_;
+        return cellElement && cellElement[WebInspector.DataGrid._columnIdSymbol];
     },
 
     _clickInHeaderCell: function(event)
     {
         var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
-        if (!cell || (cell.columnIdentifier === undefined) || !cell.classList.contains("sortable"))
+        if (!cell || (cell[WebInspector.DataGrid._columnIdSymbol] === undefined) || !cell.classList.contains("sortable"))
             return;
 
         var sortOrder = WebInspector.DataGrid.Order.Ascending;
         if ((cell === this._sortColumnCell) && this.isSortOrderAscending())
             sortOrder = WebInspector.DataGrid.Order.Descending;
 
         if (this._sortColumnCell)
             this._sortColumnCell.classList.remove(WebInspector.DataGrid.Order.Ascending, WebInspector.DataGrid.Order.Descending);
         this._sortColumnCell = cell;
 
         cell.classList.add(sortOrder);
 
         this.dispatchEventToListeners(WebInspector.DataGrid.Events.SortingChanged);
     },
 
     /**
-     * @param {string} columnIdentifier
+     * @param {string} columnId
      * @param {!WebInspector.DataGrid.Order} sortOrder
      */
-    markColumnAsSortedBy: function(columnIdentifier, sortOrder)
+    markColumnAsSortedBy: function(columnId, sortOrder)
     {
         if (this._sortColumnCell)
             this._sortColumnCell.classList.remove(WebInspector.DataGrid.Order.Ascending, WebInspector.DataGrid.Order.Descending);
-        this._sortColumnCell = this._headerTableHeaders[columnIdentifier];
+        this._sortColumnCell = this._headerTableHeaders[columnId];
         this._sortColumnCell.classList.add(sortOrder);
     },
 
     /**
-     * @param {string} columnIdentifier
+     * @param {string} columnId
      * @return {!Element}
      */
-    headerTableHeader: function(columnIdentifier)
+    headerTableHeader: function(columnId)
     {
-        return this._headerTableHeaders[columnIdentifier];
+        return this._headerTableHeaders[columnId];
     },
 
     _mouseDownInDataTable: function(event)
     {
         var gridNode = this.dataGridNodeFromNode(event.target);
         if (!gridNode || !gridNode.selectable)
             return;
 
         if (gridNode.isEventWithinDisclosureTriangle(event))
             return;
 
-        var columnIdentifier = this.columnIdentifierFromNode(event.target);
-        if (columnIdentifier && this._columns[columnIdentifier].nonSelectable)
+        var columnId = this.columnIdFromNode(event.target);
+        if (columnId && this._columns[columnId].nonSelectable)
             return;
 
         if (event.metaKey) {
             if (gridNode.selected)
                 gridNode.deselect();
             else
                 gridNode.select();
         } else
             gridNode.select();
     },
 
     _contextMenuInDataTable: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
 
         var gridNode = this.dataGridNodeFromNode(event.target);
         if (this._refreshCallback && (!gridNode || gridNode !== this.creationNode))
             contextMenu.appendItem(WebInspector.UIString("Refresh"), this._refreshCallback.bind(this));
 
         if (gridNode && gridNode.selectable && !gridNode.isEventWithinDisclosureTriangle(event)) {
             if (this._editCallback) {
                 if (gridNode === this.creationNode)
                     contextMenu.appendItem(WebInspector.UIString.capitalize("Add ^new"), this._startEditing.bind(this, event.target));
                 else {
-                    var columnIdentifier = this.columnIdentifierFromNode(event.target);
-                    if (columnIdentifier && this._columns[columnIdentifier].editable)
-                        contextMenu.appendItem(WebInspector.UIString("Edit \"%s\"", this._columns[columnIdentifier].title), this._startEditing.bind(this, event.target));
+                    var columnId = this.columnIdFromNode(event.target);
+                    if (columnId && this._columns[columnId].editable)
+                        contextMenu.appendItem(WebInspector.UIString("Edit \"%s\"", this._columns[columnId].title), this._startEditing.bind(this, event.target));
                 }
             }
             if (this._deleteCallback && gridNode !== this.creationNode)
                 contextMenu.appendItem(WebInspector.UIString.capitalize("Delete"), this._deleteCallback.bind(this, gridNode));
             if (this._contextMenuCallback)
                 this._contextMenuCallback(contextMenu, gridNode);
         }
 
         contextMenu.show();
     },
@@ skipping 108 matching lines @@
 
     /**
      * @param {string} columnId
      * @return {number}
      */
     columnOffset: function(columnId)
     {
         if (!this.element.offsetWidth)
             return 0;
         for (var i = 1; i < this._visibleColumnsArray.length; ++i) {
-            if (columnId === this._visibleColumnsArray[i].identifier) {
+            if (columnId === this._visibleColumnsArray[i].id) {
                 if (this._resizers[i - 1])
                     return this._resizers[i - 1].__position;
             }
         }
         return 0;
     },
 
     _endResizerDragging: function(event)
     {
         this._currentResizer = null;
@@ skipping 105 matching lines @@
     },
 
     /**
      * @protected
      */
     createCells: function()
     {
         this._element.removeChildren();
         var columnsArray = this.dataGrid._visibleColumnsArray;
         for (var i = 0; i < columnsArray.length; ++i)
-            this._element.appendChild(this.createCell(columnsArray[i].identifier || String(i)));
+            this._element.appendChild(this.createCell(columnsArray[i].id));
         this._element.appendChild(this._createTDWithClass("corner"));
     },
 
     get data()
     {
         return this._data;
     },
 
     set data(x)
     {
@@ skipping 129 matching lines @@
     _createTDWithClass: function(className)
     {
         var cell = createElementWithClass("td", className);
         var cellClass = this.dataGrid._cellClass;
         if (cellClass)
             cell.classList.add(cellClass);
         return cell;
     },
 
     /**
-     * @param {string} columnIdentifier
+     * @param {string} columnId
      * @return {!Element}
      */
-    createTD: function(columnIdentifier)
+    createTD: function(columnId)
     {
-        var cell = this._createTDWithClass(columnIdentifier + "-column");
-        cell.columnIdentifier_ = columnIdentifier;
+        var cell = this._createTDWithClass(columnId + "-column");
+        cell[WebInspector.DataGrid._columnIdSymbol] = columnId;
 
-        var alignment = this.dataGrid._columns[columnIdentifier].align;
+        var alignment = this.dataGrid._columns[columnId].align;
         if (alignment)
             cell.classList.add(alignment);
 
-        if (columnIdentifier === this.dataGrid.disclosureColumnIdentifier) {
+        if (columnId === this.dataGrid.disclosureColumnId) {
             cell.classList.add("disclosure");
             if (this.leftPadding)
                 cell.style.setProperty("padding-left", this.leftPadding + "px");
         }
 
         return cell;
     },
 
     /**
-     * @param {string} columnIdentifier
+     * @param {string} columnId
      * @return {!Element}
      */
-    createCell: function(columnIdentifier)
+    createCell: function(columnId)
     {
-        var cell = this.createTD(columnIdentifier);
+        var cell = this.createTD(columnId);
 
-        var data = this.data[columnIdentifier];
+        var data = this.data[columnId];
         if (data instanceof Node) {
             cell.appendChild(data);
         } else {
             cell.textContent = data;
-            if (this.dataGrid._columns[columnIdentifier].longText)
+            if (this.dataGrid._columns[columnId].longText)
                 cell.title = data;
         }
 
         return cell;
     },
 
     /**
      * @return {number}
      */
     nodeSelfHeight: function()
@@ skipping 477 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
 };