Chromium Code Reviews Chromium Code Reviews
Issue 2103133007:
MD Settings: Second iteration of search within settings. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@cr_search_migration1| 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 /** @typedef {{id: number, rawQuery: ?string, regExp: ?RegExp}} */ | |
| 6 var SearchContext; | |
| 7 | |
| 5 cr.define('settings', function() { | 8 cr.define('settings', function() { |
| 6 /** @const {string} */ | 9 /** @const {string} */ |
| 7 var WRAPPER_CSS_CLASS = 'search-highlight-wrapper'; | 10 var WRAPPER_CSS_CLASS = 'search-highlight-wrapper'; |
| 8 | 11 |
| 9 /** @const {string} */ | 12 /** @const {string} */ |
| 10 var HIT_CSS_CLASS = 'search-highlight-hit'; | 13 var HIT_CSS_CLASS = 'search-highlight-hit'; |
| 11 | 14 |
| 12 /** @const {!RegExp} */ | |
| 13 var SANITIZE_REGEX = /[-[\]{}()*+?.,\\^$|#\s]/g; | |
| 14 | |
| 15 /** | 15 /** |
| 16 * List of elements types that should not be searched at all. | 16 * List of elements types that should not be searched at all. |
| 17 * The only DOM-MODULE node is in <body> which is not searched, therefore | 17 * The only DOM-MODULE node is in <body> which is not searched, therefore |
| 18 * DOM-MODULE is not needed in this set. | 18 * DOM-MODULE is not needed in this set. |
| 19 * @const {!Set<string>} | 19 * @const {!Set<string>} |
| 20 */ | 20 */ |
| 21 var IGNORED_ELEMENTS = new Set([ | 21 var IGNORED_ELEMENTS = new Set([ |
| 22 'CONTENT', | 22 'CONTENT', |
| 23 'CR-EVENTS', | 23 'CR-EVENTS', |
| 24 'IMG', | 24 'IMG', |
| 25 'IRON-ICON', | 25 'IRON-ICON', |
| 26 'IRON-LIST', | 26 'IRON-LIST', |
| 27 'PAPER-ICON-BUTTON', | 27 'PAPER-ICON-BUTTON', |
| 28 /* TODO(dpapad): paper-item is used for dynamically populated dropdown | 28 /* TODO(dpapad): paper-item is used for dynamically populated dropdown |
| 29 * menus. Perhaps a better approach is to mark the entire dropdown menu such | 29 * menus. Perhaps a better approach is to mark the entire dropdown menu such |
| 30 * that search algorithm can skip it as a whole instead. | 30 * that search algorithm can skip it as a whole instead. |
| 31 */ | 31 */ |
| 32 'PAPER-ITEM', | 32 'PAPER-ITEM', |
| 33 'PAPER-RIPPLE', | 33 'PAPER-RIPPLE', |
| 34 'PAPER-SLIDER', | 34 'PAPER-SLIDER', |
| 35 'PAPER-SPINNER', | 35 'PAPER-SPINNER', |
| 36 'STYLE', | 36 'STYLE', |
| 37 'TEMPLATE', | 37 'TEMPLATE', |
| 38 ]); | 38 ]); |
| 39 | 39 |
| 40 /** | 40 /** |
| 41 * Finds all previous highlighted nodes under |node| (both within self and | 41 * Finds all previous highlighted nodes under |node| (both within self and |
| 42 * children's Shadow DOM) and removes the highlight (yellow rectangle). | 42 * children's Shadow DOM) and removes the highlight (yellow rectangle). |
| 43 * TODO(dpapad): Consider making this a private method of TopLevelSearchTask. | |
| 43 * @param {!Node} node | 44 * @param {!Node} node |
| 44 * @private | 45 * @private |
| 45 */ | 46 */ |
| 46 function findAndRemoveHighlights_(node) { | 47 function findAndRemoveHighlights_(node) { |
| 47 var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS); | 48 var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS); |
| 48 | 49 |
| 49 for (var wrapper of wrappers) { | 50 for (var wrapper of wrappers) { |
| 50 var hitElements = wrapper.querySelectorAll('.' + HIT_CSS_CLASS); | 51 var hitElements = wrapper.querySelectorAll('.' + HIT_CSS_CLASS); |
| 51 // For each hit element, remove the highlighting. | 52 // For each hit element, remove the highlighting. |
| 52 for (var hitElement of hitElements) { | 53 for (var hitElement of hitElements) { |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 90 var span = document.createElement('span'); | 91 var span = document.createElement('span'); |
| 91 span.classList.add(HIT_CSS_CLASS); | 92 span.classList.add(HIT_CSS_CLASS); |
| 92 span.style.backgroundColor = 'yellow'; | 93 span.style.backgroundColor = 'yellow'; |
| 93 span.textContent = tokens[i]; | 94 span.textContent = tokens[i]; |
| 94 wrapper.appendChild(span); | 95 wrapper.appendChild(span); |
| 95 } | 96 } |
| 96 } | 97 } |
| 97 } | 98 } |
| 98 | 99 |
| 99 /** | 100 /** |
| 101 * Checks whether the given |node| requires force rendering. | |
| 102 * | |
| 103 * @param {!SearchContext} context | |
| 104 * @param {!Node} node | |
| 105 * @return {boolean} Whether a forced rendering task was scheduled. | |
| 106 * @private | |
| 107 */ | |
| 108 function forceRenderNeeded_(context, node) { | |
| 109 if (node.nodeName != 'TEMPLATE' || !node.hasAttribute('name') || node.if) | |
| 110 return false; | |
| 111 | |
| 112 // TODO(dpapad): Temporarily ignore site-settings because it throws an | |
| 113 // assertion error during force-rendering. | |
| 114 return node.getAttribute('name').indexOf('site-') != 0; | |
| 115 } | |
| 116 | |
| 117 /** | |
| 100 * Traverses the entire DOM (including Shadow DOM), finds text nodes that | 118 * Traverses the entire DOM (including Shadow DOM), finds text nodes that |
| 101 * match the given regular expression and applies the highlight UI. It also | 119 * match the given regular expression and applies the highlight UI. It also |
| 102 * ensures that <settings-section> instances become visible if any matches | 120 * ensures that <settings-section> instances become visible if any matches |
| 103 * occurred under their subtree. | 121 * occurred under their subtree. |
| 104 * | 122 * |
| 105 * @param {!Element} page The page to be searched, should be either | 123 * @param {!SearchContext} context |
| 106 * <settings-basic-page> or <settings-advanced-page>. | 124 * @param {!Node} root The root of the sub-tree to be searched |
| 107 * @param {!RegExp} regExp The regular expression to detect matches. | |
| 108 * @private | 125 * @private |
| 109 */ | 126 */ |
| 110 function findAndHighlightMatches_(page, regExp) { | 127 function findAndHighlightMatches_(context, root) { |
| 111 function doSearch(node) { | 128 function doSearch(node) { |
| 112 if (IGNORED_ELEMENTS.has(node.tagName)) | 129 if (forceRenderNeeded_(context, node)) { |
| 130 SearchManager.getInstance().queue_.addRenderTask( | |
| 131 new RenderTask(context, node)); | |
| 132 return; | |
| 133 } | |
| 134 | |
| 135 if (IGNORED_ELEMENTS.has(node.nodeName)) | |
| 113 return; | 136 return; |
| 114 | 137 |
| 115 if (node.nodeType == Node.TEXT_NODE) { | 138 if (node.nodeType == Node.TEXT_NODE) { |
| 116 var textContent = node.nodeValue.trim(); | 139 var textContent = node.nodeValue.trim(); |
| 117 if (textContent.length == 0) | 140 if (textContent.length == 0) |
| 118 return; | 141 return; |
| 119 | 142 |
| 120 if (regExp.test(textContent)) { | 143 if (context.regExp.test(textContent)) { |
| 121 revealParentSection_(node); | 144 revealParentSection_(node); |
| 122 highlight_(node, textContent.split(regExp)); | 145 highlight_(node, textContent.split(context.regExp)); |
| 123 } | 146 } |
| 124 // Returning early since TEXT_NODE nodes never have children. | 147 // Returning early since TEXT_NODE nodes never have children. |
| 125 return; | 148 return; |
| 126 } | 149 } |
| 127 | 150 |
| 128 var child = node.firstChild; | 151 var child = node.firstChild; |
| 129 while (child !== null) { | 152 while (child !== null) { |
| 130 // Getting a reference to the |nextSibling| before calling doSearch() | 153 // Getting a reference to the |nextSibling| before calling doSearch() |
| 131 // because |child| could be removed from the DOM within doSearch(). | 154 // because |child| could be removed from the DOM within doSearch(). |
| 132 var nextSibling = child.nextSibling; | 155 var nextSibling = child.nextSibling; |
| 133 doSearch(child); | 156 doSearch(child); |
| 134 child = nextSibling; | 157 child = nextSibling; |
| 135 } | 158 } |
| 136 | 159 |
| 137 var shadowRoot = node.shadowRoot; | 160 var shadowRoot = node.shadowRoot; |
| 138 if (shadowRoot) | 161 if (shadowRoot) |
| 139 doSearch(shadowRoot); | 162 doSearch(shadowRoot); |
| 140 } | 163 } |
| 141 | 164 |
| 142 doSearch(page); | 165 doSearch(root); |
| 143 } | 166 } |
| 144 | 167 |
| 145 /** | 168 /** |
| 146 * Finds and makes visible the <settings-section> parent of |node|. | 169 * Finds and makes visible the <settings-section> parent of |node|. |
| 147 * @param {!Node} node | 170 * @param {!Node} node |
| 148 */ | 171 */ |
| 149 function revealParentSection_(node) { | 172 function revealParentSection_(node) { |
| 150 // Find corresponding SETTINGS-SECTION parent and make it visible. | 173 // Find corresponding SETTINGS-SECTION parent and make it visible. |
| 151 var parent = node; | 174 var parent = node; |
| 152 while (parent && parent.tagName !== 'SETTINGS-SECTION') { | 175 while (parent && parent.nodeName !== 'SETTINGS-SECTION') { |
| 153 parent = parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? | 176 parent = parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? |
| 154 parent.host : parent.parentNode; | 177 parent.host : parent.parentNode; |
| 155 } | 178 } |
| 156 if (parent) | 179 if (parent) |
| 157 parent.hidden = false; | 180 parent.hidden = false; |
| 158 } | 181 } |
| 159 | 182 |
| 160 /** | 183 /** |
| 161 * @param {!Element} page | 184 * @constructor |
| 162 * @param {boolean} visible | 185 * |
| 163 * @private | 186 * @param {!SearchContext} context |
| 164 */ | 187 * @param {!Node} node |
| 165 function setSectionsVisibility_(page, visible) { | 188 */ |
| 166 var sections = Polymer.dom(page.root).querySelectorAll('settings-section'); | 189 function Task(context, node) { |
| 167 for (var i = 0; i < sections.length; i++) | 190 /** @protected {!SearchContext} */ |
| 168 sections[i].hidden = !visible; | 191 this.context = context; |
| 169 } | 192 |
| 170 | 193 /** @protected {!Node} */ |
| 171 /** | 194 this.node = node; |
| 172 * Performs hierarchical search, starting at the given page element. | 195 } |
| 196 | |
| 197 Task.prototype = { | |
| 198 /** | |
| 199 * @abstract | |
| 200 * @return {!Promise} | |
| 201 */ | |
| 202 exec: function() {}, | |
| 203 }; | |
| 204 | |
| 205 /** | |
| 206 * A task that takes a <template is="dom-if">...</template> node corresponding | |
| 207 * to a setting subpage and renders it. A SearchAndHighlightTask is posted for | |
| 208 * the newly rendered subtree, once rendering is done. | |
| 209 * @constructor | |
| 210 * @extends {Task} | |
| 211 * | |
| 212 * @param {!SearchContext} context | |
| 213 * @param {!Node} node | |
| 214 */ | |
| 215 function RenderTask(context, node) { | |
| 216 Task.call(this, context, node); | |
| 217 } | |
| 218 | |
| 219 RenderTask.prototype = { | |
| 220 /** @override */ | |
| 221 exec: function() { | |
| 222 var subpageTemplate = | |
| 223 this.node['_content'].querySelector('settings-subpage'); | |
| 224 subpageTemplate.id = subpageTemplate.id || this.node.getAttribute('name'); | |
| 225 assert(!this.node.if); | |
| 226 this.node.if = true; | |
| 227 | |
| 228 return new Promise(function(resolve, reject) { | |
| 229 var parent = this.node.parentNode; | |
| 230 parent.async(function() { | |
| 231 var renderedNode = parent.querySelector('#' + subpageTemplate.id); | |
| 232 // Register a SearchAndHighlightTask for the part of the DOM that was | |
| 233 // just rendered. | |
| 234 SearchManager.getInstance().queue_.addSearchAndHighlightTask( | |
| 235 new SearchAndHighlightTask(this.context, assert(renderedNode))); | |
| 236 resolve(); | |
| 237 }.bind(this)); | |
| 238 }.bind(this)); | |
| 239 }, | |
| 240 }; | |
| 241 | |
| 242 /** | |
| 243 * @constructor | |
| 244 * @extends {Task} | |
| 245 * | |
| 246 * @param {!SearchContext} context | |
| 247 * @param {!Node} node | |
| 248 */ | |
| 249 function SearchAndHighlightTask(context, node) { | |
| 250 Task.call(this, context, node); | |
| 251 } | |
| 252 | |
| 253 SearchAndHighlightTask.prototype = { | |
| 254 /** @override */ | |
| 255 exec: function() { | |
| 256 findAndHighlightMatches_(this.context, this.node); | |
| 257 return Promise.resolve(); | |
| 258 }, | |
| 259 }; | |
| 260 | |
| 261 /** | |
| 262 * @constructor | |
| 263 * @extends {Task} | |
| 264 * | |
| 265 * @param {!SearchContext} context | |
| 266 * @param {!Node} page | |
| 267 */ | |
| 268 function TopLevelSearchTask(context, page) { | |
| 269 Task.call(this, context, page); | |
| 270 } | |
| 271 | |
| 272 TopLevelSearchTask.prototype = { | |
| 273 /** @override */ | |
| 274 exec: function() { | |
| 275 findAndRemoveHighlights_(this.node); | |
| 276 | |
| 277 var shouldSearch = this.context.regExp !== null; | |
| 278 this.setSectionsVisibility_(!shouldSearch); | |
| 279 if (shouldSearch) | |
| 280 findAndHighlightMatches_(this.context, this.node); | |
| 281 | |
| 282 return Promise.resolve(); | |
| 283 }, | |
| 284 | |
| 285 /** | |
| 286 * @param {boolean} visible | |
| 287 * @private | |
| 288 */ | |
| 289 setSectionsVisibility_: function(visible) { | |
| 290 var sections = Polymer.dom( | |
| 291 this.node.root).querySelectorAll('settings-section'); | |
| 292 for (var i = 0; i < sections.length; i++) | |
| 293 sections[i].hidden = !visible; | |
| 294 }, | |
| 295 }; | |
| 296 | |
| 297 /** | |
| 298 * @constructor | |
| 299 */ | |
| 300 function TaskQueue() { | |
| 301 /** | |
| 302 * @private {{ | |
| 303 * high: !Array<!Task>, | |
| 304 * middle: !Array<!Task>, | |
| 305 * low: !Array<!Task> | |
| 306 * }} | |
| 307 */ | |
| 308 this.queues_; | |
| 309 this.reset(); | |
| 310 | |
| 311 /** | |
| 312 * Whether a task is currently running. | |
| 313 * @private {boolean} | |
| 314 */ | |
| 315 this.running_ = false; | |
| 316 } | |
| 317 | |
| 318 TaskQueue.prototype = { | |
| 319 /** Drops all tasks. */ | |
| 320 reset: function() { | |
| 321 this.queues_ = {high: [], middle: [], low: []}; | |
| 322 }, | |
| 323 | |
| 324 /** @param {!TopLevelSearchTask} task */ | |
| 325 addTopLevelSearchTask: function(task) { | |
| 326 this.queues_.high.push(task); | |
| 327 this.consumePending_(); | |
| 328 }, | |
| 329 | |
| 330 /** @param {!SearchAndHighlightTask} task */ | |
| 331 addSearchAndHighlightTask: function(task) { | |
| 332 this.queues_.middle.push(task); | |
| 333 this.consumePending_(); | |
| 334 }, | |
| 335 | |
| 336 /** @param {!RenderTask} task */ | |
| 337 addRenderTask: function(task) { | |
| 338 this.queues_.low.push(task); | |
| 339 this.consumePending_(); | |
| 340 }, | |
| 341 | |
| 342 /** | |
| 343 * @return {!Task|undefined} | |
| 344 * @private | |
| 345 */ | |
| 346 popNextTask_: function() { | |
| 347 return this.queues_.high.shift() || | |
| 348 this.queues_.middle.shift() || | |
| 349 this.queues_.low.shift(); | |
| 350 }, | |
| 351 | |
| 352 /** | |
| 353 * @param {!Task} task | |
| 354 * @return {boolean} Whether the given task is now obsolete (refers to a | |
| 355 * previous search query). | |
| 356 * @private | |
| 357 */ | |
| 358 isTaskObsolete_: function(task) { | |
|
Dan Beam
2016/07/13 02:33:14
did you mean to use this?
dpapad
2016/07/13 17:33:42
Deleted.
I meant to delete this. I don't need this
| |
| 359 return task.context.id != SearchManager.getInstance().activeContext_.id; | |
| 360 }, | |
| 361 | |
| 362 /** @private */ | |
| 363 consumePending_: function() { | |
| 364 if (this.running_) | |
| 365 return; | |
| 366 | |
| 367 while (1) { | |
| 368 var task = this.popNextTask_(); | |
| 369 if (!task) { | |
| 370 this.running_ = false; | |
| 371 return; | |
| 372 } | |
| 373 | |
| 374 window.requestIdleCallback(function() { | |
| 375 function startNextTask() { | |
| 376 this.running_ = false; | |
| 377 this.consumePending_(); | |
| 378 } | |
| 379 if (task.context.id != | |
| 380 SearchManager.getInstance().activeContext_.id) { | |
|
Dan Beam
2016/07/13 02:33:14
if you do end up using this, I think it'd be odd t
dpapad
2016/07/13 17:33:42
Acknowledged. I am not using a separate function a
| |
| 381 // Dropping this task without ever executing it, since a new search | |
| 382 // has been issued since this task was queued. | |
| 383 startNextTask.call(this); | |
| 384 } else { | |
| 385 task.exec().then(startNextTask.bind(this)); | |
| 386 } | |
| 387 }.bind(this)); | |
| 388 return; | |
| 389 } | |
| 390 }, | |
| 391 }; | |
| 392 | |
| 393 /** | |
| 394 * @constructor | |
| 395 */ | |
| 396 var SearchManager = function() { | |
| 397 /** @private {!TaskQueue} */ | |
| 398 this.queue_ = new TaskQueue(); | |
| 399 | |
| 400 /** @private {!SearchContext} */ | |
| 401 this.activeContext_ = {id: 0, rawQuery: null, regExp: null}; | |
| 402 }; | |
| 403 cr.addSingletonGetter(SearchManager); | |
| 404 | |
| 405 /** @private @const {!RegExp} */ | |
| 406 SearchManager.SANITIZE_REGEX_ = /[-[\]{}()*+?.,\\^$|#\s]/g; | |
| 407 | |
| 408 SearchManager.prototype = { | |
| 409 /** | |
| 410 * @param {string} text The text to search for. | |
| 411 * @param {!Node} page | |
| 412 */ | |
| 413 search: function(text, page) { | |
| 414 if (this.activeContext_.rawQuery != text) { | |
| 415 var newId = this.activeContext_.id + 1; | |
| 416 | |
| 417 var regExp = null; | |
| 418 // Generate search text by escaping any characters that would be | |
| 419 // problematic for regular expressions. | |
| 420 var searchText = text.trim().replace( | |
| 421 SearchManager.SANITIZE_REGEX_, '\\$&'); | |
| 422 if (searchText.length > 0) | |
| 423 regExp = new RegExp('(' + searchText + ')', 'i'); | |
| 424 | |
| 425 this.activeContext_ = {id: newId, rawQuery: text, regExp: regExp}; | |
| 426 | |
| 427 // Drop all previously scheduled tasks, since a new search was just | |
| 428 // issued. | |
| 429 this.queue_.reset(); | |
| 430 } | |
| 431 | |
| 432 this.queue_.addTopLevelSearchTask( | |
| 433 new TopLevelSearchTask(this.activeContext_, page)); | |
| 434 }, | |
| 435 }; | |
| 436 | |
| 437 /** | |
| 173 * @param {string} text | 438 * @param {string} text |
| 174 * @param {!Element} page Must be either <settings-basic-page> or | 439 * @param {!Node} page |
| 175 * <settings-advanced-page>. | |
| 176 */ | 440 */ |
| 177 function search(text, page) { | 441 function search(text, page) { |
| 178 findAndRemoveHighlights_(page); | 442 SearchManager.getInstance().search(text, page); |
| 179 | |
| 180 // Generate search text by escaping any characters that would be problematic | |
| 181 // for regular expressions. | |
| 182 var searchText = text.trim().replace(SANITIZE_REGEX, '\\$&'); | |
| 183 if (searchText.length == 0) { | |
| 184 setSectionsVisibility_(page, true); | |
| 185 return; | |
| 186 } | |
| 187 | |
| 188 setSectionsVisibility_(page, false); | |
| 189 findAndHighlightMatches_(page, new RegExp('(' + searchText + ')', 'i')); | |
| 190 } | 443 } |
| 191 | 444 |
| 192 return { | 445 return { |
| 193 search: search, | 446 search: search, |
| 194 }; | 447 }; |
| 195 }); | 448 }); |
| OLD | NEW |
