simplify the options page

_locales/en/messages.json

@@ -1087,10 +1087,7 @@
     "message": "Popup width (in pixels)"
   },
   "optionsUpdateInterval": {
-    "message": "Automatically check for and install all available userstyle updates (in hrs)"
-  },
-  "optionsUpdateIntervalNote": {
-    "message": "To disable the automatic userstyle update checks, set interval to 0"
+    "message": "Userstyle autoupdate interval in hours (specify 0 to disable)"
   },
   "optionsUpdateImportNote": {
     "message": "When importing style backups from old version or from Stylish, do a one-time check for updates manually in the styles manager to ensure all styles are updated."

options.html

@@ -105,11 +105,11 @@
       </div>
     </div>
 
-    <div class="block">
+    <div class="block" id="updates">
       <h1 i18n-text="optionsCustomizeUpdate"></h1>
       <div class="items">
-        <label>
-          <span i18n-text="optionsUpdateInterval"><sup>1</sup></span>
+        <label i18n-title="optionsUpdateImportNote">
+          <span i18n-text="optionsUpdateInterval"> <span data-cmd="note">*</span></span>
           <input type="number" min="0" id="updateInterval">
         </label>
       </div>
@@ -128,7 +128,8 @@
       </div>
       <div class="items">
         <label>
-          <span i18n-text="optionsAdvancedExposeIframes"> <sup>2</sup></span>
+          <span i18n-text="optionsAdvancedExposeIframes"
+                i18n-title="optionsAdvancedExposeIframesNote"> <span data-cmd="note">*</span></span>
           <span class="onoffswitch">
             <input type="checkbox" id="exposeIframes" class="slider">
             <span></span>
@@ -157,16 +158,6 @@
     </div>
   </div>
 
-  <div id="notes">
-    <ol>
-      <li>
-        <p i18n-text="optionsUpdateIntervalNote"></p>
-        <p i18n-text="optionsUpdateImportNote"></p>
-      </li>
-      <li i18n-text="optionsAdvancedExposeIframesNote"></li>
-    </ol>
-  </div>
-
   <script src="options/options.js"></script>
 </body>
 </html>

options/options.css

@@ -13,17 +13,12 @@ html.firefox .block {
   padding-left: 6px;
 }
 
-html.firefox #notes {
-  padding-left: calc(6px + 2ex);
-}
-
 body {
   background: #fff;
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 12px;
-  width: 480px;
-  min-width: 400px;
+  min-width: 480px;
   max-width: 800px;
 }
 
@@ -145,11 +140,22 @@ input[type="color"] {
 #actions {
   justify-content: space-around;
   align-items: stretch;
-  padding-right: 8px;
+  padding: 1em;
+  white-space: nowrap;
+  background-color: hsl(0, 0%, 94%);
+  margin: 0;
+}
+
+.firefox #actions,
+.opera #actions {
+  background-color: transparent;
 }
 
 #actions button {
   width: auto;
+}
+
+#actions button:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -190,13 +196,21 @@ input[type="color"] {
 }
 
 #advanced.collapsible.collapsed {
-  height: 40px;
+  height: 30px;
   padding: 0;
   margin: 0;
   justify-content: center;
 }
 
-html:not(.firefox):not(.opera) #options > .block:nth-last-of-type(3) {
+#updates span {
+  white-space: pre-wrap;
+}
+
+html:not(.firefox):not(.opera) #updates {
+  margin-bottom: 0;
+}
+
+#advanced.collapsible:not(.collapsed) {
   margin-bottom: 0;
 }
 
@@ -264,45 +278,19 @@ html:not(.firefox):not(.opera) #options > .block:nth-last-of-type(3) {
   display: none;
 }
 
-#notes {
-  background-color: #f4f4f4;
-  padding: 1.5ex 16px 1ex calc(16px + 2ex);
-  font-size: 90%;
-  color: #777;
-}
-
-#notes ol {
-  margin: 0;
-  padding: 0;
-}
-
-#notes li:not(last-child) {
-  margin-bottom: 1ex;
-}
-
-#notes a {
-  color: inherit;
-}
-
-#notes a:hover {
-  color: black;
-}
-
-#notes p {
-  line-height: 1.25;
-  margin-top: 1ex;
-  margin-bottom: 1ex;
-}
-
-sup {
-  vertical-align: baseline;
-  position: relative;
-  top: -0.4em;
-}
-
 @keyframes fadeinout {
   0%   { opacity: 0 }
   10%  { opacity: 1 }
   25%  { opacity: 1 }
   100% { opacity: 0 }
 }
+
+@media (hover: none) {
+  .expanded-note {
+    font-size: 90%;
+    white-space: normal;
+    color: #666;
+    margin-top: .5em;
+    hyphens: auto;
+  }
+}

options/options.js

@@ -3,6 +3,7 @@
 setupLivePrefs();
 setupRadioButtons();
 enforceInputRange($('#popupWidth'));
+setTimeout(splitLongTooltips);
 
 if (!FIREFOX && !OPERA) {
   const block = $('#advanced');
@@ -42,6 +43,14 @@ document.onclick = e => {
         .filter(input => input.id in prefs.readOnlyValues)
         .forEach(input => prefs.reset(input.id));
       break;
+
+    case 'note': {
+      const tooltip = (target.closest('[title]') || {}).title;
+      if (tooltip && 'ontouchstart' in document) {
+        e.preventDefault();
+        target.parentNode.replaceChild($create('.expanded-note', tooltip), target);
+      }
+    }
   }
 };
 
@@ -95,3 +104,19 @@ function setupRadioButtons() {
     sets[key][value].checked = true;
   });
 }
+
+function splitLongTooltips() {
+  for (const el of $$('[title]')) {
+    if (el.title.length < 50) {
+      continue;
+    }
+    const newTitle = el.title
+      .split('\n')
+      .map(s => s.replace(/([^.][.。?!]|.{50,60},)\s+/g, '$1\n'))
+      .map(s => s.replace(/(.{50,80}(?=.{40,}))\s+/g, '$1\n'))
+      .join('\n');
+    if (newTitle !== el.title) {
+      el.title = newTitle;
+    }
+  }
+}