| 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 'IRON-LIST', |
| 27 'PAPER-ICON-BUTTON', |
| 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 |
| 30 * that search algorithm can skip it as a whole instead. |
| 31 */ |
| 32 'PAPER-ITEM', |
| 33 'PAPER-RIPPLE', |
| 34 'PAPER-SLIDER', |
| 35 'PAPER-SPINNER', |
| 36 'STYLE', |
| 37 'TEMPLATE', |
| 38 ]); |
| 39 |
| 40 /** |
| 41 * Finds all previous highlighted nodes under |node| (both within self and |
| 42 * children's Shadow DOM) and removes the highlight (yellow rectangle). |
| 43 * @param {!Node} node |
| 44 * @private |
| 45 */ |
| 46 function findAndRemoveHighlights_(node) { |
| 47 var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS); |
| 48 |
| 49 for (var wrapper of wrappers) { |
| 50 var hitElements = wrapper.querySelectorAll('.' + HIT_CSS_CLASS); |
| 51 // For each hit element, remove the highlighting. |
| 52 for (var hitElement of hitElements) { |
| 53 wrapper.replaceChild(hitElement.firstChild, hitElement); |
| 54 } |
| 55 |
| 56 // Normalize so that adjacent text nodes will be combined. |
| 57 wrapper.normalize(); |
| 58 // Restore the DOM structure as it was before the search occurred. |
| 59 if (wrapper.previousSibling) |
| 60 wrapper.textContent = ' ' + wrapper.textContent; |
| 61 if (wrapper.nextSibling) |
| 62 wrapper.textContent = wrapper.textContent + ' '; |
| 63 |
| 64 wrapper.parentElement.replaceChild(wrapper.firstChild, wrapper); |
| 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 |
| 71 * being removed from the DOM tree. |
| 72 * @param {!Array<string>} tokens The string tokens after splitting on the |
| 73 * relevant regExp. Even indices hold text that doesn't need highlighting, |
| 74 * odd indices hold the text to be highlighted. For example: |
| 75 * var r = new RegExp('(foo)', 'i'); |
| 76 * 'barfoobar foo bar'.split(r) => ['bar', 'foo', 'bar ', 'foo', ' bar'] |
| 77 * @private |
| 78 */ |
| 79 function highlight_(node, tokens) { |
| 80 var wrapper = document.createElement('span'); |
| 81 wrapper.classList.add(WRAPPER_CSS_CLASS); |
| 82 // Use existing node as placeholder to determine where to insert the |
| 83 // replacement content. |
| 84 node.parentNode.replaceChild(wrapper, node); |
| 85 |
| 86 for (var i = 0; i < tokens.length; ++i) { |
| 87 if (i % 2 == 0) { |
| 88 wrapper.appendChild(document.createTextNode(tokens[i])); |
| 89 } else { |
| 90 var span = document.createElement('span'); |
| 91 span.classList.add(HIT_CSS_CLASS); |
| 92 span.style.backgroundColor = 'yellow'; |
| 93 span.textContent = tokens[i]; |
| 94 wrapper.appendChild(span); |
| 95 } |
| 96 } |
| 97 } |
| 98 |
| 99 /** |
| 100 * Traverses the entire DOM (including Shadow DOM), finds text nodes that |
| 101 * match the given regular expression and applies the highlight UI. It also |
| 102 * ensures that <settings-section> instances become visible if any matches |
| 103 * occurred under their subtree. |
| 104 * |
| 105 * @param {!Element} page The page to be searched, should be either |
| 106 * <settings-basic-page> or <settings-advanced-page>. |
| 107 * @param {!RegExp} regExp The regular expression to detect matches. |
| 108 * @private |
| 109 */ |
| 110 function findAndHighlightMatches_(page, regExp) { |
| 111 function doSearch(node) { |
| 112 if (IGNORED_ELEMENTS.has(node.tagName)) |
| 113 return; |
| 114 |
| 115 if (node.nodeType == Node.TEXT_NODE) { |
| 116 var textContent = node.nodeValue.trim(); |
| 117 if (textContent.length == 0) |
| 118 return; |
| 119 |
| 120 if (regExp.test(textContent)) { |
| 121 revealParentSection_(node); |
| 122 highlight_(node, textContent.split(regExp)); |
| 123 } |
| 124 // Returning early since TEXT_NODE nodes never have children. |
| 125 return; |
| 126 } |
| 127 |
| 128 var child = node.firstChild; |
| 129 while (child !== null) { |
| 130 // Getting a reference to the |nextSibling| before calling doSearch() |
| 131 // because |child| could be removed from the DOM within doSearch(). |
| 132 var nextSibling = child.nextSibling; |
| 133 doSearch(child); |
| 134 child = nextSibling; |
| 135 } |
| 136 |
| 137 var shadowRoot = node.shadowRoot; |
| 138 if (shadowRoot) |
| 139 doSearch(shadowRoot); |
| 140 } |
| 141 |
| 142 doSearch(page); |
| 143 } |
| 144 |
| 145 /** |
| 146 * Finds and makes visible the <settings-section> parent of |node|. |
| 147 * @param {!Node} node |
| 148 */ |
| 149 function revealParentSection_(node) { |
| 150 // Find corresponding SETTINGS-SECTION parent and make it visible. |
| 151 var parent = node; |
| 152 while (parent && parent.tagName !== 'SETTINGS-SECTION') { |
| 153 parent = parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? |
| 154 parent.host : parent.parentNode; |
| 155 } |
| 156 if (parent) |
| 157 parent.hidden = false; |
| 158 } |
| 159 |
| 160 /** |
| 161 * @param {!Element} page |
| 162 * @param {boolean} visible |
| 163 * @private |
| 164 */ |
| 165 function setSectionsVisibility_(page, visible) { |
| 166 var sections = Polymer.dom(page.root).querySelectorAll('settings-section'); |
| 167 for (var i = 0; i < sections.length; i++) |
| 168 sections[i].hidden = !visible; |
| 169 } |
| 170 |
| 171 /** |
| 172 * Performs hierarchical search, starting at the given page element. |
| 173 * @param {string} text |
| 174 * @param {!Element} page Must be either <settings-basic-page> or |
| 175 * <settings-advanced-page>. |
| 176 */ |
| 177 function search(text, page) { |
| 178 findAndRemoveHighlights_(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 } |
| 191 |
| 192 return { |
| 193 search: search, |
| 194 }; |
| 195 }); |
| OLD | NEW |
|---|
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