use (i) icon in options for the extra info

#334

options.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="global.css">
   <link rel="stylesheet" href="options/options.css">
   <link rel="stylesheet" href="options/onoffswitch.css">
+  <link rel="stylesheet" href="msgbox/msgbox.css">
 
   <style id="firefox-transitions-bug-suppressor">
     /* restrict to FF */
@@ -23,6 +24,7 @@
   <script src="js/localization.js"></script>
   <script src="js/prefs.js"></script>
   <script src="js/storage-util.js" async></script>
+  <script src="msgbox/msgbox.js" async></script>
   <script src="content/apply.js"></script>
 </head>
 
@@ -109,8 +111,12 @@
     <div class="block" id="updates">
       <h1 i18n-text="optionsCustomizeUpdate"></h1>
       <div class="items">
-        <label i18n-title="optionsUpdateImportNote">
-          <span i18n-text="optionsUpdateInterval"> <span data-cmd="note">*</span></span>
+        <label>
+          <span i18n-text="optionsUpdateInterval">
+            <a data-cmd="note" i18n-title="optionsUpdateImportNote" href="#" class="svg-inline-wrapper">
+              <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+            </a>
+          </span>
           <input type="number" min="0" id="updateInterval">
         </label>
       </div>
@@ -129,8 +135,11 @@
       </div>
       <div class="items">
         <label>
-          <span i18n-text="optionsAdvancedExposeIframes"
-                i18n-title="optionsAdvancedExposeIframesNote"> <span data-cmd="note">*</span></span>
+          <span i18n-text="optionsAdvancedExposeIframes">
+            <a data-cmd="note" i18n-title="optionsAdvancedExposeIframesNote" href="#" class="svg-inline-wrapper">
+              <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+            </a>
+          </span>
           <span class="onoffswitch">
             <input type="checkbox" id="exposeIframes" class="slider">
             <span></span>
@@ -159,6 +168,12 @@
     </div>
   </div>
 
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
+    <symbol id="svg-icon-help" viewBox="0 0 14 16">
+      <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
+    </symbol>
+  </svg>
+
   <script src="options/options.js"></script>
 </body>
 </html>

options/options.css

@@ -202,10 +202,6 @@ input[type="color"] {
   justify-content: center;
 }
 
-#updates span {
-  white-space: pre-wrap;
-}
-
 html:not(.firefox):not(.opera) #updates {
   margin-bottom: 0;
 }
@@ -249,19 +245,19 @@ html:not(.firefox):not(.opera) #updates {
   color: #333;
 }
 
-#advanced.collapsible .svg-icon {
+.collapsible-resizer .svg-icon {
   fill: #333;
   transition: fill .5s;
   height: 16px;
   width: 16px;
 }
 
-#advanced.collapsible.collapsed .svg-icon,
-#advanced.collapsible:not(.collapsed) h1:hover .svg-icon {
+#advanced.collapsible.collapsed .collapsible-resizer .svg-icon,
+#advanced.collapsible:not(.collapsed) .collapsible-resizer h1:hover .svg-icon {
   fill: #666;
 }
 
-#advanced.collapsible.collapsed:hover .svg-icon {
+#advanced.collapsible.collapsed:hover .collapsible-resizer .svg-icon {
   fill: #333;
 }
 
@@ -270,7 +266,7 @@ html:not(.firefox):not(.opera) #updates {
 }
 
 #advanced.collapsible.collapsed .is-expanded,
-#advanced:not(.collapsible) .svg-icon {
+#advanced:not(.collapsible) .collapsible-resizer .svg-icon {
   display: none;
 }
 
@@ -278,6 +274,26 @@ html:not(.firefox):not(.opera) #updates {
   display: none;
 }
 
+.svg-inline-wrapper .svg-icon {
+  width: 16px;
+  height: 16px;
+  fill: #666;
+  vertical-align: sub;
+}
+
+.svg-inline-wrapper:hover .svg-icon {
+  fill: #000;
+}
+
+#message-box.note > div {
+  max-width: calc(100vw - 6rem);
+}
+
+.opera #message-box.note,
+.firefox #message-box.note {
+  background-color: transparent;
+}
+
 @keyframes fadeinout {
   0%   { opacity: 0 }
   10%  { opacity: 1 }

options/options.js

@@ -1,3 +1,4 @@
+/* global messageBox */
 'use strict';
 
 setupLivePrefs();
@@ -48,11 +49,12 @@ document.onclick = e => {
       break;
 
     case 'note': {
-      const tooltip = (target.closest('[title]') || {}).title;
-      if (tooltip && 'ontouchstart' in document) {
-        e.preventDefault();
-        target.parentNode.replaceChild($create('.expanded-note', tooltip), target);
-      }
+      e.preventDefault();
+      messageBox({
+        className: 'note',
+        contents: target.title,
+        buttons: [t('confirmClose')],
+      });
     }
   }
 };