Style cleanup on AJAX search suggestion dropdown list.

White borders around the highlighted row are removed by collapsing cell spacing and moving the padding inside.

Now using CSS system colors where supported for background, foreground, and highlight colors instead of hardcoded values. These will fit in better with the native controls, especially when high-contrast themes are in use (say, black background, yellow text, and green highlight... :)

Some caveats...

IE 6 and Firefox 2 on Windows look great.

However, a couple caveats on Mac OS X:

* Firefox 3 looks perfect!

* Firefox 2 and other older Gecko browsers, Opera 9.2, and Safari 3.1 provide the *text selection* colors for Highlight and HighlightText, which differ from the *list selection* colors on Mac OS X 10.2 (?) and later. This is technically wrong for what we want, but will at least match the general color selection.

Note that -moz-mac-alternateprimaryhighlight provides the correct background color on Firefox 2/Mac, but IE 6 and Firefox 2 on other platforms don't properly handle a fallback if it's specified straight in the CSS. We could switch it in with JS, but there's not much reason to I think. It still looks and feels fairly native.

* Safari 3.0 and earlier appear to wildly fail with the system colors, though I can't easily test them. There was an ugly WebKit bug where most of the system colors were implemented wrong; Highlight and HighlightText *both show up solid white*, making your text nicely illegible. Since they're implemented (even though wrongly) you can't even set default colors and let them fall through.

See https://bugs.webkit.org/show_bug.cgi?id=6129

I've worked around this by checking the reported WebKit version in the JS and using an alternate class with the hardcoded colors for anything older than what I see in Safari 3.1 (WebKit 525).

Haven't tested anything on Linux; it wouldn't hurt to do a quick sanity check on Konqueror.

diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php
index ed6b6a4..a6ca597 100644 (file)
--- a/includes/DefaultSettings.php
+++ b/includes/DefaultSettings.php
@@ -1329,7 +1329,7 @@ $wgCacheEpoch = '20030516000000';
  * to ensure that client-side caches don't keep obsolete copies of global
  * styles.
  */
-$wgStyleVersion = '140';
+$wgStyleVersion = '141';
 
 
 # Server-side caching:

diff --git a/skins/common/mwsuggest.js b/skins/common/mwsuggest.js
index a65f82b..63ebad8 100644 (file)
--- a/skins/common/mwsuggest.js
+++ b/skins/common/mwsuggest.js
@@ -411,7 +411,7 @@ function os_changeHighlight(r, cur, next, updateSearchBox){
     if(next >= 0){
        var nextRow = document.getElementById(r.resultTable + next);
        if(nextRow != null)
-               nextRow.className = "os-suggest-result-hl";
+               nextRow.className = os_HighlightClass();
        newText = r.results[next];
     } else
        newText = r.original;
@@ -433,6 +433,20 @@ function os_changeHighlight(r, cur, next, updateSearchBox){
     }
 }
 
+function os_HighlightClass() {
+       var match = navigator.userAgent.match(/AppleWebKit\/(\d+)/);
+       if (match) {
+               var webKitVersion = parseInt(match[1]);
+               if (webKitVersion < 525) {
+                       // CSS system highlight colors broken on old Safari
+                       // https://bugs.webkit.org/show_bug.cgi?id=6129
+                       // Safari 3.1 known ok
+                       return "os-suggest-result-hl-webkit";
+               }
+       }
+       return "os-suggest-result-hl";
+}
+
 function os_updateSearchQuery(r,newText){
        document.getElementById(r.searchbox).value = newText;
     r.query = newText;

diff --git a/skins/common/shared.css b/skins/common/shared.css
index ed11ec8..284c0d0 100644 (file)
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -164,18 +164,32 @@ table.mw-userrights-groups * td,table.mw-userrights-groups * th {
 table.os-suggest-results {
        font-size: 95%;
        cursor: pointer; 
-       border: 0; 
+       border: 0;
+       border-collapse: collapse;
+       width: 100%;
 }
 
 td.os-suggest-result, td.os-suggest-result-hl {
        text-align: left; 
        white-space: nowrap;
        background-color: white; 
+       background-color: Window;
+       color: black;
+       color: WindowText;
+       padding: 2px;
 }
-td.os-suggest-result-hl {
+td.os-suggest-result-hl,
+td.os-suggest-result-hl-webkit {
        background-color: #4C59A6; 
        color: white;
 }
+td.os-suggest-result-hl {
+       /* System colors are misimplemented in Safari 3.0 and earlier,
+          making highlighted text illegible... */
+       background-color: Highlight;
+       color: HighlightText;
+}
+
 .os-suggest-toggle {
        position: relative; 
        left: 1ex;