0e943c06bc61006c1a2b4abf3911ec812699f3db
[WebKit-https.git] / WebCore / inspector / front-end / ElementsTreeOutline.js
1 /*
2  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
3  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
4  * Copyright (C) 2009 Joseph Pecoraro
5  *
6  * Redistribution and use in source and binary forms, with or without
7  * modification, are permitted provided that the following conditions
8  * are met:
9  *
10  * 1.  Redistributions of source code must retain the above copyright
11  *     notice, this list of conditions and the following disclaimer.
12  * 2.  Redistributions in binary form must reproduce the above copyright
13  *     notice, this list of conditions and the following disclaimer in the
14  *     documentation and/or other materials provided with the distribution.
15  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
16  *     its contributors may be used to endorse or promote products derived
17  *     from this software without specific prior written permission.
18  *
19  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
20  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
21  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
23  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
24  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
25  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
26  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
28  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29  */
30
31 WebInspector.ElementsTreeOutline = function() {
32     this.element = document.createElement("ol");
33     this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
34     this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
35     this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
36
37     TreeOutline.call(this, this.element);
38
39     this.includeRootDOMNode = true;
40     this.selectEnabled = false;
41     this.showInElementsPanelEnabled = false;
42     this.rootDOMNode = null;
43     this.focusedDOMNode = null;
44
45     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
46     this.element.addEventListener("keydown", this._keyDown.bind(this), true);
47 }
48
49 WebInspector.ElementsTreeOutline.prototype = {
50     get rootDOMNode()
51     {
52         return this._rootDOMNode;
53     },
54
55     set rootDOMNode(x)
56     {
57         if (this._rootDOMNode === x)
58             return;
59
60         this._rootDOMNode = x;
61
62         this._isXMLMimeType = !!(WebInspector.mainResource && WebInspector.mainResource.mimeType && WebInspector.mainResource.mimeType.match(/x(?:ht)?ml/i));
63
64         this.update();
65     },
66
67     get isXMLMimeType()
68     {
69         return this._isXMLMimeType;
70     },
71
72     nodeNameToCorrectCase: function(nodeName)
73     {
74         return this.isXMLMimeType ? nodeName : nodeName.toLowerCase();
75     },
76
77     get focusedDOMNode()
78     {
79         return this._focusedDOMNode;
80     },
81
82     set focusedDOMNode(x)
83     {
84         if (this._focusedDOMNode === x) {
85             this.revealAndSelectNode(x);
86             return;
87         }
88
89         this._focusedDOMNode = x;
90
91         this.revealAndSelectNode(x);
92
93         // The revealAndSelectNode() method might find a different element if there is inlined text,
94         // and the select() call would change the focusedDOMNode and reenter this setter. So to
95         // avoid calling focusedNodeChanged() twice, first check if _focusedDOMNode is the same
96         // node as the one passed in.
97         if (this._focusedDOMNode === x) {
98             this.focusedNodeChanged();
99
100             if (x && !this.suppressSelectHighlight) {
101                 InspectorBackend.highlightDOMNode(x.id);
102
103                 if ("_restorePreviousHighlightNodeTimeout" in this)
104                     clearTimeout(this._restorePreviousHighlightNodeTimeout);
105
106                 function restoreHighlightToHoveredNode()
107                 {
108                     var hoveredNode = WebInspector.hoveredDOMNode;
109                     if (hoveredNode)
110                         InspectorBackend.highlightDOMNode(hoveredNode.id);
111                     else
112                         InspectorBackend.hideDOMNodeHighlight();
113                 }
114
115                 this._restorePreviousHighlightNodeTimeout = setTimeout(restoreHighlightToHoveredNode, 2000);
116             }
117         }
118     },
119
120     update: function()
121     {
122         var selectedNode = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
123
124         this.removeChildren();
125
126         if (!this.rootDOMNode)
127             return;
128
129         var treeElement;
130         if (this.includeRootDOMNode) {
131             treeElement = new WebInspector.ElementsTreeElement(this.rootDOMNode);
132             treeElement.selectable = this.selectEnabled;
133             this.appendChild(treeElement);
134         } else {
135             // FIXME: this could use findTreeElement to reuse a tree element if it already exists
136             var node = this.rootDOMNode.firstChild;
137             while (node) {
138                 treeElement = new WebInspector.ElementsTreeElement(node);
139                 treeElement.selectable = this.selectEnabled;
140                 this.appendChild(treeElement);
141                 node = node.nextSibling;
142             }
143         }
144
145         if (selectedNode)
146             this.revealAndSelectNode(selectedNode);
147     },
148
149     updateSelection: function()
150     {
151         if (!this.selectedTreeElement)
152             return;
153         var element = this.treeOutline.selectedTreeElement;
154         element.updateSelection();
155     },
156
157     focusedNodeChanged: function(forceUpdate) {},
158
159     findTreeElement: function(node)
160     {
161         var treeElement = TreeOutline.prototype.findTreeElement.call(this, node, isAncestorNode, parentNode);
162         if (!treeElement && node.nodeType === Node.TEXT_NODE) {
163             // The text node might have been inlined if it was short, so try to find the parent element.
164             treeElement = TreeOutline.prototype.findTreeElement.call(this, node.parentNode, isAncestorNode, parentNode);
165         }
166
167         return treeElement;
168     },
169
170     createTreeElementFor: function(node)
171     {
172         var treeElement = this.findTreeElement(node);
173         if (treeElement)
174             return treeElement;
175         if (!node.parentNode)
176             return null;
177
178         var treeElement = this.createTreeElementFor(node.parentNode);
179         if (treeElement && treeElement.showChild(node.index))
180             return treeElement.children[node.index];
181
182         return null;
183     },
184
185     set suppressRevealAndSelect(x)
186     {
187         if (this._suppressRevealAndSelect === x)
188             return;
189         this._suppressRevealAndSelect = x;
190     },
191
192     revealAndSelectNode: function(node)
193     {
194         if (!node || this._suppressRevealAndSelect)
195             return;
196
197         var treeElement = this.createTreeElementFor(node);
198         if (!treeElement)
199             return;
200
201         treeElement.reveal();
202         treeElement.select();
203     },
204
205     _treeElementFromEvent: function(event)
206     {
207         var root = this.element;
208
209         // We choose this X coordinate based on the knowledge that our list
210         // items extend nearly to the right edge of the outer <ol>.
211         var x = root.totalOffsetLeft + root.offsetWidth - 20;
212
213         var y = event.pageY;
214
215         // Our list items have 1-pixel cracks between them vertically. We avoid
216         // the cracks by checking slightly above and slightly below the mouse
217         // and seeing if we hit the same element each time.
218         var elementUnderMouse = this.treeElementFromPoint(x, y);
219         var elementAboveMouse = this.treeElementFromPoint(x, y - 2);
220         var element;
221         if (elementUnderMouse === elementAboveMouse)
222             element = elementUnderMouse;
223         else
224             element = this.treeElementFromPoint(x, y + 2);
225
226         return element;
227     },
228
229     _keyDown: function(event)
230     {
231         if (event.target !== this.treeOutline.element)
232             return;
233
234         var selectedElement = this.selectedTreeElement;
235         if (!selectedElement)
236             return;
237
238         if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Backspace.code ||
239                 event.keyCode === WebInspector.KeyboardShortcut.Keys.Delete.code) {
240             var startTagTreeElement = this.findTreeElement(selectedElement.representedObject);
241             if (selectedElement !== startTagTreeElement)
242                 selectedElement = startTagTreeElement;
243             selectedElement.remove();
244             event.preventDefault();
245             event.stopPropagation();
246             return;
247         }
248
249         // On Enter or Return start editing the first attribute
250         // or create a new attribute on the selected element.
251         if (isEnterKey(event)) {
252             if (this._editing)
253                 return;
254
255             selectedElement._startEditing();
256
257             // prevent a newline from being immediately inserted
258             event.preventDefault();
259             event.stopPropagation();
260             return;
261         }
262     },
263
264     _onmousedown: function(event)
265     {
266         var element = this._treeElementFromEvent(event);
267
268         if (!element || element.isEventWithinDisclosureTriangle(event))
269             return;
270
271         element.select();
272     },
273
274     _onmousemove: function(event)
275     {
276         var element = this._treeElementFromEvent(event);
277         if (element && this._previousHoveredElement === element)
278             return;
279
280         if (this._previousHoveredElement) {
281             this._previousHoveredElement.hovered = false;
282             delete this._previousHoveredElement;
283         }
284
285         if (element) {
286             element.hovered = true;
287             this._previousHoveredElement = element;
288
289             // Lazily compute tag-specific tooltips.
290             if (element.representedObject && !element.tooltip)
291                 element._createTooltipForNode();
292         }
293
294         WebInspector.hoveredDOMNode = (element ? element.representedObject : null);
295     },
296
297     _onmouseout: function(event)
298     {
299         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
300         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
301             return;
302
303         if (this._previousHoveredElement) {
304             this._previousHoveredElement.hovered = false;
305             delete this._previousHoveredElement;
306         }
307
308         WebInspector.hoveredDOMNode = null;
309     },
310
311     _contextMenuEventFired: function(event)
312     {
313         var listItem = event.target.enclosingNodeOrSelfWithNodeName("LI");
314         if (!listItem || !listItem.treeElement)
315             return;
316
317         var contextMenu = new WebInspector.ContextMenu();
318
319         var tag = event.target.enclosingNodeOrSelfWithClass("webkit-html-tag");
320         var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");
321         if (tag && listItem.treeElement._populateTagContextMenu)
322             listItem.treeElement._populateTagContextMenu(contextMenu, event);
323         else if (textNode && listItem.treeElement._populateTextContextMenu)
324             listItem.treeElement._populateTextContextMenu(contextMenu, textNode);
325         contextMenu.show(event);
326     }
327 }
328
329 WebInspector.ElementsTreeOutline.prototype.__proto__ = TreeOutline.prototype;
330
331 WebInspector.ElementsTreeElement = function(node, elementCloseTag)
332 {
333     this._elementCloseTag = elementCloseTag;
334     var hasChildrenOverride = !elementCloseTag && node.hasChildNodes() && !this._showInlineText(node);
335
336     // The title will be updated in onattach.
337     TreeElement.call(this, "", node, hasChildrenOverride);
338
339     if (this.representedObject.nodeType == Node.ELEMENT_NODE && !elementCloseTag)
340         this._canAddAttributes = true;
341     this._searchQuery = null;
342     this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
343 }
344
345 WebInspector.ElementsTreeElement.InitialChildrenLimit = 500;
346
347 // A union of HTML4 and HTML5-Draft elements that explicitly
348 // or implicitly (for HTML5) forbid the closing tag.
349 // FIXME: Revise once HTML5 Final is published.
350 WebInspector.ElementsTreeElement.ForbiddenClosingTagElements = [
351     "area", "base", "basefont", "br", "canvas", "col", "command", "embed", "frame",
352     "hr", "img", "input", "isindex", "keygen", "link", "meta", "param", "source"
353 ].keySet();
354
355 // These tags we do not allow editing their tag name.
356 WebInspector.ElementsTreeElement.EditTagBlacklist = [
357     "html", "head", "body"
358 ].keySet();
359
360 WebInspector.ElementsTreeElement.prototype = {
361     highlightSearchResults: function(searchQuery)
362     {
363         if (this._searchQuery === searchQuery)
364             return;
365
366         this._searchQuery = searchQuery;
367         this.updateTitle();
368     },
369
370     get hovered()
371     {
372         return this._hovered;
373     },
374
375     set hovered(x)
376     {
377         if (this._hovered === x)
378             return;
379
380         this._hovered = x;
381
382         if (this.listItemElement) {
383             if (x) {
384                 this.updateSelection();
385                 this.listItemElement.addStyleClass("hovered");
386             } else {
387                 this.listItemElement.removeStyleClass("hovered");
388             }
389         }
390     },
391
392     get expandedChildrenLimit()
393     {
394         return this._expandedChildrenLimit;
395     },
396
397     set expandedChildrenLimit(x)
398     {
399         if (this._expandedChildrenLimit === x)
400             return;
401
402         this._expandedChildrenLimit = x;
403         if (this.treeOutline && !this._updateChildrenInProgress)
404             this._updateChildren(true);
405     },
406
407     get expandedChildCount()
408     {
409         var count = this.children.length;
410         if (count && this.children[count - 1]._elementCloseTag)
411             count--;
412         if (count && this.children[count - 1].expandAllButton)
413             count--;
414         return count;
415     },
416
417     showChild: function(index)
418     {
419         if (this._elementCloseTag)
420             return;
421
422         if (index >= this.expandedChildrenLimit) {
423             this._expandedChildrenLimit = index + 1;
424             this._updateChildren(true);
425         }
426
427         // Whether index-th child is visible in the children tree
428         return this.expandedChildCount > index;
429     },
430
431     _createTooltipForNode: function()
432     {
433         var node = this.representedObject;
434         if (!node.nodeName || node.nodeName.toLowerCase() !== "img")
435             return;
436         
437         function setTooltip(properties)
438         {
439             if (!properties)
440                 return;
441
442             if (properties.offsetHeight === properties.naturalHeight && properties.offsetWidth === properties.naturalWidth)
443                 this.tooltip = WebInspector.UIString("%d × %d pixels", properties.offsetWidth, properties.offsetHeight);
444             else
445                 this.tooltip = WebInspector.UIString("%d × %d pixels (Natural: %d × %d pixels)", properties.offsetWidth, properties.offsetHeight, properties.naturalWidth, properties.naturalHeight);
446         }
447         var objectProxy = new WebInspector.ObjectProxy(node.injectedScriptId, node.id);
448         WebInspector.ObjectProxy.getPropertiesAsync(objectProxy, ["naturalHeight", "naturalWidth", "offsetHeight", "offsetWidth"], setTooltip.bind(this));
449     },
450
451     updateSelection: function()
452     {
453         var listItemElement = this.listItemElement;
454         if (!listItemElement)
455             return;
456
457         if (document.body.offsetWidth <= 0) {
458             // The stylesheet hasn't loaded yet or the window is closed,
459             // so we can't calculate what is need. Return early.
460             return;
461         }
462
463         if (!this.selectionElement) {
464             this.selectionElement = document.createElement("div");
465             this.selectionElement.className = "selection selected";
466             listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
467         }
468
469         this.selectionElement.style.height = listItemElement.offsetHeight + "px";
470     },
471
472     onattach: function()
473     {
474         if (this._hovered) {
475             this.updateSelection();
476             this.listItemElement.addStyleClass("hovered");
477         }
478
479         this.updateTitle();
480
481         this._preventFollowingLinksOnDoubleClick();
482     },
483
484     _preventFollowingLinksOnDoubleClick: function()
485     {
486         var links = this.listItemElement.querySelectorAll("li > .webkit-html-tag > .webkit-html-attribute > .webkit-html-external-link, li > .webkit-html-tag > .webkit-html-attribute > .webkit-html-resource-link");
487         if (!links)
488             return;
489
490         for (var i = 0; i < links.length; ++i)
491             links[i].preventFollowOnDoubleClick = true;
492     },
493
494     onpopulate: function()
495     {
496         if (this.children.length || this._showInlineText(this.representedObject) || this._elementCloseTag)
497             return;
498
499         this.updateChildren();
500     },
501
502     updateChildren: function(fullRefresh)
503     {
504         if (this._elementCloseTag)
505             return;
506
507         WebInspector.domAgent.getChildNodesAsync(this.representedObject, this._updateChildren.bind(this, fullRefresh));
508     },
509
510     insertChildElement: function(child, index, closingTag)
511     {
512         var newElement = new WebInspector.ElementsTreeElement(child, closingTag);
513         newElement.selectable = this.treeOutline.selectEnabled;
514         this.insertChild(newElement, index);
515         return newElement;
516     },
517
518     moveChild: function(child, targetIndex)
519     {
520         var wasSelected = child.selected;
521         this.removeChild(child);
522         this.insertChild(child, targetIndex);
523         if (wasSelected)
524             child.select();
525     },
526
527     _updateChildren: function(fullRefresh)
528     {
529         if (this._updateChildrenInProgress)
530             return;
531
532         this._updateChildrenInProgress = true;
533         var focusedNode = this.treeOutline.focusedDOMNode;
534         var originalScrollTop;
535         if (fullRefresh) {
536             var treeOutlineContainerElement = this.treeOutline.element.parentNode;
537             originalScrollTop = treeOutlineContainerElement.scrollTop;
538             var selectedTreeElement = this.treeOutline.selectedTreeElement;
539             if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
540                 this.select();
541             this.removeChildren();
542         }
543
544         var treeElement = this;
545         var treeChildIndex = 0;
546         var elementToSelect;
547
548         function updateChildrenOfNode(node)
549         {
550             var treeOutline = treeElement.treeOutline;
551             var child = node.firstChild;
552             while (child) {
553                 var currentTreeElement = treeElement.children[treeChildIndex];
554                 if (!currentTreeElement || currentTreeElement.representedObject !== child) {
555                     // Find any existing element that is later in the children list.
556                     var existingTreeElement = null;
557                     for (var i = (treeChildIndex + 1), size = treeElement.expandedChildCount; i < size; ++i) {
558                         if (treeElement.children[i].representedObject === child) {
559                             existingTreeElement = treeElement.children[i];
560                             break;
561                         }
562                     }
563
564                     if (existingTreeElement && existingTreeElement.parent === treeElement) {
565                         // If an existing element was found and it has the same parent, just move it.
566                         treeElement.moveChild(existingTreeElement, treeChildIndex);
567                     } else {
568                         // No existing element found, insert a new element.
569                         if (treeChildIndex < treeElement.expandedChildrenLimit) {
570                             var newElement = treeElement.insertChildElement(child, treeChildIndex);
571                             if (child === focusedNode)
572                                 elementToSelect = newElement;
573                             if (treeElement.expandedChildCount > treeElement.expandedChildrenLimit)
574                                 treeElement.expandedChildrenLimit++;
575                         }
576                     }
577                 }
578
579                 child = child.nextSibling;
580                 ++treeChildIndex;
581             }
582         }
583
584         // Remove any tree elements that no longer have this node (or this node's contentDocument) as their parent.
585         for (var i = (this.children.length - 1); i >= 0; --i) {
586             var currentChild = this.children[i];
587             var currentNode = currentChild.representedObject;
588             var currentParentNode = currentNode.parentNode;
589
590             if (currentParentNode === this.representedObject)
591                 continue;
592
593             var selectedTreeElement = this.treeOutline.selectedTreeElement;
594             if (selectedTreeElement && (selectedTreeElement === currentChild || selectedTreeElement.hasAncestor(currentChild)))
595                 this.select();
596
597             this.removeChildAtIndex(i);
598         }
599
600         updateChildrenOfNode(this.representedObject);
601         this.adjustCollapsedRange(false);
602
603         var lastChild = this.children[this.children.length - 1];
604         if (this.representedObject.nodeType == Node.ELEMENT_NODE && (!lastChild || !lastChild._elementCloseTag))
605             this.insertChildElement(this.representedObject, this.children.length, true);
606
607         // We want to restore the original selection and tree scroll position after a full refresh, if possible.
608         if (fullRefresh && elementToSelect) {
609             elementToSelect.select();
610             if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
611                 treeOutlineContainerElement.scrollTop = originalScrollTop;
612         }
613
614         delete this._updateChildrenInProgress;
615     },
616
617     adjustCollapsedRange: function()
618     {
619         // Ensure precondition: only the tree elements for node children are found in the tree
620         // (not the Expand All button or the closing tag).
621         if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent)
622             this.removeChild(this.expandAllButtonElement.__treeElement);
623
624         const node = this.representedObject;
625         if (!node.children)
626             return;
627         const childNodeCount = node.children.length;
628
629         // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
630         for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i < limit; ++i)
631             this.insertChildElement(node.children[i], i);
632
633         const expandedChildCount = this.expandedChildCount;
634         if (childNodeCount > this.expandedChildCount) {
635             var targetButtonIndex = expandedChildCount;
636             if (!this.expandAllButtonElement) {
637                 var title = "<button class=\"show-all-nodes\" value=\"\" />";
638                 var item = new TreeElement(title, null, false);
639                 item.selectable = false;
640                 item.expandAllButton = true;
641                 this.insertChild(item, targetButtonIndex);
642                 this.expandAllButtonElement = item.listItemElement.firstChild;
643                 this.expandAllButtonElement.__treeElement = item;
644                 this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false);
645             } else if (!this.expandAllButtonElement.__treeElement.parent)
646                 this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex);
647             this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)", childNodeCount - expandedChildCount);
648         } else if (this.expandAllButtonElement)
649             delete this.expandAllButtonElement;
650     },
651
652     handleLoadAllChildren: function()
653     {
654         this.expandedChildrenLimit = Math.max(this.representedObject._childNodeCount, this.expandedChildrenLimit + WebInspector.ElementsTreeElement.InitialChildrenLimit);
655     },
656
657     onexpand: function()
658     {
659         if (this._elementCloseTag)
660             return;
661
662         this.updateTitle();
663         this.treeOutline.updateSelection();
664     },
665
666     oncollapse: function()
667     {
668         if (this._elementCloseTag)
669             return;
670
671         this.updateTitle();
672         this.treeOutline.updateSelection();
673     },
674
675     onreveal: function()
676     {
677         if (this.listItemElement)
678             this.listItemElement.scrollIntoViewIfNeeded(false);
679     },
680
681     onselect: function()
682     {
683         this.treeOutline.suppressRevealAndSelect = true;
684         this.treeOutline.focusedDOMNode = this.representedObject;
685         this.updateSelection();
686         this.treeOutline.suppressRevealAndSelect = false;
687     },
688
689     selectOnMouseDown: function(event)
690     {
691         TreeElement.prototype.selectOnMouseDown.call(this, event);
692
693         if (this._editing)
694             return;
695
696         if (this.treeOutline.showInElementsPanelEnabled) {
697             WebInspector.showElementsPanel();
698             WebInspector.panels.elements.focusedDOMNode = this.representedObject;
699         }
700
701         // Prevent selecting the nearest word on double click.
702         if (event.detail >= 2)
703             event.preventDefault();
704     },
705
706     ondblclick: function(event)
707     {
708         if (this._editing || this._elementCloseTag)
709             return;
710
711         if (this._startEditingTarget(event.target))
712             return;
713
714         if (this.hasChildren && !this.expanded)
715             this.expand();
716     },
717
718     _insertInLastAttributePosition: function(tag, node)
719     {
720         if (tag.getElementsByClassName("webkit-html-attribute").length > 0)
721             tag.insertBefore(node, tag.lastChild);
722         else {
723             var nodeName = tag.textContent.match(/^<(.*?)>$/)[1];
724             tag.textContent = '';
725             tag.appendChild(document.createTextNode('<'+nodeName));
726             tag.appendChild(node);
727             tag.appendChild(document.createTextNode('>'));
728         }
729
730         this.updateSelection();
731     },
732
733     _startEditingTarget: function(eventTarget)
734     {
735         if (this.treeOutline.focusedDOMNode != this.representedObject)
736             return;
737
738         if (this.representedObject.nodeType != Node.ELEMENT_NODE && this.representedObject.nodeType != Node.TEXT_NODE)
739             return false;
740
741         var textNode = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-text-node");
742         if (textNode)
743             return this._startEditingTextNode(textNode);
744
745         var attribute = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-attribute");
746         if (attribute)
747             return this._startEditingAttribute(attribute, eventTarget);
748
749         var tagName = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-tag-name");
750         if (tagName)
751             return this._startEditingTagName(tagName);
752
753         var newAttribute = eventTarget.enclosingNodeOrSelfWithClass("add-attribute");
754         if (newAttribute)
755             return this._addNewAttribute();
756
757         return false;
758     },
759
760     _populateTagContextMenu: function(contextMenu, event)
761     {
762         var attribute = event.target.enclosingNodeOrSelfWithClass("webkit-html-attribute");
763         var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
764
765         // Add attribute-related actions.
766         contextMenu.appendItem(WebInspector.UIString("Add Attribute"), this._addNewAttribute.bind(this));
767         if (attribute && !newAttribute)
768             contextMenu.appendItem(WebInspector.UIString("Edit Attribute"), this._startEditingAttribute.bind(this, attribute, event.target));
769         contextMenu.appendSeparator();
770
771         // Add free-form node-related actions.
772         contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
773         contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
774         contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
775     },
776
777     _populateTextContextMenu: function(contextMenu, textNode)
778     {
779         contextMenu.appendItem(WebInspector.UIString("Edit Text"), this._startEditingTextNode.bind(this, textNode));
780     },
781
782     _startEditing: function()
783     {
784         if (this.treeOutline.focusedDOMNode !== this.representedObject)
785             return;
786
787         var listItem = this._listItemNode;
788
789         if (this._canAddAttributes) {
790             var attribute = listItem.getElementsByClassName("webkit-html-attribute")[0];
791             if (attribute)
792                 return this._startEditingAttribute(attribute, attribute.getElementsByClassName("webkit-html-attribute-value")[0]);
793
794             return this._addNewAttribute();
795         }
796
797         if (this.representedObject.nodeType === Node.TEXT_NODE) {
798             var textNode = listItem.getElementsByClassName("webkit-html-text-node")[0];
799             if (textNode)
800                 return this._startEditingTextNode(textNode);
801             return;
802         }
803     },
804
805     _addNewAttribute: function()
806     {
807         // Cannot just convert the textual html into an element without
808         // a parent node. Use a temporary span container for the HTML.
809         var container = document.createElement("span");
810         container.innerHTML = this._attributeHTML(" ", "");
811         var attr = container.firstChild;
812         attr.style.marginLeft = "2px"; // overrides the .editing margin rule
813         attr.style.marginRight = "2px"; // overrides the .editing margin rule
814
815         var tag = this.listItemElement.getElementsByClassName("webkit-html-tag")[0];
816         this._insertInLastAttributePosition(tag, attr);
817         return this._startEditingAttribute(attr, attr);
818     },
819
820     _triggerEditAttribute: function(attributeName)
821     {
822         var attributeElements = this.listItemElement.getElementsByClassName("webkit-html-attribute-name");
823         for (var i = 0, len = attributeElements.length; i < len; ++i) {
824             if (attributeElements[i].textContent === attributeName) {
825                 for (var elem = attributeElements[i].nextSibling; elem; elem = elem.nextSibling) {
826                     if (elem.nodeType !== Node.ELEMENT_NODE)
827                         continue;
828
829                     if (elem.hasStyleClass("webkit-html-attribute-value"))
830                         return this._startEditingAttribute(elem.parentNode, elem);
831                 }
832             }
833         }
834     },
835
836     _startEditingAttribute: function(attribute, elementForSelection)
837     {
838         if (WebInspector.isBeingEdited(attribute))
839             return true;
840
841         var attributeNameElement = attribute.getElementsByClassName("webkit-html-attribute-name")[0];
842         if (!attributeNameElement)
843             return false;
844
845         var attributeName = attributeNameElement.innerText;
846
847         function removeZeroWidthSpaceRecursive(node)
848         {
849             if (node.nodeType === Node.TEXT_NODE) {
850                 node.nodeValue = node.nodeValue.replace(/\u200B/g, "");
851                 return;
852             }
853
854             if (node.nodeType !== Node.ELEMENT_NODE)
855                 return;
856
857             for (var child = node.firstChild; child; child = child.nextSibling)
858                 removeZeroWidthSpaceRecursive(child);
859         }
860
861         // Remove zero-width spaces that were added by nodeTitleInfo.
862         removeZeroWidthSpaceRecursive(attribute);
863
864         this._editing = WebInspector.startEditing(attribute, this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
865         window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
866
867         return true;
868     },
869
870     _startEditingTextNode: function(textNode)
871     {
872         if (WebInspector.isBeingEdited(textNode))
873             return true;
874
875         this._editing = WebInspector.startEditing(textNode, this._textNodeEditingCommitted.bind(this), this._editingCancelled.bind(this));
876         window.getSelection().setBaseAndExtent(textNode, 0, textNode, 1);
877
878         return true;
879     },
880
881     _startEditingTagName: function(tagNameElement)
882     {
883         if (!tagNameElement) {
884             tagNameElement = this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0];
885             if (!tagNameElement)
886                 return false;
887         }
888
889         var tagName = tagNameElement.textContent;
890         if (WebInspector.ElementsTreeElement.EditTagBlacklist[tagName.toLowerCase()])
891             return false;
892
893         if (WebInspector.isBeingEdited(tagNameElement))
894             return true;
895
896         var closingTagElement = this._distinctClosingTagElement();
897
898         function keyupListener(event)
899         {
900             if (closingTagElement)
901                 closingTagElement.textContent = "</" + tagNameElement.textContent + ">";
902         }
903
904         function editingComitted(element, newTagName)
905         {
906             tagNameElement.removeEventListener('keyup', keyupListener, false);
907             this._tagNameEditingCommitted.apply(this, arguments);
908         }
909
910         function editingCancelled()
911         {
912             tagNameElement.removeEventListener('keyup', keyupListener, false);
913             this._editingCancelled.apply(this, arguments);
914         }
915
916         tagNameElement.addEventListener('keyup', keyupListener, false);
917
918         this._editing = WebInspector.startEditing(tagNameElement, editingComitted.bind(this), editingCancelled.bind(this), tagName);
919         window.getSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
920         return true;
921     },
922
923     _startEditingAsHTML: function(commitCallback, initialValue)
924     {
925         if (this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement))
926             return true;
927
928         this._htmlEditElement = document.createElement("div");
929         this._htmlEditElement.className = "source-code elements-tree-editor";
930         this._htmlEditElement.textContent = initialValue;
931
932         // Hide header items.
933         var child = this.listItemElement.firstChild;
934         while (child) {
935             child.style.display = "none";
936             child = child.nextSibling;
937         }
938         // Hide children item.
939         if (this._childrenListNode)
940             this._childrenListNode.style.display = "none";
941         // Append editor.
942         this.listItemElement.appendChild(this._htmlEditElement);
943
944         this.updateSelection();
945
946         function commit()
947         {
948             commitCallback(this._htmlEditElement.textContent);
949             dispose.call(this);
950         }
951
952         function dispose()
953         {
954             delete this._editing;
955
956             // Remove editor.
957             this.listItemElement.removeChild(this._htmlEditElement);
958             delete this._htmlEditElement;
959             // Unhide children item.
960             if (this._childrenListNode)
961                 this._childrenListNode.style.removeProperty("display");
962             // Unhide header items.
963             var child = this.listItemElement.firstChild;
964             while (child) {
965                 child.style.removeProperty("display");
966                 child = child.nextSibling;
967             }
968
969             this.updateSelection();
970         }
971
972         this._editing = WebInspector.startEditing(this._htmlEditElement, commit.bind(this), dispose.bind(this), null, true);
973     },
974
975     _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
976     {
977         delete this._editing;
978
979         // Before we do anything, determine where we should move
980         // next based on the current element's settings
981         var moveToAttribute, moveToTagName, moveToNewAttribute;
982         if (moveDirection) {
983             var found = false;
984
985             // Search for the attribute's position, and then decide where to move to.
986             var attributes = this.representedObject.attributes;
987             for (var i = 0; i < attributes.length; ++i) {
988                 if (attributes[i].name === attributeName) {
989                     found = true;
990                     if (moveDirection === "backward") {
991                         if (i === 0)
992                             moveToTagName = true;
993                         else
994                             moveToAttribute = attributes[i - 1].name;
995                     } else if (moveDirection === "forward") {
996                         if (i === attributes.length - 1)
997                             moveToNewAttribute = true;
998                         else
999                             moveToAttribute = attributes[i + 1].name;
1000                     }
1001                 }
1002             }
1003
1004             // Moving From the "New Attribute" position.
1005             if (!found) {
1006                 if (moveDirection === "backward" && attributes.length > 0)
1007                     moveToAttribute = attributes[attributes.length - 1].name;
1008                 else if (moveDirection === "forward" && !/^\s*$/.test(newText))
1009                     moveToNewAttribute = true;
1010             }
1011         }
1012
1013         function moveToNextAttributeIfNeeded()
1014         {
1015             // Cleanup empty new attribute sections.
1016             if (element.textContent.trim().length === 0)
1017                 element.parentNode.removeChild(element);
1018
1019             // Make the move.
1020             if (moveToAttribute)
1021                 this._triggerEditAttribute(moveToAttribute);
1022             else if (moveToNewAttribute)
1023                 this._addNewAttribute();
1024             else if (moveToTagName)
1025                 this._startEditingTagName();
1026         }
1027
1028         function regenerateStyledAttribute(name, value)
1029         {
1030             var previous = element.previousSibling;
1031             if (!previous || previous.nodeType !== Node.TEXT_NODE)
1032                 element.parentNode.insertBefore(document.createTextNode(" "), element);
1033             element.outerHTML = this._attributeHTML(name, value);
1034         }
1035
1036         var parseContainerElement = document.createElement("span");
1037         parseContainerElement.innerHTML = "<span " + newText + "></span>";
1038         var parseElement = parseContainerElement.firstChild;
1039
1040         if (!parseElement) {
1041             this._editingCancelled(element, attributeName);
1042             moveToNextAttributeIfNeeded.call(this);
1043             return;
1044         }
1045
1046         if (!parseElement.hasAttributes()) {
1047             this.representedObject.removeAttribute(attributeName);
1048             moveToNextAttributeIfNeeded.call(this);
1049             return;
1050         }
1051
1052         var foundOriginalAttribute = false;
1053         for (var i = 0; i < parseElement.attributes.length; ++i) {
1054             var attr = parseElement.attributes[i];
1055             foundOriginalAttribute = foundOriginalAttribute || attr.name === attributeName;
1056             try {
1057                 this.representedObject.setAttribute(attr.name, attr.value);
1058                 regenerateStyledAttribute.call(this, attr.name, attr.value);
1059             } catch(e) {} // ignore invalid attribute (innerHTML doesn't throw errors, but this can)
1060         }
1061
1062         if (!foundOriginalAttribute)
1063             this.representedObject.removeAttribute(attributeName);
1064
1065         this.treeOutline.focusedNodeChanged(true);
1066
1067         moveToNextAttributeIfNeeded.call(this);
1068     },
1069
1070     _tagNameEditingCommitted: function(element, newText, oldText, tagName, moveDirection)
1071     {
1072         delete this._editing;
1073         var self = this;
1074
1075         function cancel()
1076         {
1077             var closingTagElement = self._distinctClosingTagElement();
1078             if (closingTagElement)
1079                 closingTagElement.textContent = "</" + tagName + ">";
1080
1081             self._editingCancelled(element, tagName);
1082             moveToNextAttributeIfNeeded.call(self);
1083         }
1084
1085         function moveToNextAttributeIfNeeded()
1086         {
1087             if (moveDirection !== "forward")
1088                 return;
1089
1090             var attributes = this.representedObject.attributes;
1091             if (attributes.length > 0)
1092                 this._triggerEditAttribute(attributes[0].name);
1093             else
1094                 this._addNewAttribute();
1095         }
1096
1097         newText = newText.trim();
1098         if (newText === oldText) {
1099             cancel();
1100             return;
1101         }
1102
1103         var treeOutline = this.treeOutline;
1104         var wasExpanded = this.expanded;
1105
1106         function changeTagNameCallback(nodeId)
1107         {
1108             if (nodeId === -1) {
1109                 cancel();
1110                 return;
1111             }
1112
1113             // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
1114             WebInspector.panels.elements.updateModifiedNodes();
1115
1116             WebInspector.updateFocusedNode(nodeId);
1117             var newTreeItem = treeOutline.findTreeElement(WebInspector.domAgent.nodeForId(nodeId));
1118             if (wasExpanded)
1119                 newTreeItem.expand();
1120
1121             moveToNextAttributeIfNeeded.call(newTreeItem);
1122         }
1123
1124         var callId = WebInspector.Callback.wrap(changeTagNameCallback);
1125         InspectorBackend.changeTagName(callId, this.representedObject.id, newText, wasExpanded);
1126     },
1127
1128     _textNodeEditingCommitted: function(element, newText)
1129     {
1130         delete this._editing;
1131
1132         var textNode;
1133         if (this.representedObject.nodeType == Node.ELEMENT_NODE) {
1134             // We only show text nodes inline in elements if the element only
1135             // has a single child, and that child is a text node.
1136             textNode = this.representedObject.firstChild;
1137         } else if (this.representedObject.nodeType == Node.TEXT_NODE)
1138             textNode = this.representedObject;
1139
1140         textNode.nodeValue = newText;
1141
1142         // Need to restore attributes / node structure.
1143         this.updateTitle();
1144     },
1145
1146     _editingCancelled: function(element, context)
1147     {
1148         delete this._editing;
1149
1150         // Need to restore attributes structure.
1151         this.updateTitle();
1152     },
1153
1154     _distinctClosingTagElement: function()
1155     {
1156         // FIXME: Improve the Tree Element / Outline Abstraction to prevent crawling the DOM
1157
1158         // For an expanded element, it will be the last element with class "close"
1159         // in the child element list.
1160         if (this.expanded) {
1161             var closers = this._childrenListNode.querySelectorAll(".close");
1162             return closers[closers.length-1];
1163         }
1164
1165         // Remaining cases are single line non-expanded elements with a closing
1166         // tag, or HTML elements without a closing tag (such as <br>). Return
1167         // null in the case where there isn't a closing tag.
1168         var tags = this.listItemElement.getElementsByClassName("webkit-html-tag");
1169         return (tags.length === 1 ? null : tags[tags.length-1]);
1170     },
1171
1172     updateTitle: function()
1173     {
1174         // If we are editing, return early to prevent canceling the edit.
1175         // After editing is committed updateTitle will be called.
1176         if (this._editing)
1177             return;
1178
1179         var title = this._nodeTitleInfo(WebInspector.linkifyURL).title;
1180         this.title = "<span class=\"highlight\">" + title + "</span>";
1181         delete this.selectionElement;
1182         this.updateSelection();
1183         this._preventFollowingLinksOnDoubleClick();
1184         this._highlightSearchResults();
1185     },
1186
1187     _rewriteAttrHref: function(node, hrefValue)
1188     {
1189         if (!hrefValue || hrefValue.indexOf("://") > 0)
1190             return hrefValue;
1191
1192         for (var frameOwnerCandidate = node; frameOwnerCandidate; frameOwnerCandidate = frameOwnerCandidate.parentNode) {
1193             if (frameOwnerCandidate.documentURL) {
1194                 var result = WebInspector.completeURL(frameOwnerCandidate.documentURL, hrefValue);
1195                 if (result)
1196                     return result;
1197                 break;
1198             }
1199         }
1200
1201         // documentURL not found or has bad value
1202         for (var url in WebInspector.resourceURLMap) {
1203             var match = url.match(WebInspector.URLRegExp);
1204             if (match && match[4] === hrefValue)
1205                 return url;
1206         }
1207         return hrefValue;
1208     },
1209
1210     _attributeHTML: function(name, value, node, linkify)
1211     {
1212         var hasText = (value.length > 0);
1213         var html = "<span class=\"webkit-html-attribute\"><span class=\"webkit-html-attribute-name\">" + name.escapeHTML() + "</span>";
1214
1215         if (hasText)
1216             html += "=&#8203;\"";
1217
1218         if (linkify && (name === "src" || name === "href")) {
1219             value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
1220             html += linkify(this._rewriteAttrHref(node, value), value, "webkit-html-attribute-value", node.nodeName.toLowerCase() === "a");
1221         } else {
1222             value = value.escapeHTML().replace(/([\/;:\)\]\}])/g, "$1&#8203;");
1223             html += "<span class=\"webkit-html-attribute-value\">" + value + "</span>";
1224         }
1225
1226         if (hasText)
1227             html += "\"";
1228
1229         html += "</span>";
1230         return html;
1231     },
1232
1233     _tagHTML: function(tagName, isClosingTag, isDistinctTreeElement, linkify)
1234     {
1235         var node = this.representedObject;
1236         var result = "<span class=\"webkit-html-tag" + (isClosingTag && isDistinctTreeElement ? " close" : "")  + "\">&lt;";
1237         result += "<span " + (isClosingTag ? "" : "class=\"webkit-html-tag-name\"") + ">" + (isClosingTag ? "/" : "") + tagName + "</span>";
1238         if (!isClosingTag && node.hasAttributes()) {
1239             for (var i = 0; i < node.attributes.length; ++i) {
1240                 var attr = node.attributes[i];
1241                 result += " " + this._attributeHTML(attr.name, attr.value, node, linkify);
1242             }
1243         }
1244         result += "&gt;</span>&#8203;";
1245
1246         return result;
1247     },
1248
1249     _nodeTitleInfo: function(linkify)
1250     {
1251         var node = this.representedObject;
1252         var info = {title: "", hasChildren: this.hasChildren};
1253
1254         switch (node.nodeType) {
1255             case Node.DOCUMENT_NODE:
1256                 info.title = "Document";
1257                 break;
1258
1259             case Node.DOCUMENT_FRAGMENT_NODE:
1260                 info.title = "Document Fragment";
1261                 break;
1262
1263             case Node.ELEMENT_NODE:
1264                 var tagName = this.treeOutline.nodeNameToCorrectCase(node.nodeName).escapeHTML();
1265                 if (this._elementCloseTag) {
1266                     info.title = this._tagHTML(tagName, true, true);
1267                     info.hasChildren = false;
1268                     break;
1269                 }
1270
1271                 info.title = this._tagHTML(tagName, false, false, linkify);
1272
1273                 var textChild = onlyTextChild.call(node);
1274                 var showInlineText = textChild && textChild.textContent.length < Preferences.maxInlineTextChildLength;
1275
1276                 if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WebInspector.ElementsTreeElement.ForbiddenClosingTagElements[tagName]))) {
1277                     if (this.hasChildren)
1278                         info.title += "<span class=\"webkit-html-text-node\">&#8230;</span>&#8203;";
1279                     info.title += this._tagHTML(tagName, true, false);
1280                 }
1281
1282                 // If this element only has a single child that is a text node,
1283                 // just show that text and the closing tag inline rather than
1284                 // create a subtree for them
1285                 if (showInlineText) {
1286                     info.title += "<span class=\"webkit-html-text-node\">" + textChild.nodeValue.escapeHTML() + "</span>&#8203;" + this._tagHTML(tagName, true, false);
1287                     info.hasChildren = false;
1288                 }
1289                 break;
1290
1291             case Node.TEXT_NODE:
1292                 if (isNodeWhitespace.call(node))
1293                     info.title = "(whitespace)";
1294                 else {
1295                     if (node.parentNode && node.parentNode.nodeName.toLowerCase() === "script") {
1296                         var newNode = document.createElement("span");
1297                         newNode.textContent = node.textContent;
1298
1299                         var javascriptSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter("text/javascript");
1300                         javascriptSyntaxHighlighter.syntaxHighlightNode(newNode);
1301
1302                         info.title = "<span class=\"webkit-html-text-node webkit-html-js-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>";
1303                     } else if (node.parentNode && node.parentNode.nodeName.toLowerCase() === "style") {
1304                         var newNode = document.createElement("span");
1305                         newNode.textContent = node.textContent;
1306
1307                         var cssSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter("text/css");
1308                         cssSyntaxHighlighter.syntaxHighlightNode(newNode);
1309
1310                         info.title = "<span class=\"webkit-html-text-node webkit-html-css-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>";
1311                     } else {
1312                         info.title = "\"<span class=\"webkit-html-text-node\">" + node.nodeValue.escapeHTML() + "</span>\"";
1313                     }
1314                 }
1315                 break;
1316
1317             case Node.COMMENT_NODE:
1318                 info.title = "<span class=\"webkit-html-comment\">&lt;!--" + node.nodeValue.escapeHTML() + "--&gt;</span>";
1319                 break;
1320
1321             case Node.DOCUMENT_TYPE_NODE:
1322                 info.title = "<span class=\"webkit-html-doctype\">&lt;!DOCTYPE " + node.nodeName;
1323                 if (node.publicId) {
1324                     info.title += " PUBLIC \"" + node.publicId + "\"";
1325                     if (node.systemId)
1326                         info.title += " \"" + node.systemId + "\"";
1327                 } else if (node.systemId)
1328                     info.title += " SYSTEM \"" + node.systemId + "\"";
1329                 if (node.internalSubset)
1330                     info.title += " [" + node.internalSubset + "]";
1331                 info.title += "&gt;</span>";
1332                 break;
1333             default:
1334                 info.title = this.treeOutline.nodeNameToCorrectCase(node.nodeName).collapseWhitespace().escapeHTML();
1335         }
1336
1337         return info;
1338     },
1339
1340     _showInlineText: function(node)
1341     {
1342         if (node.nodeType === Node.ELEMENT_NODE) {
1343             var textChild = onlyTextChild.call(node);
1344             if (textChild && textChild.textContent.length < Preferences.maxInlineTextChildLength)
1345                 return true;
1346         }
1347         return false;
1348     },
1349
1350     remove: function()
1351     {
1352         var parentElement = this.parent;
1353         if (!parentElement)
1354             return;
1355
1356         var self = this;
1357         function removeNodeCallback(removedNodeId)
1358         {
1359             // -1 is an error code, which means removing the node from the DOM failed,
1360             // so we shouldn't remove it from the tree.
1361             if (removedNodeId === -1)
1362                 return;
1363
1364             parentElement.removeChild(self);
1365             parentElement.adjustCollapsedRange(true);
1366         }
1367
1368         var callId = WebInspector.Callback.wrap(removeNodeCallback);
1369         InspectorBackend.removeNode(callId, this.representedObject.id);
1370     },
1371
1372     _editAsHTML: function()
1373     {
1374         var treeOutline = this.treeOutline;
1375         var node = this.representedObject;
1376         var wasExpanded = this.expanded;
1377
1378         function selectNode(nodeId)
1379         {
1380             if (!nodeId)
1381                 return;
1382
1383             // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
1384             WebInspector.panels.elements.updateModifiedNodes();
1385
1386             WebInspector.updateFocusedNode(nodeId);
1387             if (wasExpanded) {
1388                 var newTreeItem = treeOutline.findTreeElement(WebInspector.domAgent.nodeForId(nodeId));
1389                 if (newTreeItem)
1390                     newTreeItem.expand();
1391             }
1392         }
1393
1394         function commitChange(value)
1395         {
1396             InjectedScriptAccess.get(node.injectedScriptId).setOuterHTML(node.id, value, wasExpanded, selectNode.bind(this));
1397         }
1398
1399         InjectedScriptAccess.get(node.injectedScriptId).getNodePropertyValue(node.id, "outerHTML", this._startEditingAsHTML.bind(this, commitChange));
1400     },
1401
1402     _copyHTML: function()
1403     {
1404         InspectorBackend.copyNode(this.representedObject.id);
1405     },
1406
1407     _highlightSearchResults: function()
1408     {
1409         if (!this._searchQuery)
1410             return;
1411         var text = this.listItemElement.textContent;
1412         var regexObject = createSearchRegex(this._searchQuery);
1413
1414         var offset = 0;
1415         var match = regexObject.exec(text);
1416         while (match) {
1417             highlightSearchResult(this.listItemElement, offset + match.index, match[0].length);
1418             offset += match.index + 1;
1419             text = text.substring(match.index + 1);
1420             match = regexObject.exec(text);
1421         }
1422     }
1423 }
1424
1425 WebInspector.ElementsTreeElement.prototype.__proto__ = TreeElement.prototype;