Merge pull request #1222 from smblott-github/popup-control-enter-to-save-and-close

Control-Enter in page popup to save and close.

2 files changed, 34 insertions, 9 deletions

diff --git a/pages/popup.coffee b/pages/popup.coffee
index ecf683e5..2ab97bef 100644
--- a/pages/popup.coffee
+++ b/pages/popup.coffee
@@ -3,7 +3,7 @@ originalRule = undefined
 originalPattern = undefined
 originalPassKeys = undefined
 
-onLoad = ->
+reset = (initialize=false) ->
   document.getElementById("optionsLink").setAttribute "href", chrome.runtime.getURL("pages/options.html")
   chrome.tabs.getSelected null, (tab) ->
     isEnabled = chrome.extension.getBackgroundPage().isEnabledForUrl(url: tab.url)
@@ -19,8 +19,22 @@ onLoad = ->
       originalRule = null
       originalPattern = domain
       originalPassKeys = ""
-    document.getElementById("popupPattern").value  = originalPattern
-    document.getElementById("popupPassKeys").value = originalPassKeys
+    patternElement = document.getElementById("popupPattern")
+    passKeysElement = document.getElementById("popupPassKeys")
+    patternElement.value  = originalPattern
+    passKeysElement.value = originalPassKeys
+    if initialize
+      # Activate <Ctrl-Enter> to save.
+      for element in [ patternElement, passKeysElement ]
+        element.addEventListener "keyup", (event) ->
+          if event.ctrlKey and event.keyCode == 13
+            addExclusionRule()
+            window.close()
+        element.addEventListener "focus", -> document.getElementById("helpText").style.display = "block"
+        element.addEventListener "blur", -> document.getElementById("helpText").style.display = "none"
+      # Focus passkeys with cursor at the end (but only when creating popup).
+      passKeysElement.focus()
+      passKeysElement.setSelectionRange(passKeysElement.value.length, passKeysElement.value.length)
     onChange()
 
 onChange = ->
@@ -71,18 +85,18 @@ addExclusionRule = ->
   passKeys = document.getElementById("popupPassKeys").value.trim()
   chrome.extension.getBackgroundPage().addExclusionRule pattern, passKeys
   showMessage("Updated.")
-  onLoad()
+  reset()
 
 removeExclusionRule = ->
   pattern = document.getElementById("popupPattern").value.trim()
   chrome.extension.getBackgroundPage().removeExclusionRule pattern
   showMessage("Removed.")
-  onLoad()
+  reset()
 
 document.addEventListener "DOMContentLoaded", ->
   document.getElementById("popupExclude").addEventListener "click", addExclusionRule, false
   document.getElementById("popupRemove").addEventListener "click", removeExclusionRule, false
   for field in ["popupPattern", "popupPassKeys"]
-    for event in ["keyup", "change"]
+    for event in ["input", "change"]
       document.getElementById(field).addEventListener event, onChange, false
-  onLoad()
+  reset true
diff --git a/pages/popup.html b/pages/popup.html
index 86982eae..691414f2 100644
--- a/pages/popup.html
+++ b/pages/popup.html
@@ -36,7 +36,7 @@
         list-style: none;
       }
 
-      #popupMenu a, #popupMenu a:active, #popupMenu a:visited {
+      #popupMenu li, #popupMenu a:active, #popupMenu a:visited {
         color: #3F6EC2;
         display: block;
         border-top: 1px solid #DDDDDD;
@@ -51,6 +51,14 @@
       #optionsLink {
         font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
         font-size: 12px;
+        float: right;
+      }
+      #helpText {
+        color: #979ca0;
+        font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+        font-size: 12px;
+        float: left;
+        display: none;
       }
     </style>
     <script src="popup.js"></script>
@@ -67,7 +75,10 @@
 
       <div id="popupMenu">
         <ul>
-          <li><a id="optionsLink" target="_blank">Options</a></li>
+          <li>
+             <span id="helpText">Type <strong>Ctrl-ENTER</strong> to save and close.</span>
+             <a id="optionsLink" target="_blank">Options</a>
+          </li>
         </ul>
       </div>
     </div>