Bug 441526 Implement highlightNonMatches in toolkit autocomplete. r/sr=Neil for xpfe parts,r=enndeakin for toolkit parts

toolkit/content/tests/chrome/test_autocomplete2.xul

@@ -80,10 +80,37 @@ componentManager.registerFactory(autoCompleteSimpleID, "Test Simple Autocomplete
                                  autoCompleteSimpleName, autoCompleteSimple);
 
 
-// The main test code.
+// Test Bug 441530 - correctly setting "nomatch"
+// Test Bug 441526 - correctly setting style with "highlightnonmatches"
 
 SimpleTest.waitForExplicitFinish();
-setTimeout(check, 0);
+setTimeout(startTest, 0);
+
+function startTest() {
+  var autocomplete = $("autocomplete");
+
+  // Ensure highlightNonMatches can be set correctly.
+
+  // This should not be set by default.
+  is(autocomplete.hasAttribute("highlightnonmatches"), false,
+     "highlight nonmatches not set by default");
+
+  autocomplete.highlightNonMatches = "true";
+
+  is(autocomplete.getAttribute("highlightnonmatches"), "true",
+     "highlight non matches attribute set correctly");
+  is(autocomplete.highlightNonMatches, true,
+     "highlight non matches getter returned correctly");
+
+  autocomplete.highlightNonMatches = "false";
+
+  is(autocomplete.getAttribute("highlightnonmatches"), "false",
+     "highlight non matches attribute set to false correctly");
+  is(autocomplete.highlightNonMatches, false,
+     "highlight non matches getter returned false correctly");
+
+  check();
+}
 
 function check() {
   var autocomplete = $("autocomplete");
@@ -97,17 +124,44 @@ function check() {
 
 function checkResult() {
   var autocomplete = $("autocomplete");
+  var style = window.getComputedStyle(autocomplete, "");
 
   if (returnResult) {
     // Result was returned, so there should not be a nomatch attribute
     is(autocomplete.hasAttribute("nomatch"), false,
        "nomatch attribute shouldn't be present here");
+
+    // Ensure that the style is set correctly whichever way highlightNonMatches
+    // is set.
+    autocomplete.highlightNonMatches = "true";
+
+    is(style.getPropertyCSSValue("color").cssText, "rgb(0, 0, 0)",
+       "not nomatch and highlightNonMatches - should be black");
+
+    autocomplete.highlightNonMatches = "false";
+
+    is(style.getPropertyCSSValue("color").cssText, "rgb(0, 0, 0)",
+       "not nomatch and not highlightNonMatches - should be black");
+
     setTimeout(check, 0);
   }
   else {
     // No result was returned, so there should be nomatch attribute
     is(autocomplete.getAttribute("nomatch"), "true",
        "nomatch attribute not correctly set when expected");
+
+    // Ensure that the style is set correctly whichever way highlightNonMatches
+    // is set.
+    autocomplete.highlightNonMatches = "true";
+
+    is(style.getPropertyCSSValue("color").cssText, "rgb(255, 0, 0)",
+       "nomatch and highlightNonMatches - should be red");
+
+    autocomplete.highlightNonMatches = "false";
+
+    is(style.getPropertyCSSValue("color").cssText, "rgb(0, 0, 0)",
+       "nomatch and not highlightNonMatches - should be black");
+
     setTimeout(function() {
       // Unregister the factory so that we don't get in the way of other tests
       componentManager.unregisterFactory(autoCompleteSimpleID, autoCompleteSimple);

toolkit/content/widgets/autocomplete.xml

@@ -303,6 +303,11 @@
                 onset="this.setAttribute('ignoreblurwhilesearching', val); return val;"
                 onget="return this.getAttribute('ignoreblurwhilesearching') == 'true';"/>
 
+      <!-- option to highlight entries that don't have any matches -->
+      <property name="highlightNonMatches"
+                onset="this.setAttribute('highlightnonmatches', val); return val;"
+                onget="return this.getAttribute('highlightnonmatches') == 'true';"/>
+
       <!-- =================== PRIVATE MEMBERS =================== -->
 
       <!-- ::::::::::::: autocomplete controller ::::::::::::: -->

toolkit/themes/gnomestripe/global/autocomplete.css

@@ -57,6 +57,10 @@ textbox[enablehistory="true"] {
   background-color: transparent;
 }
 
+textbox[nomatch="true"][highlightnonmatches="true"] {
+  color: red;
+}
+
 /* Used by autocomplete widgets that don't have an icon. Gross. -dwh */
 textbox.padded {
   padding-top: 1px;

toolkit/themes/pinstripe/global/autocomplete.css

@@ -51,6 +51,10 @@ textbox {
   padding: 0;
 }
 
+textbox[nomatch="true"][highlightnonmatches="true"] {
+  color: red;
+}
+
 /* Used by autocomplete widgets that don't have an icon. Gross. -dwh */
 textbox.padded {
   padding: 1px 0px 1px 2px;

toolkit/themes/winstripe/global/autocomplete.css

@@ -51,6 +51,10 @@ textbox {
   padding: 0;
 }
 
+textbox[nomatch="true"][highlightnonmatches="true"] {
+  color: red;
+}
+
 /* Used by autocomplete widgets that don't have an icon. Gross. -dwh */
 textbox.padded {
   padding-top: 1px;

xpfe/components/autocomplete/resources/content/autocomplete.xml

@@ -595,7 +595,6 @@
           this.mFailureCount = 0;
           this.mFailureItems = 0;
           this.mDefaultMatchFilled = false; // clear out our prefill state.
-          this.removeAttribute("noMatchesFound");
 
           // tell each session to start searching...
           for (var name in this.mSessions)
@@ -731,9 +730,6 @@
           else
             this.removeAttribute("nomatch");
           
-          if (!this.mDefaultMatchFilled && this.highlightNonMatches)
-            this.setAttribute("noMatchesFound", true);
-          
           // if we have processed all of our searches, and none of them gave us a default index,
           // then we should try to auto fill the input field with the first match. 
           // note: autoFillInput is smart enough to kick out if we've already prefilled something...
@@ -819,7 +815,6 @@
           }
           
           this.mNeedToComplete = false;
-          this.removeAttribute("noMatchesFound");
           this.clearTimer();
 
           if (aFireTextCommand)
@@ -919,7 +914,6 @@
           var str = this.value;
           this.currentSearchString = str;
           this.resultsPopup.clearSelection();
-          this.removeAttribute("noMatchesFound");
           
           this.mAutoCompleteTimer = setTimeout(this.callListener, this.timeout, this, "startLookup");
         ]]></body>