rework/simplify external links

_locales/en/messages.json

@@ -625,6 +625,18 @@
     "message": "Get styles",
     "description": "Help link text on the manage page e.g. https://userstyles.org"
   },
+  "linkGetStylesInfo": {
+    "message": "This archive site was created by a userstyle community member to back up the slow and unresponsive userstyles.org. The archive updates its contents approximately once a day.",
+    "description": "Info shown when clicking the (i) icon of the uso-archive link in the manager"
+  },
+  "linkGetShareStyles": {
+    "message": "Get and share styles",
+    "description": "Link text for https://userstyles.world/ on the manage page"
+  },
+  "linkGetShareStylesInfo": {
+    "message": "The new community-driven userstyles.world site is created by userstyle authors in order to replace userstyles.org, which has been so slow and unresponsive for the past year that many authors stopped updating their styles.",
+    "description": "Info shown when clicking the (i) icon of the userstyles.world link in the manager"
+  },
   "linkStylusWiki": {
     "message": "Wiki",
     "description": "Wiki link text on the manage page e.g. https://github.com/openstyles/stylus/wiki"
@@ -633,10 +645,6 @@
     "message": "Translate",
     "description": "Transifex link text on the manage page"
   },
-  "linkUSW": {
-    "message": "Upload and discover styles on userstyles.world",
-    "description": "Link text for https://userstyles.world/ on the manage page"
-  },
   "linterCSSLintIncompatible": {
     "message": "CSSLint doesn't support $preprocessorname$ preprocessor",
     "placeholders": {

js/dom.js

@@ -1,5 +1,6 @@
 /* global FIREFOX debounce */// toolbox.js
 /* global prefs */
+/* global t */// localization.js
 'use strict';
 
 /* exported
@@ -443,6 +444,7 @@ async function waitForSheet({
   document.documentElement.setAttribute('lang', chrome.i18n.getUILanguage());
   document.on('keypress', clickDummyLinkOnEnter);
   document.on('wheel', changeFocusedInputOnWheel, {capture: true, passive: false});
+  document.on('click', showTooltipNote);
 
   Promise.resolve().then(async () => {
     if (!chrome.app) addFaviconFF();
@@ -451,6 +453,7 @@ async function waitForSheet({
   });
 
   onDOMready().then(() => {
+    splitLongTooltips();
     debounce(addTooltipsToEllipsized, 500);
     window.on('resize', () => debounce(addTooltipsToEllipsized, 100));
   });
@@ -546,6 +549,34 @@ async function waitForSheet({
       }
     }
   }
+
+  function showTooltipNote(event) {
+    const el = event.target.closest('[data-cmd=note]');
+    if (el) {
+      event.preventDefault();
+      window.messageBoxProxy.show({
+        className: 'note',
+        contents: el.dataset.title || el.title,
+        buttons: [t('confirmClose')],
+      });
+    }
+  }
+
+  function splitLongTooltips() {
+    for (const el of $$('[title]')) {
+      el.dataset.title = el.title;
+      el.title = el.title.replace(/<\/?\w+>/g, ''); // strip html tags
+      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;
+    }
+  }
 })();
 
 //#endregion

manage.html

@@ -329,13 +329,21 @@
       </details>
 
       <div id="manage-text">
-        <span><a href="https://33kk.github.io/uso-archive/" target="_blank" i18n-text="linkGetStyles"></a></span>
+        <span>
+          <a href="https://userstyles.world/" target="_blank" i18n-text="linkGetShareStyles"></a>
+          <a tabindex="0" i18n-title="linkGetShareStylesInfo" data-cmd="note">
+            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+          </a>
+        </span>
+        <span>
+          <a href="https://33kk.github.io/uso-archive/" target="_blank" i18n-text="linkGetStyles"></a>
+          <a tabindex="0" i18n-title="linkGetStylesInfo" data-cmd="note">
+            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+          </a>
+        </span>
         <span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
         <span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
         <span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n-text="linkTranslate"></a></span>
-        <span><a href="https://userstyles.world/" target="_blank" i18n-text-append="linkUSW" id="link-usw">
-          <img src="https://userstyles.world/favicon.ico">
-        </a></span>
       </div>
     </div>
   </div>

manage/manage.css

@@ -432,33 +432,17 @@ a:hover {
 #manage-text {
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
   padding-top: .35rem;
 }
-
+#manage-text > * {
+  display: flex;
+  align-items: center;
+}
 #manage-text > :not(:last-child):after {
   content: "|";
   margin: 0 .5em;
 }
 
-#link-usw {
-  display: flex;
-  align-items: center;
-  margin-top: .5em;
-}
-
-#link-usw img {
-  max-width: 2.5em;
-  max-height: 2.5em;
-  margin-right: .75em;
-  filter: grayscale(1);
-  transition: filter .5s;
-}
-
-#link-usw:hover img {
-  filter: none;
-}
-
 .newUI .entry .svg-icon.checked,
 .newUI .entry:hover .svg-icon.checked {
   fill: #000;

options/options.js

@@ -25,7 +25,6 @@
 setupLivePrefs();
 setupRadioButtons();
 $$('input[min], input[max]').forEach(enforceInputRange);
-setTimeout(splitLongTooltips);
 
 if (CHROME_POPUP_BORDER_BUG) {
   const borderOption = $('.chrome-no-popup-border');
@@ -87,15 +86,6 @@ document.onclick = e => {
         .filter(input => prefs.knownKeys.includes(input.id))
         .forEach(input => prefs.reset(input.id));
       break;
-
-    case 'note': {
-      e.preventDefault();
-      messageBoxProxy.show({
-        className: 'note',
-        contents: target.dataset.title,
-        buttons: [t('confirmClose')],
-      });
-    }
   }
 };
 
@@ -229,22 +219,6 @@ function setupRadioButtons() {
   });
 }
 
-function splitLongTooltips() {
-  for (const el of $$('[title]')) {
-    el.dataset.title = el.title;
-    el.title = el.title.replace(/<\/?\w+>/g, ''); // strip html tags
-    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;
-  }
-}
-
 function customizeHotkeys() {
   // command name -> i18n id
   const hotkeys = new Map([