Viewer: replace find label with placeholder/tooltip

This is common in the rest of the UI and helps us prevent responsiveness
issues for different length strings in different locales.

l10n/en-US/viewer.properties

@@ -121,7 +121,8 @@ thumb_page_title=Page {{page}}
 thumb_page_canvas=Thumbnail of Page {{page}}
 
 # Find panel button title and messages
-find_label=Find:
+find_input.title=Find
+find_input.placeholder=Find in document…
 find_previous.title=Find the previous occurrence of the phrase
 find_previous_label=Previous
 find_next.title=Find the next occurrence of the phrase

l10n/nl/viewer.properties

@@ -120,7 +120,8 @@ thumb_page_title=Pagina {{page}}
 thumb_page_canvas=Miniatuur van pagina {{page}}
 
 # Find panel button title and messages
-find_label=Zoeken:
+find_input.title=Zoeken
+find_input.placeholder=Zoeken in document…
 find_previous.title=De vorige overeenkomst van de tekst zoeken
 find_previous_label=Vorige
 find_next.title=De volgende overeenkomst van de tekst zoeken

l10n/sv-SE/viewer.properties

@@ -121,7 +121,8 @@ thumb_page_title=Sida {{page}}
 thumb_page_canvas=Miniatyr av sida {{page}}
 
 # Find panel button title and messages
-find_label=Sök:
+find_input.title=Sök
+find_input.placeholder=Sök i dokumentet…
 find_previous.title=Hitta föregående förekomst av frasen
 find_previous_label=Föregående
 find_next.title=Hitta nästa förekomst av frasen

web/viewer.css

@@ -372,6 +372,21 @@ html[dir='rtl'] .findbar {
   -moz-user-select: none;
 }
 
+#findInput {
+  width: 200px;
+}
+#findInput::-webkit-input-placeholder {
+  font-style: italic;
+}
+#findInput::-moz-placeholder {
+  font-style: italic;
+}
+#findInput:-ms-input-placeholder {
+  font-style: italic;
+}
+#findInput::placeholder {
+  font-style: italic;
+}
 #findInput[data-status="pending"] {
   background-image: url(images/loading-small.png);
   background-repeat: no-repeat;

web/viewer.html

@@ -98,8 +98,7 @@ See https://github.com/adobe-type-tools/cmap-resources
 
       <div id="mainContainer">
         <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
-          <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
+          <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document" tabindex="91" data-l10n-id="find_input">
-          <input id="findInput" class="toolbarField" tabindex="91">
           <div class="splitToolbarButton">
             <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">
               <span data-l10n-id="find_previous_label">Previous</span>