add option to show 'applies to' first

+ reduce applies-to height
openstyles · Dec 19, 2023 · 0d2df5b · 0d2df5b
1 parent cc626b9
commit 0d2df5b
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 21 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -396,6 +396,10 @@
     },
     "description": "Title of the page for editing styles"
   },
+  "editTargetsFirst": {
+    "message": "Show targets before code",
+    "description": "Option to show targeted sites before the code in the sectioned editor"
+  },
   "editorSettings": {
     "message": "Editor settings"
   },

diff --git a/edit.html b/edit.html
@@ -93,8 +93,8 @@
       <div class="section">
         <label class="code-label"><span i18n="sectionCode"></span><span></span></label>
         <div class="applies-to">
-          <label i18n="appliesLabel, title:appliesHelp" data-cmd="note">
-            <a class="applies-to-help" tabindex="0">
+          <label i18n="appliesLabel, title:appliesHelp">
+            <a tabindex="0">
               <i class=i-info></i>
             </a>
           </label>
@@ -263,6 +263,9 @@
       <label i18n="+appliesLineWidgetLabel, title:appliesLineWidgetWarning" class="usercss-only">
         <input id="editor.appliesToLineWidget" type="checkbox">
       </label>
+      <label i18n="+editTargetsFirst" class="sectioned-only">
+        <input id="editor.targetsFirst" type="checkbox">
+      </label>
     </section>
     <section class="aligned">
       <div>

diff --git a/edit/edit.css b/edit/edit.css
@@ -2,7 +2,7 @@
   --pad: 1rem; /* Edge padding for modals/blocks/whatnot. TODO: reuse it in more places */
   --pad05: calc(0.5 * var(--pad));
   --popup-button-width: 16px;
-  --target-gapY: calc(.25 * var(--pad));
+  --target-gapY: 2px;
 }
 
 body {
@@ -348,7 +348,6 @@ i,
   height: var(--input-height);
 }
 .section:not(.removed) > label {
-  padding-bottom: .25em;
   display: block;
   font-weight: bold;
   animation: 2s highlight;
@@ -406,7 +405,7 @@ i,
   display: none;
 }
 .section .CodeMirror {
-  margin-bottom: var(--target-gapY);
+  margin-bottom: calc(1px + var(--target-gapY));
   box-sizing: border-box;
   min-height: 20px;
   background-color: var(--bg);
@@ -497,7 +496,7 @@ i,
 .applies-to {
   display: flex;
   align-items: flex-start;
-  flex-wrap: wrap;
+  margin-bottom: 1px;
 }
 .applies-to.error {
   background-color: #f002;
@@ -521,6 +520,7 @@ i,
   flex-grow: 1;
   margin: 0;
   padding: 0;
+  --input-height: 1.2rem;
 }
 .applies-to li {
   display: flex;
@@ -539,7 +539,7 @@ i,
   caret-color: auto;
 }
 .applies-to .select-wrapper {
-  margin-right: .5em;
+  margin-right: calc(2px + var(--target-gapY));
 }
 .applies-to li .add-applies-to:first-child {
   margin-left: 1rem;
@@ -851,7 +851,7 @@ i,
 /************ line widget *************/
 .CodeMirror-linewidget .applies-to {
   margin: 0 0 .25em;
-  padding: var(--target-gapY) calc(.25rem + var(--cm-bar-width, 0)) var(--target-gapY) .75rem;
+  padding: var(--target-gapY) calc(.25rem + var(--cm-bar-width, 0)) 0 .75rem;
   font-family: var(--family);
 }
 .CodeMirror-linewidget li.applies-to-everything {

diff --git a/edit/sections-editor-section.js b/edit/sections-editor-section.js
@@ -1,5 +1,5 @@
-/* global $ toggleDataset */// dom.js
-/* global MozDocMapper trimCommentLabel */// util.js
+/* global $ setupLivePrefs toggleDataset */// dom.js
+/* global MozDocMapper helpPopup trimCommentLabel */// util.js
 /* global CodeMirror */
 /* global cmFactory */
 /* global debounce */// toolbox.js
@@ -24,14 +24,15 @@ class EditorSection {
     const me = this; // for tocEntry.removed
     const el = this.el = t.template.section.cloneNode(true);
     const elLabel = this.elLabel = $('.code-label', el);
+    const at = this.targetsEl = $('.applies-to', el);
     const cm = this.cm = el.CodeMirror /* used by getAssociatedEditor */ = cmFactory.create(wrapper => {
       const ws = wrapper.style;
       const h = editor.loading
         // making it tall during initial load so IntersectionObserver sees only one adjacent CM
         ? ws.height = si ? si.height : '100vh'
         : ws.height;
       el.style.setProperty('--cm-height', h);
-      elLabel.after(wrapper);
+      at[prefs.get('editor.targetsFirst') ? 'after' : 'before'](wrapper);
     }, {
       value: sectionData.code,
     });
@@ -52,7 +53,6 @@ class EditorSection {
       },
     };
     this.targets = /** @type {SectionTarget[]} */ [];
-    this.targetsEl = $('.applies-to', el);
     this.targetsListEl = $('.applies-to-list', el);
     this.targetsEl.on('change', this);
     this.targetsEl.on('input', this);
@@ -188,12 +188,19 @@ class EditorSection {
     const cls = el.classList;
     const trgEl = el.closest('.applies-to-item');
     const trg = /** @type {SectionTarget} */ trgEl && trgEl.me;
+    let tmp;
     switch (evt.type) {
       case 'click':
         if (cls.contains('add-applies-to')) {
           $('input', this.addTarget(trg.type, '', trg).el).focus();
         } else if (cls.contains('remove-applies-to')) {
           this.removeTarget(trg);
+        } else if (!this.ati && (tmp = el.closest('label'))) {
+          const chk = $('#editor\\.targetsFirst', t.template.editorSettings.firstChild || document);
+          const chkLabel = chk.closest('label').cloneNode(true);
+          const ati = this.ati = helpPopup.show(chkLabel, tmp.title, {'data-id': 'ati'});
+          ati.onClose.add(() => delete this.ati);
+          setupLivePrefs(chkLabel);
         }
         break;
       case 'change':

diff --git a/edit/sections-editor.js b/edit/sections-editor.js
@@ -35,6 +35,11 @@ function SectionsEditor() {
     for (const {cm} of sections) handleKeydownSetup(cm, val);
     upDownJumps = val;
   }, true);
+  prefs.subscribe('editor.targetsFirst', (_, val) => {
+    for (const sec of sections) {
+      (val ? sec.elLabel : sec.targetsEl.nextSibling).after(sec.targetsEl);
+    }
+  });
 
   /** @namespace Editor */
   Object.assign(editor, {

diff --git a/js/dom.js b/js/dom.js
@@ -306,12 +306,8 @@ function setInputValue(input, value) {
 function setupLivePrefs(ids) {
   let init = true;
   // getElementsByTagName is cached so it's much faster than calling querySelector for each id
-  if (Array.isArray(ids)) {
-    ids = [...ids];
-  } else {
-    ids = (ids instanceof Element ? ids : document).getElementsByTagName('*');
-    ids = prefs.knownKeys.filter(id => id in ids);
-  }
+  const all = (ids instanceof Element ? ids : document).getElementsByTagName('*');
+  ids = Array.isArray(ids) ? [...ids] : prefs.knownKeys.filter(id => id in all);
   prefs.subscribe(ids, updateElement, true);
   init = false;
   function onChange() {
@@ -331,9 +327,9 @@ function setupLivePrefs(ids) {
       oldValue === value;
   }
   function updateElement(id, value) {
-    const byId = document.getElementById(id);
-    const els = byId ? [byId] : document.getElementsByName(id);
-    if (!els.length) {
+    const byId = all[id];
+    const els = byId && byId.id ? [byId] : document.getElementsByName(id);
+    if (!els[0]) {
       prefs.unsubscribe(id, updateElement);
       return;
     }

diff --git a/js/prefs.js b/js/prefs.js
@@ -100,6 +100,7 @@
     'editor.appliesToLineWidget': true, // show applies-to line widget on the editor
     'editor.autosaveDraft': 10, // seconds
     'editor.livePreview': true,
+    'editor.targetsFirst': true,
 
     // show CSS colors as clickable colored rectangles
     'editor.colorpicker': true,