From c79e5b3f173f001a85b95edae96e0fb3d34cafd3 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Wed, 8 Mar 2017 23:53:59 +0100
Subject: [PATCH 1/3] 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 |  3 ++-
 l10n/nl/viewer.properties    |  3 ++-
 l10n/sv-SE/viewer.properties |  3 ++-
 web/viewer.css               | 15 +++++++++++++++
 web/viewer.html              |  3 +--
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties
index da5442c68bda6..27939c13bb644 100644
--- a/l10n/en-US/viewer.properties
+++ b/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
diff --git a/l10n/nl/viewer.properties b/l10n/nl/viewer.properties
index fedc5fa593471..ad254db048d44 100644
--- a/l10n/nl/viewer.properties
+++ b/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
diff --git a/l10n/sv-SE/viewer.properties b/l10n/sv-SE/viewer.properties
index c1ff607c0cd85..229c4a358c4c8 100644
--- a/l10n/sv-SE/viewer.properties
+++ b/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
diff --git a/web/viewer.css b/web/viewer.css
index 612172e0c5389..b6e567521a735 100644
--- a/web/viewer.css
+++ b/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;
diff --git a/web/viewer.html b/web/viewer.html
index 26af8f44744bb..ea357475e1fe3 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -98,8 +98,7 @@
 
       <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" tabindex="91">
+          <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document" tabindex="91" data-l10n-id="find_input">
           <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>

From 87a30a7ee145466038faa3215751d7fe476e1ff7 Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 8 Mar 2017 23:54:28 +0100
Subject: [PATCH 2/3] Viewer: enable find functionality for small devices

The find functionality is currently not available for small devices
because the find dialog is not responsive. This patch fixes that.

To achieve this goal, the HTML is changed to always show the find
button. To prevent issues because of the addition of an extra button for
small views, the previous/next page buttons are hidden if the view
becomes small. These buttons are not useful anyway because on small
devices navigation is usually done via scrolling. The find functionality
is much more useful to have in this case. Moreover, we wrap the existing
elements into separate `div`s so that the browser can position the
elements itself when the view becomes smaller and logically connected
elements stay together when this happens.

In the CSS, extra rules for the find bar have been added to ensure that
the dialog's doorhanger is always below the find button. All findbar
`div`s are forced to be 32 pixels high to prevent the find message text
being aligned under the checkboxes. Finally, the find message is only
visible when there is actually text to display. This prevents wrapping
issues because, by default, the label has padding and margin even if
there is no text.
---
 web/viewer.css  | 25 +++++++++++++++++++------
 web/viewer.html | 44 ++++++++++++++++++++++++++------------------
 2 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index b6e567521a735..7b067dcb81834 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -347,8 +347,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   top: 32px;
   position: absolute;
   z-index: 10000;
-  height: 32px;
-
+  height: auto;
   min-width: 16px;
   padding: 0px 6px 0px 6px;
   margin: 4px 2px 4px 2px;
@@ -359,10 +358,15 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   cursor: default;
 }
 
+.findbar {
+  min-width: 300px;
+}
+.findbar > div {
+  height: 32px;
+}
 html[dir='ltr'] .findbar {
   left: 68px;
 }
-
 html[dir='rtl'] .findbar {
   right: 68px;
 }
@@ -478,6 +482,9 @@ html[dir='ltr'] .doorHangerRight:before {
   font-style: italic;
   color: #A6B7D0;
 }
+#findMsg:empty {
+  display: none;
+}
 
 #findInput.notFound {
   background-color: rgb(255, 102, 102);
@@ -500,14 +507,14 @@ html[dir='rtl'] #toolbarViewerLeft {
 html[dir='ltr'] #toolbarViewerLeft > *,
 html[dir='ltr'] #toolbarViewerMiddle > *,
 html[dir='ltr'] #toolbarViewerRight > *,
-html[dir='ltr'] .findbar > * {
+html[dir='ltr'] .findbar * {
   position: relative;
   float: left;
 }
 html[dir='rtl'] #toolbarViewerLeft > *,
 html[dir='rtl'] #toolbarViewerMiddle > *,
 html[dir='rtl'] #toolbarViewerRight > *,
-html[dir='rtl'] .findbar > * {
+html[dir='rtl'] .findbar * {
   position: relative;
   float: right;
 }
@@ -1913,7 +1920,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 }
 
 @media all and (max-width: 640px) {
-  .hiddenSmallView {
+  .hiddenSmallView, .hiddenSmallView * {
     display: none;
   }
   .visibleSmallView {
@@ -1922,6 +1929,12 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   .toolbarButtonSpacer {
     width: 0;
   }
+  html[dir='ltr'] .findbar {
+    left: 38px;
+  }
+  html[dir='rtl'] .findbar {
+    right: 38px;
+  }
 }
 
 @media all and (max-width: 535px) {
diff --git a/web/viewer.html b/web/viewer.html
index ea357475e1fe3..0d6469949cd0b 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -97,23 +97,31 @@
       </div>  <!-- sidebarContainer -->
 
       <div id="mainContainer">
-        <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
-          <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document" tabindex="91" data-l10n-id="find_input">
-          <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>
-            </button>
-            <div class="splitToolbarButtonSeparator"></div>
-            <button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
-              <span data-l10n-id="find_next_label">Next</span>
-            </button>
+        <div class="findbar hidden doorHanger" id="findbar">
+          <div id="findbarInputContainer">
+            <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document" tabindex="91" data-l10n-id="find_input">
+            <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>
+              </button>
+              <div class="splitToolbarButtonSeparator"></div>
+              <button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
+                <span data-l10n-id="find_next_label">Next</span>
+              </button>
+            </div>
+          </div>
+
+          <div id="findbarOptionsContainer">
+            <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
+            <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
+            <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
+            <label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
+            <span id="findResultsCount" class="toolbarLabel hidden"></span>
+          </div>
+
+          <div id="findbarMessageContainer">
+            <span id="findMsg" class="toolbarLabel"></span>
           </div>
-          <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
-          <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
-          <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
-          <label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
-          <span id="findResultsCount" class="toolbarLabel hidden"></span>
-          <span id="findMsg" class="toolbarLabel"></span>
         </div>  <!-- findbar -->
 
         <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
@@ -178,10 +186,10 @@
                   <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
                 </button>
                 <div class="toolbarButtonSpacer"></div>
-                <button id="viewFind" class="toolbarButton group hiddenSmallView" title="Find in Document" tabindex="12" data-l10n-id="findbar">
+                <button id="viewFind" class="toolbarButton group" title="Find in Document" tabindex="12" data-l10n-id="findbar">
                    <span data-l10n-id="findbar_label">Find</span>
                 </button>
-                <div class="splitToolbarButton">
+                <div class="splitToolbarButton hiddenSmallView">
                   <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
                     <span data-l10n-id="previous_label">Previous</span>
                   </button>

From b151666c53d3526cca300b5f03b07abab412ee0b Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Wed, 8 Mar 2017 23:54:57 +0100
Subject: [PATCH 3/3] Viewer: consistently wrap find bar elements for small
 screen sizes

This patch ensures that the find bar is not extended to the window width
when element wrapping occurs on small screens.
---
 web/pdf_find_bar.js | 32 +++++++++++++++++++++++++++++++-
 web/viewer.css      |  6 ++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js
index c01ec47615c59..3c2e93562f46b 100644
--- a/web/pdf_find_bar.js
+++ b/web/pdf_find_bar.js
@@ -96,6 +96,8 @@ var PDFFindBar = (function PDFFindBarClosure() {
     this.caseSensitive.addEventListener('click', function() {
       self.dispatchEvent('casesensitivitychange');
     });
+
+    this.eventBus.on('resize', this._adjustWidth.bind(this));
   }
 
   PDFFindBar.prototype = {
@@ -155,6 +157,7 @@ var PDFFindBar = (function PDFFindBarClosure() {
       this.findMsg.textContent = findMsg;
 
       this.updateResultsCount(matchCount);
+      this._adjustWidth();
     },
 
     updateResultsCount: function(matchCount) {
@@ -183,6 +186,8 @@ var PDFFindBar = (function PDFFindBarClosure() {
       }
       this.findField.select();
       this.findField.focus();
+
+      this._adjustWidth();
     },
 
     close: function PDFFindBar_close() {
@@ -201,7 +206,32 @@ var PDFFindBar = (function PDFFindBarClosure() {
       } else {
         this.open();
       }
-    }
+    },
+
+    /**
+     * @private
+     */
+    _adjustWidth: function PDFFindBar_adjustWidth() {
+      if (!this.opened) {
+        return;
+      }
+
+      // The find bar has an absolute position and thus the browser extends
+      // its width to the maximum possible width once the find bar does not fit
+      // entirely within the window anymore (and its elements are automatically
+      // wrapped). Here we detect and fix that.
+      this.bar.classList.remove('wrapContainers');
+
+      var findbarHeight = this.bar.clientHeight;
+      var inputContainerHeight = this.bar.firstElementChild.clientHeight;
+
+      if (findbarHeight > inputContainerHeight) {
+        // The findbar is taller than the input container, which means that
+        // the browser wrapped some of the elements. For a consistent look,
+        // wrap all of them to adjust the width of the find bar.
+        this.bar.classList.add('wrapContainers');
+      }
+    },
   };
   return PDFFindBar;
 })();
diff --git a/web/viewer.css b/web/viewer.css
index 7b067dcb81834..90ea3b07cdc5c 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -364,6 +364,12 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
 .findbar > div {
   height: 32px;
 }
+.findbar.wrapContainers > div {
+  clear: both;
+}
+.findbar.wrapContainers > div#findbarMessageContainer {
+  height: auto;
+}
 html[dir='ltr'] .findbar {
   left: 68px;
 }