reuse options' code for notes

+ increase messagebox x icon to avoid misclicks
+ use identical x/y padding for content

Author: tophf

src/js/dlg/message-box.css

@@ -66,7 +66,7 @@
 #message-box-title {
   font-weight: bold;
   background-color: var(--accent-3);
-  padding: .75rem 24px .75rem 52px;
+  padding: .75rem 2.5rem .75rem 52px;
   font-size: 1rem;
   position: relative;
   min-height: 42px;
@@ -107,19 +107,33 @@
   }
 }
 
+#message-box.note {
+  align-items: center;
+  justify-content: center;
+  white-space: pre-wrap;
+  > div {
+    max-width: 40em;
+    top: unset;
+    right: unset;
+    position: relative;
+  }
+}
+
 #message-box-close-icon {
   cursor: pointer;
   position: absolute;
-  right: 3px;
-  top: 4px;
+  right: 0;
+  top: 0;
   & i {
     font-size: 16px;
+    padding: .75rem;
+    display: block;
   }
 }
 
 #message-box-contents {
   overflow: auto;
-  padding: 1.5rem .75rem;
+  padding: 1rem;
   position: relative;
   flex-grow: 9;
   overflow-wrap: break-word;

src/js/dom-on-load.js

@@ -193,12 +193,15 @@ function suppressFocusRingOnClick({target}) {
 }
 
 function interceptClick(event) {
-  const el = event.target.closest('[data-cmd=note]');
-  if (el) {
+  let note = event.target.closest('[data-cmd=note]');
+  if (note) {
     event.preventDefault();
+    note = tooltips.get(note) || note.title;
     messageBox.show({
       className: 'note center-dialog',
-      contents: tHTML(tooltips.get(el) || el.title),
+      contents: note.includes('<') ? tHTML(note) :
+        note.includes('\n') ? $create('div', note.split('\n').map(line => $create('p', line))) :
+          note,
       buttons: [t('confirmClose')],
     });
   }
@@ -210,15 +213,16 @@ function interceptClick(event) {
 function splitLongTooltips() {
   for (const el of $$('[title]')) {
     tooltips.set(el, el.title);
-    el.title = el.title.replace(/\s*<\/?[^>]+>\s*/g, ' '); // strip html tags
+    // Strip html tags but allow <invalid-html-tags> which we use to emphasize stuff
+    el.title = el.title.replace(/(\n\s*)?<\/?[a-z]+[^>]*>(\n\s*)?/g, ' ');
     if (el.title.length < 50) {
       continue;
     }
     const newTitle = el.title
       .split('\n')
       .map(s => s.replace(/([.?!]\s+|[．。？！]\s*|.{50,60},)\s+/gu, '$1\n'))
       .map(s => s.replace(/(.{50,80}(?=.{40,}))\s+/gu, '$1\n'))
-      .join('\n');
+      .join('\n\n');
     if (newTitle !== el.title) el.title = newTitle;
   }
 }

src/manage.html

@@ -235,7 +235,7 @@ <h2 i18n="manageFilters">:
               <option i18n="searchStylesAll" value="all"></option>
             </select>
           </div>
-          <a id="search-help" tabindex="0" class="icon">
+          <a id="search-help" tabindex="0" class="icon" i18n="title:searchStylesHelp">
             <i class=i-info></i>
           </a>
         </div>
@@ -246,7 +246,7 @@ <h2 i18n="manageFilters">:
         <div class="select-wrapper" i18n="title:sortLabel">
           <select id="manage.newUI.sort"></select>
         </div>
-        <a id="sorter-help" tabindex="0" class="icon">
+        <a id="sorter-help" tabindex="0" class="icon" data-cmd="note" i18n="title:sortStylesHelp">
           <i class=i-info></i>
         </a>
       </div>

src/manage/sorter.js

@@ -1,6 +1,5 @@
 import {UCD} from '@/js/consts';
 import {$, $create, dom} from '@/js/dom';
-import {messageBox} from '@/js/dom-util';
 import {t} from '@/js/localization';
 import {installed} from '@/manage/util';
 import * as prefs from '@/js/prefs';
@@ -78,7 +77,6 @@ let minWidth;
 
 export function init() {
   prefs.subscribe(ID, update);
-  $('#sorter-help').onclick = showHelp;
   addOptions();
   prefs.subscribe('manage.minColumnWidth', updateColumnWidth, true);
 }
@@ -203,16 +201,3 @@ function onResize(evt) {
   }
   return c;
 }
-
-async function showHelp(event) {
-  event.preventDefault();
-  messageBox.show({
-    className: 'help-text center-dialog',
-    title: t('sortStylesHelpTitle'),
-    contents:
-      $create('div',
-        t('sortStylesHelp').split('\n').map(line =>
-          $create('p', line))),
-    buttons: [t('confirmOK')],
-  });
-}

src/options/options.css

@@ -203,18 +203,6 @@ a.icon {
   }
 }
 
-#message-box.note {
-  align-items: center;
-  justify-content: center;
-  white-space: pre-wrap;
-  > div {
-    max-width: 40em;
-    top: unset;
-    right: unset;
-    position: relative;
-  }
-}
-
 .sync-status {
   padding-left: 1em;
   box-sizing: border-box;