Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(113)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

Issue 1889933003: Revert of [DevTools] Added keyboard search while in sources (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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
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
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
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
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 }
OLDNEW
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698