explain newStyleAs switching

Author: tophf

src/_locales/en/messages.json

@@ -1012,6 +1012,9 @@
   "newStyleAsUserCSS": {
     "message": "Write new style as UserCSS"
   },
+  "newStyleAsUserCSSHint": {
+    "message": "Toggling the option also switches the current style in the editor if it's new, i.e. just created and not edited or saved yet."
+  },
   "noStylesForSite": {
     "message": "No styles installed for this site.",
     "description": "Text displayed when no styles are installed for the current site"
@@ -1524,7 +1527,8 @@
     "description": "Label for the button to restore a removed section"
   },
   "sectionUserCSS": {
-    "message": "The classic sectioned editor doesn't support UserCSS syntax. To use it, enable the UserCSS checkbox first in the manager or the popup and then make a new style, then copy your current code by clicking the Export button in this editor."
+    "message": "The sectioned editor doesn't support UserCSS syntax.\nYou can use it in a new style:\n1. click the Export button in this editor, copy the text,\n2. create a new style in the style manager or the popup,\n3. enable \"[x] $optUserCSS\",\n4. paste the copied text overwriting the default template,\n5. save the new style, disable or remove the old style.",
+    "description": "1) Preserve line breaks for readability. 2) $optUserCSS is replaced with the label of the option e.g. \"[x] Write new style as UserCSS\""
   },
   "sections": {
     "message": "Sections",

src/edit.html

@@ -30,8 +30,7 @@ <h1 class="ellipsis"></h1>
            href="https://github.com/openstyles/stylus/wiki/Writing-styles">
           <i class=i-info></i>
         </a>
-        <a class="usercss-only icon" target="_blank" i18n="title:externalUsercssDocument"
-           href="https://github.com/openstyles/stylus/wiki/Writing-UserCSS">
+        <a class="usercss-only icon" target="_blank" id="usercss-docs">
           <i class=i-usercss style="font-size: 16px"></i>
         </a>
       </div>
@@ -46,6 +45,9 @@ <h1 class="ellipsis"></h1>
           <label id="new-as" class="hide-if-sticky flex">
             <input type="checkbox" id="newStyleAsUsercss">
             <span i18n="newStyleAsUserCSS"></span>
+            <a class=icon tabindex="0" data-cmd="note" style="margin-top: -2px">
+              <i class=i-info></i>
+            </a>
           </label>
           <label id="enabled-label" class="hide-if-sticky"
                  i18n="+styleEnabledLabel, title:toggleStyle"

src/edit/compact-header.js

@@ -2,6 +2,7 @@ import {$create} from '@/js/dom';
 import {mqCompact} from '@/js/dom-init';
 import {important} from '@/js/dom-util';
 import {template} from '@/js/localization';
+import {t} from '@/js/util';
 import editor from './editor';
 
 const h = template.body.$('#header');
@@ -24,11 +25,17 @@ export default function CompactHeader() {
   const xo = new IntersectionObserver(onScrolled, {root: xoRoot});
   const elNewAs = $('#new-as');
   const elInfo = [...$$('#heading a')];
+  const hint = t('newStyleAsUserCSSHint');
+  const elDocs = $('#usercss-docs');
+  const docs = elDocs.title = t('externalUsercssDocument');
+  const docsUrl = elDocs.href = 'https://github.com/openstyles/stylus/wiki/Writing-UserCSS';
   elNewAs.on('click', () => {
     if (!editor.style.id && !editor.dirty.isDirty()) {
       location.reload();
     }
   });
+  elNewAs.$('a').title = `${docs}:\n${docsUrl}\n${hint}`;
+  elNewAs.$('a').dataset.title = `<a href="${docsUrl}">${docs}</a>\n\n${hint}`;
   scroller.appendChild(elHeader);
   mqCompact(val => {
     if (val) {

src/edit/sections-editor-section.js

@@ -4,7 +4,7 @@ import {setupLivePrefs} from '@/js/dom-util';
 import {templateCache, htmlToTemplate, template} from '@/js/localization';
 import * as prefs from '@/js/prefs';
 import {FROM_CSS, TO_CSS} from '@/js/sections-util';
-import {debounce} from '@/js/util';
+import {debounce, t} from '@/js/util';
 import {CodeMirror} from '@/cm';
 import {C_CONTAINER, C_ITEM, C_LIST, C_TYPE, C_VALUE, iconize} from './applies-to';
 import {initBeautifyButton} from './beautify';
@@ -15,6 +15,7 @@ import {htmlEditorSettings} from './settings';
 import {helpPopup, htmlAppliesTo, trimCommentLabel} from './util';
 
 const RX_META1 = /^!?\s*==userstyle==\s*$/i;
+let tplUsercssSection;
 
 export default class EditorSection {
   /**
@@ -183,7 +184,10 @@ export default class EditorSection {
       if (cmt && RX_META1.test(text)) {
         if (elUC) elUC = null;
         else {
-          this.elLabelText.after(elUC = this.elUC = templateCache.usercssSection.cloneNode(true));
+          tplUsercssSection ??= Object.assign(templateCache.usercssSection, {
+            title: t('sectionUserCSS', t('newStyleAsUserCSS')),
+          });
+          this.elLabelText.after(elUC = this.elUC = tplUsercssSection.cloneNode(true));
         }
       } else if (elUC) {
         elUC.remove();

src/edit/sections-editor.html

@@ -25,5 +25,5 @@
 </template>
 
 <template data-id="usercssSection">
-  <a data-cmd="note" i18n="title:sectionUserCSS" class="icon"><i class=i-info></i></a>
+  <a data-cmd="note" class="icon"><i class=i-info></i></a>
 </template>

src/js/dom-on-load.js

@@ -213,6 +213,7 @@ function showTooltipNote(event) {
   const note = event.target.closest('[data-cmd=note]');
   if (note) {
     event.preventDefault();
+    event.stopPropagation();
     const internal = note.dataset.title;
     const text = internal || tooltips.get(note) || note.title;
     messageBox.show({