dom-ui settings: display bubbles for sub-page search results....

chrome/browser/resources/options/search_page.js

Index: chrome/browser/resources/options/search_page.js
===================================================================
--- chrome/browser/resources/options/search_page.js	(revision 70119)
+++ chrome/browser/resources/options/search_page.js	(working copy)
@@ -6,6 +6,78 @@
   const OptionsPage = options.OptionsPage;
 
   /**
+   * Encapsulated handling of a search bubble.
+   * @constructor
+   */
+  function SearchBubble(text) {
+    var el = cr.doc.createElement('div');
+    SearchBubble.decorate(el);
+    el.textContent = text;
+    return el;
+  }
+
+  SearchBubble.decorate = function(el) {
+    el.__proto__ = SearchBubble.prototype;
+    el.decorate();
+  };
+
+  SearchBubble.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    decorate: function() {
+      this.className = 'search-bubble';
+
+      // We create a timer to periodically update the position of the bubble.
+      // While this isn't all that desirable, it's the only sure-fire way of
+      // making sure the bubbles stay in the correct location as sections
+      // may dynamically change size at any time.
+      var self = this;
+      this.intervalId = setInterval(
+          function(e) { self.updatePosition(); }, 250);

[arv (Not doing code reviews), 2011/01/07 22:09:45]

setInterval(this.updatePosition.bind(this), 250);

[csilv, 2011/01/20 21:40:30]

Done.

+    },
+
+    /**
+     * Clear the interval timer and remove the element from the page.
+     */
+    dispose: function() {
+      clearInterval(this.intervalId);
+
+      var parent = this.parentNode;
+      if (parent)
+        parent.removeChild(this);
+    },
+
+    /**
+     * Update the position of the bubble.  Called at creation time and then
+     * periodically while the bubble remains visible.
+     */
+    updatePosition: function() {
+      // This bubble is 'owned' by the next sibling.
+      var owner = this.nextSibling;
+
+      // If there isn't an offset parent, we have nothing to do.
+      if (!owner.offsetParent)
+        return;
+
+      // Position the bubble below the location of the owner.
+      var left = Math.floor(owner.offsetLeft +

[arv (Not doing code reviews), 2011/01/07 22:09:45]

You can skip the floor here. left is not limited to integers

[csilv, 2011/01/20 21:40:30]

Done.

Coming from other platforms, I was concerned about blurry edges caused by
non-integer coordinates, but in a quick test it appears that the fraction will
be ignored.  That makes life easier.

+                            owner.offsetWidth/2 - this.offsetWidth/2);

[arv (Not doing code reviews), 2011/01/07 22:09:45]

ws around binops

[csilv, 2011/01/20 21:40:30]

Done.

+      var top = Math.floor(owner.offsetTop + owner.offsetHeight);
+
+      // Update the position in the CSS.  Cache the last values for
+      // best performance.

[arv (Not doing code reviews), 2011/01/07 22:09:45]

The main slowdown is the offset* followed by setting the style. One thing you
can do to improve this is to do the measuring of all bubbles first before you
set the style of them.

+      if (left != this.lastLeft) {
+        this.style.left = left + 'px';
+        this.lastLeft = left;
+      }
+      if (top != this.lastTop) {
+        this.style.top = top + 'px';
+        this.lastTop = top;
+      }
+    }
+  }
+
+  /**
    * Encapsulated handling of the search page.
    * @constructor
    */
@@ -129,9 +201,11 @@
         }
       }
 
-      // After hiding all page content, remove any highlighted matches.
-      if (!active)
+      // After hiding all page content, remove any search results.
+      if (!active) {
         this.unhighlightMatches_();
+        this.removeSearchBubbles_();
+      }
     },
 
     /**
@@ -141,9 +215,11 @@
      */
     setSearchText_: function(text) {
       var foundMatches = false;
+      var bubbleControls = [];
 
-      // Remove any highlighted matches.
+      // Remove any prior search results.
       this.unhighlightMatches_();
+      this.removeSearchBubbles_();
 
       // Generate search text by applying lowercase and escaping any characters
       // that would be problematic for regular expressions.
@@ -157,7 +233,7 @@
 
       // Initialize all sections.  If the search string matches a title page,
       // show sections for that page.
-      var page, pageMatch, childDiv;
+      var page, pageMatch, childDiv, length;
       var pagesToSearch = this.getSearchablePages_();
       for (var key in pagesToSearch) {
         page = pagesToSearch[key];
@@ -167,7 +243,8 @@
         }
         if (pageMatch)
           foundMatches = true;
-        for (var i = 0; i < page.pageDiv.childNodes.length; i++) {
+        length = page.pageDiv.childNodes.length;

[arv (Not doing code reviews), 2011/01/07 22:09:45]

Change this to children and loop over the children instead so that you do not
have to check the nodeType

[csilv, 2011/01/20 21:40:30]

Done.

Thanks for pointing this out.  'children' appears to be rather poorly documented
(as far as I can find), but found it referenced on quirksmode.org.  Curious if
you have a good/complete reference to dom api that I should bookmark.

+        for (var i = 0; i < length; i++) {
           childDiv = page.pageDiv.childNodes[i];
           if (childDiv.nodeType == document.ELEMENT_NODE &&
               childDiv.nodeName == 'SECTION') {
@@ -181,6 +258,21 @@
       }
 
       if (searchText.length) {
+        // Search all top-level sections for anchored string matches.
+        for (var key in pagesToSearch) {
+          page = pagesToSearch[key];
+          length = page.pageDiv.childNodes.length;
+          for (var i = 0; i < length; i++) {
+            childDiv = page.pageDiv.childNodes[i];

[arv (Not doing code reviews), 2011/01/07 22:09:45]

children

[csilv, 2011/01/20 21:40:30]

Done.

+            if (childDiv.nodeType == document.ELEMENT_NODE &&
+                childDiv.nodeName == 'SECTION' &&
+                this.performReplace_(regEx, replaceString, childDiv)) {
+              childDiv.classList.remove('search-hidden');
+              foundMatches = true;
+            }
+          }
+        }
+
         // Search all sub-pages, generating an array of top-level sections that
         // we need to make visible.
         var subPagesToSearch = this.getSearchableSubPages_();
@@ -188,31 +280,22 @@
         for (var key in subPagesToSearch) {
           page = subPagesToSearch[key];
           if (this.performReplace_(regEx, replaceString, page.pageDiv)) {
+            // Reveal the section for this search result.
             section = page.associatedSection;
             if (section)
               section.classList.remove('search-hidden');
-            controls = page.associatedControls;
+
+            // Identify any controls that should have bubbles.
+            var controls = page.associatedControls;
             if (controls) {
-              // TODO(csilv): highlight each control.
+              length = controls.length;
+              for (var i = 0; i < length; i++)
+                bubbleControls.push(controls[i]);
             }
 
             foundMatches = true;
           }
         }
-
-        // Search all top-level sections for anchored string matches.
-        for (var key in pagesToSearch) {
-          page = pagesToSearch[key];
-          for (var i = 0; i < page.pageDiv.childNodes.length; i++) {
-            childDiv = page.pageDiv.childNodes[i];
-            if (childDiv.nodeType == document.ELEMENT_NODE &&
-                childDiv.nodeName == 'SECTION' &&
-                this.performReplace_(regEx, replaceString, childDiv)) {
-              childDiv.classList.remove('search-hidden');
-              foundMatches = true;
-            }
-          }
-        }
       }
 
       // Configure elements on the search results page based on search results.
@@ -226,6 +309,11 @@
         $('searchPageInfo').classList.add('search-hidden');
         $('searchPageNoMatches').classList.remove('search-hidden');
       }
+
+      // Create search balloons for sub-page results.
+      length = bubbleControls.length;
+      for (var i = 0; i < length; i++)
+        this.createSearchBubble_(bubbleControls[i], text);
     },
 
     /**
@@ -302,6 +390,38 @@
     },
 
     /**
+     * Creates a search result bubble attached to an element.
+     * @param {Element} element An HTML element, usually a button.
+     * @param {string} text A string to show in the bubble.
+     * @private
+     */
+    createSearchBubble_: function(element, text) {
+      // avoid appending multiple ballons to a button.
+      var sibling = element.previousSibling;
+      if (sibling && sibling.classList &&
+          sibling.classList.contains('search-bubble'))
+        return;
+
+      var parent = element.parentNode;
+      if (parent) {
+        var bubble = SearchBubble(text);
+        parent.insertBefore(bubble, element);
+        bubble.updatePosition();
+      }
+    },
+
+    /**
+     * Removes all search match bubbles.
+     * @private
+     */
+    removeSearchBubbles_: function() {
+      var elements = document.querySelectorAll('.search-bubble');
+      var length = elements.length;
+      for (var i = 0; i < length; i++)
+        elements[i].dispose();
+    },
+
+    /**
      * Builds a list of top-level pages to search.  Omits the search page and
      * all sub-pages.
      * @returns {Array} An array of pages to search.