Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(436)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/settings/search_settings.js

Issue 2202723004: MD Settings: Highlight sub-page search hits. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@search_no_results_attempt_test
Patch Set: Nits. Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | chrome/browser/resources/settings/settings_page/settings_animated_pages.html » ('j') | chrome/browser/resources/settings/settings_shared_css.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/settings/search_settings.js
diff --git a/chrome/browser/resources/settings/search_settings.js b/chrome/browser/resources/settings/search_settings.js
index f001427a140d760bf52ada4df340c8a092609fb8..740fb4a3f9f40b262e583edf372e959be09942f6 100644
--- a/chrome/browser/resources/settings/search_settings.js
+++ b/chrome/browser/resources/settings/search_settings.js
@@ -9,6 +9,9 @@ cr.define('settings', function() {
/** @const {string} */
var HIT_CSS_CLASS = 'search-highlight-hit';
+ /** @const {string} */
+ var SEARCH_BUBBLE_CSS_CLASS = 'search-bubble';
+
/**
* List of elements types that should not be searched at all.
* The only DOM-MODULE node is in <body> which is not searched, therefore
@@ -36,7 +39,8 @@ cr.define('settings', function() {
/**
* Finds all previous highlighted nodes under |node| (both within self and
- * children's Shadow DOM) and removes the highlight (yellow rectangle).
+ * children's Shadow DOM) and removes the highlights (yellow rectangle and
+ * search bubbles).
* TODO(dpapad): Consider making this a private method of TopLevelSearchTask.
* @param {!Node} node
* @private
@@ -61,6 +65,11 @@ cr.define('settings', function() {
wrapper.parentElement.replaceChild(wrapper.firstChild, wrapper);
}
+
+ var searchBubbles = node.querySelectorAll(
+ '* /deep/ .' + SEARCH_BUBBLE_CSS_CLASS);
+ for (var searchBubble of searchBubbles)
+ searchBubble.remove();
}
/**
@@ -87,7 +96,6 @@ cr.define('settings', function() {
} else {
var span = document.createElement('span');
span.classList.add(HIT_CSS_CLASS);
- span.style.backgroundColor = 'yellow';
span.textContent = tokens[i];
wrapper.appendChild(span);
}
@@ -124,7 +132,7 @@ cr.define('settings', function() {
if (request.regExp.test(textContent)) {
foundMatches = true;
- revealParentSection_(node);
+ revealParentSection_(node, request.rawQuery_);
highlight_(node, textContent.split(request.regExp));
}
// Returning early since TEXT_NODE nodes never have children.
@@ -150,18 +158,63 @@ cr.define('settings', function() {
}
/**
+ * Highlights the HTML control that triggers a subpage, by displaying a search
+ * bubble.
+ * @param {!HTMLElement} element The element to be highlighted.
+ * @param {string} rawQuery The search query.
+ * @private
+ */
+ function highlightAssociatedControl_(element, rawQuery) {
+ var searchBubble = element.querySelector('.' + SEARCH_BUBBLE_CSS_CLASS);
+ // If the associated control has already been highlighted due to another
+ // match on the same subpage, there is no need to do anything.
+ if (searchBubble)
+ return;
+
+ searchBubble = document.createElement('div');
+ searchBubble.classList.add(SEARCH_BUBBLE_CSS_CLASS);
+ var innards = document.createElement('div');
+ innards.classList.add('search-bubble-innards');
+ innards.textContent = rawQuery;
+ searchBubble.appendChild(innards);
+ element.appendChild(searchBubble);
+
+ // Dynamically position the bubble at the edge the associated controle
+ // elemnt.
+ searchBubble.style.left = '-' + searchBubble.offsetWidth + 'px';
+ }
+
+ /**
* Finds and makes visible the <settings-section> parent of |node|.
* @param {!Node} node
+ * @param {string} rawQuery
+ * @private
*/
- function revealParentSection_(node) {
+ function revealParentSection_(node, rawQuery) {
+ var associatedControl = null;
// Find corresponding SETTINGS-SECTION parent and make it visible.
var parent = node;
while (parent && parent.nodeName !== 'SETTINGS-SECTION') {
parent = parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE ?
parent.host : parent.parentNode;
+ if (parent.nodeName == 'SETTINGS-SUBPAGE') {
+ // TODO(dpapad): Cast to SettingsSubpageElement here.
dpapad 2016/08/04 22:39:49 Tried to address this TODO by casting to SettingsS
Dan Beam 2016/08/05 00:07:59 don't really understand why this would happen, but
dpapad 2016/08/05 01:33:35 ## ^
+ if (!parent.noAssociatedControl) {
+ assert(
+ parent.associatedControl,
+ 'An associated control was expected for SETTINGS-SUBPAGE ' +
+ parent.pageTitle + ', but was not found.');
+ associatedControl = parent.associatedControl;
Dan Beam 2016/08/05 00:07:59 nit: associatedControl = assert(parent.associat
dpapad 2016/08/05 01:33:35 Done.
+ }
+ }
}
if (parent)
parent.hidden = false;
+
+ // Need to add the search bubble after the parent SETTINGS-SECTION has
+ // become visible, otherwise |offsetWidth| returns zero.
+ if (associatedControl)
+ highlightAssociatedControl_(associatedControl, rawQuery);
}
/**
« no previous file with comments | « no previous file | chrome/browser/resources/settings/settings_page/settings_animated_pages.html » ('j') | chrome/browser/resources/settings/settings_shared_css.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698