[SCM] WebKit Debian packaging branch, webkit-1.1, updated. upstream/1.1.21-584-g1e41756
apavlov at chromium.org
apavlov at chromium.org
Fri Feb 26 22:16:52 UTC 2010
The following commit has been merged in the webkit-1.1 branch:
commit e7be69e454c8242bce4522bf386b35813d656dd7
Author: apavlov at chromium.org <apavlov at chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Wed Feb 10 15:45:40 2010 +0000
2010-02-10 Alexander Pavlov <apavlov at chromium.org>
Reviewed by Pavel Feldman.
Web Inspector: Elements Panel: Limit the number of initially loaded element children
https://bugs.webkit.org/show_bug.cgi?id=34421
Test: inspector/elements-panel-limited-children.html
WebCore:
* English.lproj/localizedStrings.js:
* inspector/front-end/DOMAgent.js:
(WebInspector.DOMNode.prototype._insertChild):
* inspector/front-end/ElementsPanel.js:
(WebInspector.ElementsPanel.prototype.updateModifiedNodes):
* inspector/front-end/ElementsTreeOutline.js:
(WebInspector.ElementsTreeOutline.prototype.createTreeElementFor):
(WebInspector.ElementsTreeOutline.prototype.revealAndSelectNode):
(WebInspector.ElementsTreeElement):
(WebInspector.ElementsTreeElement.prototype.get expandedChildrenLimit):
(WebInspector.ElementsTreeElement.prototype.set expandedChildrenLimit):
(WebInspector.ElementsTreeElement.prototype.get expandedChildCount):
(WebInspector.ElementsTreeElement.prototype.showChild):
(WebInspector.ElementsTreeElement.prototype.insertChildElement):
(WebInspector.ElementsTreeElement.prototype.moveChild):
(WebInspector.ElementsTreeElement.prototype._updateChildren.updateChildrenOfNode):
(WebInspector.ElementsTreeElement.prototype._updateChildren):
(WebInspector.ElementsTreeElement.prototype.adjustCollapsedRange):
(WebInspector.ElementsTreeElement.prototype.handleLoadAllChildren):
():
* inspector/front-end/inspector.css:
LayoutTests:
* inspector/elements-panel-limited-children-expected.txt: Added.
* inspector/elements-panel-limited-children.html: Added.
* platform/qt/Skipped:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@54599 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index c281d4a..65b007f 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,14 @@
+2010-02-10 Alexander Pavlov <apavlov at chromium.org>
+
+ Reviewed by Pavel Feldman.
+
+ Web Inspector: Elements Panel: Limit the number of initially loaded element children
+ https://bugs.webkit.org/show_bug.cgi?id=34421
+
+ * inspector/elements-panel-limited-children-expected.txt: Added.
+ * inspector/elements-panel-limited-children.html: Added.
+ * platform/qt/Skipped:
+
2010-02-10 Adam Barth <abarth at webkit.org>
Reviewed by Darin Adler.
diff --git a/LayoutTests/inspector/elements-panel-limited-children-expected.txt b/LayoutTests/inspector/elements-panel-limited-children-expected.txt
new file mode 100644
index 0000000..ee5fb96
--- /dev/null
+++ b/LayoutTests/inspector/elements-panel-limited-children-expected.txt
@@ -0,0 +1,47 @@
+Tests that elements panel shows limited amount of node children and responds to DOM updates.
+
+1
+3
+4
+5
+6
+7
+8
+9
+10
+
+<div id="data">
+<a>
+<div id="id1">1
+</div>
+<div id="id3">3
+</div>
+<div id="id4">4
+</div>
+<div id="id5">5
+</div>Show All Nodes (6 More)
+</div>
+---
+<div id="data">
+<a>
+<div id="id1">1
+</div>
+<div id="id3">3
+</div>
+<div id="id4">4
+</div>
+<div id="id5">5
+</div>
+<div id="id6">6
+</div>
+<div id="id7">7
+</div>
+<div id="id8">8
+</div>
+<div id="id9">9
+</div>
+<div id="id10">10
+</div>
+<a>
+</div>
+
diff --git a/LayoutTests/inspector/elements-panel-limited-children.html b/LayoutTests/inspector/elements-panel-limited-children.html
new file mode 100644
index 0000000..7686ce0
--- /dev/null
+++ b/LayoutTests/inspector/elements-panel-limited-children.html
@@ -0,0 +1,119 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<script src="inspector-test.js"></script>
+<script src="elements-tests.js"></script>
+<script>
+
+function doit()
+{
+ function finalCallback(result)
+ {
+ var output = document.getElementById("outputPre");
+ output.textContent = result.replace(/\u200b/g, "").replace(/\n/g, "").replace(/</g, "\n<").replace(/\$\$\$/g, "\n");
+ notifyDone();
+ }
+ function expandCallback()
+ {
+ var dataElement = document.getElementById("data");
+ dataElement.appendChild(document.createElement("a"));
+ dataElement.removeChild(document.getElementById("id2"));
+ dataElement.insertBefore(document.createElement("a"), document.getElementById("id1"));
+ setTimeout(evaluateInWebInspector("frontend_dumpBeforeAndAfterShowAll", finalCallback), 0);
+ }
+ evaluateInWebInspector("frontend_expandDataElement", expandCallback);
+}
+
+
+// Frontend functions.
+
+function frontend_expandDataElement(testController)
+{
+ testController.waitUntilDone();
+
+ frontend_expandDOMSubtree(WebInspector.domAgent.document);
+
+ // Need test to be async to expand whole the tree first.
+ testController.runAfterPendingDispatches(function() {
+ var dataDivTreeElement = frontend_treeElementForDataDiv();
+ if (!dataDivTreeElement) {
+ testController.notifyDone("No data div found");
+ return;
+ }
+
+ dataDivTreeElement._expandedChildrenLimit = 5;
+ dataDivTreeElement.expand();
+
+ testController.notifyDone();
+ });
+}
+
+function frontend_dumpBeforeAndAfterShowAll(testController)
+{
+ testController.waitUntilDone();
+
+ var dataDivTreeElement = frontend_treeElementForDataDiv();
+ if (!dataDivTreeElement) {
+ testController.notifyDone("No data div found");
+ return;
+ }
+ var contentBeforeLoadAll = frontend_getTreeElementContents();
+
+ dataDivTreeElement.handleLoadAllChildren();
+ testController.runAfterPendingDispatches(function() {
+ testController.notifyDone(contentBeforeLoadAll + "$$$---" + frontend_getTreeElementContents());
+ });
+}
+
+function frontend_getTreeElementContents()
+{
+ var dataDivTreeElement = frontend_treeElementForDataDiv();
+ if (!dataDivTreeElement)
+ return "No data div found";
+ return dataDivTreeElement.listItemElement.textContent + dataDivTreeElement.childrenListElement.textContent;
+}
+
+function frontend_treeElementForDataDiv()
+{
+ var innerMapping = WebInspector.domAgent._idToDOMNode;
+ var dataDiv = null;
+
+ for (var nodeId in innerMapping) {
+ if (innerMapping[nodeId].nodeName === "DIV" && innerMapping[nodeId].getAttribute("id") === "data") {
+ dataDiv = innerMapping[nodeId];
+ break;
+ }
+ }
+ if (!dataDiv)
+ return null;
+
+ return WebInspector.panels.elements.treeOutline.createTreeElementFor(dataDiv);
+}
+
+</script>
+</head>
+
+<body onload="onload()">
+
+<p>
+Tests that elements panel shows limited amount of node children and responds to DOM updates.
+</p>
+
+<div id="data">
+<div id="id1">1</div>
+<div id="id2">2</div>
+<div id="id3">3</div>
+<div id="id4">4</div>
+<div id="id5">5</div>
+<div id="id6">6</div>
+<div id="id7">7</div>
+<div id="id8">8</div>
+<div id="id9">9</div>
+<div id="id10">10</div>
+</div>
+
+<pre id="outputPre">
+</pre>
+
+</body>
+</html>
diff --git a/LayoutTests/platform/qt/Skipped b/LayoutTests/platform/qt/Skipped
index a7b6853..42bce86 100644
--- a/LayoutTests/platform/qt/Skipped
+++ b/LayoutTests/platform/qt/Skipped
@@ -4851,6 +4851,7 @@ inspector/console-dirxml.html
inspector/console-format.html
inspector/console-log-before-inspector-open.html
inspector/console-tests.html
+inspector/elements-panel-limited-children.html
inspector/elements-panel-structure.html
inspector/evaluate-in-frontend.html
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 7a3d2d4..258d99d 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,34 @@
+2010-02-10 Alexander Pavlov <apavlov at chromium.org>
+
+ Reviewed by Pavel Feldman.
+
+ Web Inspector: Elements Panel: Limit the number of initially loaded element children
+ https://bugs.webkit.org/show_bug.cgi?id=34421
+
+ Test: inspector/elements-panel-limited-children.html
+
+ * English.lproj/localizedStrings.js:
+ * inspector/front-end/DOMAgent.js:
+ (WebInspector.DOMNode.prototype._insertChild):
+ * inspector/front-end/ElementsPanel.js:
+ (WebInspector.ElementsPanel.prototype.updateModifiedNodes):
+ * inspector/front-end/ElementsTreeOutline.js:
+ (WebInspector.ElementsTreeOutline.prototype.createTreeElementFor):
+ (WebInspector.ElementsTreeOutline.prototype.revealAndSelectNode):
+ (WebInspector.ElementsTreeElement):
+ (WebInspector.ElementsTreeElement.prototype.get expandedChildrenLimit):
+ (WebInspector.ElementsTreeElement.prototype.set expandedChildrenLimit):
+ (WebInspector.ElementsTreeElement.prototype.get expandedChildCount):
+ (WebInspector.ElementsTreeElement.prototype.showChild):
+ (WebInspector.ElementsTreeElement.prototype.insertChildElement):
+ (WebInspector.ElementsTreeElement.prototype.moveChild):
+ (WebInspector.ElementsTreeElement.prototype._updateChildren.updateChildrenOfNode):
+ (WebInspector.ElementsTreeElement.prototype._updateChildren):
+ (WebInspector.ElementsTreeElement.prototype.adjustCollapsedRange):
+ (WebInspector.ElementsTreeElement.prototype.handleLoadAllChildren):
+ ():
+ * inspector/front-end/inspector.css:
+
2010-02-10 Mikhail Naganov <mnaganov at chromium.org>
Reviewed by Pavel Feldman.
diff --git a/WebCore/inspector/front-end/DOMAgent.js b/WebCore/inspector/front-end/DOMAgent.js
index 6889408..834f527 100644
--- a/WebCore/inspector/front-end/DOMAgent.js
+++ b/WebCore/inspector/front-end/DOMAgent.js
@@ -153,10 +153,13 @@ WebInspector.DOMNode.prototype = {
_insertChild: function(prev, payload)
{
var node = new WebInspector.DOMNode(this.ownerDocument, payload);
- if (!prev)
- // First node
- this.children = [ node ];
- else
+ if (!prev) {
+ if (!this.children) {
+ // First node
+ this.children = [ node ];
+ } else
+ this.children.unshift(node);
+ } else
this.children.splice(this.children.indexOf(prev) + 1, 0, node);
this._renumber();
return node;
diff --git a/WebCore/inspector/front-end/ElementsPanel.js b/WebCore/inspector/front-end/ElementsPanel.js
index e839a60..046be75 100644
--- a/WebCore/inspector/front-end/ElementsPanel.js
+++ b/WebCore/inspector/front-end/ElementsPanel.js
@@ -523,7 +523,8 @@ WebInspector.ElementsPanel.prototype = {
if (this.recentlyModifiedNodes[i].updated) {
var nodeItem = this.treeOutline.findTreeElement(node);
- nodeItem.updateTitle();
+ if (nodeItem)
+ nodeItem.updateTitle();
continue;
}
diff --git a/WebCore/inspector/front-end/ElementsTreeOutline.js b/WebCore/inspector/front-end/ElementsTreeOutline.js
index 4a8dae0..6263ce4 100644
--- a/WebCore/inspector/front-end/ElementsTreeOutline.js
+++ b/WebCore/inspector/front-end/ElementsTreeOutline.js
@@ -155,12 +155,27 @@ WebInspector.ElementsTreeOutline.prototype = {
return treeElement;
},
+ createTreeElementFor: function(node)
+ {
+ var treeElement = this.findTreeElement(node);
+ if (treeElement)
+ return treeElement;
+ if (!node.parentNode)
+ return null;
+
+ var treeElement = this.createTreeElementFor(node.parentNode);
+ if (treeElement && treeElement.showChild(node.index))
+ return treeElement.children[node.index];
+
+ return null;
+ },
+
revealAndSelectNode: function(node)
{
if (!node)
return;
- var treeElement = this.findTreeElement(node);
+ var treeElement = this.createTreeElementFor(node);
if (!treeElement)
return;
@@ -296,8 +311,12 @@ WebInspector.ElementsTreeElement = function(node)
if (this.representedObject.nodeType == Node.ELEMENT_NODE)
this._canAddAttributes = true;
+
+ this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
}
+WebInspector.ElementsTreeElement.InitialChildrenLimit = 500;
+
WebInspector.ElementsTreeElement.prototype = {
get highlighted()
{
@@ -341,6 +360,40 @@ WebInspector.ElementsTreeElement.prototype = {
}
},
+ get expandedChildrenLimit()
+ {
+ return this._expandedChildrenLimit;
+ },
+
+ set expandedChildrenLimit(x)
+ {
+ if (this._expandedChildrenLimit === x)
+ return;
+
+ this._expandedChildrenLimit = x;
+ if (this.treeOutline && !this._updateChildrenInProgress)
+ this._updateChildren(true);
+ },
+
+ get expandedChildCount()
+ {
+ var count = this.children.length;
+ if (count && this.children[count - 1].elementCloseTag)
+ count--;
+ return count;
+ },
+
+ showChild: function(index)
+ {
+ if (index >= this.expandedChildrenLimit) {
+ this._expandedChildrenLimit = index + 1;
+ this._updateChildren(true);
+ }
+
+ // Whether index-th child is visible in the children tree
+ return this.expandedChildCount > index;
+ },
+
createTooltipForImageNode: function(node, callback)
{
function createTooltipThenCallback(properties)
@@ -422,9 +475,34 @@ WebInspector.ElementsTreeElement.prototype = {
WebInspector.domAgent.getChildNodesAsync(this.representedObject, this._updateChildren.bind(this, fullRefresh));
},
+ insertChildElement: function(child, index)
+ {
+ var newElement = new WebInspector.ElementsTreeElement(child);
+ newElement.selectable = this.treeOutline.selectEnabled;
+ this.insertChild(newElement, index);
+ return newElement;
+ },
+
+ moveChild: function(child, targetIndex)
+ {
+ var wasSelected = child.selected;
+ treeElement.removeChild(child);
+ treeElement.insertChild(child, targetIndex);
+ if (wasSelected)
+ existingTreeElement.select();
+ },
+
_updateChildren: function(fullRefresh)
{
+ if (this._updateChildrenInProgress)
+ return;
+
+ this._updateChildrenInProgress = true;
+ var focusedNode = this.treeOutline.focusedDOMNode;
+ var originalScrollTop;
if (fullRefresh) {
+ var treeOutlineContainerElement = this.treeOutline.element.parentNode;
+ originalScrollTop = treeOutlineContainerElement.scrollTop;
var selectedTreeElement = this.treeOutline.selectedTreeElement;
if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
this.select();
@@ -433,6 +511,7 @@ WebInspector.ElementsTreeElement.prototype = {
var treeElement = this;
var treeChildIndex = 0;
+ var elementToSelect;
function updateChildrenOfNode(node)
{
@@ -443,7 +522,7 @@ WebInspector.ElementsTreeElement.prototype = {
if (!currentTreeElement || currentTreeElement.representedObject !== child) {
// Find any existing element that is later in the children list.
var existingTreeElement = null;
- for (var i = (treeChildIndex + 1); i < treeElement.children.length; ++i) {
+ for (var i = (treeChildIndex + 1), size = treeElement.expandedChildCount; i < size; ++i) {
if (treeElement.children[i].representedObject === child) {
existingTreeElement = treeElement.children[i];
break;
@@ -452,16 +531,16 @@ WebInspector.ElementsTreeElement.prototype = {
if (existingTreeElement && existingTreeElement.parent === treeElement) {
// If an existing element was found and it has the same parent, just move it.
- var wasSelected = existingTreeElement.selected;
- treeElement.removeChild(existingTreeElement);
- treeElement.insertChild(existingTreeElement, treeChildIndex);
- if (wasSelected)
- existingTreeElement.select();
+ treeElement.moveChild(existingTreeElement, treeChildIndex);
} else {
// No existing element found, insert a new element.
- var newElement = new WebInspector.ElementsTreeElement(child);
- newElement.selectable = treeOutline.selectEnabled;
- treeElement.insertChild(newElement, treeChildIndex);
+ if (treeChildIndex < treeElement.expandedChildrenLimit) {
+ var newElement = treeElement.insertChildElement(child, treeChildIndex);
+ if (child === focusedNode)
+ elementToSelect = newElement;
+ if (treeElement.expandedChildCount > treeElement.expandedChildrenLimit)
+ treeElement.expandedChildrenLimit++;
+ }
}
}
@@ -490,6 +569,7 @@ WebInspector.ElementsTreeElement.prototype = {
}
updateChildrenOfNode(this.representedObject);
+ this.adjustCollapsedRange(false);
var lastChild = this.children[this.children.length - 1];
if (this.representedObject.nodeType == Node.ELEMENT_NODE && (!lastChild || !lastChild.elementCloseTag)) {
@@ -499,6 +579,51 @@ WebInspector.ElementsTreeElement.prototype = {
item.elementCloseTag = true;
this.appendChild(item);
}
+
+ // We want to restore the original selection and tree scroll position after a full refresh, if possible.
+ if (fullRefresh && elementToSelect) {
+ elementToSelect.select();
+ if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
+ treeOutlineContainerElement.scrollTop = originalScrollTop;
+ }
+
+ delete this._updateChildrenInProgress;
+ },
+
+ adjustCollapsedRange: function()
+ {
+ // Ensure precondition: the Expand All button is not found in the tree.
+ if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent)
+ this.removeChild(this.expandAllButtonElement.__treeElement);
+
+ const node = this.representedObject;
+ const childNodeCount = node._childNodeCount;
+
+ // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
+ for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i < limit; ++i)
+ this.insertChildElement(node.children[i], i);
+
+ const expandedChildCount = this.expandedChildCount;
+ if (childNodeCount > this.expandedChildCount) {
+ var targetButtonIndex = expandedChildCount;
+ if (!this.expandAllButtonElement) {
+ var title = "<button class=\"show-all-nodes\" value=\"\" />";
+ var item = new TreeElement(title, null, false);
+ item.selectable = false;
+ this.insertChild(item, targetButtonIndex);
+ this.expandAllButtonElement = item.listItemElement.firstChild;
+ this.expandAllButtonElement.__treeElement = item;
+ this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false);
+ } else if (!this.expandAllButtonElement.__treeElement.parent)
+ this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex);
+ this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)", childNodeCount - expandedChildCount);
+ } else if (this.expandAllButtonElement)
+ delete this.expandAllButtonElement;
+ },
+
+ handleLoadAllChildren: function()
+ {
+ this.expandedChildrenLimit = Math.max(this.representedObject._childNodeCount, this.expandedChildrenLimit + WebInspector.ElementsTreeElement.InitialChildrenLimit);
},
onexpand: function()
@@ -1038,6 +1163,7 @@ WebInspector.ElementsTreeElement.prototype = {
return;
parentElement.removeChild(self);
+ parentElement.adjustCollapsedRange(true);
}
var callId = WebInspector.Callback.wrap(removeNodeCallback);
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index 45b8ec3..b7d89bf 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -2245,7 +2245,7 @@ body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-des
margin: 0 0 5px 20px;
}
-.panel-enabler-view button:not(.status-bar-item), .pane button {
+.panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
color: rgb(6, 6, 6);
background-color: transparent;
border: 1px solid rgb(165, 165, 165);
@@ -2262,6 +2262,13 @@ body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-des
height: 24px;
}
+button.show-all-nodes {
+ font-size: 13px;
+ margin: 0;
+ padding: 0 20px;
+ height: 20px;
+}
+
.panel-enabler-view.welcome {
z-index: auto;
}
@@ -2293,12 +2300,12 @@ body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-des
padding: 2px 9px;
}
-.panel-enabler-view button:active:not(.status-bar-item), .pane button:active {
+.panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
background-color: rgb(215, 215, 215);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
}
-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 .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 {
color: rgb(130, 130, 130);
border-color: rgb(212, 212, 212);
background-color: rgb(239, 239, 239);
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list