Merge pull request #8132 from timvandermeij/findbar-responsiveness

Viewer: enable find functionality for small devices

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/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

@@ -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,21 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   cursor: default;
 }
 
+.findbar {
+  min-width: 300px;
+}
+.findbar > div {
+  height: 32px;
+}
+.findbar.wrapContainers > div {
+  clear: both;
+}
+.findbar.wrapContainers > div#findbarMessageContainer {
+  height: auto;
+}
 html[dir='ltr'] .findbar {
   left: 68px;
 }
-
 html[dir='rtl'] .findbar {
   right: 68px;
 }
@@ -372,6 +382,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;
@@ -463,6 +488,9 @@ html[dir='ltr'] .doorHangerRight:before {
   font-style: italic;
   color: #A6B7D0;
 }
+#findMsg:empty {
+  display: none;
+}
 
 #findInput.notFound {
   background-color: rgb(255, 102, 102);
@@ -485,14 +513,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;
 }
@@ -1898,7 +1926,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 }
 
 @media all and (max-width: 640px) {
-  .hiddenSmallView {
+  .hiddenSmallView, .hiddenSmallView * {
     display: none;
   }
   .visibleSmallView {
@@ -1907,6 +1935,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) {

web/viewer.html

@@ -97,9 +97,9 @@ See https://github.com/adobe-type-tools/cmap-resources
       </div>  <!-- sidebarContainer -->
 
       <div id="mainContainer">
-        <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
+        <div class="findbar hidden doorHanger" id="findbar">
-          <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
+          <div id="findbarInputContainer">
-          <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>
@@ -109,12 +109,19 @@ See https://github.com/adobe-type-tools/cmap-resources
                 <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>
         </div>  <!-- findbar -->
 
         <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
@@ -179,10 +186,10 @@ See https://github.com/adobe-type-tools/cmap-resources
                   <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>