Merge pull request #2208 from yurydelendik/find-ui-1

Add pilot find next/prev icons; localization

l10n/ar/viewer.properties

@@ -36,8 +36,8 @@ outline.title=إظهار ملخص المستند
 outline_label=ملخص المستند
 thumbs.title=إظهار الصور المصغرة
 thumbs_label=الصور المصغرة
-find_panel.title=البحث في المستند
-find_panel_label=بحث
+findbar.title=البحث في المستند
+findbar_label=بحث
 
 # Document outline messages
 no_outline=لا يوجد ملخص

l10n/da/viewer.properties

@@ -36,8 +36,8 @@ outline.title=Vis dokumentoversigt
 outline_label=Dokumentoversigt
 thumbs.title=Vis thumbnails
 thumbs_label=Thumbnails
-find_panel.title=Søg i dokumentet
-find_panel_label=Søg
+findbar.title=Søg i dokumentet
+findbar_label=Søg
 
 # Dokumentoversigtsbeskeder
 no_outline=Ingen dokumentoversigt tilgængelig

l10n/en-US/viewer.properties

@@ -36,6 +36,8 @@ outline.title=Show Document Outline
 outline_label=Document Outline
 thumbs.title=Show Thumbnails
 thumbs_label=Thumbnails
+findbar.title=Find in Document
+findbar_label=Find
 
 # Document outline messages
 no_outline=No Outline Available
@@ -53,10 +55,11 @@ page_rotate_cw.label=Rotate Clockwise
 page_rotate_ccw.label=Rotate Counter-Clockwise
 
 # Find panel button title and messages
-find.title=Find in Document
-find_label=Find
+find_label=Find:
 find_previous.title=Find the previous occurrence of the phrase
+find_previous_label=Previous
 find_next.title=Find the next occurrence of the phrase
+find_next_label=Next
 find_highlight=Highlight all
 find_match_case_label=Match case
 find_wrapped_to_bottom=Reached end of page, continued from bottom

l10n/es/viewer.properties

@@ -36,8 +36,8 @@ outline.title=Mostrar esquema del documento
 outline_label=Esquema del documento
 thumbs.title=Mostrar miniaturas
 thumbs_label=Miniaturas
-find_panel.title=Buscar en el documento
-find_panel_label=Buscar
+findbar.title=Buscar en el documento
+findbar_label=Buscar
 
 # Document outline messages
 no_outline=No hay un esquema disponible

l10n/fi/viewer.properties

@@ -36,8 +36,8 @@ outline.title=Näytä asiakirjan jäsennys
 outline_label=Asiakirjan jäsennys
 thumbs.title=Näytä esikatselukuvat
 thumbs_label=Esikatselukuvat
-find_panel.title=Etsi asiakirjasta
-find_panel_label=Etsi
+findbar.title=Etsi asiakirjasta
+findbar_label=Etsi
 
 # Document outline messages
 no_outline=Jäsennystä ei ole tarjolla

l10n/ja/viewer.properties

@@ -36,8 +36,8 @@ outline.title=文書の目次
 outline_label=文書の目次
 thumbs.title=縮小版
 thumbs_label=縮小版
-find_panel.title=検索
-find_panel_label=検索
+findbar.title=検索
+findbar_label=検索
 
 # Document outline messages
 no_outline=利用可能な目次はありません

l10n/nl/viewer.properties

@@ -34,8 +34,8 @@ outline.title=Toon document structuur
 outline_label=Document structuur
 thumbs.title=Toon miniaturen
 thumbs_label=Miniaturen
-find_panel.title=Doorzoek document
-find_panel_label=Zoek
+findbar.title=Doorzoek document
+findbar_label=Zoek
 
 # Document outline messages
 no_outline=Geen structuur beschikbaar

l10n/sv/viewer.properties

@@ -34,8 +34,8 @@ outline.title=Visa dokumentdisposition
 outline_label=Dokumentdisposition
 thumbs.title=Visa miniatyrer
 thumbs_label=Miniatyrer
-find_panel.title=Sök i dokumentet
-find_panel_label=Sök
+findbar.title=Sök i dokumentet
+findbar_label=Sök
 
 # Document outline messages
 no_outline=Ingen dokumentdisposition tillgänglig

l10n/zh-TW/viewer.properties

@@ -34,6 +34,8 @@ outline.title=顯示文件綱要
 outline_label=文件綱要
 thumbs.title=顯示縮圖
 thumbs_label=縮圖
+findbar.title=在文件中搜尋
+findbar_label=搜索
 
 # 文件綱要相關訊息
 no_outline=無可用的綱要
@@ -49,7 +51,6 @@ page_rotate_cw.label=順時針旋轉
 page_rotate_ccw.label=逆時針旋轉
 
 # 搜尋面板按鍵文字及訊息
-find.title=在文件中搜尋
 find_label=搜尋
 find_previous.title=尋找上一個出現的詞組
 find_next.title=尋找下一個出現的詞組

web/viewer.css

@@ -268,22 +268,28 @@ html[dir='rtl'] #sidebarContent {
 
 .findbar {
   top: 32px;
-  left: 68px;
   position: absolute;
   z-index: 10000;
-  height: 24px;
+  height: 32px;
 
   min-width: 16px;
-  padding: 3px 6px 3px 6px;
-  margin: 4px 2px 4px 0;
+  padding: 0px 6px 0px 6px;
+  margin: 4px 2px 4px 2px;
   color: hsl(0,0%,85%);
   font-size: 12px;
   line-height: 14px;
   text-align: left;
-  white-space: nowrap;
   cursor: default;
 }
 
+html[dir='ltr'] .findbar {
+  left: 68px;
+}
+
+html[dir='rtl'] .findbar {
+  right: 68px;
+}
+
 .findbar label {
   -webkit-user-select:none;
   -moz-user-select:none;
@@ -306,16 +312,32 @@ html[dir='rtl'] #sidebarContent {
 .doorHanger:after {
   border-bottom-color: hsla(0,0%,32%,.99);
   border-width: 8px;
-  left: 16px;
-  margin-left: -8px;
 }
 .doorHanger:before {
   border-bottom-color: hsla(0,0%,0%,.5);
   border-width: 9px;
+}
+
+html[dir='ltr'] .doorHanger:after {
+  left: 16px;
+  margin-left: -8px;
+}
+
+html[dir='ltr'] .doorHanger:before {
   left: 16px;
   margin-left: -9px;
 }
 
+html[dir='rtl'] .doorHanger:after {
+  right: 16px;
+  margin-right: -8px;
+}
+
+html[dir='rtl'] .doorHanger:before {
+  right: 16px;
+  margin-right: -9px;
+}
+
 #findMsg {
   font-style: italic;
   color: #A6B7D0;
@@ -347,12 +369,14 @@ html[dir='rtl'] #toolbarViewerLeft {
 }
 html[dir='ltr'] #toolbarViewerLeft > *,
 html[dir='ltr'] #toolbarViewerMiddle > *,
-html[dir='ltr'] #toolbarViewerRight > * {
+html[dir='ltr'] #toolbarViewerRight > *,
+html[dir='ltr'] .findbar > * {
   float: left;
 }
 html[dir='rtl'] #toolbarViewerLeft > *,
 html[dir='rtl'] #toolbarViewerMiddle > *,
-html[dir='rtl'] #toolbarViewerRight > * {
+html[dir='rtl'] #toolbarViewerRight > *,
+html[dir='rtl'] .findbar > * {
   float: right;
 }
 
@@ -690,6 +714,26 @@ html[dir='rtl'] .toolbarButton:first-child {
   content: url(images/toolbarButton-sidebarToggle.png);
 }
 
+html[dir='ltr'] .toolbarButton.findPrevious::before {
+  display: inline-block;
+  content: url(images/findbarButton-previous.png);
+}
+
+html[dir='rtl'] .toolbarButton.findPrevious::before {
+  display: inline-block;
+  content: url(images/findbarButton-previous-rtl.png);
+}
+
+html[dir='ltr'] .toolbarButton.findNext::before {
+  display: inline-block;
+  content: url(images/findbarButton-next.png);
+}
+
+html[dir='rtl'] .toolbarButton.findNext::before {
+  display: inline-block;
+  content: url(images/findbarButton-next-rtl.png);
+}
+
 html[dir='ltr'] .toolbarButton.pageUp::before {
   display: inline-block;
   content: url(images/toolbarButton-pageUp.png);
@@ -789,6 +833,11 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
   -moz-transition-timing-function: ease;
 }
 
+.toolbarField[type=checkbox] {
+  display: inline-block;
+  margin: 8px 0px;
+}
+
 .toolbarField.pageNumber {
   min-width: 16px;
   text-align: right;

web/viewer.html

@@ -99,15 +99,22 @@ limitations under the License.
 
       <div id="mainContainer">
         <div class="findbar hidden doorHanger" id="findbar">
-          <label for="findInput" data-l10n-id="find_label">Find</label>
-          <input id="findInput" type="search">
-          <button id="findPrevious" data-l10n-id="find_previous" title="">&lt;</button>
-          <button id="findNext" data-l10n-id="find_next">&gt;</button>
-          <input type="checkbox" id="findHighlightAll">
-          <label for="findHighlightAll" data-l10n-id="find_highlight">Highlight all</label>
-          <input type="checkbox" id="findMatchCase">
-          <label for="findMatchCase" data-l10n-id="find_match_case_label">Match case</label>
-          <span id="findMsg"></span>
+          <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
+          <input id="findInput" class="toolbarField" tabindex="20">
+          <div class="splitToolbarButton">
+            <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="21" 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="22" data-l10n-id="find_next">
+              <span data-l10n-id="find_next_label">Next</span>
+            </button>
+          </div>
+          <input type="checkbox" id="findHighlightAll" class="toolbarField">
+          <label for="findHighlightAll" class="toolbarLabel" tabindex="23" data-l10n-id="find_highlight">Highlight all</label>
+          <input type="checkbox" id="findMatchCase" class="toolbarField">
+          <label for="findMatchCase" class="toolbarLabel" tabindex="24" data-l10n-id="find_match_case_label">Match case</label>
+          <span id="findMsg" class="toolbarLabel"></span>
         </div>
         <div class="toolbar">
           <div id="toolbarContainer">
@@ -117,8 +124,8 @@ limitations under the License.
                   <span data-l10n-id="toggle_slider_label">Toggle Sidebar</span>
                 </button>
                 <div class="toolbarButtonSpacer"></div>
-                <button id="viewFind" class="toolbarButton group" title="Find in Document" tabindex="4" data-l10n-id="find">
-                   <span data-l10n-id="find_label">Find</span>
+                <button id="viewFind" class="toolbarButton group" title="Find in Document" tabindex="4" data-l10n-id="findbar">
+                   <span data-l10n-id="findbar_label">Find</span>
                 </button>
                 <div class="splitToolbarButton">
                   <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="5" data-l10n-id="previous">