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

chrome/browser/resources/options/search_page.css

Index: chrome/browser/resources/options/search_page.css
===================================================================
--- chrome/browser/resources/options/search_page.css	(revision 70119)
+++ chrome/browser/resources/options/search_page.css	(working copy)
@@ -3,5 +3,29 @@
 }
 
 .search-highlighted {
-  background-color: #fff29f;
+  background-color: rgba(255, 240, 120, 0.8);
 }
+
+.search-bubble {
+  position: absolute;
+  left: -1000px;  /* minor hack: position off-screen by default */

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

Use top: -1000px instead

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

Done.

+  top: 0px;

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

s/0px/0/

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

Done.

+  width: 100px;
+  margin: 12px 0 0;
+  padding: 4px 10px;
+  background-color: rgba(255, 240, 120, 0.8);
+  border-radius: 6px;
+  box-shadow: 0 2px 2px #888;
+  -webkit-box-shadow: 0 2px 2px #888;
+  text-align: center;

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

I think you should probably have pointer-events: none here so that the bubbles
do not block the underlying label/control.

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

Done.

+}
+
+.search-bubble:after {

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

Could you explain what this is for?

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

This is used to create the bubble "pointer" (arrow pointing up).

+  content: "";
+  position: absolute;
+  top: -10px;
+  left: 50px;
+  border-width: 0 10px 10px;
+  border-style: solid;
+  border-color: rgba(255, 240, 120, 0.8) transparent;
+}