| OLD | NEW |
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 cr.define('settings', function() { | 5 cr.define('settings', function() { |
| 6 /** @const {string} */ | 6 /** @const {string} */ |
| 7 var WRAPPER_CSS_CLASS = 'search-highlight-wrapper'; | 7 var WRAPPER_CSS_CLASS = 'search-highlight-wrapper'; |
| 8 | 8 |
| 9 /** @const {string} */ | 9 /** @const {string} */ |
| 10 var ORIGINAL_CONTENT_CSS_CLASS = 'search-highlight-original-content'; | 10 var ORIGINAL_CONTENT_CSS_CLASS = 'search-highlight-original-content'; |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 51 * children's Shadow DOM) and replaces the highlights (yellow rectangle and | 51 * children's Shadow DOM) and replaces the highlights (yellow rectangle and |
| 52 * search bubbles) with the original text node. | 52 * search bubbles) with the original text node. |
| 53 * TODO(dpapad): Consider making this a private method of TopLevelSearchTask. | 53 * TODO(dpapad): Consider making this a private method of TopLevelSearchTask. |
| 54 * @param {!Node} node | 54 * @param {!Node} node |
| 55 * @private | 55 * @private |
| 56 */ | 56 */ |
| 57 function findAndRemoveHighlights_(node) { | 57 function findAndRemoveHighlights_(node) { |
| 58 var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS); | 58 var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS); |
| 59 | 59 |
| 60 for (var wrapper of wrappers) { | 60 for (var wrapper of wrappers) { |
| 61 var originalNode = wrapper.querySelector( | 61 var originalNode = |
| 62 '.' + ORIGINAL_CONTENT_CSS_CLASS); | 62 wrapper.querySelector('.' + ORIGINAL_CONTENT_CSS_CLASS); |
| 63 wrapper.parentElement.replaceChild(originalNode.firstChild, wrapper); | 63 wrapper.parentElement.replaceChild(originalNode.firstChild, wrapper); |
| 64 } | 64 } |
| 65 | 65 |
| 66 var searchBubbles = node.querySelectorAll( | 66 var searchBubbles = |
| 67 '* /deep/ .' + SEARCH_BUBBLE_CSS_CLASS); | 67 node.querySelectorAll('* /deep/ .' + SEARCH_BUBBLE_CSS_CLASS); |
| 68 for (var searchBubble of searchBubbles) | 68 for (var searchBubble of searchBubbles) |
| 69 searchBubble.remove(); | 69 searchBubble.remove(); |
| 70 } | 70 } |
| 71 | 71 |
| 72 /** | 72 /** |
| 73 * Applies the highlight UI (yellow rectangle) around all matches in |node|. | 73 * Applies the highlight UI (yellow rectangle) around all matches in |node|. |
| 74 * @param {!Node} node The text node to be highlighted. |node| ends up | 74 * @param {!Node} node The text node to be highlighted. |node| ends up |
| 75 * being removed from the DOM tree. | 75 * being removed from the DOM tree. |
| 76 * @param {!Array<string>} tokens The string tokens after splitting on the | 76 * @param {!Array<string>} tokens The string tokens after splitting on the |
| 77 * relevant regExp. Even indices hold text that doesn't need highlighting, | 77 * relevant regExp. Even indices hold text that doesn't need highlighting, |
| (...skipping 17 matching lines...) Expand all Loading... |
| 95 span.style.display = 'none'; | 95 span.style.display = 'none'; |
| 96 span.appendChild(node); | 96 span.appendChild(node); |
| 97 wrapper.appendChild(span); | 97 wrapper.appendChild(span); |
| 98 | 98 |
| 99 for (var i = 0; i < tokens.length; ++i) { | 99 for (var i = 0; i < tokens.length; ++i) { |
| 100 if (i % 2 == 0) { | 100 if (i % 2 == 0) { |
| 101 wrapper.appendChild(document.createTextNode(tokens[i])); | 101 wrapper.appendChild(document.createTextNode(tokens[i])); |
| 102 } else { | 102 } else { |
| 103 var span = document.createElement('span'); | 103 var span = document.createElement('span'); |
| 104 span.classList.add(HIT_CSS_CLASS); | 104 span.classList.add(HIT_CSS_CLASS); |
| 105 span.style.backgroundColor = '#ffeb3b'; // --var(--paper-yellow-500) | 105 span.style.backgroundColor = '#ffeb3b'; // --var(--paper-yellow-500) |
| 106 span.textContent = tokens[i]; | 106 span.textContent = tokens[i]; |
| 107 wrapper.appendChild(span); | 107 wrapper.appendChild(span); |
| 108 } | 108 } |
| 109 } | 109 } |
| 110 } | 110 } |
| 111 | 111 |
| 112 /** | 112 /** |
| 113 * Traverses the entire DOM (including Shadow DOM), finds text nodes that | 113 * Traverses the entire DOM (including Shadow DOM), finds text nodes that |
| 114 * match the given regular expression and applies the highlight UI. It also | 114 * match the given regular expression and applies the highlight UI. It also |
| 115 * ensures that <settings-section> instances become visible if any matches | 115 * ensures that <settings-section> instances become visible if any matches |
| 116 * occurred under their subtree. | 116 * occurred under their subtree. |
| 117 * | 117 * |
| 118 * @param {!settings.SearchRequest} request | 118 * @param {!settings.SearchRequest} request |
| 119 * @param {!Node} root The root of the sub-tree to be searched | 119 * @param {!Node} root The root of the sub-tree to be searched |
| 120 * @private | 120 * @private |
| 121 */ | 121 */ |
| 122 function findAndHighlightMatches_(request, root) { | 122 function findAndHighlightMatches_(request, root) { |
| 123 var foundMatches = false; | 123 var foundMatches = false; |
| 124 function doSearch(node) { | 124 function doSearch(node) { |
| 125 if (node.nodeName == 'TEMPLATE' && node.hasAttribute('route-path') && | 125 if (node.nodeName == 'TEMPLATE' && node.hasAttribute('route-path') && |
| 126 !node.if && !node.hasAttribute(SKIP_SEARCH_CSS_ATTRIBUTE)) { | 126 !node.if && !node.hasAttribute(SKIP_SEARCH_CSS_ATTRIBUTE)) { |
| 127 getSearchManager().queue_.addRenderTask( | 127 getSearchManager().queue_.addRenderTask(new RenderTask(request, node)); |
| 128 new RenderTask(request, node)); | |
| 129 return; | 128 return; |
| 130 } | 129 } |
| 131 | 130 |
| 132 if (IGNORED_ELEMENTS.has(node.nodeName)) | 131 if (IGNORED_ELEMENTS.has(node.nodeName)) |
| 133 return; | 132 return; |
| 134 | 133 |
| 135 if (node instanceof HTMLElement) { | 134 if (node instanceof HTMLElement) { |
| 136 var element = /** @type {HTMLElement} */(node); | 135 var element = /** @type {HTMLElement} */ (node); |
| 137 if (element.hasAttribute(SKIP_SEARCH_CSS_ATTRIBUTE) || | 136 if (element.hasAttribute(SKIP_SEARCH_CSS_ATTRIBUTE) || |
| 138 element.hasAttribute('hidden') || | 137 element.hasAttribute('hidden') || element.style.display == 'none') { |
| 139 element.style.display == 'none') { | |
| 140 return; | 138 return; |
| 141 } | 139 } |
| 142 } | 140 } |
| 143 | 141 |
| 144 if (node.nodeType == Node.TEXT_NODE) { | 142 if (node.nodeType == Node.TEXT_NODE) { |
| 145 var textContent = node.nodeValue.trim(); | 143 var textContent = node.nodeValue.trim(); |
| 146 if (textContent.length == 0) | 144 if (textContent.length == 0) |
| 147 return; | 145 return; |
| 148 | 146 |
| 149 if (request.regExp.test(textContent)) { | 147 if (request.regExp.test(textContent)) { |
| (...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 225 * @param {!Node} node | 223 * @param {!Node} node |
| 226 * @param {string} rawQuery | 224 * @param {string} rawQuery |
| 227 * @private | 225 * @private |
| 228 */ | 226 */ |
| 229 function revealParentSection_(node, rawQuery) { | 227 function revealParentSection_(node, rawQuery) { |
| 230 var associatedControl = null; | 228 var associatedControl = null; |
| 231 // Find corresponding SETTINGS-SECTION parent and make it visible. | 229 // Find corresponding SETTINGS-SECTION parent and make it visible. |
| 232 var parent = node; | 230 var parent = node; |
| 233 while (parent && parent.nodeName !== 'SETTINGS-SECTION') { | 231 while (parent && parent.nodeName !== 'SETTINGS-SECTION') { |
| 234 parent = parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? | 232 parent = parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? |
| 235 parent.host : parent.parentNode; | 233 parent.host : |
| 234 parent.parentNode; |
| 236 if (parent.nodeName == 'SETTINGS-SUBPAGE') { | 235 if (parent.nodeName == 'SETTINGS-SUBPAGE') { |
| 237 // TODO(dpapad): Cast to SettingsSubpageElement here. | 236 // TODO(dpapad): Cast to SettingsSubpageElement here. |
| 238 associatedControl = assert( | 237 associatedControl = assert( |
| 239 parent.associatedControl, | 238 parent.associatedControl, |
| 240 'An associated control was expected for SETTINGS-SUBPAGE ' + | 239 'An associated control was expected for SETTINGS-SUBPAGE ' + |
| 241 parent.pageTitle + ', but was not found.'); | 240 parent.pageTitle + ', but was not found.'); |
| 242 } | 241 } |
| 243 } | 242 } |
| 244 if (parent) | 243 if (parent) |
| 245 parent.hiddenBySearch = false; | 244 parent.hiddenBySearch = false; |
| (...skipping 177 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 423 */ | 422 */ |
| 424 onEmpty: function(onEmptyCallback) { | 423 onEmpty: function(onEmptyCallback) { |
| 425 this.onEmptyCallback_ = onEmptyCallback; | 424 this.onEmptyCallback_ = onEmptyCallback; |
| 426 }, | 425 }, |
| 427 | 426 |
| 428 /** | 427 /** |
| 429 * @return {!Task|undefined} | 428 * @return {!Task|undefined} |
| 430 * @private | 429 * @private |
| 431 */ | 430 */ |
| 432 popNextTask_: function() { | 431 popNextTask_: function() { |
| 433 return this.queues_.high.shift() || | 432 return this.queues_.high.shift() || this.queues_.middle.shift() || |
| 434 this.queues_.middle.shift() || | |
| 435 this.queues_.low.shift(); | 433 this.queues_.low.shift(); |
| 436 }, | 434 }, |
| 437 | 435 |
| 438 /** @private */ | 436 /** @private */ |
| 439 consumePending_: function() { | 437 consumePending_: function() { |
| 440 if (this.running_) | 438 if (this.running_) |
| 441 return; | 439 return; |
| 442 | 440 |
| 443 while (1) { | 441 while (1) { |
| 444 var task = this.popNextTask_(); | 442 var task = this.popNextTask_(); |
| 445 if (!task) { | 443 if (!task) { |
| 446 this.running_ = false; | 444 this.running_ = false; |
| 447 if (this.onEmptyCallback_) | 445 if (this.onEmptyCallback_) |
| 448 this.onEmptyCallback_(); | 446 this.onEmptyCallback_(); |
| 449 return; | 447 return; |
| 450 } | 448 } |
| 451 | 449 |
| 452 this.running_ = true; | 450 this.running_ = true; |
| 453 window.requestIdleCallback(function() { | 451 window.requestIdleCallback(function() { |
| 454 function startNextTask() { | 452 function startNextTask() { |
| 455 this.running_ = false; | 453 this.running_ = false; |
| 456 this.consumePending_(); | 454 this.consumePending_(); |
| 457 } | 455 } |
| 458 if (task.request.id == | 456 if (task.request.id == getSearchManager().activeRequest_.id) { |
| 459 getSearchManager().activeRequest_.id) { | |
| 460 task.exec().then(startNextTask.bind(this)); | 457 task.exec().then(startNextTask.bind(this)); |
| 461 } else { | 458 } else { |
| 462 // Dropping this task without ever executing it, since a new search | 459 // Dropping this task without ever executing it, since a new search |
| 463 // has been issued since this task was queued. | 460 // has been issued since this task was queued. |
| 464 startNextTask.call(this); | 461 startNextTask.call(this); |
| 465 } | 462 } |
| 466 }.bind(this)); | 463 }.bind(this)); |
| 467 return; | 464 return; |
| 468 } | 465 } |
| 469 }, | 466 }, |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 504 SearchRequest.prototype = { | 501 SearchRequest.prototype = { |
| 505 /** | 502 /** |
| 506 * @return {?RegExp} | 503 * @return {?RegExp} |
| 507 * @private | 504 * @private |
| 508 */ | 505 */ |
| 509 generateRegExp_: function() { | 506 generateRegExp_: function() { |
| 510 var regExp = null; | 507 var regExp = null; |
| 511 | 508 |
| 512 // Generate search text by escaping any characters that would be | 509 // Generate search text by escaping any characters that would be |
| 513 // problematic for regular expressions. | 510 // problematic for regular expressions. |
| 514 var searchText = this.rawQuery_.trim().replace( | 511 var searchText = |
| 515 SearchRequest.SANITIZE_REGEX_, '\\$&'); | 512 this.rawQuery_.trim().replace(SearchRequest.SANITIZE_REGEX_, '\\$&'); |
| 516 if (searchText.length > 0) | 513 if (searchText.length > 0) |
| 517 regExp = new RegExp('(' + searchText + ')', 'i'); | 514 regExp = new RegExp('(' + searchText + ')', 'i'); |
| 518 | 515 |
| 519 return regExp; | 516 return regExp; |
| 520 }, | 517 }, |
| 521 | 518 |
| 522 /** | 519 /** |
| 523 * @param {string} rawQuery | 520 * @param {string} rawQuery |
| 524 * @return {boolean} Whether this SearchRequest refers to an identical | 521 * @return {boolean} Whether this SearchRequest refers to an identical |
| 525 * query. | 522 * query. |
| (...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 606 function setSearchManagerForTesting(searchManager) { | 603 function setSearchManagerForTesting(searchManager) { |
| 607 SearchManagerImpl.instance_ = searchManager; | 604 SearchManagerImpl.instance_ = searchManager; |
| 608 } | 605 } |
| 609 | 606 |
| 610 return { | 607 return { |
| 611 getSearchManager: getSearchManager, | 608 getSearchManager: getSearchManager, |
| 612 setSearchManagerForTesting: setSearchManagerForTesting, | 609 setSearchManagerForTesting: setSearchManagerForTesting, |
| 613 SearchRequest: SearchRequest, | 610 SearchRequest: SearchRequest, |
| 614 }; | 611 }; |
| 615 }); | 612 }); |
| OLD | NEW |