From 5529cbec2bcc8148ef79d37e00ccaa800098c704 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 28 Jan 2022 03:11:25 +0300
Subject: [PATCH 1/2] fix and simplify editDeleteText context menu

* enable it on inputs added by the user later
* enable it in all of our pages
---
 background/context-menus.js |  2 +-
 edit/edit.js                |  3 ---
 edit/sections-editor.js     | 23 ++---------------------
 js/dom-on-load.js           |  6 ++++++
 4 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/background/context-menus.js b/background/context-menus.js
index e0c50143..430f6216 100644
--- a/background/context-menus.js
+++ b/background/context-menus.js
@@ -32,7 +32,7 @@
       title: 'editDeleteText',
       type: 'normal',
       contexts: ['editable'],
-      documentUrlPatterns: [URLS.ownOrigin + 'edit*'],
+      documentUrlPatterns: [URLS.ownOrigin + '*'],
       click: (info, tab) => {
         msg.sendTab(tab.id, {method: 'editDeleteText'}, undefined, 'extension')
           .catch(msg.ignoreError);
diff --git a/edit/edit.js b/edit/edit.js
index 3790da3b..64e5c0ea 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -79,9 +79,6 @@ msg.onExtension(request => {
         closeCurrentTab();
       }
       break;
-    case 'editDeleteText':
-      document.execCommand('delete');
-      break;
   }
 });
 
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index c77be6df..6a35782b 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -1,12 +1,11 @@
-/* global $ $$ $create $remove messageBoxProxy */// dom.js
+/* global $ $create $remove messageBoxProxy */// dom.js
 /* global API */// msg.js
 /* global CodeMirror */
-/* global FIREFOX RX_META debounce ignoreChromeError */// toolbox.js
+/* global RX_META debounce */// toolbox.js
 /* global MozDocMapper clipString helpPopup rerouteHotkeys showCodeMirrorPopup */// util.js
 /* global createSection */// sections-editor-section.js
 /* global editor */
 /* global linterMan */
-/* global prefs */
 /* global styleSectionsEqual */ // sections-util.js
 /* global t */// localization.js
 'use strict';
@@ -33,10 +32,6 @@ function SectionsEditor() {
   $('#from-mozilla').on('click', () => showMozillaFormatImport());
   document.on('wheel', scrollEntirePageOnCtrlShift, {passive: false});
   CodeMirror.defaults.extraKeys['Shift-Ctrl-Wheel'] = 'scrollWindow';
-  if (!FIREFOX) {
-    $$('input:not([type]), input[type=text], input[type=search], input[type=number]')
-      .forEach(e => e.on('mousedown', toggleContextMenuDelete));
-  }
 
   /** @namespace Editor */
   Object.assign(editor, {
@@ -621,9 +616,6 @@ function SectionsEditor() {
     $('.move-section-down', el).onclick = () => moveSectionDown(section);
     $('.restore-section', el).onclick = () => restoreSection(section);
     cm.on('paste', maybeImportOnPaste);
-    if (!FIREFOX) {
-      cm.on('mousedown', (cm, event) => toggleContextMenuDelete.call(cm, event));
-    }
   }
 
   function maybeImportOnPaste(cm, event) {
@@ -668,15 +660,4 @@ function SectionsEditor() {
     linterMan.enableForEditor(cm);
     cm.refresh();
   }
-
-  function toggleContextMenuDelete(event) {
-    if (chrome.contextMenus && event.button === 2 && prefs.get('editor.contextDelete')) {
-      chrome.contextMenus.update('editor.contextDelete', {
-        enabled: Boolean(
-          this.selectionStart !== this.selectionEnd ||
-          this.somethingSelected && this.somethingSelected()
-        ),
-      }, ignoreChromeError);
-    }
-  }
 }
diff --git a/js/dom-on-load.js b/js/dom-on-load.js
index 58778d8a..3ba84ca7 100644
--- a/js/dom-on-load.js
+++ b/js/dom-on-load.js
@@ -1,5 +1,6 @@
 /* global $$ $ $create focusAccessibility getEventKeyName moveFocus */// dom.js
 /* global clamp debounce */// toolbox.js
+/* global msg */
 /* global t */// localization.js
 'use strict';
 
@@ -15,6 +16,11 @@
   window.on('wheel', changeFocusedInputOnWheel, {capture: true, passive: false});
   window.on('click', e => splitMenu(e) || showTooltipNote(e));
   window.on('resize', () => debounce(addTooltipsToEllipsized, 100));
+  msg.onExtension(request => {
+    if (request.method === 'editDeleteText') {
+      document.execCommand('delete');
+    }
+  });
   // Removing transition-suppressor rule
   const {sheet} = $('link[href$="global.css"]');
   for (let i = 0, rule; (rule = sheet.cssRules[i]); i++) {

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 2/2] 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 {