From c054b62765281ea6b2c992feee8fb8f56993883d Mon Sep 17 00:00:00 2001
From: Sorawee Porncharoenwase <sorawee.pwase@gmail.com>
Date: Mon, 28 Sep 2020 18:03:34 -0700
Subject: [PATCH] Refactor search placeholder

HTML supports the placeholder attribute, so we should use it
instead of implementing it ourselves.

The placeholder attribute is not available prior IE10 (not including
IE10). However:

1. In non-supporting browsers (e.g., IE9), the search functionality
should still work correctly.
2. Non-supporting browsers don't qualify for the "full support" level
detailed in https://github.com/racket/scribble/pull/240/
IE9 for instance is released in 2011, and Microsoft announced its end of
support in 2016.
---
 scribble-lib/scribble/html-render.rkt | 16 +++-------------
 scribble-lib/scribble/scribble.css    |  5 ++++-
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/scribble-lib/scribble/html-render.rkt b/scribble-lib/scribble/html-render.rkt
index 6a9304b5..11cb6759 100644
--- a/scribble-lib/scribble/html-render.rkt
+++ b/scribble-lib/scribble/html-render.rkt
@@ -221,26 +221,16 @@
          (string->symbol (alt-tag-name s)))))
 
 (define (make-search-box top-path) ; appears on every page
-  (let ([sa         string-append]
-        [emptylabel "...search manuals..."]
-        [dimcolor   "#888"])
+  (let ([emptylabel "...search manuals..."])
     `(form ([class "searchform"])
        (input
         ([class "searchbox"]
-         [style ,(sa "color: "dimcolor";")]
          [type "text"]
          [tabindex "1"]
-         [value ,emptylabel]
+         [placeholder ,emptylabel]
          [title "Enter a search string to search the manuals"]
          [onkeypress ,(format "return DoSearchKey(event, this, ~s, ~s);"
-                              (version) top-path)]
-         [onfocus ,(sa "this.style.color=\"black\"; "
-                       "this.style.textAlign=\"left\"; "
-                       "if (this.value == \""emptylabel"\") this.value=\"\";")]
-         [onblur ,(sa "if (this.value.match(/^ *$/)) {"
-                      " this.style.color=\""dimcolor"\";"
-                      " this.style.textAlign=\"center\";"
-                      " this.value=\""emptylabel"\"; }")])))))
+                              (version) top-path)])))))
 (define search-box (make-search-box "../"))
 (define top-search-box (make-search-box ""))
 
diff --git a/scribble-lib/scribble/scribble.css b/scribble-lib/scribble/scribble.css
index 2d0079d4..ca780a6d 100644
--- a/scribble-lib/scribble/scribble.css
+++ b/scribble-lib/scribble/scribble.css
@@ -152,10 +152,13 @@ table td {
   padding: 0px;
   background-color: #eee;
   border: 1px solid #ddd;
-  text-align: center;
   vertical-align: middle;
 }
 
+.searchbox::placeholder {
+  text-align: center;
+}
+
 #contextindicator {
   position: fixed;
   background-color: #c6f;