OLD | NEW |
---|---|
1 /* | 1 /* |
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. |
3 * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com> | 3 * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com> |
4 * Copyright (C) 2009 Joseph Pecoraro | 4 * Copyright (C) 2009 Joseph Pecoraro |
5 * | 5 * |
6 * Redistribution and use in source and binary forms, with or without | 6 * Redistribution and use in source and binary forms, with or without |
7 * modification, are permitted provided that the following conditions | 7 * modification, are permitted provided that the following conditions |
8 * are met: | 8 * are met: |
9 * | 9 * |
10 * 1. Redistributions of source code must retain the above copyright | 10 * 1. Redistributions of source code must retain the above copyright |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
49 this.element.addEventListener("dragleave", this._ondragleave.bind(this), fal se); | 49 this.element.addEventListener("dragleave", this._ondragleave.bind(this), fal se); |
50 this.element.addEventListener("drop", this._ondrop.bind(this), false); | 50 this.element.addEventListener("drop", this._ondrop.bind(this), false); |
51 this.element.addEventListener("dragend", this._ondragend.bind(this), false); | 51 this.element.addEventListener("dragend", this._ondragend.bind(this), false); |
52 this.element.addEventListener("keydown", this._onkeydown.bind(this), false); | 52 this.element.addEventListener("keydown", this._onkeydown.bind(this), false); |
53 | 53 |
54 TreeOutline.call(this, this.element); | 54 TreeOutline.call(this, this.element); |
55 | 55 |
56 this._includeRootDOMNode = !omitRootDOMNode; | 56 this._includeRootDOMNode = !omitRootDOMNode; |
57 this._selectEnabled = selectEnabled; | 57 this._selectEnabled = selectEnabled; |
58 this._showInElementsPanelEnabled = showInElementsPanelEnabled; | 58 this._showInElementsPanelEnabled = showInElementsPanelEnabled; |
59 /** @type {WebInspector.DOMNode} */ | |
59 this._rootDOMNode = null; | 60 this._rootDOMNode = null; |
60 this._selectDOMNode = null; | 61 /** @type {WebInspector.DOMNode} */ |
62 this._selectedDOMNode = null; | |
61 this._eventSupport = new WebInspector.Object(); | 63 this._eventSupport = new WebInspector.Object(); |
62 | 64 |
63 this._visible = false; | 65 this._visible = false; |
64 | 66 |
65 this.element.addEventListener("contextmenu", this._contextMenuEventFired.bin d(this), true); | 67 this.element.addEventListener("contextmenu", this._contextMenuEventFired.bin d(this), true); |
66 this._contextMenuCallback = contextMenuCallback; | 68 this._contextMenuCallback = contextMenuCallback; |
67 this._setPseudoClassCallback = setPseudoClassCallback; | 69 this._setPseudoClassCallback = setPseudoClassCallback; |
68 this._createNodeDecorators(); | 70 this._createNodeDecorators(); |
69 } | 71 } |
70 | 72 |
73 /** | |
74 * @enum {string} | |
75 */ | |
71 WebInspector.ElementsTreeOutline.Events = { | 76 WebInspector.ElementsTreeOutline.Events = { |
72 SelectedNodeChanged: "SelectedNodeChanged" | 77 SelectedNodeChanged: "SelectedNodeChanged", |
78 DOMNodesUpdated: "DOMNodesUpdated" | |
pfeldman
2013/08/21 17:16:32
ElementsTreeUpdated
aandrey
2013/08/21 17:30:02
Done.
| |
73 } | 79 } |
74 | 80 |
81 /** | |
82 * @const | |
83 * @type {!Object.<string, string>} | |
84 */ | |
75 WebInspector.ElementsTreeOutline.MappedCharToEntity = { | 85 WebInspector.ElementsTreeOutline.MappedCharToEntity = { |
76 "\u00a0": "nbsp", | 86 "\u00a0": "nbsp", |
77 "\u2002": "ensp", | 87 "\u2002": "ensp", |
78 "\u2003": "emsp", | 88 "\u2003": "emsp", |
79 "\u2009": "thinsp", | 89 "\u2009": "thinsp", |
80 "\u200a": "#8202", // Hairspace | 90 "\u200a": "#8202", // Hairspace |
81 "\u200b": "#8203", // ZWSP | 91 "\u200b": "#8203", // ZWSP |
82 "\u200c": "zwnj", | 92 "\u200c": "zwnj", |
83 "\u200d": "zwj", | 93 "\u200d": "zwj", |
84 "\u200e": "lrm", | 94 "\u200e": "lrm", |
(...skipping 20 matching lines...) Expand all Loading... | |
105 { | 115 { |
106 this._nodeDecorators = []; | 116 this._nodeDecorators = []; |
107 this._nodeDecorators.push(new WebInspector.ElementsTreeOutline.PseudoSta teDecorator()); | 117 this._nodeDecorators.push(new WebInspector.ElementsTreeOutline.PseudoSta teDecorator()); |
108 }, | 118 }, |
109 | 119 |
110 wireToDomAgent: function() | 120 wireToDomAgent: function() |
111 { | 121 { |
112 this._elementsTreeUpdater = new WebInspector.ElementsTreeUpdater(this); | 122 this._elementsTreeUpdater = new WebInspector.ElementsTreeUpdater(this); |
113 }, | 123 }, |
114 | 124 |
125 /** | |
126 * @param {boolean} visible | |
127 */ | |
115 setVisible: function(visible) | 128 setVisible: function(visible) |
116 { | 129 { |
117 this._visible = visible; | 130 this._visible = visible; |
118 if (!this._visible) | 131 if (!this._visible) |
119 return; | 132 return; |
120 | 133 |
121 this._updateModifiedNodes(); | 134 this._updateModifiedNodes(); |
122 if (this._selectedDOMNode) | 135 if (this._selectedDOMNode) |
123 this._revealAndSelectNode(this._selectedDOMNode, false); | 136 this._revealAndSelectNode(this._selectedDOMNode, false); |
124 }, | 137 }, |
(...skipping 23 matching lines...) Expand all Loading... | |
148 this._isXMLMimeType = x && x.isXMLNode(); | 161 this._isXMLMimeType = x && x.isXMLNode(); |
149 | 162 |
150 this.update(); | 163 this.update(); |
151 }, | 164 }, |
152 | 165 |
153 get isXMLMimeType() | 166 get isXMLMimeType() |
154 { | 167 { |
155 return this._isXMLMimeType; | 168 return this._isXMLMimeType; |
156 }, | 169 }, |
157 | 170 |
171 /** | |
172 * @return {WebInspector.DOMNode} | |
173 */ | |
158 selectedDOMNode: function() | 174 selectedDOMNode: function() |
159 { | 175 { |
160 return this._selectedDOMNode; | 176 return this._selectedDOMNode; |
161 }, | 177 }, |
162 | 178 |
179 /** | |
180 * @param {WebInspector.DOMNode} node | |
181 * @param {boolean=} focus | |
182 */ | |
163 selectDOMNode: function(node, focus) | 183 selectDOMNode: function(node, focus) |
164 { | 184 { |
165 if (this._selectedDOMNode === node) { | 185 if (this._selectedDOMNode === node) { |
166 this._revealAndSelectNode(node, !focus); | 186 this._revealAndSelectNode(node, !focus); |
167 return; | 187 return; |
168 } | 188 } |
169 | 189 |
170 this._selectedDOMNode = node; | 190 this._selectedDOMNode = node; |
171 this._revealAndSelectNode(node, !focus); | 191 this._revealAndSelectNode(node, !focus); |
172 | 192 |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
223 | 243 |
224 updateSelection: function() | 244 updateSelection: function() |
225 { | 245 { |
226 if (!this.selectedTreeElement) | 246 if (!this.selectedTreeElement) |
227 return; | 247 return; |
228 var element = this.treeOutline.selectedTreeElement; | 248 var element = this.treeOutline.selectedTreeElement; |
229 element.updateSelection(); | 249 element.updateSelection(); |
230 }, | 250 }, |
231 | 251 |
232 /** | 252 /** |
233 * @param {WebInspector.DOMNode} node | 253 * @param {!WebInspector.DOMNode} node |
234 */ | 254 */ |
235 updateOpenCloseTags: function(node) | 255 updateOpenCloseTags: function(node) |
236 { | 256 { |
237 var treeElement = this.findTreeElement(node); | 257 var treeElement = this.findTreeElement(node); |
238 if (treeElement) | 258 if (treeElement) |
239 treeElement.updateTitle(); | 259 treeElement.updateTitle(); |
240 var children = treeElement.children; | 260 var children = treeElement.children; |
241 var closingTagElement = children[children.length - 1]; | 261 var closingTagElement = children[children.length - 1]; |
242 if (closingTagElement && closingTagElement._elementCloseTag) | 262 if (closingTagElement && closingTagElement._elementCloseTag) |
243 closingTagElement.updateTitle(); | 263 closingTagElement.updateTitle(); |
244 }, | 264 }, |
245 | 265 |
246 _selectedNodeChanged: function() | 266 _selectedNodeChanged: function() |
247 { | 267 { |
248 this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOut line.Events.SelectedNodeChanged, this._selectedDOMNode); | 268 this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOut line.Events.SelectedNodeChanged, this._selectedDOMNode); |
249 }, | 269 }, |
250 | 270 |
251 /** | 271 /** |
252 * @param {WebInspector.DOMNode} node | 272 * @param {!Array.<!WebInspector.DOMNode>} nodes |
273 */ | |
274 _domNodesUpdated: function(nodes) | |
pfeldman
2013/08/21 17:16:32
_fireElementsTreeUpdated
aandrey
2013/08/21 17:30:02
Done.
| |
275 { | |
276 this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOut line.Events.DOMNodesUpdated, nodes); | |
277 }, | |
278 | |
279 /** | |
280 * @param {!WebInspector.DOMNode} node | |
281 * @return {TreeElement} | |
253 */ | 282 */ |
254 findTreeElement: function(node) | 283 findTreeElement: function(node) |
255 { | 284 { |
256 function isAncestorNode(ancestor, node) | 285 function isAncestorNode(ancestor, node) |
257 { | 286 { |
258 return ancestor.isAncestor(node); | 287 return ancestor.isAncestor(node); |
259 } | 288 } |
260 | 289 |
261 function parentNode(node) | 290 function parentNode(node) |
262 { | 291 { |
263 return node.parentNode; | 292 return node.parentNode; |
264 } | 293 } |
265 | 294 |
266 var treeElement = TreeOutline.prototype.findTreeElement.call(this, node, isAncestorNode, parentNode); | 295 var treeElement = TreeOutline.prototype.findTreeElement.call(this, node, isAncestorNode, parentNode); |
267 if (!treeElement && node.nodeType() === Node.TEXT_NODE) { | 296 if (!treeElement && node.nodeType() === Node.TEXT_NODE) { |
268 // The text node might have been inlined if it was short, so try to find the parent element. | 297 // The text node might have been inlined if it was short, so try to find the parent element. |
269 treeElement = TreeOutline.prototype.findTreeElement.call(this, node. parentNode, isAncestorNode, parentNode); | 298 treeElement = TreeOutline.prototype.findTreeElement.call(this, node. parentNode, isAncestorNode, parentNode); |
270 } | 299 } |
271 | 300 |
272 return treeElement; | 301 return treeElement; |
273 }, | 302 }, |
274 | 303 |
275 /** | 304 /** |
276 * @param {WebInspector.DOMNode} node | 305 * @param {!WebInspector.DOMNode} node |
306 * @return {TreeElement} | |
277 */ | 307 */ |
278 createTreeElementFor: function(node) | 308 createTreeElementFor: function(node) |
279 { | 309 { |
280 var treeElement = this.findTreeElement(node); | 310 var treeElement = this.findTreeElement(node); |
281 if (treeElement) | 311 if (treeElement) |
282 return treeElement; | 312 return treeElement; |
283 if (!node.parentNode) | 313 if (!node.parentNode) |
284 return null; | 314 return null; |
285 | 315 |
286 treeElement = this.createTreeElementFor(node.parentNode); | 316 treeElement = this.createTreeElementFor(node.parentNode); |
287 return treeElement ? treeElement._showChild(node) : null; | 317 return treeElement ? treeElement._showChild(node) : null; |
288 }, | 318 }, |
289 | 319 |
290 set suppressRevealAndSelect(x) | 320 set suppressRevealAndSelect(x) |
291 { | 321 { |
292 if (this._suppressRevealAndSelect === x) | 322 if (this._suppressRevealAndSelect === x) |
293 return; | 323 return; |
294 this._suppressRevealAndSelect = x; | 324 this._suppressRevealAndSelect = x; |
295 }, | 325 }, |
296 | 326 |
327 /** | |
328 * @param {WebInspector.DOMNode} node | |
329 * @param {boolean} omitFocus | |
330 */ | |
297 _revealAndSelectNode: function(node, omitFocus) | 331 _revealAndSelectNode: function(node, omitFocus) |
298 { | 332 { |
299 if (this._suppressRevealAndSelect) | 333 if (this._suppressRevealAndSelect) |
300 return; | 334 return; |
301 | 335 |
302 if (!this._includeRootDOMNode && node === this.rootDOMNode && this.rootD OMNode) | 336 if (!this._includeRootDOMNode && node === this.rootDOMNode && this.rootD OMNode) |
303 node = this.rootDOMNode.firstChild; | 337 node = this.rootDOMNode.firstChild; |
304 if (!node) | 338 if (!node) |
305 return; | 339 return; |
306 var treeElement = this.createTreeElementFor(node); | 340 var treeElement = this.createTreeElementFor(node); |
307 if (!treeElement) | 341 if (!treeElement) |
308 return; | 342 return; |
309 | 343 |
310 treeElement.revealAndSelect(omitFocus); | 344 treeElement.revealAndSelect(omitFocus); |
311 }, | 345 }, |
312 | 346 |
347 /** | |
348 * @return {TreeElement} | |
349 */ | |
313 _treeElementFromEvent: function(event) | 350 _treeElementFromEvent: function(event) |
314 { | 351 { |
315 var scrollContainer = this.element.parentElement; | 352 var scrollContainer = this.element.parentElement; |
316 | 353 |
317 // We choose this X coordinate based on the knowledge that our list | 354 // We choose this X coordinate based on the knowledge that our list |
318 // items extend at least to the right edge of the outer <ol> container. | 355 // items extend at least to the right edge of the outer <ol> container. |
319 // In the no-word-wrap mode the outer <ol> may be wider than the tree co ntainer | 356 // In the no-word-wrap mode the outer <ol> may be wider than the tree co ntainer |
320 // (and partially hidden), in which case we are left to use only its rig ht boundary. | 357 // (and partially hidden), in which case we are left to use only its rig ht boundary. |
321 var x = scrollContainer.totalOffsetLeft() + scrollContainer.offsetWidth - 36; | 358 var x = scrollContainer.totalOffsetLeft() + scrollContainer.offsetWidth - 36; |
322 | 359 |
(...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
429 return false; | 466 return false; |
430 }, | 467 }, |
431 | 468 |
432 _ondragleave: function(event) | 469 _ondragleave: function(event) |
433 { | 470 { |
434 this._clearDragOverTreeElementMarker(); | 471 this._clearDragOverTreeElementMarker(); |
435 event.preventDefault(); | 472 event.preventDefault(); |
436 return false; | 473 return false; |
437 }, | 474 }, |
438 | 475 |
476 /** | |
477 * @param {TreeElement} treeElement | |
478 * @return {boolean} | |
479 */ | |
439 _isValidDragSourceOrTarget: function(treeElement) | 480 _isValidDragSourceOrTarget: function(treeElement) |
440 { | 481 { |
441 if (!treeElement) | 482 if (!treeElement) |
442 return false; | 483 return false; |
443 | 484 |
444 var node = treeElement.representedObject; | 485 var node = treeElement.representedObject; |
445 if (!(node instanceof WebInspector.DOMNode)) | 486 if (!(node instanceof WebInspector.DOMNode)) |
446 return false; | 487 return false; |
447 | 488 |
448 if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE ) | 489 if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE ) |
449 return false; | 490 return false; |
450 | 491 |
451 return true; | 492 return true; |
452 }, | 493 }, |
453 | 494 |
454 _ondrop: function(event) | 495 _ondrop: function(event) |
455 { | 496 { |
456 event.preventDefault(); | 497 event.preventDefault(); |
457 var treeElement = this._treeElementFromEvent(event); | 498 var treeElement = this._treeElementFromEvent(event); |
458 if (treeElement) | 499 if (treeElement) |
459 this._doMove(treeElement); | 500 this._doMove(treeElement); |
460 }, | 501 }, |
461 | 502 |
503 /** | |
504 * @param {TreeElement} treeElement | |
505 */ | |
462 _doMove: function(treeElement) | 506 _doMove: function(treeElement) |
463 { | 507 { |
464 if (!this._treeElementBeingDragged) | 508 if (!this._treeElementBeingDragged) |
465 return; | 509 return; |
466 | 510 |
467 var parentNode; | 511 var parentNode; |
468 var anchorNode; | 512 var anchorNode; |
469 | 513 |
470 if (treeElement._elementCloseTag) { | 514 if (treeElement._elementCloseTag) { |
471 // Drop onto closing tag -> insert as last child. | 515 // Drop onto closing tag -> insert as last child. |
472 parentNode = treeElement._node; | 516 parentNode = treeElement._node; |
473 } else { | 517 } else { |
474 var dragTargetNode = treeElement._node; | 518 var dragTargetNode = treeElement._node; |
475 parentNode = dragTargetNode.parentNode; | 519 parentNode = dragTargetNode.parentNode; |
476 anchorNode = dragTargetNode; | 520 anchorNode = dragTargetNode; |
477 } | 521 } |
478 | 522 |
479 var wasExpanded = this._treeElementBeingDragged.expanded; | 523 var wasExpanded = this._treeElementBeingDragged.expanded; |
480 this._treeElementBeingDragged._node.moveTo(parentNode, anchorNode, this. _selectNodeAfterEdit.bind(this, null, wasExpanded)); | 524 this._treeElementBeingDragged._node.moveTo(parentNode, anchorNode, this. _selectNodeAfterEdit.bind(this, wasExpanded)); |
481 | 525 |
482 delete this._treeElementBeingDragged; | 526 delete this._treeElementBeingDragged; |
483 }, | 527 }, |
484 | 528 |
485 _ondragend: function(event) | 529 _ondragend: function(event) |
486 { | 530 { |
487 event.preventDefault(); | 531 event.preventDefault(); |
488 this._clearDragOverTreeElementMarker(); | 532 this._clearDragOverTreeElementMarker(); |
489 delete this._treeElementBeingDragged; | 533 delete this._treeElementBeingDragged; |
490 }, | 534 }, |
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
580 return; | 624 return; |
581 | 625 |
582 if (event.keyIdentifier === "F2") { | 626 if (event.keyIdentifier === "F2") { |
583 this._toggleEditAsHTML(node); | 627 this._toggleEditAsHTML(node); |
584 event.handled = true; | 628 event.handled = true; |
585 return; | 629 return; |
586 } | 630 } |
587 | 631 |
588 if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && node.pare ntNode) { | 632 if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && node.pare ntNode) { |
589 if (event.keyIdentifier === "Up" && node.previousSibling) { | 633 if (event.keyIdentifier === "Up" && node.previousSibling) { |
590 node.moveTo(node.parentNode, node.previousSibling, this._selectN odeAfterEdit.bind(this, null, treeElement.expanded)); | 634 node.moveTo(node.parentNode, node.previousSibling, this._selectN odeAfterEdit.bind(this, treeElement.expanded)); |
591 event.handled = true; | 635 event.handled = true; |
592 return; | 636 return; |
593 } | 637 } |
594 if (event.keyIdentifier === "Down" && node.nextSibling) { | 638 if (event.keyIdentifier === "Down" && node.nextSibling) { |
595 node.moveTo(node.parentNode, node.nextSibling.nextSibling, this. _selectNodeAfterEdit.bind(this, null, treeElement.expanded)); | 639 node.moveTo(node.parentNode, node.nextSibling.nextSibling, this. _selectNodeAfterEdit.bind(this, treeElement.expanded)); |
596 event.handled = true; | 640 event.handled = true; |
597 return; | 641 return; |
598 } | 642 } |
599 } | 643 } |
600 }, | 644 }, |
601 | 645 |
646 /** | |
647 * @param {WebInspector.DOMNode} node | |
648 */ | |
602 _toggleEditAsHTML: function(node) | 649 _toggleEditAsHTML: function(node) |
603 { | 650 { |
604 var treeElement = this.getCachedTreeElement(node); | 651 var treeElement = this.getCachedTreeElement(node); |
605 if (!treeElement) | 652 if (!treeElement) |
606 return; | 653 return; |
607 | 654 |
608 if (treeElement._editing && treeElement._htmlEditElement && WebInspector .isBeingEdited(treeElement._htmlEditElement)) | 655 if (treeElement._editing && treeElement._htmlEditElement && WebInspector .isBeingEdited(treeElement._htmlEditElement)) |
609 treeElement._editing.commit(); | 656 treeElement._editing.commit(); |
610 else | 657 else |
611 treeElement._editAsHTML(); | 658 treeElement._editAsHTML(); |
612 }, | 659 }, |
613 | 660 |
614 _selectNodeAfterEdit: function(fallbackNode, wasExpanded, error, nodeId) | 661 /** |
662 * @param {boolean} wasExpanded | |
663 * @param {?Protocol.Error} error | |
664 * @param {DOMAgent.NodeId=} nodeId | |
665 */ | |
666 _selectNodeAfterEdit: function(wasExpanded, error, nodeId) | |
pfeldman
2013/08/21 17:16:32
Thanks.
| |
615 { | 667 { |
616 if (error) | 668 if (error) |
617 return; | 669 return; |
618 | 670 |
619 // Select it and expand if necessary. We force tree update so that it pr ocesses dom events and is up to date. | 671 // Select it and expand if necessary. We force tree update so that it pr ocesses dom events and is up to date. |
620 this._updateModifiedNodes(); | 672 this._updateModifiedNodes(); |
621 | 673 |
622 var newNode = WebInspector.domAgent.nodeForId(nodeId) || fallbackNode; | 674 var newNode = nodeId ? WebInspector.domAgent.nodeForId(nodeId) : null; |
623 if (!newNode) | 675 if (!newNode) |
624 return; | 676 return; |
625 | 677 |
626 this.selectDOMNode(newNode, true); | 678 this.selectDOMNode(newNode, true); |
627 | 679 |
628 var newTreeItem = this.findTreeElement(newNode); | 680 var newTreeItem = this.findTreeElement(newNode); |
629 if (wasExpanded) { | 681 if (wasExpanded) { |
630 if (newTreeItem) | 682 if (newTreeItem) |
631 newTreeItem.expand(); | 683 newTreeItem.expand(); |
632 } | 684 } |
(...skipping 1059 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1692 | 1744 |
1693 var treeOutline = this.treeOutline; | 1745 var treeOutline = this.treeOutline; |
1694 var wasExpanded = this.expanded; | 1746 var wasExpanded = this.expanded; |
1695 | 1747 |
1696 function changeTagNameCallback(error, nodeId) | 1748 function changeTagNameCallback(error, nodeId) |
1697 { | 1749 { |
1698 if (error || !nodeId) { | 1750 if (error || !nodeId) { |
1699 cancel(); | 1751 cancel(); |
1700 return; | 1752 return; |
1701 } | 1753 } |
1702 var newTreeItem = treeOutline._selectNodeAfterEdit(null, wasExpanded , error, nodeId); | 1754 var newTreeItem = treeOutline._selectNodeAfterEdit(wasExpanded, erro r, nodeId); |
1703 moveToNextAttributeIfNeeded.call(newTreeItem); | 1755 moveToNextAttributeIfNeeded.call(newTreeItem); |
1704 } | 1756 } |
1705 | 1757 |
1706 this._node.setNodeName(newText, changeTagNameCallback); | 1758 this._node.setNodeName(newText, changeTagNameCallback); |
1707 }, | 1759 }, |
1708 | 1760 |
1709 /** | 1761 /** |
1710 * @param {WebInspector.DOMNode} textNode | 1762 * @param {WebInspector.DOMNode} textNode |
1711 * @param {Element} element | 1763 * @param {Element} element |
1712 * @param {string} newText | 1764 * @param {string} newText |
(...skipping 466 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
2179 _updateHasChildren: function() | 2231 _updateHasChildren: function() |
2180 { | 2232 { |
2181 this.hasChildren = !this._elementCloseTag && !this._showInlineText() && this._visibleChildCount() > 0; | 2233 this.hasChildren = !this._elementCloseTag && !this._showInlineText() && this._visibleChildCount() > 0; |
2182 }, | 2234 }, |
2183 | 2235 |
2184 __proto__: TreeElement.prototype | 2236 __proto__: TreeElement.prototype |
2185 } | 2237 } |
2186 | 2238 |
2187 /** | 2239 /** |
2188 * @constructor | 2240 * @constructor |
2241 * @param {!WebInspector.ElementsTreeOutline} treeOutline | |
2189 */ | 2242 */ |
2190 WebInspector.ElementsTreeUpdater = function(treeOutline) | 2243 WebInspector.ElementsTreeUpdater = function(treeOutline) |
2191 { | 2244 { |
2192 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeInse rted, this._nodeInserted, this); | 2245 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeInse rted, this._nodeInserted, this); |
2193 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeRemo ved, this._nodeRemoved, this); | 2246 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeRemo ved, this._nodeRemoved, this); |
2194 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModi fied, this._attributesUpdated, this); | 2247 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModi fied, this._attributesUpdated, this); |
2195 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemo ved, this._attributesUpdated, this); | 2248 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemo ved, this._attributesUpdated, this); |
2196 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.Characte rDataModified, this._characterDataModified, this); | 2249 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.Characte rDataModified, this._characterDataModified, this); |
2197 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.Document Updated, this._documentUpdated, this); | 2250 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.Document Updated, this._documentUpdated, this); |
2198 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.ChildNod eCountUpdated, this._childNodeCountUpdated, this); | 2251 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.ChildNod eCountUpdated, this._childNodeCountUpdated, this); |
2199 | 2252 |
2200 this._treeOutline = treeOutline; | 2253 this._treeOutline = treeOutline; |
2254 /** @type {!Map.<!WebInspector.DOMNode, !WebInspector.ElementsTreeUpdater.Up dateEntry>} */ | |
2201 this._recentlyModifiedNodes = new Map(); | 2255 this._recentlyModifiedNodes = new Map(); |
2202 } | 2256 } |
2203 | 2257 |
2204 WebInspector.ElementsTreeUpdater.prototype = { | 2258 WebInspector.ElementsTreeUpdater.prototype = { |
2205 | |
2206 /** | 2259 /** |
2207 * @param {!WebInspector.DOMNode} node | 2260 * @param {!WebInspector.DOMNode} node |
2208 * @param {boolean} isUpdated | 2261 * @param {boolean} isUpdated |
2209 * @param {WebInspector.DOMNode=} parentNode | 2262 * @param {WebInspector.DOMNode=} parentNode |
2210 */ | 2263 */ |
2211 _nodeModified: function(node, isUpdated, parentNode) | 2264 _nodeModified: function(node, isUpdated, parentNode) |
2212 { | 2265 { |
2213 if (this._treeOutline._visible) | 2266 if (this._treeOutline._visible) |
2214 this._updateModifiedNodesSoon(); | 2267 this._updateModifiedNodesSoon(); |
2215 | 2268 |
2216 var entry = /** @type {WebInspector.ElementsTreeUpdater.UpdateEntry} */ (this._recentlyModifiedNodes.get(node)); | 2269 var entry = this._recentlyModifiedNodes.get(node); |
2217 if (!entry) { | 2270 if (!entry) { |
2218 entry = new WebInspector.ElementsTreeUpdater.UpdateEntry(isUpdated, parentNode); | 2271 entry = new WebInspector.ElementsTreeUpdater.UpdateEntry(isUpdated, parentNode); |
2219 this._recentlyModifiedNodes.put(node, entry); | 2272 this._recentlyModifiedNodes.put(node, entry); |
2220 return; | 2273 return; |
2221 } | 2274 } |
2222 | 2275 |
2223 entry.isUpdated |= isUpdated; | 2276 entry.isUpdated |= isUpdated; |
2224 if (parentNode) | 2277 if (parentNode) |
2225 entry.parent = parentNode; | 2278 entry.parent = parentNode; |
2226 }, | 2279 }, |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
2280 | 2333 |
2281 var updatedParentTreeElements = []; | 2334 var updatedParentTreeElements = []; |
2282 | 2335 |
2283 var hidePanelWhileUpdating = this._recentlyModifiedNodes.size() > 10; | 2336 var hidePanelWhileUpdating = this._recentlyModifiedNodes.size() > 10; |
2284 if (hidePanelWhileUpdating) { | 2337 if (hidePanelWhileUpdating) { |
2285 var treeOutlineContainerElement = this._treeOutline.element.parentNo de; | 2338 var treeOutlineContainerElement = this._treeOutline.element.parentNo de; |
2286 this._treeOutline.element.addStyleClass("hidden"); | 2339 this._treeOutline.element.addStyleClass("hidden"); |
2287 var originalScrollTop = treeOutlineContainerElement ? treeOutlineCon tainerElement.scrollTop : 0; | 2340 var originalScrollTop = treeOutlineContainerElement ? treeOutlineCon tainerElement.scrollTop : 0; |
2288 } | 2341 } |
2289 | 2342 |
2290 var keys = this._recentlyModifiedNodes.keys(); | 2343 var nodes = this._recentlyModifiedNodes.keys(); |
2291 for (var i = 0, size = keys.length; i < size; ++i) { | 2344 for (var i = 0, size = nodes.length; i < size; ++i) { |
2292 var node = keys[i]; | 2345 var node = nodes[i]; |
2293 var entry = this._recentlyModifiedNodes.get(node); | 2346 var entry = this._recentlyModifiedNodes.get(node); |
2294 var parent = entry.parent; | 2347 var parent = entry.parent; |
2295 | 2348 |
2296 if (parent === this._treeOutline._rootDOMNode) { | 2349 if (parent === this._treeOutline._rootDOMNode) { |
2297 // Document's children have changed, perform total update. | 2350 // Document's children have changed, perform total update. |
2298 this._treeOutline.update(); | 2351 this._treeOutline.update(); |
2299 this._treeOutline.element.removeStyleClass("hidden"); | 2352 this._treeOutline.element.removeStyleClass("hidden"); |
2300 return; | 2353 return; |
2301 } | 2354 } |
2302 | 2355 |
2303 if (entry.isUpdated) { | 2356 if (entry.isUpdated) { |
2304 var nodeItem = this._treeOutline.findTreeElement(node); | 2357 var nodeItem = this._treeOutline.findTreeElement(node); |
2305 if (nodeItem) | 2358 if (nodeItem) |
2306 nodeItem.updateTitle(); | 2359 nodeItem.updateTitle(); |
2307 } | 2360 } |
2308 | 2361 |
2309 if (!parent) | 2362 var parentNodeItem = parent ? this._treeOutline.findTreeElement(pare nt) : null; |
2310 continue; | |
2311 | |
2312 var parentNodeItem = this._treeOutline.findTreeElement(parent); | |
2313 if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) { | 2363 if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) { |
2314 parentNodeItem.updateChildren(); | 2364 parentNodeItem.updateChildren(); |
2315 parentNodeItem.alreadyUpdatedChildren = true; | 2365 parentNodeItem.alreadyUpdatedChildren = true; |
2316 updatedParentTreeElements.push(parentNodeItem); | 2366 updatedParentTreeElements.push(parentNodeItem); |
2317 } | 2367 } |
2318 } | 2368 } |
2319 | 2369 |
2320 for (var i = 0; i < updatedParentTreeElements.length; ++i) | 2370 for (var i = 0; i < updatedParentTreeElements.length; ++i) |
2321 delete updatedParentTreeElements[i].alreadyUpdatedChildren; | 2371 delete updatedParentTreeElements[i].alreadyUpdatedChildren; |
2322 | 2372 |
2323 if (hidePanelWhileUpdating) { | 2373 if (hidePanelWhileUpdating) { |
2324 this._treeOutline.element.removeStyleClass("hidden"); | 2374 this._treeOutline.element.removeStyleClass("hidden"); |
2325 if (originalScrollTop) | 2375 if (originalScrollTop) |
2326 treeOutlineContainerElement.scrollTop = originalScrollTop; | 2376 treeOutlineContainerElement.scrollTop = originalScrollTop; |
2327 this._treeOutline.updateSelection(); | 2377 this._treeOutline.updateSelection(); |
2328 } | 2378 } |
2329 this._recentlyModifiedNodes.clear(); | 2379 this._recentlyModifiedNodes.clear(); |
2380 | |
2381 this._treeOutline._domNodesUpdated(nodes); | |
2330 }, | 2382 }, |
2331 | 2383 |
2332 _reset: function() | 2384 _reset: function() |
2333 { | 2385 { |
2334 this._treeOutline.rootDOMNode = null; | 2386 this._treeOutline.rootDOMNode = null; |
2335 this._treeOutline.selectDOMNode(null, false); | 2387 this._treeOutline.selectDOMNode(null, false); |
2336 WebInspector.domAgent.hideDOMNodeHighlight(); | 2388 WebInspector.domAgent.hideDOMNodeHighlight(); |
2337 this._recentlyModifiedNodes.clear(); | 2389 this._recentlyModifiedNodes.clear(); |
2338 } | 2390 } |
2339 } | 2391 } |
2340 | 2392 |
2341 /** | 2393 /** |
2342 * @constructor | 2394 * @constructor |
2343 * @param {boolean} isUpdated | 2395 * @param {boolean} isUpdated |
2344 * @param {WebInspector.DOMNode=} parent | 2396 * @param {WebInspector.DOMNode=} parent |
2345 */ | 2397 */ |
2346 WebInspector.ElementsTreeUpdater.UpdateEntry = function(isUpdated, parent) | 2398 WebInspector.ElementsTreeUpdater.UpdateEntry = function(isUpdated, parent) |
2347 { | 2399 { |
2348 this.isUpdated = isUpdated; | 2400 this.isUpdated = isUpdated; |
2349 if (parent) | 2401 if (parent) |
2350 this.parent = parent; | 2402 this.parent = parent; |
2351 } | 2403 } |
OLD | NEW |