intermediate tweaks and fixes for inline search

* caching of search results and downloaded style info for one day
* no prefetching of styles
* only the next search results page is prefetched in unattended fashion
* the "configure" button is shown only after installation
* join the code in one closure, regroup and simplify some functions

popup.html

@@ -118,6 +118,18 @@
     </div>
   </template>
 
+  <template data-id="searchNav">
+    <div>
+      <button data-role="prev" i18n-title="paginationPrevious" disabled>◄</button>
+      <label>
+        <span data-role="page" i18n-title="paginationCurrent">-</span>
+        /
+        <span data-role="total" i18n-title="paginationTotal">-</span>
+      </label>
+      <button data-role="next" i18n-title="paginationNext" disabled>►</button>
+    </div>
+  </template>
+
   <template data-id="emptySearchResult">
     <div class="search-result-empty"></div>
   </template>
@@ -182,7 +194,6 @@
           </label>
         </span>
       </div>
-      <div id="search-results-error" class="hidden"></div>
       <div id="write-style">
         <span id="write-style-for" i18n-text="writeStyleFor"></span>
       </div>
@@ -200,16 +211,10 @@
   </div>
 
   <div id="search-results" class="hidden">
+    <div id="search-results-nav-top"></div>
+    <div id="search-results-error" class="hidden"></div>
     <div id="search-results-list"></div>
-    <div id="search-results-nav">
+    <div id="search-results-nav-bottom"></div>
-      <button id="search-results-nav-prev" i18n-title="paginationPrevious" disabled>&#8592;</button>
-      <label>
-        <span id="search-results-nav-current-page" i18n-title="paginationCurrent">-</span>
-        /
-        <span id="search-results-nav-total-pages" i18n-title="paginationTotal">-</span>
-      </label>
-      <button id="search-results-nav-next" i18n-title="paginationNext" disabled>&#8594;</button>
-    </div>
   </div>
 
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">

popup/search-results.css

@@ -12,7 +12,7 @@ body.search-results-shown {
   font-weight: bold;
   padding: 5px;
   text-align: center;
-  margin-right: 20px;
+  margin: -.5rem 0 1rem;
 }
 
 #search-results-list {
@@ -20,7 +20,8 @@ body.search-results-shown {
   min-height: 200px;
 }
 
-.search-result, .search-result-empty {
+.search-result,
+.search-result-empty {
   position: relative;
   padding: .75rem;
   min-height: 160px;
@@ -41,6 +42,11 @@ body.search-results-shown {
   transform: scale(.75);
 }
 
+.search-result-fadein {
+  animation: fadein 1s;
+  animation-fill-mode: both;
+}
+
 .search-result-screenshot {
   height: 140px;
   width: 100%;
@@ -182,22 +188,26 @@ body.search-results-shown {
   margin: 3px;
 }
 
-#search-results-nav {
+#search-results-nav-top,
+#search-results-nav-bottom {
   flex-direction: row;
   text-align: center;
   word-break: keep-all;
-  opacity: 1.0;
+  margin-bottom: 1rem;
-  margin-bottom: 10px;
 }
 
-#search-results-nav label {
+#search-results-nav-top button,
-  width: 40px;
+#search-results-nav-bottom button {
-  display: inline-block;
+  -webkit-appearance: none;
-  word-break: keep-all;
+  background: none;
+  border: none;
+  padding: .25rem 1rem;
+  margin: 0 .5rem;
 }
 
-#search-results-nav button {
+#search-results-nav-top button:hover,
-  text-align: center;
+#search-results-nav-bottom button:hover {
+  text-shadow: 0 0 2px currentColor;
 }
 
 #find-styles-inline-group label {
@@ -212,7 +222,6 @@ body.search-results-shown {
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
-  opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
@@ -220,12 +229,13 @@ body.search-results-shown {
   width: 200px; /* don't change! use "transform: scale(.75)" */
   height: 200px; /* don't change! use "transform: scale(.75)" */
   margin: auto;
-  animation: fadein 1s;
+  animation: lds-spinner 1s reverse;
+  animation-fill-mode: both;
 }
 
 @keyframes lds-spinner {
   0% {
-    opacity: .5;
+    opacity: .25;
   }
 
   100% {