Add some door hanger styling for the find bar

web/viewer.css

@@ -267,17 +267,15 @@ html[dir='rtl'] #sidebarContent {
 }
 
 .findbar {
-  top: 40px;
+  top: 32px;
-  left: 40px;
+  left: 68px;
   position: absolute;
-  z-index: 100;
+  z-index: 10000;
   height: 20px;
 
   min-width: 16px;
   padding: 3px 6px 3px 6px;
   margin: 4px 2px 4px 0;
-  border: 1px solid transparent;
-  border-radius: 2px;
   color: hsl(0,0%,85%);
   font-size: 12px;
   line-height: 14px;
@@ -290,6 +288,33 @@ html[dir='rtl'] #sidebarContent {
   -moz-user-select:none;
 }
 
+.doorHanger {
+  border: 1px solid hsla(0,0%,0%,.5);
+  border-radius: 2px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.doorHanger:after, .doorHanger:before {
+  bottom: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.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;
+  left: 16px;
+  margin-left: -9px;
+}
+
 #findMsg {
   font-style: italic;
   color: #A6B7D0;
@@ -1317,7 +1342,7 @@ canvas {
 }
 
 @media all and (max-width: 600px) {
-  #toolbarViewerRight {
+  #toolbarViewerRight, #findbar, #viewFind {
     display: none;
   }
 }

web/viewer.html

@@ -88,11 +88,6 @@ limitations under the License.
           <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" tabindex="2" data-l10n-id="outline">
              <span data-l10n-id="outline_label">Document Outline</span>
           </button>
-<!--#if !MOZCENTRAL-->
-          <button id="viewFind" class="toolbarButton group" title="Find in Document" tabindex="3" data-l10n-id="find_panel">
-             <span data-l10n-id="find_panel_label">Find in Document</span>
-          </button>
-<!--#endif-->
         </div>
         <div id="sidebarContent">
           <div id="thumbnailView">
@@ -103,7 +98,7 @@ limitations under the License.
       </div>  <!-- sidebarContainer -->
 
       <div id="mainContainer">
-        <div class="findbar hidden" id="findbar">
+        <div class="findbar hidden doorHanger" id="findbar">
           <label for="findInput">Find: </label>
           <input id="findInput" type="search">
           <button id="findPrevious">&lt;</button>
@@ -118,10 +113,15 @@ limitations under the License.
           <div id="toolbarContainer">
             <div id="toolbarViewer">
               <div id="toolbarViewerLeft">
-                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="4" data-l10n-id="toggle_slider">
+                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="3" data-l10n-id="toggle_slider">
                   <span data-l10n-id="toggle_slider_label">Toggle Sidebar</span>
                 </button>
                 <div class="toolbarButtonSpacer"></div>
+<!--#if !MOZCENTRAL-->
+                <button id="viewFind" class="toolbarButton group" title="Find in Document" tabindex="4" data-l10n-id="find_panel">
+                   <span data-l10n-id="find_panel_label">Find in Document</span>
+                </button>
+<!--#endif-->
                 <div class="splitToolbarButton">
                   <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="5" data-l10n-id="previous">
                     <span data-l10n-id="previous_label">Previous</span>