Add asc label & fix css

_locales/en/messages.json

@@ -840,6 +840,10 @@
     "message": "Select a sort to apply to the installed styles",
     "description": "Title on the sort select to indicate it is used for sorting entries"
   },
+  "sortAscending": {
+    "message": "ascending",
+    "description": "Text added to indicate that a sort is in the ascending (A to Z) direction"
+  },
   "sortDescending": {
     "message": "descending",
     "description": "Text added to indicate that a sort is in the descending (Z to A) direction"

manage.html

@@ -285,16 +285,6 @@
 
     <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
 
-    <div id="sort-wrapper" i18n-title="sortLabel">
-      <div class="sorter-selection">
-        <select id="sort-select"></select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </div>
-      <a href="#" id="sorter-help">
-        <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-      </a>
-    </div>
-
     <label>
       <input id="manage.newUI" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
@@ -325,6 +315,16 @@
      <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
 
+    <div id="sort-wrapper" i18n-title="sortLabel">
+      <div class="sorter-selection">
+        <select id="sort-select"></select>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        <a href="#" id="sorter-help">
+          <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+        </a>
+      </div>
+    </div>
+
     <p>
       <button id="manage-options-button" i18n-text="openOptionsManage"></button>
       <button id="manage-shortcuts-button" class="chromium-only"

manage/manage.css

@@ -264,11 +264,14 @@ select {
 }
 
 #add-style-wrapper,
-#options :last-child,
 #backup :last-child {
   margin-bottom: 0;
 }
 
+#options p:last-of-type {
+  margin-top: 0;
+}
+
 #header details:not([open]),
 #header details:not([open]) h2 {
   padding-bottom: 0;
@@ -327,11 +330,11 @@ select {
   margin: 0;
 }
 
-#newUIoptions > div {
+#newUIoptions > div, #newUIoptions > label {
   margin: 4px 0;
 }
 
-.filter-selection, .sorter-selection {
+.filter-selection {
   position: relative;
   left: -9px;
 }
@@ -358,7 +361,7 @@ select {
   padding-left: 0;
 }
 
-.filter-selection select, .sorter-selection select {
+.filter-selection select {
   height: 18px;
   border: none;
   max-width: 100%;
@@ -367,8 +370,7 @@ select {
   margin-left: 4px;
 }
 
-.filter-selection .select-arrow,
+.filter-selection .select-arrow {
-.sorter-selection .select-arrow {
   margin-top: 2px;
   top: 0;
   right: 0;
@@ -389,8 +391,7 @@ select {
 }
 
 #filters label:hover,
-#filters .filter-selection:hover,
+#filters .filter-selection:hover {
-#options .sorter-selection:hover {
   background-color: hsla(0, 0%, 50%, .2);
 }
 
@@ -422,22 +423,32 @@ select {
   margin: 0 .5em;
 }
 
-#options .sorter-selection {
+#sort-wrapper {
+  margin: 5px 0;
+}
+
+#sort-wrapper .sorter-selection {
+  position: relative;
   display: block;
   left: 0;
   margin-bottom: 4px;
-  max-width: calc(100% - 2em);
+  max-width: calc(100% - 18px);
 }
 
-.sorter-selection select {
+#sort-select {
-  margin-left: 0;
-  padding-left: 0;
   color: inherit;
+  max-width: 100%;
 }
 
-.sorter-selection .select-arrow {
+#sort-wrapper .select-arrow {
+  top: 3px;
+  right: 3px;
+}
+
+#sorter-help {
   position: absolute;
-  right: 0;
+  right: -22px;
+  top: 3px;
 }
 
 .newUI .entry .svg-icon.checked,
@@ -853,7 +864,7 @@ input[id^="manage.newUI"] {
   display: none;
 }
 
-#search-wrapper, #sort-wrapper {
+#search-wrapper {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -1101,7 +1112,7 @@ input[id^="manage.newUI"] {
     margin: 0;
   }
 
-  .filter-selection select, .sorter-selection select {
+  .filter-selection select {
     padding-left: 0;
   }
 

manage/sort.js

@@ -76,12 +76,13 @@ const sortSelectOptions = [
 const sortByRegex = /\s*,\s*/;
 
 function addSortOptions() {
-  const select = $('#options .sorter-selection select');
+  const select = $('#sort-select');
   const renderBin = document.createDocumentFragment();
   const option = $create('option');
   const meta = {
     enabled: t('genericEnabledLabel'),
     disabled: t('genericDisabledLabel'),
+    asc: ` (${t('sortAscending')})`,
     desc: ` (${t('sortDescending')})`,
     dateNew: ` (${t('sortDateNewestFirst')})`,
     dateOld: ` (${t('sortDateOldestFirst')})`,
@@ -163,7 +164,7 @@ function showSortHelp(event) {
 }
 
 function sortInit() {
-  $('#options select').addEventListener('change', manageSort);
+  $('#sort-select').addEventListener('change', manageSort);
   $('#sorter-help').onclick = showSortHelp;
   addSortOptions();
 }