Neat styling of modal popup contents

src/css/contextmenu.css

@@ -286,6 +286,7 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
   vertical-align: middle;
   font-size: 10pt;
   font-family: arial, sans-serif;
+  color: #4d4d4d;
 }
 
 .jsoneditor-modal table td:first-child {
@@ -303,4 +304,31 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
 .jsoneditor-modal .pico-close {
   background: none !important;
   font-size: 24px !important;
-}
+  color: #4d4d4d;
+}
+
+.jsoneditor-modal select,
+.jsoneditor-modal input {
+  background: #f5f5f5;
+  border: 1px solid #d3d3d3;
+  color: #4d4d4d;
+  border-radius: 3px;
+}
+
+.jsoneditor-modal select {
+  padding: 6px 28px 6px 10px;
+
+  /* https://stackoverflow.com/questions/20366166/bootstrap-3-styled-select-dropdown-looks-ugly-in-firefox-on-os-x */
+  background: #f5f5f5 url("data:image/svg+xml,\
+      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
+           height='14px' viewBox='0 0 1200 1000' fill='rgb(77,77,77)'>\
+        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
+      </svg>") no-repeat calc(100% - 5px) 50%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.jsoneditor-modal input {
+  padding: 6px 20px;
+}

src/js/Node.js

@@ -3735,13 +3735,13 @@ Node.prototype._showSortModal = function () {
   picoModal({
     parent: this.editor.frame,
     content: '<div class="pico-modal-contents">' +
-        '<form onsubmit="alert(1)">' +
+        '<form>' +
         '<table>' +
         '<tbody>' +
         '<tr>' +
         '  <td>Sort by:</td>' +
         '  <td class="jsoneditor-modal-input">' +
-        '  <select id="sortBy">' +
+        '  <select id="sortBy" title="A nested field on which to sort the array or object">' +
         '  </select>' +
         '  </td>' +
         '</tr>' +
@@ -3756,7 +3756,7 @@ Node.prototype._showSortModal = function () {
         '</tr>' +
         '<tr>' +
         '<td colspan="2" class="jsoneditor-modal-input">' +
-        '  <button type="submit" id="ok">Sort</button>' +
+        '  <input type="submit" id="ok" value="Sort" />' +
         '</td>' +
         '</tr>' +
         '</tbody>' +
@@ -3769,7 +3769,7 @@ Node.prototype._showSortModal = function () {
       .afterCreate(function (modal) {
         var sortBy = modal.modalElem().querySelector('#sortBy');
         var direction = modal.modalElem().querySelector('#direction');
-        var ok = modal.modalElem().querySelector('#ok');
+        var form = modal.modalElem().querySelector('form');
 
         node.getSortablePaths().sort().forEach(function (path) {
           var option = document.createElement('option');
@@ -3778,7 +3778,9 @@ Node.prototype._showSortModal = function () {
           sortBy.appendChild(option);
         });
 
-        ok.onclick = function () {
+        form.onsubmit = function (event) {
+          event.preventDefault();
+
           modal.close();
 
           var path = sortBy.value;