reuse standard style of applies-to in usercss

+ shorten the Test button label

_locales/en/messages.json

@@ -506,6 +506,10 @@
     "message": "Saved",
     "description": "Used in various parts of the UI to indicate that something was saved"
   },
+  "genericTest": {
+    "message": "Test",
+    "description": "Label for the action that runs some test e.g. opens the regexp tester panel in the editor"
+  },
   "genericTitle": {
     "message": "Title",
     "description": "Used in various parts of the UI to indicate the title of something"
@@ -1619,10 +1623,6 @@
     "message": "Number of sections not applied due to incorrect usage of 'regexp()'",
     "description": "Tooltip in the popup for styles that were applied only partially"
   },
-  "styleRegexpTestButton": {
-    "message": "RegExp test",
-    "description": "RegExp test button label in the editor shown when applies-to list has a regexp value"
-  },
   "styleRegexpTestFull": {
     "message": "Matching tabs",
     "description": "RegExp test report: label for the fully matching expressions"

edit.html

@@ -116,7 +116,7 @@
           <button class="move-section-up"></button>
           <button class="move-section-down"></button>
           <button class="beautify-section" i18n-text="styleBeautify"></button>
-          <button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
+          <button class="test-regexp" i18n-text="genericTest"></button>
         </div>
       </div>
     </template>

edit/edit.css

@@ -1012,6 +1012,7 @@ body.linter-disabled .hidden-unless-compact {
 .CodeMirror-linewidget .applies-to {
   margin: 1em 0;
   padding: .75rem calc(.25rem + var(--cm-bar-width, 0)) .25rem .75rem;
+  font-family: var(--family);
 }
 .CodeMirror-linewidget .applies-to li[data-type="regexp"] .test-regexp {
   display: inline;

edit/moz-section-widget.js

@@ -40,11 +40,12 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) {
   };
 
   function init() {
+    const hint = {title: t('appliesHelp')};
     enabled = true;
     TPL = {
       container:
-        $create('div' + C_CONTAINER, {title: t('appliesHelp')}, [
+        $create('div' + C_CONTAINER, [
-          $create(C_LABEL, t('appliesLabel')),
+          $create(C_LABEL, hint, t('appliesLabel')),
           $create('ul' + C_LIST),
         ]),
       listItem:
@@ -53,8 +54,9 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) {
         $create('li.applies-to-everything', t('appliesToEverything')),
     };
 
+    Object.assign($(C_TYPE, TPL.listItem), hint);
     $(C_VALUE, TPL.listItem).after(
-      $create('button.test-regexp', t('styleRegexpTestButton')));
+      $create('button.test-regexp', t('genericTest')));
 
     CLICK_ROUTE = {
       '.test-regexp': showRegExpTester,
@@ -203,7 +205,6 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) {
         color: ${fore};
       }
       ${C_CONTAINER} input,
-      ${C_CONTAINER} button,
       ${C_CONTAINER} select {
         background: rgba(255, 255, 255, ${
           Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)