Changeset 54599 in webkit
- Timestamp:
- Feb 10, 2010 7:45:40 AM (14 years ago)
- Location:
- trunk
- Files:
-
- 2 added
- 7 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r54587 r54599 1 2010-02-10 Alexander Pavlov <apavlov@chromium.org> 2 3 Reviewed by Pavel Feldman. 4 5 Web Inspector: Elements Panel: Limit the number of initially loaded element children 6 https://bugs.webkit.org/show_bug.cgi?id=34421 7 8 * inspector/elements-panel-limited-children-expected.txt: Added. 9 * inspector/elements-panel-limited-children.html: Added. 10 * platform/qt/Skipped: 11 1 12 2010-02-10 Adam Barth <abarth@webkit.org> 2 13 -
trunk/LayoutTests/platform/qt/Skipped
r54573 r54599 4852 4852 inspector/console-log-before-inspector-open.html 4853 4853 inspector/console-tests.html 4854 inspector/elements-panel-limited-children.html 4854 4855 inspector/elements-panel-structure.html 4855 4856 inspector/evaluate-in-frontend.html -
trunk/WebCore/ChangeLog
r54597 r54599 1 2010-02-10 Alexander Pavlov <apavlov@chromium.org> 2 3 Reviewed by Pavel Feldman. 4 5 Web Inspector: Elements Panel: Limit the number of initially loaded element children 6 https://bugs.webkit.org/show_bug.cgi?id=34421 7 8 Test: inspector/elements-panel-limited-children.html 9 10 * English.lproj/localizedStrings.js: 11 * inspector/front-end/DOMAgent.js: 12 (WebInspector.DOMNode.prototype._insertChild): 13 * inspector/front-end/ElementsPanel.js: 14 (WebInspector.ElementsPanel.prototype.updateModifiedNodes): 15 * inspector/front-end/ElementsTreeOutline.js: 16 (WebInspector.ElementsTreeOutline.prototype.createTreeElementFor): 17 (WebInspector.ElementsTreeOutline.prototype.revealAndSelectNode): 18 (WebInspector.ElementsTreeElement): 19 (WebInspector.ElementsTreeElement.prototype.get expandedChildrenLimit): 20 (WebInspector.ElementsTreeElement.prototype.set expandedChildrenLimit): 21 (WebInspector.ElementsTreeElement.prototype.get expandedChildCount): 22 (WebInspector.ElementsTreeElement.prototype.showChild): 23 (WebInspector.ElementsTreeElement.prototype.insertChildElement): 24 (WebInspector.ElementsTreeElement.prototype.moveChild): 25 (WebInspector.ElementsTreeElement.prototype._updateChildren.updateChildrenOfNode): 26 (WebInspector.ElementsTreeElement.prototype._updateChildren): 27 (WebInspector.ElementsTreeElement.prototype.adjustCollapsedRange): 28 (WebInspector.ElementsTreeElement.prototype.handleLoadAllChildren): 29 (): 30 * inspector/front-end/inspector.css: 31 1 32 2010-02-10 Mikhail Naganov <mnaganov@chromium.org> 2 33 -
trunk/WebCore/inspector/front-end/DOMAgent.js
r53766 r54599 154 154 { 155 155 var node = new WebInspector.DOMNode(this.ownerDocument, payload); 156 if (!prev) 157 // First node 158 this.children = [ node ]; 159 else 156 if (!prev) { 157 if (!this.children) { 158 // First node 159 this.children = [ node ]; 160 } else 161 this.children.unshift(node); 162 } else 160 163 this.children.splice(this.children.indexOf(prev) + 1, 0, node); 161 164 this._renumber(); -
trunk/WebCore/inspector/front-end/ElementsPanel.js
r53766 r54599 524 524 if (this.recentlyModifiedNodes[i].updated) { 525 525 var nodeItem = this.treeOutline.findTreeElement(node); 526 nodeItem.updateTitle(); 526 if (nodeItem) 527 nodeItem.updateTitle(); 527 528 continue; 528 529 } -
trunk/WebCore/inspector/front-end/ElementsTreeOutline.js
r54470 r54599 156 156 }, 157 157 158 createTreeElementFor: function(node) 159 { 160 var treeElement = this.findTreeElement(node); 161 if (treeElement) 162 return treeElement; 163 if (!node.parentNode) 164 return null; 165 166 var treeElement = this.createTreeElementFor(node.parentNode); 167 if (treeElement && treeElement.showChild(node.index)) 168 return treeElement.children[node.index]; 169 170 return null; 171 }, 172 158 173 revealAndSelectNode: function(node) 159 174 { … … 161 176 return; 162 177 163 var treeElement = this. findTreeElement(node);178 var treeElement = this.createTreeElementFor(node); 164 179 if (!treeElement) 165 180 return; … … 297 312 if (this.representedObject.nodeType == Node.ELEMENT_NODE) 298 313 this._canAddAttributes = true; 314 315 this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit; 299 316 } 317 318 WebInspector.ElementsTreeElement.InitialChildrenLimit = 500; 300 319 301 320 WebInspector.ElementsTreeElement.prototype = { … … 342 361 }, 343 362 363 get expandedChildrenLimit() 364 { 365 return this._expandedChildrenLimit; 366 }, 367 368 set expandedChildrenLimit(x) 369 { 370 if (this._expandedChildrenLimit === x) 371 return; 372 373 this._expandedChildrenLimit = x; 374 if (this.treeOutline && !this._updateChildrenInProgress) 375 this._updateChildren(true); 376 }, 377 378 get expandedChildCount() 379 { 380 var count = this.children.length; 381 if (count && this.children[count - 1].elementCloseTag) 382 count--; 383 return count; 384 }, 385 386 showChild: function(index) 387 { 388 if (index >= this.expandedChildrenLimit) { 389 this._expandedChildrenLimit = index + 1; 390 this._updateChildren(true); 391 } 392 393 // Whether index-th child is visible in the children tree 394 return this.expandedChildCount > index; 395 }, 396 344 397 createTooltipForImageNode: function(node, callback) 345 398 { … … 423 476 }, 424 477 478 insertChildElement: function(child, index) 479 { 480 var newElement = new WebInspector.ElementsTreeElement(child); 481 newElement.selectable = this.treeOutline.selectEnabled; 482 this.insertChild(newElement, index); 483 return newElement; 484 }, 485 486 moveChild: function(child, targetIndex) 487 { 488 var wasSelected = child.selected; 489 treeElement.removeChild(child); 490 treeElement.insertChild(child, targetIndex); 491 if (wasSelected) 492 existingTreeElement.select(); 493 }, 494 425 495 _updateChildren: function(fullRefresh) 426 496 { 497 if (this._updateChildrenInProgress) 498 return; 499 500 this._updateChildrenInProgress = true; 501 var focusedNode = this.treeOutline.focusedDOMNode; 502 var originalScrollTop; 427 503 if (fullRefresh) { 504 var treeOutlineContainerElement = this.treeOutline.element.parentNode; 505 originalScrollTop = treeOutlineContainerElement.scrollTop; 428 506 var selectedTreeElement = this.treeOutline.selectedTreeElement; 429 507 if (selectedTreeElement && selectedTreeElement.hasAncestor(this)) … … 434 512 var treeElement = this; 435 513 var treeChildIndex = 0; 514 var elementToSelect; 436 515 437 516 function updateChildrenOfNode(node) … … 444 523 // Find any existing element that is later in the children list. 445 524 var existingTreeElement = null; 446 for (var i = (treeChildIndex + 1) ; i < treeElement.children.length; ++i) {525 for (var i = (treeChildIndex + 1), size = treeElement.expandedChildCount; i < size; ++i) { 447 526 if (treeElement.children[i].representedObject === child) { 448 527 existingTreeElement = treeElement.children[i]; … … 453 532 if (existingTreeElement && existingTreeElement.parent === treeElement) { 454 533 // If an existing element was found and it has the same parent, just move it. 455 var wasSelected = existingTreeElement.selected; 456 treeElement.removeChild(existingTreeElement); 457 treeElement.insertChild(existingTreeElement, treeChildIndex); 458 if (wasSelected) 459 existingTreeElement.select(); 534 treeElement.moveChild(existingTreeElement, treeChildIndex); 460 535 } else { 461 536 // No existing element found, insert a new element. 462 var newElement = new WebInspector.ElementsTreeElement(child); 463 newElement.selectable = treeOutline.selectEnabled; 464 treeElement.insertChild(newElement, treeChildIndex); 537 if (treeChildIndex < treeElement.expandedChildrenLimit) { 538 var newElement = treeElement.insertChildElement(child, treeChildIndex); 539 if (child === focusedNode) 540 elementToSelect = newElement; 541 if (treeElement.expandedChildCount > treeElement.expandedChildrenLimit) 542 treeElement.expandedChildrenLimit++; 543 } 465 544 } 466 545 } … … 491 570 492 571 updateChildrenOfNode(this.representedObject); 572 this.adjustCollapsedRange(false); 493 573 494 574 var lastChild = this.children[this.children.length - 1]; … … 500 580 this.appendChild(item); 501 581 } 582 583 // We want to restore the original selection and tree scroll position after a full refresh, if possible. 584 if (fullRefresh && elementToSelect) { 585 elementToSelect.select(); 586 if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight) 587 treeOutlineContainerElement.scrollTop = originalScrollTop; 588 } 589 590 delete this._updateChildrenInProgress; 591 }, 592 593 adjustCollapsedRange: function() 594 { 595 // Ensure precondition: the Expand All button is not found in the tree. 596 if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent) 597 this.removeChild(this.expandAllButtonElement.__treeElement); 598 599 const node = this.representedObject; 600 const childNodeCount = node._childNodeCount; 601 602 // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom. 603 for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i < limit; ++i) 604 this.insertChildElement(node.children[i], i); 605 606 const expandedChildCount = this.expandedChildCount; 607 if (childNodeCount > this.expandedChildCount) { 608 var targetButtonIndex = expandedChildCount; 609 if (!this.expandAllButtonElement) { 610 var title = "<button class=\"show-all-nodes\" value=\"\" />"; 611 var item = new TreeElement(title, null, false); 612 item.selectable = false; 613 this.insertChild(item, targetButtonIndex); 614 this.expandAllButtonElement = item.listItemElement.firstChild; 615 this.expandAllButtonElement.__treeElement = item; 616 this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false); 617 } else if (!this.expandAllButtonElement.__treeElement.parent) 618 this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex); 619 this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)", childNodeCount - expandedChildCount); 620 } else if (this.expandAllButtonElement) 621 delete this.expandAllButtonElement; 622 }, 623 624 handleLoadAllChildren: function() 625 { 626 this.expandedChildrenLimit = Math.max(this.representedObject._childNodeCount, this.expandedChildrenLimit + WebInspector.ElementsTreeElement.InitialChildrenLimit); 502 627 }, 503 628 … … 1039 1164 1040 1165 parentElement.removeChild(self); 1166 parentElement.adjustCollapsedRange(true); 1041 1167 } 1042 1168 -
trunk/WebCore/inspector/front-end/inspector.css
r54240 r54599 2246 2246 } 2247 2247 2248 .panel-enabler-view button:not(.status-bar-item), .pane button {2248 .panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes { 2249 2249 color: rgb(6, 6, 6); 2250 2250 background-color: transparent; … … 2263 2263 } 2264 2264 2265 button.show-all-nodes { 2266 font-size: 13px; 2267 margin: 0; 2268 padding: 0 20px; 2269 height: 20px; 2270 } 2271 2265 2272 .panel-enabler-view.welcome { 2266 2273 z-index: auto; … … 2294 2301 } 2295 2302 2296 .panel-enabler-view button:active:not(.status-bar-item), .pane button:active {2303 .panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active { 2297 2304 background-color: rgb(215, 215, 215); 2298 2305 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239))); 2299 2306 } 2300 2307 2301 body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled {2308 body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled, body.inactive button.show-all-nodes { 2302 2309 color: rgb(130, 130, 130); 2303 2310 border-color: rgb(212, 212, 212);
Note: See TracChangeset
for help on using the changeset viewer.