From f9e11f5806470c6b0050c39488b0a41b107f7c59 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 28 Jan 2022 15:52:55 +0300
Subject: [PATCH] align 'Applies-to' and actions (#1392)

---
 edit.html                       |  2 +-
 edit/edit.css                   | 55 +++++++++++++++++++--------------
 edit/sections-editor-section.js |  9 ++++--
 edit/sections-editor.js         |  1 -
 edit/settings.css               |  2 +-
 global.css                      | 14 ++++++---
 js/dlg/config-dialog.css        |  4 +--
 7 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/edit.html b/edit.html
index 8907cd5b..4187c37f 100644
--- a/edit.html
+++ b/edit.html
@@ -102,7 +102,7 @@
         </p>
         <label i18n-text="sectionCode" class="code-label"></label>
         <div class="applies-to">
-          <label i18n-text="appliesLabel">
+          <label i18n-text="appliesLabel" data-cmd="note" i18n-title="appliesHelp">
             <a class="svg-inline-wrapper applies-to-help" tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
diff --git a/edit/edit.css b/edit/edit.css
index 28011872..8cf9740d 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -191,9 +191,6 @@ label {
 #colorpicker-settings.svg-inline-wrapper {
   margin: -2px 0 0 .1rem;
 }
-.svg-inline-wrapper.applies-to-help {
-  margin: 0 0 0 .25rem;
-}
 .aligned .svg-inline-wrapper {
   margin: -2px 0 0 .3rem;
 }
@@ -456,7 +453,7 @@ input:invalid {
   display: none;
 }
 .section .CodeMirror {
-  margin-bottom: .875rem;
+  margin-bottom: .5em;
   box-sizing: border-box;
 }
 /* deleted section */
@@ -475,19 +472,20 @@ input:invalid {
 .section.removed .CodeMirror {
   display: none;
 }
+.move-section-down:after,
 .move-section-up:after {
   content: "";
   display: block;
-  border-style: solid;
-  border-width: 0 .3em .5em .3em;
-  border-color: transparent transparent currentColor transparent;
+  border: var(--side) solid transparent;
+  --side: .4em;
+}
+.move-section-up:after {
+  border-bottom: calc(var(--side) * 1.3) solid currentColor;
+  margin: -50% 0 0 0;
 }
 .move-section-down:after {
-  content: "";
-  display: block;
-  border-style: solid;
-  border-width: .5em .3em 0 .3em;
-  border-color: currentColor transparent transparent transparent;
+  border-top: calc(var(--side) * 1.3) solid currentColor;
+  margin: 0 0 -60% 0;
 }
 /* code */
 .code {
@@ -579,12 +577,19 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   border-color: #f008;
 }
 .applies-to label {
-  display: flex;
+  font-size: 0;
   padding: 0;
-  height: 22px;
-  align-items: center;
-  margin: 0 .2em 0 0;
-  white-space: nowrap;
+  margin-left: -24px;
+  position: absolute;
+  line-height: var(--input-height);
+}
+.compact-layout .applies-to label {
+  display: none;
+}
+.compact-layout .applies-to[data-all] label {
+  position: static;
+  display: inline;
+  margin: 0 6px 0 -4px;
 }
 .applies-to ul {
   flex: auto;
@@ -597,16 +602,17 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   flex-wrap: wrap;
   list-style-type: none;
   align-items: center;
+  margin-bottom: .5em;
 }
 .applies-to li.applies-to-everything {
   align-items: unset;
-  line-height: 22px;
+  line-height: var(--input-height);
 }
 .applies-to li > input {
   min-height: 1.4rem;
 }
-.applies-to li:not(.applies-to-everything) > * {
-  margin: 0 .2rem .5rem 0;
+.applies-to .select-resizer {
+  margin-right: .5em;
 }
 .applies-to li .add-applies-to:first-child {
   margin-left: 1rem;
@@ -625,8 +631,8 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 .add-applies-to,
 .remove-applies-to {
   font-size: 0;
-  height: 22px;
-  width: 22px;
+  height: var(--input-height);
+  width: var(--input-height);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -812,7 +818,10 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   margin: .25em 0;
 }
 #help-popup .buttons > :nth-child(n + 2) {
-  margin-inline: .5em 0;
+  margin: 0 0 0 .5em;
+}
+.non-windows #help-popup .buttons > :nth-child(n + 2) {
+  margin: 0 .5em 0 0;
 }
 
 /************ lint ************/
diff --git a/edit/sections-editor-section.js b/edit/sections-editor-section.js
index a8cee631..8af726e0 100644
--- a/edit/sections-editor-section.js
+++ b/edit/sections-editor-section.js
@@ -1,4 +1,4 @@
-/* global $ */// dom.js
+/* global $ toggleDataset */// dom.js
 /* global MozDocMapper trimCommentLabel */// util.js
 /* global cmFactory */
 /* global debounce tryRegExp */// toolbox.js
@@ -35,7 +35,8 @@ function createSection(originalSection, genId, si) {
 
   const changeListeners = new Set();
 
-  const appliesToContainer = $('.applies-to-list', el);
+  const appliesToContainer = $('.applies-to', el);
+  const appliesToList = $('.applies-to-list', el);
   const appliesTo = [];
   MozDocMapper.forEachProp(originalSection, (type, value) =>
     insertApplyAfter({type, value}));
@@ -234,7 +235,8 @@ function createSection(originalSection, genId, si) {
   function insertApplyAfter(init, base) {
     const apply = createApply(init);
     appliesTo.splice(base ? appliesTo.indexOf(base) + 1 : appliesTo.length, 0, apply);
-    appliesToContainer.insertBefore(apply.el, base ? base.el.nextSibling : null);
+    appliesToList.insertBefore(apply.el, base ? base.el.nextSibling : null);
+    toggleDataset(appliesToContainer, 'all', init.all);
     dirty.add(apply, apply);
     if (appliesTo.length > 1 && appliesTo[0].all) {
       removeApply(appliesTo[0]);
@@ -251,6 +253,7 @@ function createSection(originalSection, genId, si) {
     dirty.remove(apply, apply);
     if (!appliesTo.length) {
       insertApplyAfter({all: true});
+      toggleDataset(appliesToContainer, 'all', true);
     }
     emitSectionChange('apply');
   }
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index 6a35782b..a45a822e 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -608,7 +608,6 @@ function SectionsEditor() {
   /** @param {EditorSection} section */
   function registerEvents(section) {
     const {el, cm} = section;
-    $('.applies-to-help', el).onclick = () => helpPopup.show(t('appliesLabel'), t('appliesHelp'));
     $('.remove-section', el).onclick = () => removeSection(section);
     $('.add-section', el).onclick = () => insertSectionAfter(undefined, section);
     $('.clone-section', el).onclick = () => insertSectionAfter(section.getModel(), section);
diff --git a/edit/settings.css b/edit/settings.css
index d4da2290..3bf71cce 100644
--- a/edit/settings.css
+++ b/edit/settings.css
@@ -5,7 +5,7 @@
   width: 90%;
 }
 .style-settings {
-  padding: 0;
+  padding: 0 1px; /* for focus outline */
   border: 0;
   margin: 0;
 }
diff --git a/global.css b/global.css
index e6c9229a..502944a6 100644
--- a/global.css
+++ b/global.css
@@ -6,6 +6,7 @@ html#stylus #header *:not(#\1transition-suppressor) {
 }
 :root {
   --family: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
+  --input-height: 22px;
 }
 body {
   font: normal 12px var(--family);
@@ -68,12 +69,14 @@ input {
 }
 
 input:not([type]),
+input[type=text],
 input[type=search] {
   background: #fff;
   color: #000;
-  height: 22px;
-  min-height: 22px!important;
-  line-height: 22px;
+  height: var(--input-height);
+  min-height: var(--input-height)!important;
+  line-height: var(--input-height);
+  box-sizing: border-box;
   padding: 0 3px;
   border: 1px solid hsl(0, 0%, 66%);
 }
@@ -164,7 +167,7 @@ label {
 select {
   -moz-appearance: none;
   -webkit-appearance: none;
-  height: 22px;
+  height: var(--input-height);
   font: inherit;
   color: #000;
   background-color: transparent;
@@ -253,6 +256,7 @@ summary {
 textarea[data-focused-via-click]:focus,
 input:not([type])[data-focused-via-click]:focus, /* same as "text" */
 input[type="text"][data-focused-via-click]:focus,
+input[type="url"][data-focused-via-click]:focus,
 input[type="search"][data-focused-via-click]:focus,
 input[type="number"][data-focused-via-click]:focus {
   /* Using box-shadow instead of the ugly outline in new Chrome */
@@ -371,7 +375,7 @@ body.resizing-v > * {
 
   .firefox select {
     padding: 0 20px 0 2px;
-    line-height: 22px!important;
+    line-height: var(--input-height)!important;
   }
 
   svg {
diff --git a/js/dlg/config-dialog.css b/js/dlg/config-dialog.css
index 7464e30c..a2932437 100644
--- a/js/dlg/config-dialog.css
+++ b/js/dlg/config-dialog.css
@@ -67,7 +67,7 @@
 .config-body .onoffswitch {
   width: var(--onoffswitch-width);
   margin: 0;
-  height: 22px;
+  height: var(--input-height);
   box-sizing: border-box;
   vertical-align: middle;
 }
@@ -112,7 +112,7 @@
  }
 
 .config-number span, .config-range span {
-  line-height: 22px;
+  line-height: var(--input-height);
 }
 
 .config-body label:not(.nondefault) .config-reset-icon {