align 'Applies-to' and actions (#1392)

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>

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: var(--side) solid transparent;
-  border-width: 0 .3em .5em .3em;
+  --side: .4em;
-  border-color: transparent transparent currentColor transparent;
+}
+.move-section-up:after {
+  border-bottom: calc(var(--side) * 1.3) solid currentColor;
+  margin: -50% 0 0 0;
 }
 .move-section-down:after {
-  content: "";
+  border-top: calc(var(--side) * 1.3) solid currentColor;
-  display: block;
+  margin: 0 0 -60% 0;
-  border-style: solid;
-  border-width: .5em .3em 0 .3em;
-  border-color: currentColor transparent transparent transparent;
 }
 /* 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;
+  margin-left: -24px;
-  align-items: center;
+  position: absolute;
-  margin: 0 .2em 0 0;
+  line-height: var(--input-height);
-  white-space: nowrap;
+}
+.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) > * {
+.applies-to .select-resizer {
-  margin: 0 .2rem .5rem 0;
+  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;
+  height: var(--input-height);
-  width: 22px;
+  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 ************/

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');
   }

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);

edit/settings.css

@@ -5,7 +5,7 @@
   width: 90%;
 }
 .style-settings {
-  padding: 0;
+  padding: 0 1px; /* for focus outline */
   border: 0;
   margin: 0;
 }

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;
+  height: var(--input-height);
-  min-height: 22px!important;
+  min-height: var(--input-height)!important;
-  line-height: 22px;
+  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 {

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 {