rework/simplify external links (#1244)

* rework/simplify external links
* remove title from svg (i) icon as it randomly shows instead of the parent's title
* ensure original element isn't focused when showing modal
* center more help modals

_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/dlg/message-box.js

@@ -53,6 +53,9 @@ messageBox.show = async ({
   if (focusAccessibility.lastFocusedViaClick && document.activeElement) {
     document.activeElement.dataset.focusedViaClick = '';
   }
+  if (document.activeElement === messageBox._originalFocus) {
+    document.body.focus();
+  }
 
   if (typeof onshow === 'function') {
     onshow(messageBox.element);

js/dom.js

@@ -1,5 +1,6 @@
 /* global FIREFOX debounce */// toolbox.js
 /* global prefs */
+/* global t */// localization.js
 'use strict';
 
 /* exported
@@ -259,7 +260,7 @@ function moveFocus(rootElement, step) {
   const activeIndex = step ? Math.max(step < 0 ? 0 : -1, elements.indexOf(activeEl)) : -1;
   const num = elements.length;
   if (!step) step = 1;
-  for (let i = 1; i < num; i++) {
+  for (let i = 1; i <= num; i++) {
     const el = elements[(activeIndex + i * step + num) % num];
     if (!el.disabled && el.tabIndex >= 0) {
       el.focus();
@@ -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 center-dialog',
+        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>
@@ -354,7 +362,6 @@
   </symbol>
 
   <symbol id="svg-icon-help" viewBox="0 0 14 16">
-    <title i18n-text="helpAlt"></title>
     <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>
 

manage/filters.js

@@ -36,7 +36,7 @@ function initFilters() {
   $('#search-help').onclick = event => {
     event.preventDefault();
     messageBoxProxy.show({
-      className: 'help-text',
+      className: 'help-text center-dialog',
       title: t('search'),
       contents:
         $create('ul',

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;

manage/sorter.js

@@ -189,7 +189,7 @@ const sorter = (() => {
   async function showHelp(event) {
     event.preventDefault();
     messageBoxProxy.show({
-      className: 'help-text',
+      className: 'help-text center-dialog',
       title: t('sortStylesHelpTitle'),
       contents:
         $create('div',

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([