Added dropdown close on blur for zones dropdown.

Added zones sorting in dropdown menu.

src/webview/index.html

@@ -87,9 +87,9 @@
 
                 <!-- Zones -->
                 <div class="control">
-                    <div class="dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
+                    <div class="dropdown" id="zones-dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
                         <div class="dropdown-trigger">
-                            <button class="button" aria-haspopup="true" aria-controls="zones-menu">
+                            <button class="button" aria-haspopup="true" aria-controls="zones-menu" onblur="closeZonesDropdown()">
                                 <span id="zones-current-name">Select zone</span>
                                 <span class="icon is-small">
                                     <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>

src/webview/scripts.js

@@ -432,8 +432,25 @@ function keystoreChanged(path, pub_key, hash) {
     new_zone_difficulty.disabled = false;
 }
 
+function closeZonesDropdown() {
+    // If we close this right on blur we loose item clicks
+    setTimeout(function(){
+        document.getElementById("zones-dropdown").className = "dropdown";
+    }, 100);
+}
+
 function refreshZonesList() {
     var buf = "";
+    availableZones.sort(function compare(rhs, lhs) {
+        if (rhs.name < lhs.name) {
+            return -1;
+        } else if (rhs.name > lhs.name) {
+            return 1;
+        } else {
+            return 0;
+        }
+    });
+
     availableZones.forEach(function(value, index, array) {
         var zone = value.name + " (" + value.difficulty + "🔥)";
         var add_class = "";