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 * The only DOM-MODULE node is in <body> which is not searched, therefore | |
| 18 * DOM-MODULE is not needed in this set. | |
| 19 * @const {!Set<string>} | |
| 20 */ | |
| 21 var IGNORED_ELEMENTS = new Set([ | |
| 22 'CONTENT', | |
| 23 'CR-EVENTS', | |
| 24 'IMG', | |
| 25 'IRON-ICON', | |
| 26 'PAPER-ICON-BUTTON', | |
| 27 /* TODO(dpapad): paper-item is used for dynamically populated dropdown | |
| 28 * menus. Perhaps a better approach is to mark the entire dropdown menu such | |
| 29 * that search algorithm can skip it as a whole instead. | |
| 30 */ | |
| 31 'PAPER-ITEM', | |
| 32 'PAPER-RIPPLE', | |
| 33 'PAPER-SPINNER', | |
| 34 'STYLE', | |
| 35 'TEMPLATE', | |
| 36 ]); | |
| 37 | |
| 38 /** | |
| 39 * Finds all previous highlighted nodes under |node| (both within self and | |
| 40 * children's Shadow DOM) and removes the highlight (yellow rectangle). | |
| 41 * @param {!Node} node | |
| 42 * @private | |
| 43 */ | |
| 44 function findAndRemoveHighlights_(node) { | |
| 45 var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS); | |
| 46 | |
| 47 for (var wrapper of wrappers) { | |
| 48 var hitElements = wrapper.querySelectorAll('.' + HIT_CSS_CLASS); | |
| 49 // For each hit element, remove the highlighting. | |
| 50 for (var hitElement of hitElements) { | |
| 51 wrapper.replaceChild(hitElement.firstChild, hitElement); | |
| 52 } | |
| 53 | |
| 54 // Normalize so that adjacent text nodes will be combined. | |
| 55 wrapper.normalize(); | |
| 56 // Restore the DOM structure as it was before the search occurred. | |
| 57 if (wrapper.previousSibling) | |
| 58 wrapper.textContent = ' ' + wrapper.textContent; | |
| 59 if (wrapper.nextSibling) | |
| 60 wrapper.textContent = wrapper.textContent + ' '; | |
| 61 | |
| 62 wrapper.parentElement.replaceChild(wrapper.firstChild, wrapper); | |
| 63 } | |
| 64 } | |
| 65 | |
| 66 /** | |
| 67 * Applies the highlight UI (yellow rectangle) around all matches in |node|. | |
| 68 * @param {!Node} node The text node to be highlighted. |node| ends up | |
| 69 * being removed from the DOM tree. | |
| 70 * @param {!Array<string>} tokens The string tokens after splitting on the | |
| 71 * relevant regExp. Even indices hold text that doesn't need highlighting, | |
| 72 * odd indices hold the text to be highlighted. For example: | |
| 73 * var r = new RegExp('(foo)', 'i'); | |
| 74 * 'barfoobar foo bar'.split(r) => ['bar', 'foo', 'bar ', 'foo', ' bar'] | |
| 75 * @private | |
| 76 */ | |
| 77 function highlight_(node, tokens) { | |
| 78 var wrapper = document.createElement('span'); | |
| 79 wrapper.classList.add(WRAPPER_CSS_CLASS); | |
| 80 // Use existing node as placeholder to determine where to insert the | |
| 81 // replacement content. | |
| 82 node.parentNode.replaceChild(wrapper, node); | |
| 83 | |
| 84 for (var i = 0; i < tokens.length; ++i) { | |
| 85 if (i % 2 == 0) { | |
| 86 wrapper.appendChild(document.createTextNode(tokens[i])); | |
| 87 } else { | |
| 88 var span = document.createElement('span'); | |
| 89 span.classList.add(HIT_CSS_CLASS); | |
| 90 span.style.backgroundColor = 'yellow'; | |
| 91 span.textContent = tokens[i]; | |
| 92 wrapper.appendChild(span); | |
|
michaelpg
2016/07/06 23:41:16
is there a risk of the new <span> being styled uni
dpapad
2016/07/07 17:34:12
Yes, I was actually able to reproduce one such cas
| |
| 93 } | |
| 94 } | |
| 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; | |
| 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; | |
| 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 | |
| 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')); | |
| 188 } | |
| 189 | |
| 190 return { | |
| 191 search: search, | |
| 192 }; | |
| 193 }); | |
| OLD | NEW |
