Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2102)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: Source/devtools/front_end/ElementsTreeOutline.js

Issue 22548006: DevTools: Improve performance of the element breadcrumbs. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: revisited Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « Source/devtools/front_end/ElementsPanel.js ('k') | Source/devtools/front_end/treeoutline.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: Source/devtools/front_end/ElementsTreeOutline.js
diff --git a/Source/devtools/front_end/ElementsTreeOutline.js b/Source/devtools/front_end/ElementsTreeOutline.js
index fef01b075d1e13d19fd3889a9e089246cd670ee8..9d9a414e692f506b002adf52599825bd4722e553 100644
--- a/Source/devtools/front_end/ElementsTreeOutline.js
+++ b/Source/devtools/front_end/ElementsTreeOutline.js
@@ -56,8 +56,10 @@ WebInspector.ElementsTreeOutline = function(omitRootDOMNode, selectEnabled, show
this._includeRootDOMNode = !omitRootDOMNode;
this._selectEnabled = selectEnabled;
this._showInElementsPanelEnabled = showInElementsPanelEnabled;
+ /** @type {WebInspector.DOMNode} */
this._rootDOMNode = null;
- this._selectDOMNode = null;
+ /** @type {WebInspector.DOMNode} */
+ this._selectedDOMNode = null;
this._eventSupport = new WebInspector.Object();
this._visible = false;
@@ -68,10 +70,18 @@ WebInspector.ElementsTreeOutline = function(omitRootDOMNode, selectEnabled, show
this._createNodeDecorators();
}
+/**
+ * @enum {string}
+ */
WebInspector.ElementsTreeOutline.Events = {
- SelectedNodeChanged: "SelectedNodeChanged"
+ SelectedNodeChanged: "SelectedNodeChanged",
+ DOMNodesUpdated: "DOMNodesUpdated"
pfeldman 2013/08/21 17:16:32 ElementsTreeUpdated
aandrey 2013/08/21 17:30:02 Done.
}
+/**
+ * @const
+ * @type {!Object.<string, string>}
+ */
WebInspector.ElementsTreeOutline.MappedCharToEntity = {
"\u00a0": "nbsp",
"\u2002": "ensp",
@@ -112,6 +122,9 @@ WebInspector.ElementsTreeOutline.prototype = {
this._elementsTreeUpdater = new WebInspector.ElementsTreeUpdater(this);
},
+ /**
+ * @param {boolean} visible
+ */
setVisible: function(visible)
{
this._visible = visible;
@@ -155,11 +168,18 @@ WebInspector.ElementsTreeOutline.prototype = {
return this._isXMLMimeType;
},
+ /**
+ * @return {WebInspector.DOMNode}
+ */
selectedDOMNode: function()
{
return this._selectedDOMNode;
},
+ /**
+ * @param {WebInspector.DOMNode} node
+ * @param {boolean=} focus
+ */
selectDOMNode: function(node, focus)
{
if (this._selectedDOMNode === node) {
@@ -230,7 +250,7 @@ WebInspector.ElementsTreeOutline.prototype = {
},
/**
- * @param {WebInspector.DOMNode} node
+ * @param {!WebInspector.DOMNode} node
*/
updateOpenCloseTags: function(node)
{
@@ -249,7 +269,16 @@ WebInspector.ElementsTreeOutline.prototype = {
},
/**
- * @param {WebInspector.DOMNode} node
+ * @param {!Array.<!WebInspector.DOMNode>} nodes
+ */
+ _domNodesUpdated: function(nodes)
pfeldman 2013/08/21 17:16:32 _fireElementsTreeUpdated
aandrey 2013/08/21 17:30:02 Done.
+ {
+ this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.DOMNodesUpdated, nodes);
+ },
+
+ /**
+ * @param {!WebInspector.DOMNode} node
+ * @return {TreeElement}
*/
findTreeElement: function(node)
{
@@ -273,7 +302,8 @@ WebInspector.ElementsTreeOutline.prototype = {
},
/**
- * @param {WebInspector.DOMNode} node
+ * @param {!WebInspector.DOMNode} node
+ * @return {TreeElement}
*/
createTreeElementFor: function(node)
{
@@ -294,6 +324,10 @@ WebInspector.ElementsTreeOutline.prototype = {
this._suppressRevealAndSelect = x;
},
+ /**
+ * @param {WebInspector.DOMNode} node
+ * @param {boolean} omitFocus
+ */
_revealAndSelectNode: function(node, omitFocus)
{
if (this._suppressRevealAndSelect)
@@ -310,6 +344,9 @@ WebInspector.ElementsTreeOutline.prototype = {
treeElement.revealAndSelect(omitFocus);
},
+ /**
+ * @return {TreeElement}
+ */
_treeElementFromEvent: function(event)
{
var scrollContainer = this.element.parentElement;
@@ -436,6 +473,10 @@ WebInspector.ElementsTreeOutline.prototype = {
return false;
},
+ /**
+ * @param {TreeElement} treeElement
+ * @return {boolean}
+ */
_isValidDragSourceOrTarget: function(treeElement)
{
if (!treeElement)
@@ -459,6 +500,9 @@ WebInspector.ElementsTreeOutline.prototype = {
this._doMove(treeElement);
},
+ /**
+ * @param {TreeElement} treeElement
+ */
_doMove: function(treeElement)
{
if (!this._treeElementBeingDragged)
@@ -477,7 +521,7 @@ WebInspector.ElementsTreeOutline.prototype = {
}
var wasExpanded = this._treeElementBeingDragged.expanded;
- this._treeElementBeingDragged._node.moveTo(parentNode, anchorNode, this._selectNodeAfterEdit.bind(this, null, wasExpanded));
+ this._treeElementBeingDragged._node.moveTo(parentNode, anchorNode, this._selectNodeAfterEdit.bind(this, wasExpanded));
delete this._treeElementBeingDragged;
},
@@ -587,18 +631,21 @@ WebInspector.ElementsTreeOutline.prototype = {
if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && node.parentNode) {
if (event.keyIdentifier === "Up" && node.previousSibling) {
- node.moveTo(node.parentNode, node.previousSibling, this._selectNodeAfterEdit.bind(this, null, treeElement.expanded));
+ node.moveTo(node.parentNode, node.previousSibling, this._selectNodeAfterEdit.bind(this, treeElement.expanded));
event.handled = true;
return;
}
if (event.keyIdentifier === "Down" && node.nextSibling) {
- node.moveTo(node.parentNode, node.nextSibling.nextSibling, this._selectNodeAfterEdit.bind(this, null, treeElement.expanded));
+ node.moveTo(node.parentNode, node.nextSibling.nextSibling, this._selectNodeAfterEdit.bind(this, treeElement.expanded));
event.handled = true;
return;
}
}
},
+ /**
+ * @param {WebInspector.DOMNode} node
+ */
_toggleEditAsHTML: function(node)
{
var treeElement = this.getCachedTreeElement(node);
@@ -611,7 +658,12 @@ WebInspector.ElementsTreeOutline.prototype = {
treeElement._editAsHTML();
},
- _selectNodeAfterEdit: function(fallbackNode, wasExpanded, error, nodeId)
+ /**
+ * @param {boolean} wasExpanded
+ * @param {?Protocol.Error} error
+ * @param {DOMAgent.NodeId=} nodeId
+ */
+ _selectNodeAfterEdit: function(wasExpanded, error, nodeId)
pfeldman 2013/08/21 17:16:32 Thanks.
{
if (error)
return;
@@ -619,7 +671,7 @@ WebInspector.ElementsTreeOutline.prototype = {
// Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
this._updateModifiedNodes();
- var newNode = WebInspector.domAgent.nodeForId(nodeId) || fallbackNode;
+ var newNode = nodeId ? WebInspector.domAgent.nodeForId(nodeId) : null;
if (!newNode)
return;
@@ -1699,7 +1751,7 @@ WebInspector.ElementsTreeElement.prototype = {
cancel();
return;
}
- var newTreeItem = treeOutline._selectNodeAfterEdit(null, wasExpanded, error, nodeId);
+ var newTreeItem = treeOutline._selectNodeAfterEdit(wasExpanded, error, nodeId);
moveToNextAttributeIfNeeded.call(newTreeItem);
}
@@ -2186,6 +2238,7 @@ WebInspector.ElementsTreeElement.prototype = {
/**
* @constructor
+ * @param {!WebInspector.ElementsTreeOutline} treeOutline
*/
WebInspector.ElementsTreeUpdater = function(treeOutline)
{
@@ -2198,11 +2251,11 @@ WebInspector.ElementsTreeUpdater = function(treeOutline)
WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
this._treeOutline = treeOutline;
+ /** @type {!Map.<!WebInspector.DOMNode, !WebInspector.ElementsTreeUpdater.UpdateEntry>} */
this._recentlyModifiedNodes = new Map();
}
WebInspector.ElementsTreeUpdater.prototype = {
-
/**
* @param {!WebInspector.DOMNode} node
* @param {boolean} isUpdated
@@ -2213,7 +2266,7 @@ WebInspector.ElementsTreeUpdater.prototype = {
if (this._treeOutline._visible)
this._updateModifiedNodesSoon();
- var entry = /** @type {WebInspector.ElementsTreeUpdater.UpdateEntry} */ (this._recentlyModifiedNodes.get(node));
+ var entry = this._recentlyModifiedNodes.get(node);
if (!entry) {
entry = new WebInspector.ElementsTreeUpdater.UpdateEntry(isUpdated, parentNode);
this._recentlyModifiedNodes.put(node, entry);
@@ -2287,9 +2340,9 @@ WebInspector.ElementsTreeUpdater.prototype = {
var originalScrollTop = treeOutlineContainerElement ? treeOutlineContainerElement.scrollTop : 0;
}
- var keys = this._recentlyModifiedNodes.keys();
- for (var i = 0, size = keys.length; i < size; ++i) {
- var node = keys[i];
+ var nodes = this._recentlyModifiedNodes.keys();
+ for (var i = 0, size = nodes.length; i < size; ++i) {
+ var node = nodes[i];
var entry = this._recentlyModifiedNodes.get(node);
var parent = entry.parent;
@@ -2306,10 +2359,7 @@ WebInspector.ElementsTreeUpdater.prototype = {
nodeItem.updateTitle();
}
- if (!parent)
- continue;
-
- var parentNodeItem = this._treeOutline.findTreeElement(parent);
+ var parentNodeItem = parent ? this._treeOutline.findTreeElement(parent) : null;
if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) {
parentNodeItem.updateChildren();
parentNodeItem.alreadyUpdatedChildren = true;
@@ -2327,6 +2377,8 @@ WebInspector.ElementsTreeUpdater.prototype = {
this._treeOutline.updateSelection();
}
this._recentlyModifiedNodes.clear();
+
+ this._treeOutline._domNodesUpdated(nodes);
},
_reset: function()
« no previous file with comments | « Source/devtools/front_end/ElementsPanel.js ('k') | Source/devtools/front_end/treeoutline.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698