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

@@ -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;
 })();

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;
 }