From 9885ec91c3887017beeb0d6694306b0692981025 Mon Sep 17 00:00:00 2001
From: Brion Vibber <brion@users.mediawiki.org>
Date: Wed, 30 Apr 2008 07:00:02 +0000
Subject: [PATCH] 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.
---
 includes/DefaultSettings.php |  2 +-
 skins/common/mwsuggest.js    | 16 +++++++++++++++-
 skins/common/shared.css      | 18 ++++++++++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php
index ed6b6a447e..a6ca597e34 100644
--- 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 a65f82b04b..63ebad8784 100644
--- 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 ed11ec8e06..284c0d04f7 100644
--- 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;
-- 
2.20.1