Allow users to wait for up to 5 minutes, and humanize time.

js/options.js

@@ -18,8 +18,8 @@ function restoreOptions() {
     $('blocklist').value = items.blocklist;
 
     // Setting value does not trigger click oninput event.
-    $('waitTimeOutput').value = items.waitTime;
-    $('blockTimeOutput').value = items.blockTime;
+    $('waitTimeOutput').value = humanizeTime(items.waitTime);
+    $('blockTimeOutput').value = humanizeTime(items.blockTime * 60);
   });
 }
 
@@ -28,12 +28,25 @@ function $(id) {
   return document.getElementById(id);
 }
 
+function humanizeTime(seconds) {
+  var str = "";
+  if (seconds > 59) {
+    str += Math.floor(seconds / 60) + " minutes ";
+    seconds = seconds % 60;
+  }
+  // For 0 seconds we want to display '0 seconds'
+  if (str == "" || seconds > 0) {
+    str += seconds + " seconds";
+  }
+  return str;
+}
+
 $('waitTime').addEventListener('input', function() {
-  $('waitTimeOutput').value = $('waitTime').value;
+  $('waitTimeOutput').value = humanizeTime($('waitTime').value);
 });
 
 $('blockTime').addEventListener('input', function() {
-  $('blockTimeOutput').value = $('blockTime').value;
+  $('blockTimeOutput').value = humanizeTime($('blockTime').value * 60);
 });
 
 $('saveOptions').addEventListener('click', saveOptions);

options.html

@@ -32,8 +32,8 @@
       </div>
 
       <div>
-        <input type="range" id="waitTime" min="0" max="180" step="1">
-        <output for="waitTime" id="waitTimeOutput"></output> seconds
+        <input type="range" id="waitTime" min="0" max="300" step="5">
+        <output for="waitTime" id="waitTimeOutput"></output>
       </div>
     </section>
 
@@ -47,7 +47,7 @@
 
       <div>
         <input type="range" id="blockTime" min="0" max="60" step="1">
-        <output for="blockTime" id="blockTimeOutput"></output> minutes
+        <output for="blockTime" id="blockTimeOutput"></output>
       </div>
     </section>