Chromium Code Reviews Chromium Code Reviews
Issue 2082793003:
MD Settings: First iteration of searching within settings. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@cr_search_migration0| OLD | NEW |
|---|---|
| (Empty) | |
| 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 | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 cr.define('settings', function() { | |
| 6 /** @const {string} */ | |
| 7 var WRAPPER_CSS_CLASS = 'search-highlight-wrapper'; | |
| 8 | |
| 9 /** @const {string} */ | |
| 10 var HIT_CSS_CLASS = 'search-highlight-hit'; | |
| 11 | |
| 12 /** @const {!RegExp} */ | |
| 13 var SANITIZE_REGEX = /[-[\]{}()*+?.,\\^$|#\s]/g; | |
| 14 | |
| 15 /** | |
| 16 * List of elements types that should not be searched at all. | |
| 17 * @const {!Set<string>} | |
| 18 */ | |
| 19 var IGNORED_ELEMENTS = new Set([ | |
|
michaelpg
2016/07/04 19:23:56
why were these chosen? who is responsible for keep
dpapad
2016/07/06 18:24:54
These elements do not contain any useful text for
michaelpg
2016/07/06 23:41:16
paper-progress is part of paper-slider; if you ope
dpapad
2016/07/07 17:34:12
Done, added paper-slider.
| |
| 20 'CONTENT', | |
| 21 'CR-EVENTS', | |
| 22 'IMG', | |
|
michaelpg
2016/07/04 19:23:55
add DOM-MODULE, or comment that the only dom-modul
dpapad
2016/07/06 18:24:54
Added a comment.
| |
| 23 'IRON-ICON', | |
| 24 'PAPER-ICON-BUTTON', | |
|
michaelpg
2016/07/04 19:23:55
do we need iron-list in here?
dpapad
2016/07/06 18:24:55
See following TODO. I am planning to go through va
michaelpg
2016/07/06 23:41:16
My fear is that if you don't blacklist iron-list,
dpapad
2016/07/07 17:34:12
Added iron-list to the set. After a quick inspecti
| |
| 25 /* TODO(dpapad): paper-item is used for dynamically populated dropdown | |
| 26 * menus. Perhaps a better approach is to mark the entire dropdown menu such | |
| 27 * that search algorithm can skip it as a whole instead. | |
| 28 */ | |
| 29 'PAPER-ITEM', | |
| 30 'PAPER-RIPPLE', | |
| 31 'STYLE', | |
| 32 'TEMPLATE', | |
| 33 ]); | |
| 34 | |
| 35 /** | |
| 36 * Finds all previous highlighted nodes under |node| (both within self and | |
| 37 * children's Shadow DOM) and removes the highlight (yellow rectangle). | |
| 38 * @param {!Node} node | |
| 39 * @private | |
| 40 */ | |
| 41 function findAndRemoveHighlights_(node) { | |
| 42 var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS); | |
| 43 | |
| 44 for (var i = 0; i < wrappers.length; i++) { | |
|
michaelpg
2016/07/04 19:23:55
optional nit: for (var wrapper of wrappers) {
dpapad
2016/07/06 18:24:55
Done.
| |
| 45 var wrapper = wrappers[i]; | |
| 46 var hitElements = wrapper.querySelectorAll('.' + HIT_CSS_CLASS); | |
| 47 // For each hit element, remove the highlighting. | |
| 48 for (var j = 0; j < hitElements.length; j++) { | |
|
michaelpg
2016/07/04 19:23:55
optional nit: for (var hitElement of hitElements)
dpapad
2016/07/06 18:24:55
Done.
| |
| 49 var hitElement = hitElements[j]; | |
| 50 wrapper.replaceChild(hitElement.firstChild, hitElement); | |
| 51 } | |
| 52 | |
| 53 // Normalize so that adjacent text nodes will be combined. | |
| 54 wrapper.normalize(); | |
| 55 // Restore the DOM structure as it was before the search occurred. | |
| 56 if (wrapper.previousSibling) | |
|
michaelpg
2016/07/04 19:23:56
optional performance suggestion: only set textCont
dpapad
2016/07/06 18:24:55
Prefer not to apply this micro-optimization. In mo
| |
| 57 wrapper.textContent = ' ' + wrapper.textContent; | |
|
michaelpg
2016/07/04 19:23:56
why add spaces (how do you know there were spaces
dpapad
2016/07/06 18:24:55
This is addressing a corner case where a hit exist
| |
| 58 if (wrapper.nextSibling) | |
| 59 wrapper.textContent = wrapper.textContent + ' '; | |
| 60 | |
| 61 wrapper.parentElement.insertBefore( | |
|
michaelpg
2016/07/04 19:23:55
is this the same as:
wrapper.parentElement.repl
dpapad
2016/07/06 18:24:54
Done.
| |
| 62 wrapper.firstChild, wrapper.nextSibling); | |
| 63 | |
| 64 wrapper.remove(); | |
| 65 } | |
| 66 } | |
| 67 | |
| 68 /** | |
| 69 * Applies the highlight UI (yellow rectangle) around all matches in |node|. | |
| 70 * param {!Node} node The text node to be highlighted. |node| ends up being | |
|
michaelpg
2016/07/04 19:23:56
@param (surprised closure didn't complain about th
dpapad
2016/07/06 18:24:54
Done.
| |
| 71 * removed from the DOM tree. | |
|
michaelpg
2016/07/04 19:23:55
4-space indent
dpapad
2016/07/06 18:24:55
Done.
| |
| 72 * @param {!Array<string>} tokens The string tokens that did not match. | |
|
michaelpg
2016/07/04 19:23:56
I don't quite get this -- tokens that did *not* ma
dpapad
2016/07/06 18:24:55
Comment was obsolete. Clarified this parameter in
| |
| 73 * @private | |
| 74 */ | |
| 75 function highlight_(node, tokens) { | |
| 76 var wrapper = document.createElement('span'); | |
| 77 wrapper.classList.add(WRAPPER_CSS_CLASS); | |
| 78 // Use existing node as placeholder to determine where to insert the | |
| 79 // replacement content. | |
| 80 node.parentNode.insertBefore(wrapper, node); | |
|
michaelpg
2016/07/04 19:23:56
replaceChild?
dpapad
2016/07/06 18:24:55
Done.
| |
| 81 | |
| 82 for (var i = 0; i < tokens.length; ++i) { | |
| 83 if (i % 2 == 0) { | |
| 84 wrapper.appendChild(document.createTextNode(tokens[i])); | |
| 85 } else { | |
| 86 var span = document.createElement('span'); | |
| 87 span.classList.add(HIT_CSS_CLASS); | |
| 88 span.style['background-color'] = 'yellow'; | |
|
michaelpg
2016/07/04 19:23:56
whoa, I had no idea this worked! (I can't find it
| |
| 89 span.textContent = tokens[i]; | |
| 90 wrapper.appendChild(span); | |
| 91 } | |
| 92 } | |
| 93 | |
| 94 node.remove(); | |
| 95 } | |
| 96 | |
| 97 /** | |
| 98 * Traverses the entire DOM (including Shadow DOM), finds text nodes that | |
| 99 * match the given regular expression and applies the highlight UI. It also | |
| 100 * ensures that <settings-section> instances become visible if any matches | |
| 101 * occurred under their subtree. | |
| 102 * | |
| 103 * @param {!Element} page The page to be searched, should be either | |
| 104 * <settings-basic-page> or <settings-advanced-page>. | |
| 105 * @param {!RegExp} regExp The regular expression to detect matches. | |
| 106 * @private | |
| 107 */ | |
| 108 function findAndHighlightMatches_(page, regExp) { | |
| 109 function doSearch(node) { | |
| 110 if (IGNORED_ELEMENTS.has(node.tagName)) | |
| 111 return; | |
| 112 | |
| 113 if (node.nodeType == Node.TEXT_NODE) { | |
| 114 var textContent = node.nodeValue.trim(); | |
| 115 if (textContent.length == 0) | |
| 116 return; | |
| 117 | |
| 118 if (regExp.test(textContent)) { | |
| 119 revealParentSection_(node); | |
| 120 highlight_(node, textContent.split(regExp)); | |
| 121 } | |
| 122 // Returning early since TEXT_NODE nodes never have children. | |
| 123 return; | |
| 124 } | |
| 125 | |
| 126 var child = node.firstChild; | |
| 127 while (child !== null) { | |
| 128 // Getting a reference to the |nextSibling| before calling doSearch() | |
| 129 // because |child| could be removed from the DOM within doSearch(). | |
| 130 var nextSibling = child.nextSibling; | |
| 131 doSearch(child); | |
| 132 child = nextSibling; | |
| 133 } | |
| 134 | |
| 135 var shadowRoot = node.shadowRoot; | |
| 136 if (shadowRoot) | |
| 137 doSearch(shadowRoot); | |
| 138 } | |
| 139 | |
| 140 doSearch(page); | |
| 141 } | |
| 142 | |
| 143 /** | |
| 144 * Finds and makes visible the <settings-section> parent of |node|. | |
| 145 * @param {!Node} node | |
| 146 */ | |
| 147 function revealParentSection_(node) { | |
| 148 // Find corresponding SETTINGS-SECTION parent and make it visible. | |
| 149 var parent = node; | |
| 150 while (parent && parent.tagName !== 'SETTINGS-SECTION') { | |
| 151 parent = parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? | |
| 152 parent.host : parent.parentNode; | |
| 153 } | |
| 154 if (parent) | |
| 155 parent.hidden = false; | |
|
michaelpg
2016/07/04 19:23:55
if |parent| is hidden by "display: none" (e.g. by
dpapad
2016/07/06 18:24:54
Parent can only be a <settings-section> here and I
| |
| 156 } | |
| 157 | |
| 158 /** | |
| 159 * @param {!Element} page | |
| 160 * @param {boolean} visible | |
| 161 * @private | |
| 162 */ | |
| 163 function setSectionsVisibility_(page, visible) { | |
| 164 var sections = Polymer.dom(page.root).querySelectorAll('settings-section'); | |
| 165 for (var i = 0; i < sections.length; i++) | |
| 166 sections[i].hidden = !visible; | |
|
michaelpg
2016/07/04 19:23:56
same question
dpapad
2016/07/06 18:24:55
Same answer. Have not encountered a <settings-sect
| |
| 167 } | |
| 168 | |
| 169 /** | |
| 170 * Performs hierarchical search, starting at the given page element. | |
| 171 * @param {string} text | |
| 172 * @param {!Element} page Must be either <settings-basic-page> or | |
| 173 * <settings-advanced-page>. | |
| 174 */ | |
| 175 function search(text, page) { | |
| 176 findAndRemoveHighlights_(page); | |
| 177 | |
| 178 // Generate search text by applying lowercase and escaping any characters | |
|
michaelpg
2016/07/04 19:23:56
how does this lowercase?
dpapad
2016/07/06 18:24:55
It does not need to. The regExp constructed below
michaelpg
2016/07/06 23:41:16
Understood but the comment makes the code look wro
dpapad
2016/07/07 17:34:12
Updated comment (it was obsolete).
| |
| 179 // that would be problematic for regular expressions. | |
| 180 var searchText = text.trim().replace(SANITIZE_REGEX, '\\$&'); | |
| 181 if (searchText.length == 0) { | |
| 182 setSectionsVisibility_(page, true); | |
| 183 return; | |
| 184 } | |
| 185 | |
| 186 setSectionsVisibility_(page, false); | |
| 187 findAndHighlightMatches_(page, new RegExp('(' + searchText + ')', 'i')); | |
|
michaelpg
2016/07/04 19:23:56
oh
| |
| 188 } | |
| 189 | |
| 190 return { | |
| 191 search: search, | |
| 192 }; | |
| 193 }); | |
| OLD | NEW |
