1 /* 2 * Copyright (C) 2008 Apple Inc. All Rights Reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions 6 * are met: 7 * 1. Redistributions of source code must retain the above copyright 8 * notice, this list of conditions and the following disclaimer. 9 * 2. Redistributions in binary form must reproduce the above copyright 10 * notice, this list of conditions and the following disclaimer in the 11 * documentation and/or other materials provided with the distribution. 12 * 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY 14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR 17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR 20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 */ 25 26 /** 27 * @constructor 28 * @extends {WebInspector.View} 29 * @param {!Array.<!WebInspector.DataGrid.ColumnDescriptor>} columnsArray 30 * @param {function(!WebInspector.DataGridNode, string, string, string)=} editCallback 31 * @param {function(!WebInspector.DataGridNode)=} deleteCallback 32 * @param {function()=} refreshCallback 33 * @param {function(!WebInspector.ContextMenu, !WebInspector.DataGridNode)=} contextMenuCallback 34 */ 35 WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, refreshCallback, contextMenuCallback) 36 { 37 WebInspector.View.call(this); 38 this.registerRequiredCSS("dataGrid.css"); 39 40 this.element.className = "data-grid"; // Override 41 this.element.tabIndex = 0; 42 this.element.addEventListener("keydown", this._keyDown.bind(this), false); 43 44 var headerContainer = document.createElementWithClass("div", "header-container"); 45 /** @type {!Element} */ 46 this._headerTable = headerContainer.createChild("table", "header"); 47 /** @type {!Object.<string, !Element>} */ 48 this._headerTableHeaders = {}; 49 50 /** @type {!Element} */ 51 this._scrollContainer = document.createElementWithClass("div", "data-container"); 52 /** @type {!Element} */ 53 this._dataTable = this._scrollContainer.createChild("table", "data"); 54 55 this._dataTable.addEventListener("mousedown", this._mouseDownInDataTable.bind(this), true); 56 this._dataTable.addEventListener("click", this._clickInDataTable.bind(this), true); 57 58 this._dataTable.addEventListener("contextmenu", this._contextMenuInDataTable.bind(this), true); 59 60 // FIXME: Add a createCallback which is different from editCallback and has different 61 // behavior when creating a new node. 62 if (editCallback) 63 this._dataTable.addEventListener("dblclick", this._ondblclick.bind(this), false); 64 /** @type {function(!WebInspector.DataGridNode, string, string, string)|undefined} */ 65 this._editCallback = editCallback; 66 /** @type {function(!WebInspector.DataGridNode)|undefined} */ 67 this._deleteCallback = deleteCallback; 68 /** @type {function()|undefined} */ 69 this._refreshCallback = refreshCallback; 70 /** @type {function(!WebInspector.ContextMenu, !WebInspector.DataGridNode)|undefined} */ 71 this._contextMenuCallback = contextMenuCallback; 72 73 this.element.appendChild(headerContainer); 74 this.element.appendChild(this._scrollContainer); 75 76 /** @type {!Element} */ 77 this._headerRow = document.createElement("tr"); 78 /** @type {!Element} */ 79 this._headerTableColumnGroup = document.createElement("colgroup"); 80 /** @type {!Element} */ 81 this._dataTableColumnGroup = document.createElement("colgroup"); 82 83 /** @type {!Element} */ 84 this._topFillerRow = document.createElementWithClass("tr", "revealed"); 85 /** @type {!Element} */ 86 this._bottomFillerRow = document.createElementWithClass("tr", "revealed"); 87 this.setVerticalPadding(0, 0); 88 89 /** @type {!Array.<!WebInspector.DataGrid.ColumnDescriptor>} */ 90 this._columnsArray = columnsArray; 91 /** @type {!Array.<!WebInspector.DataGrid.ColumnDescriptor>} */ 92 this._visibleColumnsArray = columnsArray; 93 /** @type {!Object.<string, !WebInspector.DataGrid.ColumnDescriptor>} */ 94 this._columns = {}; 95 96 /** @type {?string} */ 97 this._cellClass = null; 98 99 for (var i = 0; i < columnsArray.length; ++i) { 100 var column = columnsArray[i]; 101 var columnIdentifier = column.identifier = column.id || i; 102 this._columns[columnIdentifier] = column; 103 if (column.disclosure) 104 this.disclosureColumnIdentifier = columnIdentifier; 105 106 var cell = document.createElement("th"); 107 cell.className = columnIdentifier + "-column"; 108 cell.columnIdentifier = columnIdentifier; 109 this._headerTableHeaders[columnIdentifier] = cell; 110 111 var div = document.createElement("div"); 112 if (column.titleDOMFragment) 113 div.appendChild(column.titleDOMFragment); 114 else 115 div.textContent = column.title; 116 cell.appendChild(div); 117 118 if (column.sort) { 119 cell.classList.add(column.sort); 120 this._sortColumnCell = cell; 121 } 122 123 if (column.sortable) { 124 cell.addEventListener("click", this._clickInHeaderCell.bind(this), false); 125 cell.classList.add("sortable"); 126 } 127 } 128 129 this._headerTable.appendChild(this._headerTableColumnGroup); 130 this.headerTableBody.appendChild(this._headerRow); 131 132 this._dataTable.appendChild(this._dataTableColumnGroup); 133 this.dataTableBody.appendChild(this._topFillerRow); 134 this.dataTableBody.appendChild(this._bottomFillerRow); 135 136 this._refreshHeader(); 137 138 /** @type {boolean} */ 139 this._editing = false; 140 /** @type {?WebInspector.DataGridNode} */ 141 this.selectedNode = null; 142 /** @type {boolean} */ 143 this.expandNodesWhenArrowing = false; 144 this.setRootNode(new WebInspector.DataGridNode()); 145 /** @type {number} */ 146 this.indentWidth = 15; 147 /** @type {!Array.<!Element|{__index: number, __position: number}>} */ 148 this._resizers = []; 149 /** @type {boolean} */ 150 this._columnWidthsInitialized = false; 151 /** @type {number} */ 152 this._cornerWidth = WebInspector.DataGrid.CornerWidth; 153 /** @type {!WebInspector.DataGrid.ResizeMethod} */ 154 this._resizeMethod = WebInspector.DataGrid.ResizeMethod.Nearest; 155 } 156 157 // Keep in sync with .data-grid col.corner style rule. 158 WebInspector.DataGrid.CornerWidth = 14; 159 160 /** @typedef {!{id: ?string, editable: boolean, longText: ?boolean, sort: !WebInspector.DataGrid.Order, sortable: boolean, align: !WebInspector.DataGrid.Align}} */ 161 WebInspector.DataGrid.ColumnDescriptor; 162 163 WebInspector.DataGrid.Events = { 164 SelectedNode: "SelectedNode", 165 DeselectedNode: "DeselectedNode", 166 SortingChanged: "SortingChanged", 167 ColumnsResized: "ColumnsResized" 168 } 169 170 /** @enum {string} */ 171 WebInspector.DataGrid.Order = { 172 Ascending: "sort-ascending", 173 Descending: "sort-descending" 174 } 175 176 /** @enum {string} */ 177 WebInspector.DataGrid.Align = { 178 Center: "center", 179 Right: "right" 180 } 181 182 WebInspector.DataGrid.prototype = { 183 /** 184 * @param {string} cellClass 185 */ 186 setCellClass: function(cellClass) 187 { 188 this._cellClass = cellClass; 189 }, 190 191 _refreshHeader: function() 192 { 193 this._headerTableColumnGroup.removeChildren(); 194 this._dataTableColumnGroup.removeChildren(); 195 this._headerRow.removeChildren(); 196 this._topFillerRow.removeChildren(); 197 this._bottomFillerRow.removeChildren(); 198 199 for (var i = 0; i < this._visibleColumnsArray.length; ++i) { 200 var column = this._visibleColumnsArray[i]; 201 var columnIdentifier = column.identifier; 202 var headerColumn = this._headerTableColumnGroup.createChild("col"); 203 var dataColumn = this._dataTableColumnGroup.createChild("col"); 204 if (column.width) { 205 headerColumn.style.width = column.width; 206 dataColumn.style.width = column.width; 207 } 208 this._headerRow.appendChild(this._headerTableHeaders[columnIdentifier]); 209 this._topFillerRow.createChild("td", "top-filler-td"); 210 this._bottomFillerRow.createChild("td", "bottom-filler-td"); 211 } 212 213 this._headerRow.createChild("th", "corner"); 214 this._topFillerRow.createChild("td", "corner").classList.add("top-filler-td"); 215 this._bottomFillerRow.createChild("td", "corner").classList.add("bottom-filler-td"); 216 this._headerTableColumnGroup.createChild("col", "corner"); 217 this._dataTableColumnGroup.createChild("col", "corner"); 218 }, 219 220 /** 221 * @param {number} top 222 * @param {number} bottom 223 * @protected 224 */ 225 setVerticalPadding: function(top, bottom) 226 { 227 this._topFillerRow.style.height = top + "px"; 228 if (top || bottom) 229 this._bottomFillerRow.style.height = bottom + "px"; 230 else 231 this._bottomFillerRow.style.height = "auto"; 232 }, 233 234 /** 235 * @param {!WebInspector.DataGridNode} rootNode 236 * @protected 237 */ 238 setRootNode: function(rootNode) 239 { 240 if (this._rootNode) { 241 this._rootNode.removeChildren(); 242 this._rootNode.dataGrid = null; 243 this._rootNode._isRoot = false; 244 } 245 /** @type {!WebInspector.DataGridNode} */ 246 this._rootNode = rootNode; 247 rootNode._isRoot = true; 248 rootNode.hasChildren = false; 249 rootNode._expanded = true; 250 rootNode._revealed = true; 251 rootNode.dataGrid = this; 252 }, 253 254 /** 255 * @return {!WebInspector.DataGridNode} 256 */ 257 rootNode: function() 258 { 259 return this._rootNode; 260 }, 261 262 _ondblclick: function(event) 263 { 264 if (this._editing || this._editingNode) 265 return; 266 267 var columnIdentifier = this.columnIdentifierFromNode(event.target); 268 if (!columnIdentifier || !this._columns[columnIdentifier].editable) 269 return; 270 this._startEditing(event.target); 271 }, 272 273 /** 274 * @param {!WebInspector.DataGridNode} node 275 * @param {number} cellIndex 276 */ 277 _startEditingColumnOfDataGridNode: function(node, cellIndex) 278 { 279 this._editing = true; 280 /** @type {?WebInspector.DataGridNode} */ 281 this._editingNode = node; 282 this._editingNode.select(); 283 284 var element = this._editingNode._element.children[cellIndex]; 285 WebInspector.InplaceEditor.startEditing(element, this._startEditingConfig(element)); 286 window.getSelection().setBaseAndExtent(element, 0, element, 1); 287 }, 288 289 _startEditing: function(target) 290 { 291 var element = target.enclosingNodeOrSelfWithNodeName("td"); 292 if (!element) 293 return; 294 295 this._editingNode = this.dataGridNodeFromNode(target); 296 if (!this._editingNode) { 297 if (!this.creationNode) 298 return; 299 this._editingNode = this.creationNode; 300 } 301 302 // Force editing the 1st column when editing the creation node 303 if (this._editingNode.isCreationNode) 304 return this._startEditingColumnOfDataGridNode(this._editingNode, this._nextEditableColumn(-1)); 305 306 this._editing = true; 307 WebInspector.InplaceEditor.startEditing(element, this._startEditingConfig(element)); 308 309 window.getSelection().setBaseAndExtent(element, 0, element, 1); 310 }, 311 312 renderInline: function() 313 { 314 this.element.classList.add("inline"); 315 this._cornerWidth = 0; 316 this.updateWidths(); 317 }, 318 319 _startEditingConfig: function(element) 320 { 321 return new WebInspector.InplaceEditor.Config(this._editingCommitted.bind(this), this._editingCancelled.bind(this), element.textContent); 322 }, 323 324 _editingCommitted: function(element, newText, oldText, context, moveDirection) 325 { 326 var columnIdentifier = this.columnIdentifierFromNode(element); 327 if (!columnIdentifier) { 328 this._editingCancelled(element); 329 return; 330 } 331 var column = this._columns[columnIdentifier]; 332 var cellIndex = this._visibleColumnsArray.indexOf(column); 333 var textBeforeEditing = this._editingNode.data[columnIdentifier]; 334 var currentEditingNode = this._editingNode; 335 336 /** 337 * @param {boolean} wasChange 338 * @this {WebInspector.DataGrid} 339 */ 340 function moveToNextIfNeeded(wasChange) { 341 if (!moveDirection) 342 return; 343 344 if (moveDirection === "forward") { 345 var firstEditableColumn = this._nextEditableColumn(-1); 346 if (currentEditingNode.isCreationNode && cellIndex === firstEditableColumn && !wasChange) 347 return; 348 349 var nextEditableColumn = this._nextEditableColumn(cellIndex); 350 if (nextEditableColumn !== -1) 351 return this._startEditingColumnOfDataGridNode(currentEditingNode, nextEditableColumn); 352 353 var nextDataGridNode = currentEditingNode.traverseNextNode(true, null, true); 354 if (nextDataGridNode) 355 return this._startEditingColumnOfDataGridNode(nextDataGridNode, firstEditableColumn); 356 if (currentEditingNode.isCreationNode && wasChange) { 357 this.addCreationNode(false); 358 return this._startEditingColumnOfDataGridNode(this.creationNode, firstEditableColumn); 359 } 360 return; 361 } 362 363 if (moveDirection === "backward") { 364 var prevEditableColumn = this._nextEditableColumn(cellIndex, true); 365 if (prevEditableColumn !== -1) 366 return this._startEditingColumnOfDataGridNode(currentEditingNode, prevEditableColumn); 367 368 var lastEditableColumn = this._nextEditableColumn(this._visibleColumnsArray.length, true); 369 var nextDataGridNode = currentEditingNode.traversePreviousNode(true, true); 370 if (nextDataGridNode) 371 return this._startEditingColumnOfDataGridNode(nextDataGridNode, lastEditableColumn); 372 return; 373 } 374 } 375 376 if (textBeforeEditing == newText) { 377 this._editingCancelled(element); 378 moveToNextIfNeeded.call(this, false); 379 return; 380 } 381 382 // Update the text in the datagrid that we typed 383 this._editingNode.data[columnIdentifier] = newText; 384 385 // Make the callback - expects an editing node (table row), the column number that is being edited, 386 // the text that used to be there, and the new text. 387 this._editCallback(this._editingNode, columnIdentifier, textBeforeEditing, newText); 388 389 if (this._editingNode.isCreationNode) 390 this.addCreationNode(false); 391 392 this._editingCancelled(element); 393 moveToNextIfNeeded.call(this, true); 394 }, 395 396 _editingCancelled: function(element) 397 { 398 this._editing = false; 399 this._editingNode = null; 400 }, 401 402 /** 403 * @param {number} cellIndex 404 * @param {boolean=} moveBackward 405 * @return {number} 406 */ 407 _nextEditableColumn: function(cellIndex, moveBackward) 408 { 409 var increment = moveBackward ? -1 : 1; 410 var columns = this._visibleColumnsArray; 411 for (var i = cellIndex + increment; (i >= 0) && (i < columns.length); i += increment) { 412 if (columns[i].editable) 413 return i; 414 } 415 return -1; 416 }, 417 418 /** 419 * @return {?string} 420 */ 421 sortColumnIdentifier: function() 422 { 423 if (!this._sortColumnCell) 424 return null; 425 return this._sortColumnCell.columnIdentifier; 426 }, 427 428 /** 429 * @return {?string} 430 */ 431 sortOrder: function() 432 { 433 if (!this._sortColumnCell || this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Ascending)) 434 return WebInspector.DataGrid.Order.Ascending; 435 if (this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Descending)) 436 return WebInspector.DataGrid.Order.Descending; 437 return null; 438 }, 439 440 /** 441 * @return {boolean} 442 */ 443 isSortOrderAscending: function() 444 { 445 return !this._sortColumnCell || this._sortColumnCell.classList.contains(WebInspector.DataGrid.Order.Ascending); 446 }, 447 448 get headerTableBody() 449 { 450 if ("_headerTableBody" in this) 451 return this._headerTableBody; 452 453 this._headerTableBody = this._headerTable.getElementsByTagName("tbody")[0]; 454 if (!this._headerTableBody) { 455 this._headerTableBody = this.element.ownerDocument.createElement("tbody"); 456 this._headerTable.insertBefore(this._headerTableBody, this._headerTable.tFoot); 457 } 458 459 return this._headerTableBody; 460 }, 461 462 get dataTableBody() 463 { 464 if ("_dataTableBody" in this) 465 return this._dataTableBody; 466 467 this._dataTableBody = this._dataTable.getElementsByTagName("tbody")[0]; 468 if (!this._dataTableBody) { 469 this._dataTableBody = this.element.ownerDocument.createElement("tbody"); 470 this._dataTable.insertBefore(this._dataTableBody, this._dataTable.tFoot); 471 } 472 473 return this._dataTableBody; 474 }, 475 476 /** 477 * @param {!Array.<number>} widths 478 * @param {number} minPercent 479 * @param {number=} maxPercent 480 * @return {!Array.<number>} 481 */ 482 _autoSizeWidths: function(widths, minPercent, maxPercent) 483 { 484 if (minPercent) 485 minPercent = Math.min(minPercent, Math.floor(100 / widths.length)); 486 var totalWidth = 0; 487 for (var i = 0; i < widths.length; ++i) 488 totalWidth += widths[i]; 489 var totalPercentWidth = 0; 490 for (var i = 0; i < widths.length; ++i) { 491 var width = Math.round(100 * widths[i] / totalWidth); 492 if (minPercent && width < minPercent) 493 width = minPercent; 494 else if (maxPercent && width > maxPercent) 495 width = maxPercent; 496 totalPercentWidth += width; 497 widths[i] = width; 498 } 499 var recoupPercent = totalPercentWidth - 100; 500 501 while (minPercent && recoupPercent > 0) { 502 for (var i = 0; i < widths.length; ++i) { 503 if (widths[i] > minPercent) { 504 --widths[i]; 505 --recoupPercent; 506 if (!recoupPercent) 507 break; 508 } 509 } 510 } 511 512 while (maxPercent && recoupPercent < 0) { 513 for (var i = 0; i < widths.length; ++i) { 514 if (widths[i] < maxPercent) { 515 ++widths[i]; 516 ++recoupPercent; 517 if (!recoupPercent) 518 break; 519 } 520 } 521 } 522 523 return widths; 524 }, 525 526 /** 527 * @param {number} minPercent 528 * @param {number=} maxPercent 529 * @param {number=} maxDescentLevel 530 */ 531 autoSizeColumns: function(minPercent, maxPercent, maxDescentLevel) 532 { 533 var widths = []; 534 for (var i = 0; i < this._columnsArray.length; ++i) 535 widths.push((this._columnsArray[i].title || "").length); 536 537 maxDescentLevel = maxDescentLevel || 0; 538 var children = this._enumerateChildren(this._rootNode, [], maxDescentLevel + 1); 539 for (var i = 0; i < children.length; ++i) { 540 var node = children[i]; 541 for (var j = 0; j < this._columnsArray.length; ++j) { 542 var text = node.data[this._columnsArray[j].identifier] || ""; 543 if (text.length > widths[j]) 544 widths[j] = text.length; 545 } 546 } 547 548 widths = this._autoSizeWidths(widths, minPercent, maxPercent); 549 550 for (var i = 0; i < this._columnsArray.length; ++i) 551 this._columnsArray[i].weight = widths[i]; 552 this._columnWidthsInitialized = false; 553 this.updateWidths(); 554 }, 555 556 _enumerateChildren: function(rootNode, result, maxLevel) 557 { 558 if (!rootNode._isRoot) 559 result.push(rootNode); 560 if (!maxLevel) 561 return; 562 for (var i = 0; i < rootNode.children.length; ++i) 563 this._enumerateChildren(rootNode.children[i], result, maxLevel - 1); 564 return result; 565 }, 566 567 onResize: function() 568 { 569 this.updateWidths(); 570 }, 571 572 // Updates the widths of the table, including the positions of the column 573 // resizers. 574 // 575 // IMPORTANT: This function MUST be called once after the element of the 576 // DataGrid is attached to its parent element and every subsequent time the 577 // width of the parent element is changed in order to make it possible to 578 // resize the columns. 579 // 580 // If this function is not called after the DataGrid is attached to its 581 // parent element, then the DataGrid's columns will not be resizable. 582 updateWidths: function() 583 { 584 var headerTableColumns = this._headerTableColumnGroup.children; 585 586 // Use container size to avoid changes of table width caused by change of column widths. 587 var tableWidth = this.element.offsetWidth - this._cornerWidth; 588 var numColumns = headerTableColumns.length - 1; // Do not process corner column. 589 590 // Do not attempt to use offsetes if we're not attached to the document tree yet. 591 if (!this._columnWidthsInitialized && this.element.offsetWidth) { 592 // Give all the columns initial widths now so that during a resize, 593 // when the two columns that get resized get a percent value for 594 // their widths, all the other columns already have percent values 595 // for their widths. 596 for (var i = 0; i < numColumns; i++) { 597 var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWidth; 598 var column = this._visibleColumnsArray[i]; 599 if (!column.weight) 600 column.weight = 100 * columnWidth / tableWidth; 601 } 602 this._columnWidthsInitialized = true; 603 } 604 this._applyColumnWeights(); 605 }, 606 607 /** 608 * @param {string} name 609 */ 610 setName: function(name) 611 { 612 this._columnWeightsSetting = WebInspector.settings.createSetting("dataGrid-" + name + "-columnWeights", {}); 613 this._loadColumnWeights(); 614 }, 615 616 _loadColumnWeights: function() 617 { 618 if (!this._columnWeightsSetting) 619 return; 620 var weights = this._columnWeightsSetting.get(); 621 for (var i = 0; i < this._columnsArray.length; ++i) { 622 var column = this._columnsArray[i]; 623 var weight = weights[column.identifier]; 624 if (weight) 625 column.weight = weight; 626 } 627 this._applyColumnWeights(); 628 }, 629 630 _saveColumnWeights: function() 631 { 632 if (!this._columnWeightsSetting) 633 return; 634 var weights = {}; 635 for (var i = 0; i < this._columnsArray.length; ++i) { 636 var column = this._columnsArray[i]; 637 weights[column.identifier] = column.weight; 638 } 639 this._columnWeightsSetting.set(weights); 640 }, 641 642 wasShown: function() 643 { 644 this._loadColumnWeights(); 645 }, 646 647 _applyColumnWeights: function() 648 { 649 var tableWidth = this.element.offsetWidth - this._cornerWidth; 650 if (tableWidth <= 0) 651 return; 652 653 var sumOfWeights = 0.0; 654 for (var i = 0; i < this._visibleColumnsArray.length; ++i) 655 sumOfWeights += this._visibleColumnsArray[i].weight; 656 657 var sum = 0; 658 var lastOffset = 0; 659 660 for (var i = 0; i < this._visibleColumnsArray.length; ++i) { 661 sum += this._visibleColumnsArray[i].weight; 662 var offset = (sum * tableWidth / sumOfWeights) | 0; 663 var width = (offset - lastOffset) + "px"; 664 this._headerTableColumnGroup.children[i].style.width = width; 665 this._dataTableColumnGroup.children[i].style.width = width; 666 lastOffset = offset; 667 } 668 669 this._positionResizers(); 670 this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized); 671 }, 672 673 /** 674 * @param {!Object.<string, boolean>} columnsVisibility 675 */ 676 setColumnsVisiblity: function(columnsVisibility) 677 { 678 this._visibleColumnsArray = []; 679 for (var i = 0; i < this._columnsArray.length; ++i) { 680 var column = this._columnsArray[i]; 681 if (columnsVisibility[column.identifier]) 682 this._visibleColumnsArray.push(column); 683 } 684 this._refreshHeader(); 685 this._applyColumnWeights(); 686 var nodes = this._enumerateChildren(this.rootNode(), [], -1); 687 for (var i = 0; i < nodes.length; ++i) 688 nodes[i].refresh(); 689 }, 690 691 get scrollContainer() 692 { 693 return this._scrollContainer; 694 }, 695 696 _positionResizers: function() 697 { 698 var headerTableColumns = this._headerTableColumnGroup.children; 699 var numColumns = headerTableColumns.length - 1; // Do not process corner column. 700 var left = []; 701 var resizers = this._resizers; 702 703 while (resizers.length > numColumns - 1) 704 resizers.pop().remove(); 705 706 for (var i = 0; i < numColumns - 1; i++) { 707 // Get the width of the cell in the first (and only) row of the 708 // header table in order to determine the width of the column, since 709 // it is not possible to query a column for its width. 710 left[i] = (left[i-1] || 0) + this.headerTableBody.rows[0].cells[i].offsetWidth; 711 } 712 713 // Make n - 1 resizers for n columns. 714 for (var i = 0; i < numColumns - 1; i++) { 715 var resizer = resizers[i]; 716 if (!resizer) { 717 // This is the first call to updateWidth, so the resizers need 718 // to be created. 719 resizer = document.createElement("div"); 720 resizer.__index = i; 721 resizer.classList.add("data-grid-resizer"); 722 // This resizer is associated with the column to its right. 723 WebInspector.installDragHandle(resizer, this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), "col-resize"); 724 this.element.appendChild(resizer); 725 resizers.push(resizer); 726 } 727 if (resizer.__position !== left[i]) { 728 resizer.__position = left[i]; 729 resizer.style.left = left[i] + "px"; 730 } 731 } 732 }, 733 734 addCreationNode: function(hasChildren) 735 { 736 if (this.creationNode) 737 this.creationNode.makeNormal(); 738 739 var emptyData = {}; 740 for (var column in this._columns) 741 emptyData[column] = null; 742 this.creationNode = new WebInspector.CreationDataGridNode(emptyData, hasChildren); 743 this.rootNode().appendChild(this.creationNode); 744 }, 745 746 _keyDown: function(event) 747 { 748 if (!this.selectedNode || event.shiftKey || event.metaKey || event.ctrlKey || this._editing) 749 return; 750 751 var handled = false; 752 var nextSelectedNode; 753 if (event.keyIdentifier === "Up" && !event.altKey) { 754 nextSelectedNode = this.selectedNode.traversePreviousNode(true); 755 while (nextSelectedNode && !nextSelectedNode.selectable) 756 nextSelectedNode = nextSelectedNode.traversePreviousNode(true); 757 handled = nextSelectedNode ? true : false; 758 } else if (event.keyIdentifier === "Down" && !event.altKey) { 759 nextSelectedNode = this.selectedNode.traverseNextNode(true); 760 while (nextSelectedNode && !nextSelectedNode.selectable) 761 nextSelectedNode = nextSelectedNode.traverseNextNode(true); 762 handled = nextSelectedNode ? true : false; 763 } else if (event.keyIdentifier === "Left") { 764 if (this.selectedNode.expanded) { 765 if (event.altKey) 766 this.selectedNode.collapseRecursively(); 767 else 768 this.selectedNode.collapse(); 769 handled = true; 770 } else if (this.selectedNode.parent && !this.selectedNode.parent._isRoot) { 771 handled = true; 772 if (this.selectedNode.parent.selectable) { 773 nextSelectedNode = this.selectedNode.parent; 774 handled = nextSelectedNode ? true : false; 775 } else if (this.selectedNode.parent) 776 this.selectedNode.parent.collapse(); 777 } 778 } else if (event.keyIdentifier === "Right") { 779 if (!this.selectedNode.revealed) { 780 this.selectedNode.reveal(); 781 handled = true; 782 } else if (this.selectedNode.hasChildren) { 783 handled = true; 784 if (this.selectedNode.expanded) { 785 nextSelectedNode = this.selectedNode.children[0]; 786 handled = nextSelectedNode ? true : false; 787 } else { 788 if (event.altKey) 789 this.selectedNode.expandRecursively(); 790 else 791 this.selectedNode.expand(); 792 } 793 } 794 } else if (event.keyCode === 8 || event.keyCode === 46) { 795 if (this._deleteCallback) { 796 handled = true; 797 this._deleteCallback(this.selectedNode); 798 this.changeNodeAfterDeletion(); 799 } 800 } else if (isEnterKey(event)) { 801 if (this._editCallback) { 802 handled = true; 803 this._startEditing(this.selectedNode._element.children[this._nextEditableColumn(-1)]); 804 } 805 } 806 807 if (nextSelectedNode) { 808 nextSelectedNode.reveal(); 809 nextSelectedNode.select(); 810 } 811 812 if (handled) 813 event.consume(true); 814 }, 815 816 changeNodeAfterDeletion: function() 817 { 818 var nextSelectedNode = this.selectedNode.traverseNextNode(true); 819 while (nextSelectedNode && !nextSelectedNode.selectable) 820 nextSelectedNode = nextSelectedNode.traverseNextNode(true); 821 822 if (!nextSelectedNode || nextSelectedNode.isCreationNode) { 823 nextSelectedNode = this.selectedNode.traversePreviousNode(true); 824 while (nextSelectedNode && !nextSelectedNode.selectable) 825 nextSelectedNode = nextSelectedNode.traversePreviousNode(true); 826 } 827 828 if (nextSelectedNode) { 829 nextSelectedNode.reveal(); 830 nextSelectedNode.select(); 831 } 832 }, 833 834 /** 835 * @param {!Node} target 836 * @return {?WebInspector.DataGridNode} 837 */ 838 dataGridNodeFromNode: function(target) 839 { 840 var rowElement = target.enclosingNodeOrSelfWithNodeName("tr"); 841 return rowElement && rowElement._dataGridNode; 842 }, 843 844 /** 845 * @param {!Node} target 846 * @return {?string} 847 */ 848 columnIdentifierFromNode: function(target) 849 { 850 var cellElement = target.enclosingNodeOrSelfWithNodeName("td"); 851 return cellElement && cellElement.columnIdentifier_; 852 }, 853 854 _clickInHeaderCell: function(event) 855 { 856 var cell = event.target.enclosingNodeOrSelfWithNodeName("th"); 857 if (!cell || (cell.columnIdentifier === undefined) || !cell.classList.contains("sortable")) 858 return; 859 860 var sortOrder = WebInspector.DataGrid.Order.Ascending; 861 if ((cell === this._sortColumnCell) && this.isSortOrderAscending()) 862 sortOrder = WebInspector.DataGrid.Order.Descending; 863 864 if (this._sortColumnCell) 865 this._sortColumnCell.classList.remove(WebInspector.DataGrid.Order.Ascending, WebInspector.DataGrid.Order.Descending); 866 this._sortColumnCell = cell; 867 868 cell.classList.add(sortOrder); 869 870 this.dispatchEventToListeners(WebInspector.DataGrid.Events.SortingChanged); 871 }, 872 873 /** 874 * @param {string} columnIdentifier 875 * @param {!WebInspector.DataGrid.Order} sortOrder 876 */ 877 markColumnAsSortedBy: function(columnIdentifier, sortOrder) 878 { 879 if (this._sortColumnCell) 880 this._sortColumnCell.classList.remove(WebInspector.DataGrid.Order.Ascending, WebInspector.DataGrid.Order.Descending); 881 this._sortColumnCell = this._headerTableHeaders[columnIdentifier]; 882 this._sortColumnCell.classList.add(sortOrder); 883 }, 884 885 /** 886 * @param {string} columnIdentifier 887 * @return {!Element} 888 */ 889 headerTableHeader: function(columnIdentifier) 890 { 891 return this._headerTableHeaders[columnIdentifier]; 892 }, 893 894 _mouseDownInDataTable: function(event) 895 { 896 var gridNode = this.dataGridNodeFromNode(event.target); 897 if (!gridNode || !gridNode.selectable) 898 return; 899 900 if (gridNode.isEventWithinDisclosureTriangle(event)) 901 return; 902 903 if (event.metaKey) { 904 if (gridNode.selected) 905 gridNode.deselect(); 906 else 907 gridNode.select(); 908 } else 909 gridNode.select(); 910 }, 911 912 _contextMenuInDataTable: function(event) 913 { 914 var contextMenu = new WebInspector.ContextMenu(event); 915 916 var gridNode = this.dataGridNodeFromNode(event.target); 917 if (this._refreshCallback && (!gridNode || gridNode !== this.creationNode)) 918 contextMenu.appendItem(WebInspector.UIString("Refresh"), this._refreshCallback.bind(this)); 919 920 if (gridNode && gridNode.selectable && !gridNode.isEventWithinDisclosureTriangle(event)) { 921 if (this._editCallback) { 922 if (gridNode === this.creationNode) 923 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Add new" : "Add New"), this._startEditing.bind(this, event.target)); 924 else { 925 var columnIdentifier = this.columnIdentifierFromNode(event.target); 926 if (columnIdentifier && this._columns[columnIdentifier].editable) 927 contextMenu.appendItem(WebInspector.UIString("Edit \"%s\"", this._columns[columnIdentifier].title), this._startEditing.bind(this, event.target)); 928 } 929 } 930 if (this._deleteCallback && gridNode !== this.creationNode) 931 contextMenu.appendItem(WebInspector.UIString("Delete"), this._deleteCallback.bind(this, gridNode)); 932 if (this._contextMenuCallback) 933 this._contextMenuCallback(contextMenu, gridNode); 934 } 935 936 contextMenu.show(); 937 }, 938 939 _clickInDataTable: function(event) 940 { 941 var gridNode = this.dataGridNodeFromNode(event.target); 942 if (!gridNode || !gridNode.hasChildren) 943 return; 944 945 if (!gridNode.isEventWithinDisclosureTriangle(event)) 946 return; 947 948 if (gridNode.expanded) { 949 if (event.altKey) 950 gridNode.collapseRecursively(); 951 else 952 gridNode.collapse(); 953 } else { 954 if (event.altKey) 955 gridNode.expandRecursively(); 956 else 957 gridNode.expand(); 958 } 959 }, 960 961 /** 962 * @param {!WebInspector.DataGrid.ResizeMethod} method 963 */ 964 setResizeMethod: function(method) 965 { 966 this._resizeMethod = method; 967 }, 968 969 /** 970 * @return {boolean} 971 */ 972 _startResizerDragging: function(event) 973 { 974 this._currentResizer = event.target; 975 return true; 976 }, 977 978 _resizerDragging: function(event) 979 { 980 var resizer = this._currentResizer; 981 if (!resizer) 982 return; 983 984 var tableWidth = this.element.offsetWidth; // Cache it early, before we invalidate layout. 985 986 // Constrain the dragpoint to be within the containing div of the 987 // datagrid. 988 var dragPoint = event.clientX - this.element.totalOffsetLeft(); 989 var firstRowCells = this.headerTableBody.rows[0].cells; 990 var leftEdgeOfPreviousColumn = 0; 991 // Constrain the dragpoint to be within the space made up by the 992 // column directly to the left and the column directly to the right. 993 var leftCellIndex = resizer.__index; 994 var rightCellIndex = leftCellIndex + 1; 995 for (var i = 0; i < leftCellIndex; i++) 996 leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth; 997 998 // Differences for other resize methods 999 if (this._resizeMethod === WebInspector.DataGrid.ResizeMethod.Last) { 1000 rightCellIndex = this._resizers.length; 1001 } else if (this._resizeMethod === WebInspector.DataGrid.ResizeMethod.First) { 1002 leftEdgeOfPreviousColumn += firstRowCells[leftCellIndex].offsetWidth - firstRowCells[0].offsetWidth; 1003 leftCellIndex = 0; 1004 } 1005 1006 var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[leftCellIndex].offsetWidth + firstRowCells[rightCellIndex].offsetWidth; 1007 1008 // Give each column some padding so that they don't disappear. 1009 var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding; 1010 var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding; 1011 if (leftMinimum > rightMaximum) 1012 return; 1013 1014 dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum); 1015 1016 var position = (dragPoint - this.CenterResizerOverBorderAdjustment); 1017 resizer.__position = position; 1018 resizer.style.left = position + "px"; 1019 1020 var pxLeftColumn = (dragPoint - leftEdgeOfPreviousColumn) + "px"; 1021 this._headerTableColumnGroup.children[leftCellIndex].style.width = pxLeftColumn; 1022 this._dataTableColumnGroup.children[leftCellIndex].style.width = pxLeftColumn; 1023 1024 var pxRightColumn = (rightEdgeOfNextColumn - dragPoint) + "px"; 1025 this._headerTableColumnGroup.children[rightCellIndex].style.width = pxRightColumn; 1026 this._dataTableColumnGroup.children[rightCellIndex].style.width = pxRightColumn; 1027 1028 var leftColumn = this._visibleColumnsArray[leftCellIndex]; 1029 var rightColumn = this._visibleColumnsArray[rightCellIndex]; 1030 if (leftColumn.weight || rightColumn.weight) { 1031 var sumOfWeights = leftColumn.weight + rightColumn.weight; 1032 var delta = rightEdgeOfNextColumn - leftEdgeOfPreviousColumn; 1033 leftColumn.weight = (dragPoint - leftEdgeOfPreviousColumn) * sumOfWeights / delta; 1034 rightColumn.weight = (rightEdgeOfNextColumn - dragPoint) * sumOfWeights / delta; 1035 } 1036 1037 this._positionResizers(); 1038 event.preventDefault(); 1039 this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized); 1040 }, 1041 1042 /** 1043 * @param {string} columnId 1044 * @return {number} 1045 */ 1046 columnOffset: function(columnId) 1047 { 1048 if (!this.element.offsetWidth) 1049 return 0; 1050 for (var i = 1; i < this._visibleColumnsArray.length; ++i) { 1051 if (columnId === this._visibleColumnsArray[i].identifier) { 1052 if (this._resizers[i - 1]) 1053 return this._resizers[i - 1].__position; 1054 } 1055 } 1056 return 0; 1057 }, 1058 1059 _endResizerDragging: function(event) 1060 { 1061 this._currentResizer = null; 1062 this._saveColumnWeights(); 1063 this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized); 1064 }, 1065 1066 ColumnResizePadding: 24, 1067 1068 CenterResizerOverBorderAdjustment: 3, 1069 1070 __proto__: WebInspector.View.prototype 1071 } 1072 1073 /** @enum {string} */ 1074 WebInspector.DataGrid.ResizeMethod = { 1075 Nearest: "nearest", 1076 First: "first", 1077 Last: "last" 1078 } 1079 1080 /** 1081 * @constructor 1082 * @extends {WebInspector.Object} 1083 * @param {?Object.<string, *>=} data 1084 * @param {boolean=} hasChildren 1085 */ 1086 WebInspector.DataGridNode = function(data, hasChildren) 1087 { 1088 /** @type {?Element} */ 1089 this._element = null; 1090 /** @type {boolean} */ 1091 this._expanded = false; 1092 /** @type {boolean} */ 1093 this._selected = false; 1094 /** @type {number|undefined} */ 1095 this._depth; 1096 /** @type {boolean|undefined} */ 1097 this._revealed; 1098 /** @type {boolean} */ 1099 this._attached = false; 1100 /** @type {?{parent: !WebInspector.DataGridNode, index: number}} */ 1101 this._savedPosition = null; 1102 /** @type {boolean} */ 1103 this._shouldRefreshChildren = true; 1104 /** @type {!Object.<string, *>} */ 1105 this._data = data || {}; 1106 /** @type {boolean} */ 1107 this.hasChildren = hasChildren || false; 1108 /** @type {!Array.<!WebInspector.DataGridNode>} */ 1109 this.children = []; 1110 /** @type {?WebInspector.DataGrid} */ 1111 this.dataGrid = null; 1112 /** @type {?WebInspector.DataGridNode} */ 1113 this.parent = null; 1114 /** @type {?WebInspector.DataGridNode} */ 1115 this.previousSibling = null; 1116 /** @type {?WebInspector.DataGridNode} */ 1117 this.nextSibling = null; 1118 /** @type {number} */ 1119 this.disclosureToggleWidth = 10; 1120 } 1121 1122 WebInspector.DataGridNode.prototype = { 1123 /** @type {boolean} */ 1124 selectable: true, 1125 1126 /** @type {boolean} */ 1127 _isRoot: false, 1128 1129 /** 1130 * @return {!Element} 1131 */ 1132 element: function() 1133 { 1134 if (!this._element) { 1135 this.createElement(); 1136 this.createCells(); 1137 } 1138 return /** @type {!Element} */ (this._element); 1139 }, 1140 1141 /** 1142 * @protected 1143 */ 1144 createElement: function() 1145 { 1146 this._element = document.createElement("tr"); 1147 this._element._dataGridNode = this; 1148 1149 if (this.hasChildren) 1150 this._element.classList.add("parent"); 1151 if (this.expanded) 1152 this._element.classList.add("expanded"); 1153 if (this.selected) 1154 this._element.classList.add("selected"); 1155 if (this.revealed) 1156 this._element.classList.add("revealed"); 1157 }, 1158 1159 /** 1160 * @protected 1161 */ 1162 createCells: function() 1163 { 1164 this._element.removeChildren(); 1165 var columnsArray = this.dataGrid._visibleColumnsArray; 1166 for (var i = 0; i < columnsArray.length; ++i) 1167 this._element.appendChild(this.createCell(columnsArray[i].identifier)); 1168 this._element.appendChild(this._createTDWithClass("corner")); 1169 }, 1170 1171 get data() 1172 { 1173 return this._data; 1174 }, 1175 1176 set data(x) 1177 { 1178 this._data = x || {}; 1179 this.refresh(); 1180 }, 1181 1182 get revealed() 1183 { 1184 if (this._revealed !== undefined) 1185 return this._revealed; 1186 1187 var currentAncestor = this.parent; 1188 while (currentAncestor && !currentAncestor._isRoot) { 1189 if (!currentAncestor.expanded) { 1190 this._revealed = false; 1191 return false; 1192 } 1193 1194 currentAncestor = currentAncestor.parent; 1195 } 1196 1197 this._revealed = true; 1198 return true; 1199 }, 1200 1201 set hasChildren(x) 1202 { 1203 if (this._hasChildren === x) 1204 return; 1205 1206 this._hasChildren = x; 1207 1208 if (!this._element) 1209 return; 1210 1211 this._element.classList.toggle("parent", this._hasChildren); 1212 this._element.classList.toggle("expanded", this._hasChildren && this.expanded); 1213 }, 1214 1215 get hasChildren() 1216 { 1217 return this._hasChildren; 1218 }, 1219 1220 set revealed(x) 1221 { 1222 if (this._revealed === x) 1223 return; 1224 1225 this._revealed = x; 1226 1227 if (this._element) 1228 this._element.classList.toggle("revealed", this._revealed); 1229 1230 for (var i = 0; i < this.children.length; ++i) 1231 this.children[i].revealed = x && this.expanded; 1232 }, 1233 1234 /** 1235 * @return {number} 1236 */ 1237 get depth() 1238 { 1239 if (this._depth !== undefined) 1240 return this._depth; 1241 if (this.parent && !this.parent._isRoot) 1242 this._depth = this.parent.depth + 1; 1243 else 1244 this._depth = 0; 1245 return this._depth; 1246 }, 1247 1248 get leftPadding() 1249 { 1250 if (typeof this._leftPadding === "number") 1251 return this._leftPadding; 1252 1253 this._leftPadding = this.depth * this.dataGrid.indentWidth; 1254 return this._leftPadding; 1255 }, 1256 1257 get shouldRefreshChildren() 1258 { 1259 return this._shouldRefreshChildren; 1260 }, 1261 1262 set shouldRefreshChildren(x) 1263 { 1264 this._shouldRefreshChildren = x; 1265 if (x && this.expanded) 1266 this.expand(); 1267 }, 1268 1269 get selected() 1270 { 1271 return this._selected; 1272 }, 1273 1274 set selected(x) 1275 { 1276 if (x) 1277 this.select(); 1278 else 1279 this.deselect(); 1280 }, 1281 1282 get expanded() 1283 { 1284 return this._expanded; 1285 }, 1286 1287 /** 1288 * @param {boolean} x 1289 */ 1290 set expanded(x) 1291 { 1292 if (x) 1293 this.expand(); 1294 else 1295 this.collapse(); 1296 }, 1297 1298 refresh: function() 1299 { 1300 if (!this.dataGrid) 1301 this._element = null; 1302 if (!this._element) 1303 return; 1304 this.createCells(); 1305 }, 1306 1307 /** 1308 * @param {string} className 1309 * @return {!Element} 1310 */ 1311 _createTDWithClass: function(className) 1312 { 1313 var cell = document.createElementWithClass("td", className); 1314 var cellClass = this.dataGrid._cellClass; 1315 if (cellClass) 1316 cell.classList.add(cellClass); 1317 return cell; 1318 }, 1319 1320 /** 1321 * @param {string} columnIdentifier 1322 * @return {!Element} 1323 */ 1324 createTD: function(columnIdentifier) 1325 { 1326 var cell = this._createTDWithClass(columnIdentifier + "-column"); 1327 cell.columnIdentifier_ = columnIdentifier; 1328 1329 var alignment = this.dataGrid._columns[columnIdentifier].align; 1330 if (alignment) 1331 cell.classList.add(alignment); 1332 1333 return cell; 1334 }, 1335 1336 /** 1337 * @param {string} columnIdentifier 1338 * @return {!Element} 1339 */ 1340 createCell: function(columnIdentifier) 1341 { 1342 var cell = this.createTD(columnIdentifier); 1343 1344 var data = this.data[columnIdentifier]; 1345 if (data instanceof Node) { 1346 cell.appendChild(data); 1347 } else { 1348 cell.textContent = data; 1349 if (this.dataGrid._columns[columnIdentifier].longText) 1350 cell.title = data; 1351 } 1352 1353 if (columnIdentifier === this.dataGrid.disclosureColumnIdentifier) { 1354 cell.classList.add("disclosure"); 1355 if (this.leftPadding) 1356 cell.style.setProperty("padding-left", this.leftPadding + "px"); 1357 } 1358 1359 return cell; 1360 }, 1361 1362 /** 1363 * @return {number} 1364 */ 1365 nodeSelfHeight: function() 1366 { 1367 return 16; 1368 }, 1369 1370 /** 1371 * @param {!WebInspector.DataGridNode} child 1372 */ 1373 appendChild: function(child) 1374 { 1375 this.insertChild(child, this.children.length); 1376 }, 1377 1378 /** 1379 * @param {!WebInspector.DataGridNode} child 1380 * @param {number} index 1381 */ 1382 insertChild: function(child, index) 1383 { 1384 if (!child) 1385 throw("insertChild: Node can't be undefined or null."); 1386 if (child.parent === this) 1387 throw("insertChild: Node is already a child of this node."); 1388 1389 if (child.parent) 1390 child.parent.removeChild(child); 1391 1392 this.children.splice(index, 0, child); 1393 this.hasChildren = true; 1394 1395 child.parent = this; 1396 child.dataGrid = this.dataGrid; 1397 child.recalculateSiblings(index); 1398 1399 child._depth = undefined; 1400 child._revealed = undefined; 1401 child._attached = false; 1402 child._shouldRefreshChildren = true; 1403 1404 var current = child.children[0]; 1405 while (current) { 1406 current.dataGrid = this.dataGrid; 1407 current._depth = undefined; 1408 current._revealed = undefined; 1409 current._attached = false; 1410 current._shouldRefreshChildren = true; 1411 current = current.traverseNextNode(false, child, true); 1412 } 1413 1414 if (this.expanded) 1415 child._attach(); 1416 if (!this.revealed) 1417 child.revealed = false; 1418 }, 1419 1420 /** 1421 * @param {!WebInspector.DataGridNode} child 1422 */ 1423 removeChild: function(child) 1424 { 1425 if (!child) 1426 throw("removeChild: Node can't be undefined or null."); 1427 if (child.parent !== this) 1428 throw("removeChild: Node is not a child of this node."); 1429 1430 child.deselect(); 1431 child._detach(); 1432 1433 this.children.remove(child, true); 1434 1435 if (child.previousSibling) 1436 child.previousSibling.nextSibling = child.nextSibling; 1437 if (child.nextSibling) 1438 child.nextSibling.previousSibling = child.previousSibling; 1439 1440 child.dataGrid = null; 1441 child.parent = null; 1442 child.nextSibling = null; 1443 child.previousSibling = null; 1444 1445 if (this.children.length <= 0) 1446 this.hasChildren = false; 1447 }, 1448 1449 removeChildren: function() 1450 { 1451 for (var i = 0; i < this.children.length; ++i) { 1452 var child = this.children[i]; 1453 child.deselect(); 1454 child._detach(); 1455 1456 child.dataGrid = null; 1457 child.parent = null; 1458 child.nextSibling = null; 1459 child.previousSibling = null; 1460 } 1461 1462 this.children = []; 1463 this.hasChildren = false; 1464 }, 1465 1466 /** 1467 * @param {number} myIndex 1468 */ 1469 recalculateSiblings: function(myIndex) 1470 { 1471 if (!this.parent) 1472 return; 1473 1474 var previousChild = this.parent.children[myIndex - 1] || null; 1475 if (previousChild) 1476 previousChild.nextSibling = this; 1477 this.previousSibling = previousChild; 1478 1479 var nextChild = this.parent.children[myIndex + 1] || null; 1480 if (nextChild) 1481 nextChild.previousSibling = this; 1482 this.nextSibling = nextChild; 1483 }, 1484 1485 collapse: function() 1486 { 1487 if (this._isRoot) 1488 return; 1489 if (this._element) 1490 this._element.classList.remove("expanded"); 1491 1492 this._expanded = false; 1493 1494 for (var i = 0; i < this.children.length; ++i) 1495 this.children[i].revealed = false; 1496 }, 1497 1498 collapseRecursively: function() 1499 { 1500 var item = this; 1501 while (item) { 1502 if (item.expanded) 1503 item.collapse(); 1504 item = item.traverseNextNode(false, this, true); 1505 } 1506 }, 1507 1508 populate: function() { }, 1509 1510 expand: function() 1511 { 1512 if (!this.hasChildren || this.expanded) 1513 return; 1514 if (this._isRoot) 1515 return; 1516 1517 if (this.revealed && !this._shouldRefreshChildren) 1518 for (var i = 0; i < this.children.length; ++i) 1519 this.children[i].revealed = true; 1520 1521 if (this._shouldRefreshChildren) { 1522 for (var i = 0; i < this.children.length; ++i) 1523 this.children[i]._detach(); 1524 1525 this.populate(); 1526 1527 if (this._attached) { 1528 for (var i = 0; i < this.children.length; ++i) { 1529 var child = this.children[i]; 1530 if (this.revealed) 1531 child.revealed = true; 1532 child._attach(); 1533 } 1534 } 1535 1536 this._shouldRefreshChildren = false; 1537 } 1538 1539 if (this._element) 1540 this._element.classList.add("expanded"); 1541 1542 this._expanded = true; 1543 }, 1544 1545 expandRecursively: function() 1546 { 1547 var item = this; 1548 while (item) { 1549 item.expand(); 1550 item = item.traverseNextNode(false, this); 1551 } 1552 }, 1553 1554 reveal: function() 1555 { 1556 if (this._isRoot) 1557 return; 1558 var currentAncestor = this.parent; 1559 while (currentAncestor && !currentAncestor._isRoot) { 1560 if (!currentAncestor.expanded) 1561 currentAncestor.expand(); 1562 currentAncestor = currentAncestor.parent; 1563 } 1564 1565 this.element().scrollIntoViewIfNeeded(false); 1566 }, 1567 1568 /** 1569 * @param {boolean=} supressSelectedEvent 1570 */ 1571 select: function(supressSelectedEvent) 1572 { 1573 if (!this.dataGrid || !this.selectable || this.selected) 1574 return; 1575 1576 if (this.dataGrid.selectedNode) 1577 this.dataGrid.selectedNode.deselect(); 1578 1579 this._selected = true; 1580 this.dataGrid.selectedNode = this; 1581 1582 if (this._element) 1583 this._element.classList.add("selected"); 1584 1585 if (!supressSelectedEvent) 1586 this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Events.SelectedNode); 1587 }, 1588 1589 revealAndSelect: function() 1590 { 1591 if (this._isRoot) 1592 return; 1593 this.reveal(); 1594 this.select(); 1595 }, 1596 1597 /** 1598 * @param {boolean=} supressDeselectedEvent 1599 */ 1600 deselect: function(supressDeselectedEvent) 1601 { 1602 if (!this.dataGrid || this.dataGrid.selectedNode !== this || !this.selected) 1603 return; 1604 1605 this._selected = false; 1606 this.dataGrid.selectedNode = null; 1607 1608 if (this._element) 1609 this._element.classList.remove("selected"); 1610 1611 if (!supressDeselectedEvent) 1612 this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Events.DeselectedNode); 1613 }, 1614 1615 /** 1616 * @param {boolean} skipHidden 1617 * @param {?WebInspector.DataGridNode=} stayWithin 1618 * @param {boolean=} dontPopulate 1619 * @param {!Object=} info 1620 * @return {?WebInspector.DataGridNode} 1621 */ 1622 traverseNextNode: function(skipHidden, stayWithin, dontPopulate, info) 1623 { 1624 if (!dontPopulate && this.hasChildren) 1625 this.populate(); 1626 1627 if (info) 1628 info.depthChange = 0; 1629 1630 var node = (!skipHidden || this.revealed) ? this.children[0] : null; 1631 if (node && (!skipHidden || this.expanded)) { 1632 if (info) 1633 info.depthChange = 1; 1634 return node; 1635 } 1636 1637 if (this === stayWithin) 1638 return null; 1639 1640 node = (!skipHidden || this.revealed) ? this.nextSibling : null; 1641 if (node) 1642 return node; 1643 1644 node = this; 1645 while (node && !node._isRoot && !((!skipHidden || node.revealed) ? node.nextSibling : null) && node.parent !== stayWithin) { 1646 if (info) 1647 info.depthChange -= 1; 1648 node = node.parent; 1649 } 1650 1651 if (!node) 1652 return null; 1653 1654 return (!skipHidden || node.revealed) ? node.nextSibling : null; 1655 }, 1656 1657 /** 1658 * @param {boolean} skipHidden 1659 * @param {boolean=} dontPopulate 1660 * @return {?WebInspector.DataGridNode} 1661 */ 1662 traversePreviousNode: function(skipHidden, dontPopulate) 1663 { 1664 var node = (!skipHidden || this.revealed) ? this.previousSibling : null; 1665 if (!dontPopulate && node && node.hasChildren) 1666 node.populate(); 1667 1668 while (node && ((!skipHidden || (node.revealed && node.expanded)) ? node.children[node.children.length - 1] : null)) { 1669 if (!dontPopulate && node.hasChildren) 1670 node.populate(); 1671 node = ((!skipHidden || (node.revealed && node.expanded)) ? node.children[node.children.length - 1] : null); 1672 } 1673 1674 if (node) 1675 return node; 1676 1677 if (!this.parent || this.parent._isRoot) 1678 return null; 1679 1680 return this.parent; 1681 }, 1682 1683 /** 1684 * @return {boolean} 1685 */ 1686 isEventWithinDisclosureTriangle: function(event) 1687 { 1688 if (!this.hasChildren) 1689 return false; 1690 var cell = event.target.enclosingNodeOrSelfWithNodeName("td"); 1691 if (!cell.classList.contains("disclosure")) 1692 return false; 1693 1694 var left = cell.totalOffsetLeft() + this.leftPadding; 1695 return event.pageX >= left && event.pageX <= left + this.disclosureToggleWidth; 1696 }, 1697 1698 _attach: function() 1699 { 1700 if (!this.dataGrid || this._attached) 1701 return; 1702 1703 this._attached = true; 1704 1705 var nextNode = null; 1706 var previousNode = this.traversePreviousNode(true, true); 1707 var previousElement = previousNode ? previousNode.element() : this.dataGrid._topFillerRow; 1708 this.dataGrid.dataTableBody.insertBefore(this.element(), previousElement.nextSibling); 1709 1710 if (this.expanded) 1711 for (var i = 0; i < this.children.length; ++i) 1712 this.children[i]._attach(); 1713 }, 1714 1715 _detach: function() 1716 { 1717 if (!this._attached) 1718 return; 1719 1720 this._attached = false; 1721 1722 if (this._element) 1723 this._element.remove(); 1724 1725 for (var i = 0; i < this.children.length; ++i) 1726 this.children[i]._detach(); 1727 1728 this.wasDetached(); 1729 }, 1730 1731 wasDetached: function() 1732 { 1733 }, 1734 1735 savePosition: function() 1736 { 1737 if (this._savedPosition) 1738 return; 1739 1740 if (!this.parent) 1741 throw("savePosition: Node must have a parent."); 1742 this._savedPosition = { 1743 parent: this.parent, 1744 index: this.parent.children.indexOf(this) 1745 }; 1746 }, 1747 1748 restorePosition: function() 1749 { 1750 if (!this._savedPosition) 1751 return; 1752 1753 if (this.parent !== this._savedPosition.parent) 1754 this._savedPosition.parent.insertChild(this, this._savedPosition.index); 1755 1756 this._savedPosition = null; 1757 }, 1758 1759 __proto__: WebInspector.Object.prototype 1760 } 1761 1762 /** 1763 * @constructor 1764 * @extends {WebInspector.DataGridNode} 1765 */ 1766 WebInspector.CreationDataGridNode = function(data, hasChildren) 1767 { 1768 WebInspector.DataGridNode.call(this, data, hasChildren); 1769 /** @type {boolean} */ 1770 this.isCreationNode = true; 1771 } 1772 1773 WebInspector.CreationDataGridNode.prototype = { 1774 makeNormal: function() 1775 { 1776 this.isCreationNode = false; 1777 }, 1778 1779 __proto__: WebInspector.DataGridNode.prototype 1780 } 1781
