| 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 211 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 222 | 222 |
| 223 set hovered(x) | 223 set hovered(x) |
| 224 { | 224 { |
| 225 if (this._hovered === x) | 225 if (this._hovered === x) |
| 226 return; | 226 return; |
| 227 | 227 |
| 228 this._hovered = x; | 228 this._hovered = x; |
| 229 | 229 |
| 230 if (this.listItemElement) { | 230 if (this.listItemElement) { |
| 231 if (x) { | 231 if (x) { |
| 232 this.updateSelection(); | 232 this._createSelection(); |
| 233 this.listItemElement.classList.add("hovered"); | 233 this.listItemElement.classList.add("hovered"); |
| 234 } else { | 234 } else { |
| 235 this.listItemElement.classList.remove("hovered"); | 235 this.listItemElement.classList.remove("hovered"); |
| 236 } | 236 } |
| 237 } | 237 } |
| 238 }, | 238 }, |
| 239 | 239 |
| 240 /** | 240 /** |
| 241 * @return {number} | 241 * @return {number} |
| 242 */ | 242 */ |
| 243 expandedChildrenLimit: function() | 243 expandedChildrenLimit: function() |
| 244 { | 244 { |
| 245 return this._expandedChildrenLimit; | 245 return this._expandedChildrenLimit; |
| 246 }, | 246 }, |
| 247 | 247 |
| 248 /** | 248 /** |
| 249 * @param {number} expandedChildrenLimit | 249 * @param {number} expandedChildrenLimit |
| 250 */ | 250 */ |
| 251 setExpandedChildrenLimit: function(expandedChildrenLimit) | 251 setExpandedChildrenLimit: function(expandedChildrenLimit) |
| 252 { | 252 { |
| 253 this._expandedChildrenLimit = expandedChildrenLimit; | 253 this._expandedChildrenLimit = expandedChildrenLimit; |
| 254 }, | 254 }, |
| 255 | 255 |
| 256 updateSelection: function() | 256 _createSelection: function() |
| 257 { | 257 { |
| 258 var listItemElement = this.listItemElement; | 258 var listItemElement = this.listItemElement; |
| 259 if (!listItemElement) | 259 if (!listItemElement) |
| 260 return; | 260 return; |
| 261 | 261 |
| 262 if (!this.selectionElement) { | 262 if (!this.selectionElement) { |
| 263 this.selectionElement = createElement("div"); | 263 this.selectionElement = createElement("div"); |
| 264 this.selectionElement.className = "selection fill"; | 264 this.selectionElement.className = "selection fill"; |
| 265 listItemElement.insertBefore(this.selectionElement, listItemElement.
firstChild); | 265 listItemElement.insertBefore(this.selectionElement, listItemElement.
firstChild); |
| 266 } | 266 } |
| (...skipping 16 matching lines...) Expand all Loading... |
| 283 if (this._node[this.treeOutline.treeElementSymbol()] === this) | 283 if (this._node[this.treeOutline.treeElementSymbol()] === this) |
| 284 this._node[this.treeOutline.treeElementSymbol()] = null; | 284 this._node[this.treeOutline.treeElementSymbol()] = null; |
| 285 }, | 285 }, |
| 286 | 286 |
| 287 /** | 287 /** |
| 288 * @override | 288 * @override |
| 289 */ | 289 */ |
| 290 onattach: function() | 290 onattach: function() |
| 291 { | 291 { |
| 292 if (this._hovered) { | 292 if (this._hovered) { |
| 293 this.updateSelection(); | 293 this._createSelection(); |
| 294 this.listItemElement.classList.add("hovered"); | 294 this.listItemElement.classList.add("hovered"); |
| 295 } | 295 } |
| 296 | 296 |
| 297 this.updateTitle(); | 297 this.updateTitle(); |
| 298 this._preventFollowingLinksOnDoubleClick(); | 298 this._preventFollowingLinksOnDoubleClick(); |
| 299 this.listItemElement.draggable = true; | 299 this.listItemElement.draggable = true; |
| 300 }, | 300 }, |
| 301 | 301 |
| 302 _preventFollowingLinksOnDoubleClick: function() | 302 _preventFollowingLinksOnDoubleClick: function() |
| 303 { | 303 { |
| (...skipping 26 matching lines...) Expand all Loading... |
| 330 | 330 |
| 331 /** | 331 /** |
| 332 * @override | 332 * @override |
| 333 */ | 333 */ |
| 334 onexpand: function() | 334 onexpand: function() |
| 335 { | 335 { |
| 336 if (this._elementCloseTag) | 336 if (this._elementCloseTag) |
| 337 return; | 337 return; |
| 338 | 338 |
| 339 this.updateTitle(); | 339 this.updateTitle(); |
| 340 this.treeOutline.updateSelection(); | |
| 341 }, | 340 }, |
| 342 | 341 |
| 343 oncollapse: function() | 342 oncollapse: function() |
| 344 { | 343 { |
| 345 if (this._elementCloseTag) | 344 if (this._elementCloseTag) |
| 346 return; | 345 return; |
| 347 | 346 |
| 348 this.updateTitle(); | 347 this.updateTitle(); |
| 349 this.treeOutline.updateSelection(); | |
| 350 }, | 348 }, |
| 351 | 349 |
| 352 /** | 350 /** |
| 353 * @override | 351 * @override |
| 354 * @param {boolean=} omitFocus | 352 * @param {boolean=} omitFocus |
| 355 * @param {boolean=} selectedByUser | 353 * @param {boolean=} selectedByUser |
| 356 * @return {boolean} | 354 * @return {boolean} |
| 357 */ | 355 */ |
| 358 select: function(omitFocus, selectedByUser) | 356 select: function(omitFocus, selectedByUser) |
| 359 { | 357 { |
| 360 if (this._editing) | 358 if (this._editing) |
| 361 return false; | 359 return false; |
| 362 return TreeElement.prototype.select.call(this, omitFocus, selectedByUser
); | 360 return TreeElement.prototype.select.call(this, omitFocus, selectedByUser
); |
| 363 }, | 361 }, |
| 364 | 362 |
| 365 /** | 363 /** |
| 366 * @override | 364 * @override |
| 367 * @param {boolean=} selectedByUser | 365 * @param {boolean=} selectedByUser |
| 368 * @return {boolean} | 366 * @return {boolean} |
| 369 */ | 367 */ |
| 370 onselect: function(selectedByUser) | 368 onselect: function(selectedByUser) |
| 371 { | 369 { |
| 372 this.treeOutline.suppressRevealAndSelect = true; | 370 this.treeOutline.suppressRevealAndSelect = true; |
| 373 this.treeOutline.selectDOMNode(this._node, selectedByUser); | 371 this.treeOutline.selectDOMNode(this._node, selectedByUser); |
| 374 if (selectedByUser) | 372 if (selectedByUser) |
| 375 this._node.highlight(); | 373 this._node.highlight(); |
| 376 this.updateSelection(); | 374 this._createSelection(); |
| 377 this.treeOutline.suppressRevealAndSelect = false; | 375 this.treeOutline.suppressRevealAndSelect = false; |
| 378 return true; | 376 return true; |
| 379 }, | 377 }, |
| 380 | 378 |
| 381 /** | 379 /** |
| 382 * @override | 380 * @override |
| 383 * @return {boolean} | 381 * @return {boolean} |
| 384 */ | 382 */ |
| 385 ondelete: function() | 383 ondelete: function() |
| 386 { | 384 { |
| (...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 447 { | 445 { |
| 448 if (tag.getElementsByClassName("webkit-html-attribute").length > 0) | 446 if (tag.getElementsByClassName("webkit-html-attribute").length > 0) |
| 449 tag.insertBefore(node, tag.lastChild); | 447 tag.insertBefore(node, tag.lastChild); |
| 450 else { | 448 else { |
| 451 var nodeName = tag.textContent.match(/^<(.*?)>$/)[1]; | 449 var nodeName = tag.textContent.match(/^<(.*?)>$/)[1]; |
| 452 tag.textContent = ""; | 450 tag.textContent = ""; |
| 453 tag.createTextChild("<" + nodeName); | 451 tag.createTextChild("<" + nodeName); |
| 454 tag.appendChild(node); | 452 tag.appendChild(node); |
| 455 tag.createTextChild(">"); | 453 tag.createTextChild(">"); |
| 456 } | 454 } |
| 457 | |
| 458 this.updateSelection(); | |
| 459 }, | 455 }, |
| 460 | 456 |
| 461 /** | 457 /** |
| 462 * @param {!Element} eventTarget | 458 * @param {!Element} eventTarget |
| 463 * @return {boolean} | 459 * @return {boolean} |
| 464 */ | 460 */ |
| 465 _startEditingTarget: function(eventTarget) | 461 _startEditingTarget: function(eventTarget) |
| 466 { | 462 { |
| 467 if (this.treeOutline.selectedDOMNode() !== this._node) | 463 if (this.treeOutline.selectedDOMNode() !== this._node) |
| 468 return false; | 464 return false; |
| (...skipping 334 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 803 child = child.nextSibling; | 799 child = child.nextSibling; |
| 804 } | 800 } |
| 805 // Hide children item. | 801 // Hide children item. |
| 806 if (this._childrenListNode) | 802 if (this._childrenListNode) |
| 807 this._childrenListNode.style.display = "none"; | 803 this._childrenListNode.style.display = "none"; |
| 808 // Append editor. | 804 // Append editor. |
| 809 this.listItemElement.appendChild(this._htmlEditElement); | 805 this.listItemElement.appendChild(this._htmlEditElement); |
| 810 this.listItemElement.classList.add("editing-as-html"); | 806 this.listItemElement.classList.add("editing-as-html"); |
| 811 this.treeOutline.element.addEventListener("mousedown", consume, false); | 807 this.treeOutline.element.addEventListener("mousedown", consume, false); |
| 812 | 808 |
| 813 this.updateSelection(); | |
| 814 | |
| 815 /** | 809 /** |
| 816 * @param {!Element} element | 810 * @param {!Element} element |
| 817 * @param {string} newValue | 811 * @param {string} newValue |
| 818 * @this {WebInspector.ElementsTreeElement} | 812 * @this {WebInspector.ElementsTreeElement} |
| 819 */ | 813 */ |
| 820 function commit(element, newValue) | 814 function commit(element, newValue) |
| 821 { | 815 { |
| 822 commitCallback(initialValue, newValue); | 816 commitCallback(initialValue, newValue); |
| 823 dispose.call(this); | 817 dispose.call(this); |
| 824 } | 818 } |
| (...skipping 15 matching lines...) Expand all Loading... |
| 840 if (this._childrenListNode) | 834 if (this._childrenListNode) |
| 841 this._childrenListNode.style.removeProperty("display"); | 835 this._childrenListNode.style.removeProperty("display"); |
| 842 // Unhide header items. | 836 // Unhide header items. |
| 843 var child = this.listItemElement.firstChild; | 837 var child = this.listItemElement.firstChild; |
| 844 while (child) { | 838 while (child) { |
| 845 child.style.removeProperty("display"); | 839 child.style.removeProperty("display"); |
| 846 child = child.nextSibling; | 840 child = child.nextSibling; |
| 847 } | 841 } |
| 848 | 842 |
| 849 this.treeOutline.element.removeEventListener("mousedown", consume, f
alse); | 843 this.treeOutline.element.removeEventListener("mousedown", consume, f
alse); |
| 850 this.updateSelection(); | |
| 851 this.treeOutline.focus(); | 844 this.treeOutline.focus(); |
| 852 } | 845 } |
| 853 | 846 |
| 854 var config = new WebInspector.InplaceEditor.Config(commit.bind(this), di
spose.bind(this)); | 847 var config = new WebInspector.InplaceEditor.Config(commit.bind(this), di
spose.bind(this)); |
| 855 config.setMultilineOptions(initialValue, { name: "xml", htmlMode: true }
, "web-inspector-html", WebInspector.moduleSetting("domWordWrap").get(), true); | 848 config.setMultilineOptions(initialValue, { name: "xml", htmlMode: true }
, "web-inspector-html", WebInspector.moduleSetting("domWordWrap").get(), true); |
| 856 WebInspector.InplaceEditor.startMultilineEditing(this._htmlEditElement,
config).then(markAsBeingEdited.bind(this)); | 849 WebInspector.InplaceEditor.startMultilineEditing(this._htmlEditElement,
config).then(markAsBeingEdited.bind(this)); |
| 857 | 850 |
| 858 /** | 851 /** |
| 859 * @param {!Object} controller | 852 * @param {!Object} controller |
| 860 * @this {WebInspector.ElementsTreeElement} | 853 * @this {WebInspector.ElementsTreeElement} |
| (...skipping 211 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1072 highlightElement.className = "highlight"; | 1065 highlightElement.className = "highlight"; |
| 1073 highlightElement.appendChild(nodeInfo); | 1066 highlightElement.appendChild(nodeInfo); |
| 1074 this.title = highlightElement; | 1067 this.title = highlightElement; |
| 1075 this.updateDecorations(); | 1068 this.updateDecorations(); |
| 1076 this.listItemElement.insertBefore(this._gutterContainer, this.listIt
emElement.firstChild); | 1069 this.listItemElement.insertBefore(this._gutterContainer, this.listIt
emElement.firstChild); |
| 1077 delete this._highlightResult; | 1070 delete this._highlightResult; |
| 1078 } | 1071 } |
| 1079 | 1072 |
| 1080 delete this.selectionElement; | 1073 delete this.selectionElement; |
| 1081 if (this.selected) | 1074 if (this.selected) |
| 1082 this.updateSelection(); | 1075 this._createSelection(); |
| 1083 this._preventFollowingLinksOnDoubleClick(); | 1076 this._preventFollowingLinksOnDoubleClick(); |
| 1084 this._highlightSearchResults(); | 1077 this._highlightSearchResults(); |
| 1085 }, | 1078 }, |
| 1086 | 1079 |
| 1087 updateDecorations: function() | 1080 updateDecorations: function() |
| 1088 { | 1081 { |
| 1089 var treeElement = this.parent; | 1082 var treeElement = this.parent; |
| 1090 var depth = 0; | 1083 var depth = 0; |
| 1091 while (treeElement !== null) { | 1084 while (treeElement !== null) { |
| 1092 depth++; | 1085 depth++; |
| (...skipping 536 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1629 }, | 1622 }, |
| 1630 | 1623 |
| 1631 _editAsHTML: function() | 1624 _editAsHTML: function() |
| 1632 { | 1625 { |
| 1633 var promise = WebInspector.Revealer.revealPromise(this.node()); | 1626 var promise = WebInspector.Revealer.revealPromise(this.node()); |
| 1634 promise.then(() => WebInspector.actionRegistry.action("elements.edit-as-
html").execute()); | 1627 promise.then(() => WebInspector.actionRegistry.action("elements.edit-as-
html").execute()); |
| 1635 }, | 1628 }, |
| 1636 | 1629 |
| 1637 __proto__: TreeElement.prototype | 1630 __proto__: TreeElement.prototype |
| 1638 } | 1631 } |
| OLD | NEW |