| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright (C) 2007 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007 Apple Inc. All rights reserved. |
| 3 * | 3 * |
| 4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
| 5 * modification, are permitted provided that the following conditions | 5 * modification, are permitted provided that the following conditions |
| 6 * are met: | 6 * are met: |
| 7 * | 7 * |
| 8 * 1. Redistributions of source code must retain the above copyright | 8 * 1. Redistributions of source code must retain the above copyright |
| 9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
| 10 * 2. Redistributions in binary form must reproduce the above copyright | 10 * 2. Redistributions in binary form must reproduce the above copyright |
| (...skipping 25 matching lines...) Expand all Loading... |
| 36 this._createRootElement(); | 36 this._createRootElement(); |
| 37 | 37 |
| 38 this.selectedTreeElement = null; | 38 this.selectedTreeElement = null; |
| 39 this.expandTreeElementsWhenArrowing = false; | 39 this.expandTreeElementsWhenArrowing = false; |
| 40 /** @type {?function(!TreeElement, !TreeElement):number} */ | 40 /** @type {?function(!TreeElement, !TreeElement):number} */ |
| 41 this._comparator = null; | 41 this._comparator = null; |
| 42 | 42 |
| 43 this._contentElement = this._rootElement._childrenListNode; | 43 this._contentElement = this._rootElement._childrenListNode; |
| 44 this._contentElement.addEventListener("keydown", this._treeKeyDown.bind(this
), true); | 44 this._contentElement.addEventListener("keydown", this._treeKeyDown.bind(this
), true); |
| 45 | 45 |
| 46 this.element = this._contentElement; | |
| 47 | |
| 48 this.setFocusable(!nonFocusable); | 46 this.setFocusable(!nonFocusable); |
| 49 | 47 |
| 50 this.element.addEventListener("keypress", this._handleKeyPressForHighlightin
g.bind(this), true); | 48 this.element = this._contentElement; |
| 51 this.element.addEventListener("blur", this._clearFilter.bind(this), true); | |
| 52 this.element.addEventListener("click", this._clearFilter.bind(this), true); | |
| 53 | |
| 54 this._currentSelectionFilterString = ""; | |
| 55 this._interactiveFilterEnabled = false; | |
| 56 /** @type {!Array.<!TreeElement>} */ | |
| 57 this._highlightedNodes = [] | |
| 58 } | 49 } |
| 59 | 50 |
| 60 TreeOutline.Events = { | 51 TreeOutline.Events = { |
| 61 ElementAttached: "ElementAttached", | 52 ElementAttached: "ElementAttached", |
| 62 ElementExpanded: "ElementExpanded", | 53 ElementExpanded: "ElementExpanded", |
| 63 ElementCollapsed: "ElementCollapsed", | 54 ElementCollapsed: "ElementCollapsed", |
| 64 ElementSelected: "ElementSelected" | 55 ElementSelected: "ElementSelected" |
| 65 } | 56 } |
| 66 | 57 |
| 67 TreeOutline.prototype = { | 58 TreeOutline.prototype = { |
| 68 _createRootElement: function() | 59 _createRootElement: function() |
| 69 { | 60 { |
| 70 this._rootElement = new TreeElement(); | 61 this._rootElement = new TreeElement(); |
| 71 this._rootElement.treeOutline = this; | 62 this._rootElement.treeOutline = this; |
| 72 this._rootElement.root = true; | 63 this._rootElement.root = true; |
| 73 this._rootElement.selectable = false; | 64 this._rootElement.selectable = false; |
| 74 this._rootElement.expanded = true; | 65 this._rootElement.expanded = true; |
| 75 this._rootElement._childrenListNode.classList.remove("children"); | 66 this._rootElement._childrenListNode.classList.remove("children"); |
| 76 }, | 67 }, |
| 77 | 68 |
| 78 /** | 69 /** |
| 79 * @return {!TreeElement} | 70 * @return {!TreeElement} |
| 80 */ | 71 */ |
| 81 rootElement: function() | 72 rootElement: function() |
| 82 { | 73 { |
| 83 return this._rootElement; | 74 return this._rootElement; |
| 84 }, | 75 }, |
| 85 | 76 |
| 86 /** | 77 /** |
| 87 * @param {boolean} enable | |
| 88 */ | |
| 89 setInteractiveFilterable: function(enable) | |
| 90 { | |
| 91 if (enable === this._interactiveFilterEnabled) | |
| 92 return; | |
| 93 if (!enable) | |
| 94 this._setCurrentSelectionFilterString(""); | |
| 95 this._interactiveFilterEnabled = enable; | |
| 96 }, | |
| 97 | |
| 98 /** | |
| 99 * @param {string} filterString | |
| 100 */ | |
| 101 _setCurrentSelectionFilterString: function(filterString) | |
| 102 { | |
| 103 this._currentSelectionFilterString = filterString; | |
| 104 this._refreshHighlighting(); | |
| 105 }, | |
| 106 | |
| 107 /** | |
| 108 * @param {string} filterString | |
| 109 * @return {!RegExp} | |
| 110 */ | |
| 111 _makeFilterRegexFromString: function(filterString) | |
| 112 { | |
| 113 return new RegExp(filterString.escapeForRegExp(), "gi") | |
| 114 }, | |
| 115 | |
| 116 _refreshHighlighting: function() | |
| 117 { | |
| 118 if (!this._rootElement) | |
| 119 return; | |
| 120 | |
| 121 for (var changedNode of this._highlightedNodes) | |
| 122 changedNode._revertHighlightChanges(); | |
| 123 | |
| 124 this._highlightedNodes = []; | |
| 125 | |
| 126 if (!this._currentSelectionFilterString) | |
| 127 return; | |
| 128 | |
| 129 if (this.selectedTreeElement && !this.selectedTreeElement.selectable) { | |
| 130 if (!this.selectNext()) | |
| 131 this.selectPrevious(); | |
| 132 } | |
| 133 | |
| 134 var filterRegex = this._makeFilterRegexFromString(this._currentSelection
FilterString); | |
| 135 var node = this._rootElement.firstChild(); | |
| 136 while (node) { | |
| 137 if (node._applyHighlightFilter(filterRegex)) | |
| 138 this._highlightedNodes.push(node); | |
| 139 node = node.traverseNextTreeElement(true, null, true); | |
| 140 } | |
| 141 }, | |
| 142 | |
| 143 _clearFilter: function() | |
| 144 { | |
| 145 if (this._interactiveFilterEnabled) | |
| 146 this._setCurrentSelectionFilterString(""); | |
| 147 }, | |
| 148 | |
| 149 /** | |
| 150 * @param {!Event} event | |
| 151 */ | |
| 152 _handleKeyPressForHighlighting: function(event) | |
| 153 { | |
| 154 if (!this._interactiveFilterEnabled) | |
| 155 return; | |
| 156 | |
| 157 if (event.target !== this._contentElement) | |
| 158 return; | |
| 159 | |
| 160 if (!this.selectedTreeElement || event.shiftKey || event.metaKey || even
t.ctrlKey) | |
| 161 return; | |
| 162 | |
| 163 var currentFilterString = this._currentSelectionFilterString; | |
| 164 var key = event.data; | |
| 165 if (key !== "\r" && key !== "\n" && (key !== " " || currentFilterString)
) | |
| 166 this._setCurrentSelectionFilterString(currentFilterString + event.da
ta); | |
| 167 }, | |
| 168 | |
| 169 /** | |
| 170 * @return {?TreeElement} | 78 * @return {?TreeElement} |
| 171 */ | 79 */ |
| 172 firstChild: function() | 80 firstChild: function() |
| 173 { | 81 { |
| 174 return this._rootElement.firstChild(); | 82 return this._rootElement.firstChild(); |
| 175 }, | 83 }, |
| 176 | 84 |
| 177 /** | 85 /** |
| 178 * @param {!TreeElement} child | 86 * @param {!TreeElement} child |
| 179 */ | 87 */ |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 237 { | 145 { |
| 238 this._comparator = comparator; | 146 this._comparator = comparator; |
| 239 }, | 147 }, |
| 240 | 148 |
| 241 /** | 149 /** |
| 242 * @param {boolean} focusable | 150 * @param {boolean} focusable |
| 243 */ | 151 */ |
| 244 setFocusable: function(focusable) | 152 setFocusable: function(focusable) |
| 245 { | 153 { |
| 246 if (focusable) | 154 if (focusable) |
| 247 this.element.setAttribute("tabIndex", 0); | 155 this._contentElement.setAttribute("tabIndex", 0); |
| 248 else | 156 else |
| 249 this.element.removeAttribute("tabIndex"); | 157 this._contentElement.removeAttribute("tabIndex"); |
| 250 }, | 158 }, |
| 251 | 159 |
| 252 focus: function() | 160 focus: function() |
| 253 { | 161 { |
| 254 this._contentElement.focus(); | 162 this._contentElement.focus(); |
| 255 }, | 163 }, |
| 256 | 164 |
| 257 /** | 165 /** |
| 258 * @param {!TreeElement} element | 166 * @param {!TreeElement} element |
| 259 */ | 167 */ |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 314 * @param {!Event} event | 222 * @param {!Event} event |
| 315 */ | 223 */ |
| 316 _treeKeyDown: function(event) | 224 _treeKeyDown: function(event) |
| 317 { | 225 { |
| 318 if (event.target !== this._contentElement) | 226 if (event.target !== this._contentElement) |
| 319 return; | 227 return; |
| 320 | 228 |
| 321 if (!this.selectedTreeElement || event.shiftKey || event.metaKey || even
t.ctrlKey) | 229 if (!this.selectedTreeElement || event.shiftKey || event.metaKey || even
t.ctrlKey) |
| 322 return; | 230 return; |
| 323 | 231 |
| 324 var currentFilterString = this._currentSelectionFilterString; | |
| 325 var handled = false; | 232 var handled = false; |
| 326 var key = event.keyCode; | |
| 327 var nextSelectedElement; | 233 var nextSelectedElement; |
| 328 | 234 if (event.keyIdentifier === "Up" && !event.altKey) { |
| 329 switch (key) { | 235 handled = this.selectPrevious(); |
| 330 case WebInspector.KeyboardShortcut.Keys.Up.code: | 236 } else if (event.keyIdentifier === "Down" && !event.altKey) { |
| 331 if (!event.altKey) | 237 handled = this.selectNext(); |
| 332 handled = this.selectPrevious(); | 238 } else if (event.keyIdentifier === "Left") { |
| 333 break; | |
| 334 case WebInspector.KeyboardShortcut.Keys.Down.code: | |
| 335 if (!event.altKey) | |
| 336 handled = this.selectNext(); | |
| 337 break; | |
| 338 case WebInspector.KeyboardShortcut.Keys.Left.code: | |
| 339 if (this._interactiveFilterEnabled) | |
| 340 this._clearFilter(); | |
| 341 | |
| 342 if (this.selectedTreeElement.expanded) { | 239 if (this.selectedTreeElement.expanded) { |
| 343 if (event.altKey) | 240 if (event.altKey) |
| 344 this.selectedTreeElement.collapseRecursively(); | 241 this.selectedTreeElement.collapseRecursively(); |
| 345 else | 242 else |
| 346 this.selectedTreeElement.collapse(); | 243 this.selectedTreeElement.collapse(); |
| 347 handled = true; | 244 handled = true; |
| 348 } else if (this.selectedTreeElement.parent && !this.selectedTreeElem
ent.parent.root) { | 245 } else if (this.selectedTreeElement.parent && !this.selectedTreeElem
ent.parent.root) { |
| 349 handled = true; | 246 handled = true; |
| 350 if (this.selectedTreeElement.parent.selectable) { | 247 if (this.selectedTreeElement.parent.selectable) { |
| 351 nextSelectedElement = this.selectedTreeElement.parent; | 248 nextSelectedElement = this.selectedTreeElement.parent; |
| 352 while (nextSelectedElement && !nextSelectedElement.selectabl
e) | 249 while (nextSelectedElement && !nextSelectedElement.selectabl
e) |
| 353 nextSelectedElement = nextSelectedElement.parent; | 250 nextSelectedElement = nextSelectedElement.parent; |
| 354 handled = nextSelectedElement ? true : false; | 251 handled = nextSelectedElement ? true : false; |
| 355 } else if (this.selectedTreeElement.parent) { | 252 } else if (this.selectedTreeElement.parent) |
| 356 this.selectedTreeElement.parent.collapse(); | 253 this.selectedTreeElement.parent.collapse(); |
| 357 } | |
| 358 } | 254 } |
| 359 break; | 255 } else if (event.keyIdentifier === "Right") { |
| 360 case WebInspector.KeyboardShortcut.Keys.Right.code: | |
| 361 if (this._interactiveFilterEnabled) | |
| 362 this._clearFilter(); | |
| 363 | |
| 364 if (!this.selectedTreeElement.revealed()) { | 256 if (!this.selectedTreeElement.revealed()) { |
| 365 this.selectedTreeElement.reveal(); | 257 this.selectedTreeElement.reveal(); |
| 366 handled = true; | 258 handled = true; |
| 367 } else if (this.selectedTreeElement._expandable) { | 259 } else if (this.selectedTreeElement._expandable) { |
| 368 handled = true; | 260 handled = true; |
| 369 if (this.selectedTreeElement.expanded) { | 261 if (this.selectedTreeElement.expanded) { |
| 370 nextSelectedElement = this.selectedTreeElement.firstChild(); | 262 nextSelectedElement = this.selectedTreeElement.firstChild(); |
| 371 while (nextSelectedElement && !nextSelectedElement.selectabl
e) | 263 while (nextSelectedElement && !nextSelectedElement.selectabl
e) |
| 372 nextSelectedElement = nextSelectedElement.nextSibling; | 264 nextSelectedElement = nextSelectedElement.nextSibling; |
| 373 handled = nextSelectedElement ? true : false; | 265 handled = nextSelectedElement ? true : false; |
| 374 } else { | 266 } else { |
| 375 if (event.altKey) | 267 if (event.altKey) |
| 376 this.selectedTreeElement.expandRecursively(); | 268 this.selectedTreeElement.expandRecursively(); |
| 377 else | 269 else |
| 378 this.selectedTreeElement.expand(); | 270 this.selectedTreeElement.expand(); |
| 379 } | 271 } |
| 380 } | 272 } |
| 381 break; | 273 } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /
* Delete */) |
| 382 case WebInspector.KeyboardShortcut.Keys.Backspace.code: | 274 handled = this.selectedTreeElement.ondelete(); |
| 383 if (this._interactiveFilterEnabled && currentFilterString) { | 275 else if (isEnterKey(event)) |
| 384 handled = true; | 276 handled = this.selectedTreeElement.onenter(); |
| 385 this._setCurrentSelectionFilterString(currentFilterString.substr
(0, currentFilterString.length - 1)); | 277 else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code
) |
| 386 } else { | 278 handled = this.selectedTreeElement.onspace(); |
| 387 handled = this.selectedTreeElement.ondelete(); | |
| 388 } | |
| 389 break; | |
| 390 case WebInspector.KeyboardShortcut.Keys.Delete.code: | |
| 391 if (this._interactiveFilterEnabled && currentFilterString) { | |
| 392 handled = true; | |
| 393 this._clearFilter(); | |
| 394 } else | |
| 395 handled = this.selectedTreeElement.ondelete(); | |
| 396 break; | |
| 397 case WebInspector.KeyboardShortcut.Keys.Esc.code: | |
| 398 if (this._interactiveFilterEnabled) { | |
| 399 if (currentFilterString) | |
| 400 handled = true; | |
| 401 this._clearFilter(); | |
| 402 } | |
| 403 break; | |
| 404 case WebInspector.KeyboardShortcut.Keys.Space.code: | |
| 405 if (!currentFilterString) | |
| 406 handled = this.selectedTreeElement.onspace(); | |
| 407 break; | |
| 408 default: | |
| 409 if (isEnterKey(event)) { | |
| 410 if (this._interactiveFilterEnabled) | |
| 411 this._clearFilter(); | |
| 412 | |
| 413 handled = this.selectedTreeElement.onenter(); | |
| 414 } | |
| 415 } | |
| 416 | 279 |
| 417 if (nextSelectedElement) { | 280 if (nextSelectedElement) { |
| 418 nextSelectedElement.reveal(); | 281 nextSelectedElement.reveal(); |
| 419 nextSelectedElement.select(false, true); | 282 nextSelectedElement.select(false, true); |
| 420 } | 283 } |
| 421 | 284 |
| 422 if (handled) | 285 if (handled) |
| 423 event.consume(true); | 286 event.consume(true); |
| 424 }, | 287 }, |
| 425 | 288 |
| (...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 507 this._childrenListNode = createElement("ol"); | 370 this._childrenListNode = createElement("ol"); |
| 508 this._childrenListNode.parentTreeElement = this; | 371 this._childrenListNode.parentTreeElement = this; |
| 509 this._childrenListNode.classList.add("children"); | 372 this._childrenListNode.classList.add("children"); |
| 510 | 373 |
| 511 this._hidden = false; | 374 this._hidden = false; |
| 512 this._selectable = true; | 375 this._selectable = true; |
| 513 this.expanded = false; | 376 this.expanded = false; |
| 514 this.selected = false; | 377 this.selected = false; |
| 515 this.setExpandable(expandable || false); | 378 this.setExpandable(expandable || false); |
| 516 this._collapsible = true; | 379 this._collapsible = true; |
| 517 | |
| 518 /** @type {!Array.<!Object>} */ | |
| 519 this._highlightChanges = []; | |
| 520 } | 380 } |
| 521 | 381 |
| 522 /** @const */ | 382 /** @const */ |
| 523 TreeElement._ArrowToggleWidth = 10; | 383 TreeElement._ArrowToggleWidth = 10; |
| 524 | 384 |
| 525 TreeElement.prototype = { | 385 TreeElement.prototype = { |
| 526 /** | 386 /** |
| 527 * @return {boolean} | |
| 528 */ | |
| 529 _checkFilter: function() | |
| 530 { | |
| 531 return this.treeOutline._currentSelectionFilterString ? this.treeOutline
._makeFilterRegexFromString(this.treeOutline._currentSelectionFilterString).test
(this._titleElement.textContent) : true; | |
| 532 }, | |
| 533 | |
| 534 /** | |
| 535 * @param {!RegExp} regex | |
| 536 * @return {boolean} | |
| 537 */ | |
| 538 _applyHighlightFilter: function(regex) { | |
| 539 var textContent = this._listItemNode.textContent; | |
| 540 var ranges = []; | |
| 541 | |
| 542 this._revertHighlightChanges(); | |
| 543 | |
| 544 var match = regex.exec(textContent); | |
| 545 while (match) { | |
| 546 ranges.push(new WebInspector.SourceRange(match.index, match[0].lengt
h)); | |
| 547 match = regex.exec(textContent); | |
| 548 } | |
| 549 if (ranges.length) | |
| 550 WebInspector.highlightRangesWithStyleClass(this._listItemNode, range
s, "tree-text-interactive-highlight", this._highlightChanges); | |
| 551 | |
| 552 return !!this._highlightChanges.length | |
| 553 }, | |
| 554 | |
| 555 _revertHighlightChanges: function() | |
| 556 { | |
| 557 WebInspector.revertDomChanges(this._highlightChanges); | |
| 558 this._highlightChanges = []; | |
| 559 }, | |
| 560 | |
| 561 /** | |
| 562 * @param {?TreeElement} ancestor | 387 * @param {?TreeElement} ancestor |
| 563 * @return {boolean} | 388 * @return {boolean} |
| 564 */ | 389 */ |
| 565 hasAncestor: function(ancestor) | 390 hasAncestor: function(ancestor) |
| 566 { | 391 { |
| 567 if (!ancestor) | 392 if (!ancestor) |
| 568 return false; | 393 return false; |
| 569 | 394 |
| 570 var currentNode = this.parent; | 395 var currentNode = this.parent; |
| 571 while (currentNode) { | 396 while (currentNode) { |
| (...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 771 this.treeOutline._unbindTreeElement(child); | 596 this.treeOutline._unbindTreeElement(child); |
| 772 for (var current = child.firstChild(); this.treeOutline && current;
current = current.traverseNextTreeElement(false, child, true)) | 597 for (var current = child.firstChild(); this.treeOutline && current;
current = current.traverseNextTreeElement(false, child, true)) |
| 773 this.treeOutline._unbindTreeElement(current); | 598 this.treeOutline._unbindTreeElement(current); |
| 774 child._detach(); | 599 child._detach(); |
| 775 } | 600 } |
| 776 this._children = []; | 601 this._children = []; |
| 777 }, | 602 }, |
| 778 | 603 |
| 779 get selectable() | 604 get selectable() |
| 780 { | 605 { |
| 781 if (this._hidden || !this._checkFilter()) | 606 if (this._hidden) |
| 782 return false; | 607 return false; |
| 783 return this._selectable; | 608 return this._selectable; |
| 784 }, | 609 }, |
| 785 | 610 |
| 786 set selectable(x) | 611 set selectable(x) |
| 787 { | 612 { |
| 788 this._selectable = x; | 613 this._selectable = x; |
| 789 }, | 614 }, |
| 790 | 615 |
| 791 get listItemElement() | 616 get listItemElement() |
| (...skipping 535 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1327 isEventWithinDisclosureTriangle: function(event) | 1152 isEventWithinDisclosureTriangle: function(event) |
| 1328 { | 1153 { |
| 1329 // FIXME: We should not use getComputedStyle(). For that we need to get
rid of using ::before for disclosure triangle. (http://webk.it/74446) | 1154 // FIXME: We should not use getComputedStyle(). For that we need to get
rid of using ::before for disclosure triangle. (http://webk.it/74446) |
| 1330 var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddi
ngLeft; | 1155 var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddi
ngLeft; |
| 1331 console.assert(paddingLeftValue.endsWith("px")); | 1156 console.assert(paddingLeftValue.endsWith("px")); |
| 1332 var computedLeftPadding = parseFloat(paddingLeftValue); | 1157 var computedLeftPadding = parseFloat(paddingLeftValue); |
| 1333 var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding; | 1158 var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding; |
| 1334 return event.pageX >= left && event.pageX <= left + TreeElement._ArrowTo
ggleWidth && this._expandable; | 1159 return event.pageX >= left && event.pageX <= left + TreeElement._ArrowTo
ggleWidth && this._expandable; |
| 1335 } | 1160 } |
| 1336 } | 1161 } |
| OLD | NEW |