| OLD | NEW |
|---|
| (Empty) |
| 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 WebInspector.DataGrid = function(columns) | |
| 27 { | |
| 28 this.element = document.createElement("div"); | |
| 29 this.element.className = "data-grid"; | |
| 30 this.element.tabIndex = 0; | |
| 31 this.element.addEventListener("keydown", this._keyDown.bind(this), false); | |
| 32 | |
| 33 this._headerTable = document.createElement("table"); | |
| 34 this._headerTable.className = "header"; | |
| 35 | |
| 36 this._dataTable = document.createElement("table"); | |
| 37 this._dataTable.className = "data"; | |
| 38 | |
| 39 this._dataTable.addEventListener("mousedown", this._mouseDownInDataTable.bin
d(this), true); | |
| 40 this._dataTable.addEventListener("click", this._clickInDataTable.bind(this),
true); | |
| 41 | |
| 42 this.aligned = {}; | |
| 43 | |
| 44 var scrollContainer = document.createElement("div"); | |
| 45 scrollContainer.className = "data-container"; | |
| 46 scrollContainer.appendChild(this._dataTable); | |
| 47 | |
| 48 this.element.appendChild(this._headerTable); | |
| 49 this.element.appendChild(scrollContainer); | |
| 50 | |
| 51 var headerRow = document.createElement("tr"); | |
| 52 var columnGroup = document.createElement("colgroup"); | |
| 53 var columnCount = 0; | |
| 54 | |
| 55 for (var columnIdentifier in columns) { | |
| 56 var column = columns[columnIdentifier]; | |
| 57 if (column.disclosure) | |
| 58 this.disclosureColumnIdentifier = columnIdentifier; | |
| 59 | |
| 60 var col = document.createElement("col"); | |
| 61 if (column.width) | |
| 62 col.style.width = column.width; | |
| 63 columnGroup.appendChild(col); | |
| 64 | |
| 65 var cell = document.createElement("th"); | |
| 66 cell.className = columnIdentifier + "-column"; | |
| 67 cell.columnIdentifier = columnIdentifier; | |
| 68 | |
| 69 var div = document.createElement("div"); | |
| 70 div.textContent = column.title; | |
| 71 cell.appendChild(div); | |
| 72 | |
| 73 if (column.sort) { | |
| 74 cell.addStyleClass("sort-" + column.sort); | |
| 75 this._sortColumnCell = cell; | |
| 76 } | |
| 77 | |
| 78 if (column.sortable) { | |
| 79 cell.addEventListener("click", this._clickInHeaderCell.bind(this), f
alse); | |
| 80 cell.addStyleClass("sortable"); | |
| 81 } | |
| 82 | |
| 83 if (column.aligned) { | |
| 84 cell.addStyleClass(column.aligned); | |
| 85 this.aligned[columnIdentifier] = column.aligned; | |
| 86 } | |
| 87 | |
| 88 headerRow.appendChild(cell); | |
| 89 | |
| 90 ++columnCount; | |
| 91 } | |
| 92 | |
| 93 columnGroup.span = columnCount; | |
| 94 | |
| 95 var cell = document.createElement("th"); | |
| 96 cell.className = "corner"; | |
| 97 headerRow.appendChild(cell); | |
| 98 | |
| 99 this._headerTableColumnGroup = columnGroup; | |
| 100 this._headerTable.appendChild(this._headerTableColumnGroup); | |
| 101 this.headerTableBody.appendChild(headerRow); | |
| 102 | |
| 103 var fillerRow = document.createElement("tr"); | |
| 104 fillerRow.className = "filler"; | |
| 105 | |
| 106 for (var i = 0; i < columnCount; ++i) { | |
| 107 var cell = document.createElement("td"); | |
| 108 fillerRow.appendChild(cell); | |
| 109 } | |
| 110 | |
| 111 this._dataTableColumnGroup = columnGroup.cloneNode(true); | |
| 112 this._dataTable.appendChild(this._dataTableColumnGroup); | |
| 113 this.dataTableBody.appendChild(fillerRow); | |
| 114 | |
| 115 this.columns = columns || {}; | |
| 116 this.children = []; | |
| 117 this.selectedNode = null; | |
| 118 this.expandNodesWhenArrowing = false; | |
| 119 this.root = true; | |
| 120 this.hasChildren = false; | |
| 121 this.expanded = true; | |
| 122 this.revealed = true; | |
| 123 this.selected = false; | |
| 124 this.dataGrid = this; | |
| 125 this.indentWidth = 15; | |
| 126 this.resizers = []; | |
| 127 this.columnWidthsInitialized = false; | |
| 128 } | |
| 129 | |
| 130 WebInspector.DataGrid.prototype = { | |
| 131 get sortColumnIdentifier() | |
| 132 { | |
| 133 if (!this._sortColumnCell) | |
| 134 return null; | |
| 135 return this._sortColumnCell.columnIdentifier; | |
| 136 }, | |
| 137 | |
| 138 get sortOrder() | |
| 139 { | |
| 140 if (!this._sortColumnCell || this._sortColumnCell.hasStyleClass("sort-as
cending")) | |
| 141 return "ascending"; | |
| 142 if (this._sortColumnCell.hasStyleClass("sort-descending")) | |
| 143 return "descending"; | |
| 144 return null; | |
| 145 }, | |
| 146 | |
| 147 get headerTableBody() | |
| 148 { | |
| 149 if ("_headerTableBody" in this) | |
| 150 return this._headerTableBody; | |
| 151 | |
| 152 this._headerTableBody = this._headerTable.getElementsByTagName("tbody")[
0]; | |
| 153 if (!this._headerTableBody) { | |
| 154 this._headerTableBody = this.element.ownerDocument.createElement("tb
ody"); | |
| 155 this._headerTable.insertBefore(this._headerTableBody, this._headerTa
ble.tFoot); | |
| 156 } | |
| 157 | |
| 158 return this._headerTableBody; | |
| 159 }, | |
| 160 | |
| 161 get dataTableBody() | |
| 162 { | |
| 163 if ("_dataTableBody" in this) | |
| 164 return this._dataTableBody; | |
| 165 | |
| 166 this._dataTableBody = this._dataTable.getElementsByTagName("tbody")[0]; | |
| 167 if (!this._dataTableBody) { | |
| 168 this._dataTableBody = this.element.ownerDocument.createElement("tbod
y"); | |
| 169 this._dataTable.insertBefore(this._dataTableBody, this._dataTable.tF
oot); | |
| 170 } | |
| 171 | |
| 172 return this._dataTableBody; | |
| 173 }, | |
| 174 | |
| 175 // Updates the widths of the table, including the positions of the column | |
| 176 // resizers. | |
| 177 // | |
| 178 // IMPORTANT: This function MUST be called once after the element of the | |
| 179 // DataGrid is attached to its parent element and every subsequent time the | |
| 180 // width of the parent element is changed in order to make it possible to | |
| 181 // resize the columns. | |
| 182 // | |
| 183 // If this function is not called after the DataGrid is attached to its | |
| 184 // parent element, then the DataGrid's columns will not be resizable. | |
| 185 updateWidths: function() | |
| 186 { | |
| 187 var headerTableColumns = this._headerTableColumnGroup.children; | |
| 188 | |
| 189 var left = 0; | |
| 190 var tableWidth = this._dataTable.offsetWidth; | |
| 191 var numColumns = headerTableColumns.length; | |
| 192 | |
| 193 if (!this.columnWidthsInitialized) { | |
| 194 // Give all the columns initial widths now so that during a resize, | |
| 195 // when the two columns that get resized get a percent value for | |
| 196 // their widths, all the other columns already have percent values | |
| 197 // for their widths. | |
| 198 for (var i = 0; i < numColumns; i++) { | |
| 199 var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWi
dth; | |
| 200 var percentWidth = ((columnWidth / tableWidth) * 100) + "%"; | |
| 201 this._headerTableColumnGroup.children[i].style.width = percentWi
dth; | |
| 202 this._dataTableColumnGroup.children[i].style.width = percentWidt
h; | |
| 203 } | |
| 204 this.columnWidthsInitialized = true; | |
| 205 } | |
| 206 | |
| 207 // Make n - 1 resizers for n columns. | |
| 208 for (var i = 0; i < numColumns - 1; i++) { | |
| 209 var resizer = this.resizers[i]; | |
| 210 | |
| 211 if (!resizer) { | |
| 212 // This is the first call to updateWidth, so the resizers need | |
| 213 // to be created. | |
| 214 resizer = document.createElement("div"); | |
| 215 resizer.addStyleClass("data-grid-resizer"); | |
| 216 // This resizer is associated with the column to its right. | |
| 217 resizer.rightNeighboringColumnID = i + 1; | |
| 218 resizer.addEventListener("mousedown", this._startResizerDragging
.bind(this), false); | |
| 219 this.element.appendChild(resizer); | |
| 220 this.resizers[i] = resizer; | |
| 221 } | |
| 222 | |
| 223 // Get the width of the cell in the first (and only) row of the | |
| 224 // header table in order to determine the width of the column, since | |
| 225 // it is not possible to query a column for its width. | |
| 226 left += this.headerTableBody.rows[0].cells[i].offsetWidth; | |
| 227 | |
| 228 resizer.style.left = left + "px"; | |
| 229 } | |
| 230 }, | |
| 231 | |
| 232 addCreationNode: function(hasChildren) | |
| 233 { | |
| 234 if (this.creationNode) | |
| 235 this.creationNode.makeNormal(); | |
| 236 | |
| 237 var emptyData = {}; | |
| 238 for (var column in this.columns) | |
| 239 emptyData[column] = ''; | |
| 240 this.creationNode = new WebInspector.CreationDataGridNode(emptyData, has
Children); | |
| 241 this.appendChild(this.creationNode); | |
| 242 }, | |
| 243 | |
| 244 appendChild: function(child) | |
| 245 { | |
| 246 this.insertChild(child, this.children.length); | |
| 247 }, | |
| 248 | |
| 249 insertChild: function(child, index) | |
| 250 { | |
| 251 if (!child) | |
| 252 throw("insertChild: Node can't be undefined or null."); | |
| 253 if (child.parent === this) | |
| 254 throw("insertChild: Node is already a child of this node."); | |
| 255 | |
| 256 if (child.parent) | |
| 257 child.parent.removeChild(child); | |
| 258 | |
| 259 this.children.splice(index, 0, child); | |
| 260 this.hasChildren = true; | |
| 261 | |
| 262 child.parent = this; | |
| 263 child.dataGrid = this.dataGrid; | |
| 264 child._recalculateSiblings(index); | |
| 265 | |
| 266 delete child._depth; | |
| 267 delete child._revealed; | |
| 268 delete child._attached; | |
| 269 | |
| 270 var current = child.children[0]; | |
| 271 while (current) { | |
| 272 current.dataGrid = this.dataGrid; | |
| 273 delete current._depth; | |
| 274 delete current._revealed; | |
| 275 delete current._attached; | |
| 276 current = current.traverseNextNode(false, child, true); | |
| 277 } | |
| 278 | |
| 279 if (this.expanded) | |
| 280 child._attach(); | |
| 281 }, | |
| 282 | |
| 283 removeChild: function(child) | |
| 284 { | |
| 285 if (!child) | |
| 286 throw("removeChild: Node can't be undefined or null."); | |
| 287 if (child.parent !== this) | |
| 288 throw("removeChild: Node is not a child of this node."); | |
| 289 | |
| 290 child.deselect(); | |
| 291 | |
| 292 this.children.remove(child, true); | |
| 293 | |
| 294 if (child.previousSibling) | |
| 295 child.previousSibling.nextSibling = child.nextSibling; | |
| 296 if (child.nextSibling) | |
| 297 child.nextSibling.previousSibling = child.previousSibling; | |
| 298 | |
| 299 child.dataGrid = null; | |
| 300 child.parent = null; | |
| 301 child.nextSibling = null; | |
| 302 child.previousSibling = null; | |
| 303 | |
| 304 if (this.children.length <= 0) | |
| 305 this.hasChildren = false; | |
| 306 }, | |
| 307 | |
| 308 removeChildren: function() | |
| 309 { | |
| 310 for (var i = 0; i < this.children.length; ++i) { | |
| 311 var child = this.children[i]; | |
| 312 child.deselect(); | |
| 313 child._detach(); | |
| 314 | |
| 315 child.dataGrid = null; | |
| 316 child.parent = null; | |
| 317 child.nextSibling = null; | |
| 318 child.previousSibling = null; | |
| 319 } | |
| 320 | |
| 321 this.children = []; | |
| 322 this.hasChildren = false; | |
| 323 }, | |
| 324 | |
| 325 removeChildrenRecursive: function() | |
| 326 { | |
| 327 var childrenToRemove = this.children; | |
| 328 | |
| 329 var child = this.children[0]; | |
| 330 while (child) { | |
| 331 if (child.children.length) | |
| 332 childrenToRemove = childrenToRemove.concat(child.children); | |
| 333 child = child.traverseNextNode(false, this, true); | |
| 334 } | |
| 335 | |
| 336 for (var i = 0; i < childrenToRemove.length; ++i) { | |
| 337 var child = childrenToRemove[i]; | |
| 338 child.deselect(); | |
| 339 child._detach(); | |
| 340 | |
| 341 child.children = []; | |
| 342 child.dataGrid = null; | |
| 343 child.parent = null; | |
| 344 child.nextSibling = null; | |
| 345 child.previousSibling = null; | |
| 346 } | |
| 347 | |
| 348 this.children = []; | |
| 349 }, | |
| 350 | |
| 351 handleKeyEvent: function(event) | |
| 352 { | |
| 353 if (!this.selectedNode || event.shiftKey || event.metaKey || event.ctrlK
ey) | |
| 354 return false; | |
| 355 | |
| 356 var handled = false; | |
| 357 var nextSelectedNode; | |
| 358 if (event.keyIdentifier === "Up" && !event.altKey) { | |
| 359 nextSelectedNode = this.selectedNode.traversePreviousNode(true); | |
| 360 while (nextSelectedNode && !nextSelectedNode.selectable) | |
| 361 nextSelectedNode = nextSelectedNode.traversePreviousNode(!this.e
xpandTreeNodesWhenArrowing); | |
| 362 handled = nextSelectedNode ? true : false; | |
| 363 } else if (event.keyIdentifier === "Down" && !event.altKey) { | |
| 364 nextSelectedNode = this.selectedNode.traverseNextNode(true); | |
| 365 while (nextSelectedNode && !nextSelectedNode.selectable) | |
| 366 nextSelectedNode = nextSelectedNode.traverseNextNode(!this.expan
dTreeNodesWhenArrowing); | |
| 367 handled = nextSelectedNode ? true : false; | |
| 368 } else if (event.keyIdentifier === "Left") { | |
| 369 if (this.selectedNode.expanded) { | |
| 370 if (event.altKey) | |
| 371 this.selectedNode.collapseRecursively(); | |
| 372 else | |
| 373 this.selectedNode.collapse(); | |
| 374 handled = true; | |
| 375 } else if (this.selectedNode.parent && !this.selectedNode.parent.roo
t) { | |
| 376 handled = true; | |
| 377 if (this.selectedNode.parent.selectable) { | |
| 378 nextSelectedNode = this.selectedNode.parent; | |
| 379 handled = nextSelectedNode ? true : false; | |
| 380 } else if (this.selectedNode.parent) | |
| 381 this.selectedNode.parent.collapse(); | |
| 382 } | |
| 383 } else if (event.keyIdentifier === "Right") { | |
| 384 if (!this.selectedNode.revealed) { | |
| 385 this.selectedNode.reveal(); | |
| 386 handled = true; | |
| 387 } else if (this.selectedNode.hasChildren) { | |
| 388 handled = true; | |
| 389 if (this.selectedNode.expanded) { | |
| 390 nextSelectedNode = this.selectedNode.children[0]; | |
| 391 handled = nextSelectedNode ? true : false; | |
| 392 } else { | |
| 393 if (event.altKey) | |
| 394 this.selectedNode.expandRecursively(); | |
| 395 else | |
| 396 this.selectedNode.expand(); | |
| 397 } | |
| 398 } | |
| 399 } | |
| 400 | |
| 401 if (nextSelectedNode) { | |
| 402 nextSelectedNode.reveal(); | |
| 403 nextSelectedNode.select(); | |
| 404 } | |
| 405 | |
| 406 if (handled) { | |
| 407 event.preventDefault(); | |
| 408 event.stopPropagation(); | |
| 409 } | |
| 410 | |
| 411 return handled; | |
| 412 }, | |
| 413 | |
| 414 expand: function() | |
| 415 { | |
| 416 // This is the root, do nothing. | |
| 417 }, | |
| 418 | |
| 419 collapse: function() | |
| 420 { | |
| 421 // This is the root, do nothing. | |
| 422 }, | |
| 423 | |
| 424 reveal: function() | |
| 425 { | |
| 426 // This is the root, do nothing. | |
| 427 }, | |
| 428 | |
| 429 dataGridNodeFromEvent: function(event) | |
| 430 { | |
| 431 var rowElement = event.target.enclosingNodeOrSelfWithNodeName("tr"); | |
| 432 return rowElement._dataGridNode; | |
| 433 }, | |
| 434 | |
| 435 dataGridNodeFromPoint: function(x, y) | |
| 436 { | |
| 437 var node = this._dataTable.ownerDocument.elementFromPoint(x, y); | |
| 438 var rowElement = node.enclosingNodeOrSelfWithNodeName("tr"); | |
| 439 return rowElement._dataGridNode; | |
| 440 }, | |
| 441 | |
| 442 _keyDown: function(event) | |
| 443 { | |
| 444 this.handleKeyEvent(event); | |
| 445 }, | |
| 446 | |
| 447 _clickInHeaderCell: function(event) | |
| 448 { | |
| 449 var cell = event.target.enclosingNodeOrSelfWithNodeName("th"); | |
| 450 if (!cell || !cell.columnIdentifier || !cell.hasStyleClass("sortable")) | |
| 451 return; | |
| 452 | |
| 453 var sortOrder = this.sortOrder; | |
| 454 | |
| 455 if (this._sortColumnCell) { | |
| 456 this._sortColumnCell.removeStyleClass("sort-ascending"); | |
| 457 this._sortColumnCell.removeStyleClass("sort-descending"); | |
| 458 } | |
| 459 | |
| 460 if (cell == this._sortColumnCell) { | |
| 461 if (sortOrder == "ascending") | |
| 462 sortOrder = "descending"; | |
| 463 else | |
| 464 sortOrder = "ascending"; | |
| 465 } | |
| 466 | |
| 467 this._sortColumnCell = cell; | |
| 468 | |
| 469 cell.addStyleClass("sort-" + sortOrder); | |
| 470 | |
| 471 this.dispatchEventToListeners("sorting changed"); | |
| 472 }, | |
| 473 | |
| 474 _mouseDownInDataTable: function(event) | |
| 475 { | |
| 476 var gridNode = this.dataGridNodeFromEvent(event); | |
| 477 if (!gridNode || !gridNode.selectable) | |
| 478 return; | |
| 479 | |
| 480 if (gridNode.isEventWithinDisclosureTriangle(event)) | |
| 481 return; | |
| 482 | |
| 483 if (event.metaKey) { | |
| 484 if (gridNode.selected) | |
| 485 gridNode.deselect(); | |
| 486 else | |
| 487 gridNode.select(); | |
| 488 } else | |
| 489 gridNode.select(); | |
| 490 }, | |
| 491 | |
| 492 _clickInDataTable: function(event) | |
| 493 { | |
| 494 var gridNode = this.dataGridNodeFromEvent(event); | |
| 495 if (!gridNode || !gridNode.hasChildren) | |
| 496 return; | |
| 497 | |
| 498 if (!gridNode.isEventWithinDisclosureTriangle(event)) | |
| 499 return; | |
| 500 | |
| 501 if (gridNode.expanded) { | |
| 502 if (event.altKey) | |
| 503 gridNode.collapseRecursively(); | |
| 504 else | |
| 505 gridNode.collapse(); | |
| 506 } else { | |
| 507 if (event.altKey) | |
| 508 gridNode.expandRecursively(); | |
| 509 else | |
| 510 gridNode.expand(); | |
| 511 } | |
| 512 }, | |
| 513 | |
| 514 _startResizerDragging: function(event) | |
| 515 { | |
| 516 this.currentResizer = event.target; | |
| 517 if (!this.currentResizer.rightNeighboringColumnID) | |
| 518 return; | |
| 519 WebInspector.elementDragStart(this.lastResizer, this._resizerDragging.bi
nd(this), | |
| 520 this._endResizerDragging.bind(this), event, "col-resize"); | |
| 521 }, | |
| 522 | |
| 523 _resizerDragging: function(event) | |
| 524 { | |
| 525 var resizer = this.currentResizer; | |
| 526 if (!resizer) | |
| 527 return; | |
| 528 | |
| 529 // Constrain the dragpoint to be within the containing div of the | |
| 530 // datagrid. | |
| 531 var dragPoint = event.clientX - this.element.totalOffsetLeft; | |
| 532 // Constrain the dragpoint to be within the space made up by the | |
| 533 // column directly to the left and the column directly to the right. | |
| 534 var leftEdgeOfPreviousColumn = 0; | |
| 535 var firstRowCells = this.headerTableBody.rows[0].cells; | |
| 536 for (var i = 0; i < resizer.rightNeighboringColumnID - 1; i++) | |
| 537 leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth; | |
| 538 | |
| 539 var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[res
izer.rightNeighboringColumnID - 1].offsetWidth + firstRowCells[resizer.rightNeig
hboringColumnID].offsetWidth; | |
| 540 | |
| 541 // Give each column some padding so that they don't disappear.
| |
| 542 var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding; | |
| 543 var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding; | |
| 544 | |
| 545 dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum); | |
| 546 | |
| 547 resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment
) + "px"; | |
| 548 | |
| 549 var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this.
_dataTable.offsetWidth) * 100) + "%"; | |
| 550 this._headerTableColumnGroup.children[resizer.rightNeighboringColumnID -
1].style.width = percentLeftColumn; | |
| 551 this._dataTableColumnGroup.children[resizer.rightNeighboringColumnID - 1
].style.width = percentLeftColumn; | |
| 552 | |
| 553 var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._d
ataTable.offsetWidth) * 100) + "%"; | |
| 554 this._headerTableColumnGroup.children[resizer.rightNeighboringColumnID].
style.width = percentRightColumn; | |
| 555 this._dataTableColumnGroup.children[resizer.rightNeighboringColumnID].st
yle.width = percentRightColumn; | |
| 556 | |
| 557 event.preventDefault(); | |
| 558 }, | |
| 559 | |
| 560 _endResizerDragging: function(event) | |
| 561 { | |
| 562 WebInspector.elementDragEnd(event); | |
| 563 this.currentResizer = null; | |
| 564 }, | |
| 565 | |
| 566 ColumnResizePadding: 10, | |
| 567 | |
| 568 CenterResizerOverBorderAdjustment: 3, | |
| 569 } | |
| 570 | |
| 571 WebInspector.DataGrid.prototype.__proto__ = WebInspector.Object.prototype; | |
| 572 | |
| 573 WebInspector.DataGridNode = function(data, hasChildren) | |
| 574 { | |
| 575 this._expanded = false; | |
| 576 this._selected = false; | |
| 577 this._shouldRefreshChildren = true; | |
| 578 this._data = data || {}; | |
| 579 this.hasChildren = hasChildren || false; | |
| 580 this.children = []; | |
| 581 this.dataGrid = null; | |
| 582 this.parent = null; | |
| 583 this.previousSibling = null; | |
| 584 this.nextSibling = null; | |
| 585 this.disclosureToggleWidth = 10; | |
| 586 } | |
| 587 | |
| 588 WebInspector.DataGridNode.prototype = { | |
| 589 selectable: true, | |
| 590 | |
| 591 get element() | |
| 592 { | |
| 593 if (this._element) | |
| 594 return this._element; | |
| 595 | |
| 596 if (!this.dataGrid) | |
| 597 return null; | |
| 598 | |
| 599 this._element = document.createElement("tr"); | |
| 600 this._element._dataGridNode = this; | |
| 601 | |
| 602 if (this.hasChildren) | |
| 603 this._element.addStyleClass("parent"); | |
| 604 if (this.expanded) | |
| 605 this._element.addStyleClass("expanded"); | |
| 606 if (this.selected) | |
| 607 this._element.addStyleClass("selected"); | |
| 608 if (this.revealed) | |
| 609 this._element.addStyleClass("revealed"); | |
| 610 | |
| 611 for (var columnIdentifier in this.dataGrid.columns) { | |
| 612 var cell = this.createCell(columnIdentifier); | |
| 613 this._element.appendChild(cell); | |
| 614 } | |
| 615 | |
| 616 return this._element; | |
| 617 }, | |
| 618 | |
| 619 get data() | |
| 620 { | |
| 621 return this._data; | |
| 622 }, | |
| 623 | |
| 624 set data(x) | |
| 625 { | |
| 626 this._data = x || {}; | |
| 627 this.refresh(); | |
| 628 }, | |
| 629 | |
| 630 get revealed() | |
| 631 { | |
| 632 if ("_revealed" in this) | |
| 633 return this._revealed; | |
| 634 | |
| 635 var currentAncestor = this.parent; | |
| 636 while (currentAncestor && !currentAncestor.root) { | |
| 637 if (!currentAncestor.expanded) { | |
| 638 this._revealed = false; | |
| 639 return false; | |
| 640 } | |
| 641 | |
| 642 currentAncestor = currentAncestor.parent; | |
| 643 } | |
| 644 | |
| 645 this._revealed = true; | |
| 646 return true; | |
| 647 }, | |
| 648 | |
| 649 set hasChildren(x) | |
| 650 { | |
| 651 if (this._hasChildren === x) | |
| 652 return; | |
| 653 | |
| 654 this._hasChildren = x; | |
| 655 | |
| 656 if (!this._element) | |
| 657 return; | |
| 658 | |
| 659 if (this._hasChildren) | |
| 660 { | |
| 661 this._element.addStyleClass("parent"); | |
| 662 if (this.expanded) | |
| 663 this._element.addStyleClass("expanded"); | |
| 664 } | |
| 665 else | |
| 666 { | |
| 667 this._element.removeStyleClass("parent"); | |
| 668 this._element.removeStyleClass("expanded"); | |
| 669 } | |
| 670 }, | |
| 671 | |
| 672 get hasChildren() | |
| 673 { | |
| 674 return this._hasChildren; | |
| 675 }, | |
| 676 | |
| 677 set revealed(x) | |
| 678 { | |
| 679 if (this._revealed === x) | |
| 680 return; | |
| 681 | |
| 682 this._revealed = x; | |
| 683 | |
| 684 if (this._element) { | |
| 685 if (this._revealed) | |
| 686 this._element.addStyleClass("revealed"); | |
| 687 else | |
| 688 this._element.removeStyleClass("revealed"); | |
| 689 } | |
| 690 | |
| 691 for (var i = 0; i < this.children.length; ++i) | |
| 692 this.children[i].revealed = x && this.expanded; | |
| 693 }, | |
| 694 | |
| 695 get depth() | |
| 696 { | |
| 697 if ("_depth" in this) | |
| 698 return this._depth; | |
| 699 if (this.parent && !this.parent.root) | |
| 700 this._depth = this.parent.depth + 1; | |
| 701 else | |
| 702 this._depth = 0; | |
| 703 return this._depth; | |
| 704 }, | |
| 705 | |
| 706 get shouldRefreshChildren() | |
| 707 { | |
| 708 return this._shouldRefreshChildren; | |
| 709 }, | |
| 710 | |
| 711 set shouldRefreshChildren(x) | |
| 712 { | |
| 713 this._shouldRefreshChildren = x; | |
| 714 if (x && this.expanded) | |
| 715 this.expand(); | |
| 716 }, | |
| 717 | |
| 718 get selected() | |
| 719 { | |
| 720 return this._selected; | |
| 721 }, | |
| 722 | |
| 723 set selected(x) | |
| 724 { | |
| 725 if (x) | |
| 726 this.select(); | |
| 727 else | |
| 728 this.deselect(); | |
| 729 }, | |
| 730 | |
| 731 get expanded() | |
| 732 { | |
| 733 return this._expanded; | |
| 734 }, | |
| 735 | |
| 736 set expanded(x) | |
| 737 { | |
| 738 if (x) | |
| 739 this.expand(); | |
| 740 else | |
| 741 this.collapse(); | |
| 742 }, | |
| 743 | |
| 744 refresh: function() | |
| 745 { | |
| 746 if (!this._element || !this.dataGrid) | |
| 747 return; | |
| 748 | |
| 749 this._element.removeChildren(); | |
| 750 | |
| 751 for (var columnIdentifier in this.dataGrid.columns) { | |
| 752 var cell = this.createCell(columnIdentifier); | |
| 753 this._element.appendChild(cell); | |
| 754 } | |
| 755 }, | |
| 756 | |
| 757 createCell: function(columnIdentifier) | |
| 758 { | |
| 759 var cell = document.createElement("td"); | |
| 760 cell.className = columnIdentifier + "-column"; | |
| 761 | |
| 762 var alignment = this.dataGrid.aligned[columnIdentifier]; | |
| 763 if (alignment) | |
| 764 cell.addStyleClass(alignment); | |
| 765 | |
| 766 var div = document.createElement("div"); | |
| 767 div.textContent = this.data[columnIdentifier]; | |
| 768 cell.appendChild(div); | |
| 769 | |
| 770 if (columnIdentifier === this.dataGrid.disclosureColumnIdentifier) { | |
| 771 cell.addStyleClass("disclosure"); | |
| 772 if (this.depth) | |
| 773 cell.style.setProperty("padding-left", (this.depth * this.dataGr
id.indentWidth) + "px"); | |
| 774 } | |
| 775 | |
| 776 return cell; | |
| 777 }, | |
| 778 | |
| 779 // Share these functions with DataGrid. They are written to work with a Data
GridNode this object. | |
| 780 appendChild: WebInspector.DataGrid.prototype.appendChild, | |
| 781 insertChild: WebInspector.DataGrid.prototype.insertChild, | |
| 782 removeChild: WebInspector.DataGrid.prototype.removeChild, | |
| 783 removeChildren: WebInspector.DataGrid.prototype.removeChildren, | |
| 784 removeChildrenRecursive: WebInspector.DataGrid.prototype.removeChildrenRecur
sive, | |
| 785 | |
| 786 _recalculateSiblings: function(myIndex) | |
| 787 { | |
| 788 if (!this.parent) | |
| 789 return; | |
| 790 | |
| 791 var previousChild = (myIndex > 0 ? this.parent.children[myIndex - 1] : n
ull); | |
| 792 | |
| 793 if (previousChild) { | |
| 794 previousChild.nextSibling = this; | |
| 795 this.previousSibling = previousChild; | |
| 796 } else | |
| 797 this.previousSibling = null; | |
| 798 | |
| 799 var nextChild = this.parent.children[myIndex + 1]; | |
| 800 | |
| 801 if (nextChild) { | |
| 802 nextChild.previousSibling = this; | |
| 803 this.nextSibling = nextChild; | |
| 804 } else | |
| 805 this.nextSibling = null; | |
| 806 }, | |
| 807 | |
| 808 collapse: function() | |
| 809 { | |
| 810 if (this._element) | |
| 811 this._element.removeStyleClass("expanded"); | |
| 812 | |
| 813 this._expanded = false; | |
| 814 | |
| 815 for (var i = 0; i < this.children.length; ++i) | |
| 816 this.children[i].revealed = false; | |
| 817 | |
| 818 this.dispatchEventToListeners("collapsed"); | |
| 819 }, | |
| 820 | |
| 821 collapseRecursively: function() | |
| 822 { | |
| 823 var item = this; | |
| 824 while (item) { | |
| 825 if (item.expanded) | |
| 826 item.collapse(); | |
| 827 item = item.traverseNextNode(false, this, true); | |
| 828 } | |
| 829 }, | |
| 830 | |
| 831 expand: function() | |
| 832 { | |
| 833 if (!this.hasChildren || this.expanded) | |
| 834 return; | |
| 835 | |
| 836 if (this.revealed && !this._shouldRefreshChildren) | |
| 837 for (var i = 0; i < this.children.length; ++i) | |
| 838 this.children[i].revealed = true; | |
| 839 | |
| 840 if (this._shouldRefreshChildren) { | |
| 841 for (var i = 0; i < this.children.length; ++i) | |
| 842 this.children[i]._detach(); | |
| 843 | |
| 844 this.dispatchEventToListeners("populate"); | |
| 845 | |
| 846 if (this._attached) { | |
| 847 for (var i = 0; i < this.children.length; ++i) { | |
| 848 var child = this.children[i]; | |
| 849 if (this.revealed) | |
| 850 child.revealed = true; | |
| 851 child._attach(); | |
| 852 } | |
| 853 } | |
| 854 | |
| 855 delete this._shouldRefreshChildren; | |
| 856 } | |
| 857 | |
| 858 if (this._element) | |
| 859 this._element.addStyleClass("expanded"); | |
| 860 | |
| 861 this._expanded = true; | |
| 862 | |
| 863 this.dispatchEventToListeners("expanded"); | |
| 864 }, | |
| 865 | |
| 866 expandRecursively: function() | |
| 867 { | |
| 868 var item = this; | |
| 869 while (item) { | |
| 870 item.expand(); | |
| 871 item = item.traverseNextNode(false, this); | |
| 872 } | |
| 873 }, | |
| 874 | |
| 875 reveal: function() | |
| 876 { | |
| 877 var currentAncestor = this.parent; | |
| 878 while (currentAncestor && !currentAncestor.root) { | |
| 879 if (!currentAncestor.expanded) | |
| 880 currentAncestor.expand(); | |
| 881 currentAncestor = currentAncestor.parent; | |
| 882 } | |
| 883 | |
| 884 this.element.scrollIntoViewIfNeeded(false); | |
| 885 | |
| 886 this.dispatchEventToListeners("revealed"); | |
| 887 }, | |
| 888 | |
| 889 select: function(supressSelectedEvent) | |
| 890 { | |
| 891 if (!this.dataGrid || !this.selectable || this.selected) | |
| 892 return; | |
| 893 | |
| 894 if (this.dataGrid.selectedNode) | |
| 895 this.dataGrid.selectedNode.deselect(); | |
| 896 | |
| 897 this._selected = true; | |
| 898 this.dataGrid.selectedNode = this; | |
| 899 | |
| 900 if (this._element) | |
| 901 this._element.addStyleClass("selected"); | |
| 902 | |
| 903 if (!supressSelectedEvent) | |
| 904 this.dispatchEventToListeners("selected"); | |
| 905 }, | |
| 906 | |
| 907 deselect: function(supressDeselectedEvent) | |
| 908 { | |
| 909 if (!this.dataGrid || this.dataGrid.selectedNode !== this || !this.selec
ted) | |
| 910 return; | |
| 911 | |
| 912 this._selected = false; | |
| 913 this.dataGrid.selectedNode = null; | |
| 914 | |
| 915 if (this._element) | |
| 916 this._element.removeStyleClass("selected"); | |
| 917 | |
| 918 if (!supressDeselectedEvent) | |
| 919 this.dispatchEventToListeners("deselected"); | |
| 920 }, | |
| 921 | |
| 922 traverseNextNode: function(skipHidden, stayWithin, dontPopulate, info) | |
| 923 { | |
| 924 if (!dontPopulate && this.hasChildren) | |
| 925 this.dispatchEventToListeners("populate"); | |
| 926 | |
| 927 if (info) | |
| 928 info.depthChange = 0; | |
| 929 | |
| 930 var node = (!skipHidden || this.revealed) ? this.children[0] : null; | |
| 931 if (node && (!skipHidden || this.expanded)) { | |
| 932 if (info) | |
| 933 info.depthChange = 1; | |
| 934 return node; | |
| 935 } | |
| 936 | |
| 937 if (this === stayWithin) | |
| 938 return null; | |
| 939 | |
| 940 node = (!skipHidden || this.revealed) ? this.nextSibling : null; | |
| 941 if (node) | |
| 942 return node; | |
| 943 | |
| 944 node = this; | |
| 945 while (node && !node.root && !((!skipHidden || node.revealed) ? node.nex
tSibling : null) && node.parent !== stayWithin) { | |
| 946 if (info) | |
| 947 info.depthChange -= 1; | |
| 948 node = node.parent; | |
| 949 } | |
| 950 | |
| 951 if (!node) | |
| 952 return null; | |
| 953 | |
| 954 return (!skipHidden || node.revealed) ? node.nextSibling : null; | |
| 955 }, | |
| 956 | |
| 957 traversePreviousNode: function(skipHidden, dontPopulate) | |
| 958 { | |
| 959 var node = (!skipHidden || this.revealed) ? this.previousSibling : null; | |
| 960 if (!dontPopulate && node && node.hasChildren) | |
| 961 node.dispatchEventToListeners("populate"); | |
| 962 | |
| 963 while (node && ((!skipHidden || (node.revealed && node.expanded)) ? node
.children[node.children.length - 1] : null)) { | |
| 964 if (!dontPopulate && node.hasChildren) | |
| 965 node.dispatchEventToListeners("populate"); | |
| 966 node = ((!skipHidden || (node.revealed && node.expanded)) ? node.chi
ldren[node.children.length - 1] : null); | |
| 967 } | |
| 968 | |
| 969 if (node) | |
| 970 return node; | |
| 971 | |
| 972 if (!this.parent || this.parent.root) | |
| 973 return null; | |
| 974 | |
| 975 return this.parent; | |
| 976 }, | |
| 977 | |
| 978 isEventWithinDisclosureTriangle: function(event) | |
| 979 { | |
| 980 if (!this.hasChildren) | |
| 981 return false; | |
| 982 var cell = event.target.enclosingNodeOrSelfWithNodeName("td"); | |
| 983 if (!cell.hasStyleClass("disclosure")) | |
| 984 return false; | |
| 985 var computedLeftPadding = window.getComputedStyle(cell).getPropertyCSSVa
lue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX); | |
| 986 var left = cell.totalOffsetLeft + computedLeftPadding; | |
| 987 return event.pageX >= left && event.pageX <= left + this.disclosureToggl
eWidth; | |
| 988 }, | |
| 989 | |
| 990 _attach: function() | |
| 991 { | |
| 992 if (!this.dataGrid || this._attached) | |
| 993 return; | |
| 994 | |
| 995 this._attached = true; | |
| 996 | |
| 997 var nextNode = null; | |
| 998 var previousNode = this.traversePreviousNode(true, true); | |
| 999 if (previousNode && previousNode.element.parentNode && previousNode.elem
ent.nextSibling) | |
| 1000 var nextNode = previousNode.element.nextSibling; | |
| 1001 if (!nextNode) | |
| 1002 nextNode = this.dataGrid.dataTableBody.lastChild; | |
| 1003 this.dataGrid.dataTableBody.insertBefore(this.element, nextNode); | |
| 1004 | |
| 1005 if (this.expanded) | |
| 1006 for (var i = 0; i < this.children.length; ++i) | |
| 1007 this.children[i]._attach(); | |
| 1008 }, | |
| 1009 | |
| 1010 _detach: function() | |
| 1011 { | |
| 1012 if (!this._attached) | |
| 1013 return; | |
| 1014 | |
| 1015 this._attached = false; | |
| 1016 | |
| 1017 if (this._element && this._element.parentNode) | |
| 1018 this._element.parentNode.removeChild(this._element); | |
| 1019 | |
| 1020 for (var i = 0; i < this.children.length; ++i) | |
| 1021 this.children[i]._detach(); | |
| 1022 } | |
| 1023 } | |
| 1024 | |
| 1025 WebInspector.DataGridNode.prototype.__proto__ = WebInspector.Object.prototype; | |
| 1026 | |
| 1027 WebInspector.CreationDataGridNode = function(data, hasChildren) | |
| 1028 { | |
| 1029 WebInspector.DataGridNode.call(this, data, hasChildren); | |
| 1030 this.isCreationNode = true; | |
| 1031 } | |
| 1032 | |
| 1033 WebInspector.CreationDataGridNode.prototype = { | |
| 1034 makeNormal: function() | |
| 1035 { | |
| 1036 delete this.isCreationNode; | |
| 1037 delete this.makeNormal; | |
| 1038 } | |
| 1039 } | |
| 1040 | |
| 1041 WebInspector.CreationDataGridNode.prototype.__proto__ = WebInspector.DataGridNod
e.prototype; | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 853002:
Updating the Chromium reference build for Windows. The continuous... (Closed)
Base URL: svn://chrome-svn/chrome/trunk/deps/reference_builds/chrome/