8274625: Search field placeholder behavior

Reviewed-by: prappo

Author: hns

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java

@@ -76,6 +76,7 @@ public class Navigation {
     private Content userHeader;
     private final String rowListTitle;
     private final Content searchLabel;
+    private final String searchPlaceholder;
     private SubNavLinks subNavLinks;
 
     public enum PageMode {
@@ -131,6 +132,7 @@ public Navigation(Element element, HtmlConfiguration configuration, PageMode pag
         this.links = new Links(path);
         this.rowListTitle = configuration.getDocResources().getText("doclet.Navigation");
         this.searchLabel = contents.getContent("doclet.search");
+        this.searchPlaceholder = configuration.getDocResources().getText("doclet.search_placeholder");
     }
 
     public Navigation setNavLinkModule(Content navLinkModule) {
@@ -595,10 +597,11 @@ private void addHelpLink(Content tree) {
     }
 
     private void addSearch(Content tree) {
-        String search = "search";
         String reset = "reset";
-        HtmlTree inputText = HtmlTree.INPUT("text", HtmlIds.SEARCH_INPUT, search);
-        HtmlTree inputReset = HtmlTree.INPUT(reset, HtmlIds.RESET_BUTTON, reset);
+        HtmlTree inputText = HtmlTree.INPUT("text", HtmlIds.SEARCH_INPUT)
+                .put(HtmlAttr.PLACEHOLDER, searchPlaceholder);
+        HtmlTree inputReset = HtmlTree.INPUT(reset, HtmlIds.RESET_BUTTON)
+                .put(HtmlAttr.VALUE, reset);
         HtmlTree searchDiv = HtmlTree.DIV(HtmlStyle.navListSearch,
                 HtmlTree.LABEL(HtmlIds.SEARCH_INPUT.name(), searchLabel));
         searchDiv.add(inputText);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/HtmlAttr.java

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2019, Oracle and/or its affiliates. All rights reserved.
+ * Copyright (c) 2010, 2021, Oracle and/or its affiliates. All rights reserved.
  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
  *
  * This code is free software; you can redistribute it and/or modify it
@@ -57,6 +57,7 @@ public enum HtmlAttr {
     ONCLICK,
     ONKEYDOWN,
     ONLOAD,
+    PLACEHOLDER,
     REL,
     ROLE,
     ROWS,

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/HtmlTree.java

@@ -520,20 +520,18 @@ public static HtmlTree HTML(String lang, Content head, Content body) {
     }
 
     /**
-     * Creates an HTML {@code INPUT} element with the given id and initial value.
+     * Creates an HTML {@code INPUT} element with the given id.
      * The element as marked as initially disabled.
      *
      * @param type  the type of input
      * @param id    the id
-     * @param value the initial value
      * @return the element
      */
-    public static HtmlTree INPUT(String type, HtmlId id, String value) {
+    public static HtmlTree INPUT(String type, HtmlId id) {
         return new HtmlTree(TagName.INPUT)
                 .put(HtmlAttr.TYPE, type)
                 .setId(id)
-                .put(HtmlAttr.VALUE, value)
-                .put(HtmlAttr.DISABLED, "disabled");
+                .put(HtmlAttr.DISABLED, "");
     }
 
     /**

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/search.js.template

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2015, 2020, Oracle and/or its affiliates. All rights reserved.
+ * Copyright (c) 2015, 2021, Oracle and/or its affiliates. All rights reserved.
  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
  *
  * This code is free software; you can redistribute it and/or modify it
@@ -96,28 +96,16 @@ function createMatcher(pattern, flags) {
     var isCamelCase = /[A-Z]/.test(pattern);
     return new RegExp(pattern, flags + (isCamelCase ? "" : "i"));
 }
-var watermark = 'Search';
 $(function() {
     var search = $("#search-input");
     var reset = $("#reset-button");
     search.val('');
     search.prop("disabled", false);
     reset.prop("disabled", false);
-    search.val(watermark).addClass('watermark');
-    search.blur(function() {
-        if ($(this).val().length === 0) {
-            $(this).val(watermark).addClass('watermark');
-        }
-    });
-    search.on('click keydown paste', function() {
-        if ($(this).val() === watermark) {
-            $(this).val('').removeClass('watermark');
-        }
-    });
     reset.click(function() {
         search.val('').focus();
     });
-    search.focus()[0].setSelectionRange(0, 0);
+    search.focus();
 });
 $.widget("custom.catcomplete", $.ui.autocomplete, {
     _create: function() {

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/doclets.properties

@@ -223,6 +223,7 @@ doclet.Type=Type
 doclet.Modifier_and_Type=Modifier and Type
 doclet.Implementation=Implementation(s):
 doclet.search=SEARCH:
+doclet.search_placeholder=Search
 doclet.Field=Field
 doclet.Property=Property
 doclet.Constructor=Constructor

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/stylesheet.css

@@ -617,8 +617,9 @@ ul.ui-autocomplete  li {
     top:10px;
     font-size:0;
 }
-.watermark {
-    color:#545454;
+::placeholder {
+    color:#909090;
+    opacity: 1;
 }
 .search-tag-desc-result {
     font-style:italic;

test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java

@@ -137,8 +137,7 @@ void run() throws Exception {
         // used in search.js; may be worth documenting in HtmlStyle
         removeAll(styleSheetNames, "result-highlight", "result-item",
                 "search-tag-desc-result", "search-tag-holder-result",
-                "ui-autocomplete", "ui-autocomplete-category",
-                "watermark", "expanded");
+                "ui-autocomplete", "ui-autocomplete-category", "expanded");
 
         // snippet-related
         removeAll(styleSheetNames, "bold", "highlighted", "italic");

test/langtools/jdk/javadoc/doclet/testSearch/TestSearch.java

@@ -421,8 +421,8 @@ void checkSearchOutput(String fileName, boolean expectedOutput, boolean moduleDi
                 "<div class=\"nav-list-search\">",
                 """
                     <label for="search-input">SEARCH:</label>
-                    <input type="text" id="search-input" value="search" disabled="disabled">
-                    <input type="reset" id="reset-button" value="reset" disabled="disabled">
+                    <input type="text" id="search-input" disabled placeholder="Search">
+                    <input type="reset" id="reset-button" disabled value="reset">
                     """);
         checkOutput(fileName, true,
                 "<div class=\"flex-box\">");
@@ -710,12 +710,6 @@ void checkSearchJS() {
 
         checkOutput("search.js", true,
                 "function searchIndexWithMatcher(indexArray, matcher, category, nameFunc) {",
-                """
-                    search.on('click keydown paste', function() {
-                            if ($(this).val() === watermark) {
-                                $(this).val('').removeClass('watermark');
-                            }
-                        });""",
                 """
                     function getURLPrefix(ui) {
                         var urlPrefix="";

test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java

@@ -191,8 +191,9 @@ public void test(Path base) {
                         font-size:0;
                     }""",
                 """
-                    .watermark {
-                        color:#545454;
+                    ::placeholder {
+                        color:#909090;
+                        opacity: 1;
                     }""");
 
         checkOutput("pkg/A.html", true,