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 |