Structured passkeys, internally and on the options and popup pages.

4 files changed, 147 insertions, 57 deletions

diff --git a/pages/options.coffee b/pages/options.coffee
index d4767da6..be0eccfb 100644
--- a/pages/options.coffee
+++ b/pages/options.coffee
@@ -2,11 +2,17 @@ $ = (id) -> document.getElementById id
 
 bgSettings = chrome.extension.getBackgroundPage().Settings
 
-editableFields = [ "scrollStepSize", "excludedUrls", "linkHintCharacters", "linkHintNumbers",
+editableFields = [ "scrollStepSize", "linkHintCharacters", "linkHintNumbers",
   "userDefinedLinkHintCss", "keyMappings", "filterLinkHints", "previousPatterns",
   "nextPatterns", "hideHud", "regexFindMode", "searchUrl", "searchEngines"]
 
-canBeEmptyFields = ["excludedUrls", "keyMappings", "userDefinedLinkHintCss", "searchEngines"]
+canBeEmptyFields = ["keyMappings", "userDefinedLinkHintCss", "searchEngines"]
+
+# Settings which handle their own DOM and callbacks for the options page.
+# See populateOption in ../background_scripts/exclusions.coffee for an example.
+selfHandlingFields =
+  exclusionRules: (args...) -> chrome.extension.getBackgroundPage().Exclusions.populateOption(args...)
+selfHandlingCallbacks = {}
 
 document.addEventListener "DOMContentLoaded", ->
   populateOptions()
@@ -68,6 +74,10 @@ saveOptions = ->
     $(fieldName).value = fieldValue
     $(fieldName).setAttribute "savedValue", fieldValue
     bgSettings.performPostUpdateHook fieldName, fieldValue
+ 
+  # Self-handling options save themselves.
+  for field of selfHandlingFields
+    selfHandlingCallbacks[field].saveOption() if selfHandlingCallbacks[field].saveOption
 
   $("saveOptions").disabled = true
 
@@ -76,14 +86,17 @@ populateOptions = ->
   for field in editableFields
     val = bgSettings.get(field) or ""
     setFieldValue $(field), val
-  onDataLoaded()
+  # Self-handling options build their own DOM, and provide callbacks for saveOptions and restoreToDefaults.
+  for field of selfHandlingFields
+    selfHandlingCallbacks[field] = selfHandlingFields[field]($(field),enableSaveButton)
 
 restoreToDefaults = ->
-  return unless confirm "Are you sure you want to return Vimium's settings to their defaults?"
-
   for field in editableFields
     val = bgSettings.defaults[field] or ""
     setFieldValue $(field), val
+  # Self-handling options restore their own defaults.
+  for field of selfHandlingFields
+    selfHandlingCallbacks[field].restoreToDefault() if selfHandlingCallbacks[field].restoreToDefault
   onDataLoaded()
   enableSaveButton()
 
diff --git a/pages/options.html b/pages/options.html
index 07dcab1d..c9fc5a63 100644
--- a/pages/options.html
+++ b/pages/options.html
@@ -6,6 +6,7 @@
     <script src="../lib/dom_utils.js"></script>
     <script src="../lib/handler_stack.js"></script>
     <script src="../lib/clipboard.js"></script>
+    <script src="../lib/exclusion_rule.js"></script>
     <script src="../content_scripts/link_hints.js"></script>
     <script src="../content_scripts/vomnibar.js"></script>
     <script src="../content_scripts/scroller.js"></script>
@@ -109,11 +110,6 @@
         width: 40px;
         margin-right: 3px;
       }
-      textarea#excludedUrls {
-        margin-top: 5px;
-        width: 100%;
-        min-height: 100px;
-      }
       textarea#userDefinedLinkHintCss {
         width: 100%;;
         min-height: 100px;
@@ -178,6 +174,30 @@
         padding: 15px 0;
         border-top: 1px solid #eee;
       }
+      /* Ids and classes for rendering exclusionRules */
+      #exclusionScroll {
+        overflow: scroll;
+        overflow-x: hidden;
+        height: 225px;
+        border: 1px solid #bfbfbf;
+        border-radius: 2px;
+        color: #444;
+      }
+      .exclusionRemoveButton {
+        /* cursor: pointer; */
+        /* border: none; */
+        /* background: none; */
+      }
+      input.pattern, input.passKeys {
+        font-family: Consolas, "Liberation Mono", Courier, monospace;
+        font-size: 14px;
+      }
+      .pattern {
+        width: 250px;
+      }
+      .passKeys {
+        width: 120px;
+      }
     </style>
   <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
 
@@ -196,31 +216,21 @@
           </td>
         </tr>
         <tr>
-          <td colspan="3">
-              Excluded URLs and keys<br/>
-              <div class="help">
-                <div class="example">
-                  <p>
-                    To disable Vimium on a site, use:<br/>
-                    <tt>http*://mail.google.com/*</tt><br/>
-                    This will <i>wholly disable</i> Vimium on Gmail.<br/><br/>
-                    To use Vimium together with a website's own<br/>
-                    key bindings, use:<br/>
-                    <tt>http*://mail.google.com/* jknpc</tt><br/>
-                    This will <i>enable</i> Vimium on Gmail, but pass<br/>
-                    the five listed keys through to Gmail itself.<br/><br/>
-                    One entry per line.<br/>
-                  </p>
-                </div>
+          <td>Excluded URLs<br/>and keys</td>
+          <td>
+            <div class="help">
+              <div class="example">
+                <p>
+                   The left column contains URL patterns.  Vimium will be wholly or partially disabled for URLs matching these patterns.  Patterns are Javascript regular expressions.  Additionally, the symbox "*" matches any zero or more characters.
+                </p>
+                <p>
+                   The right column contains keys which Vimium would would normally handle, but should instead be passed through to the underlying web page (for pages matching the corresponding pattern).  If empty, then Vimium is wholly disabled.
+                </p>
               </div>
-              <!-- Hack: fix a minimum size for the text area (below) so that it is
-                   not too much smaller than its help text (above). -->
-              <!-- FIXME:
-                   This text area should really be broken out into an array
-                   of separate inputs.  However, the whole options page really
-                   needs a workover, so I'm leaving it like this, for now
-                   (Steve, 23 Aug, 14). -->
-              <textarea id="excludedUrls" style="min-height:180px"></textarea>
+            </div>
+            <div id="exclusionScroll">
+               <table id="exclusionRules"></table>
+            </div>
           </td>
         </tr>
         <tbody id='advancedOptions'>
diff --git a/pages/popup.coffee b/pages/popup.coffee
index 41fc17a9..ff943f32 100644
--- a/pages/popup.coffee
+++ b/pages/popup.coffee
@@ -1,27 +1,86 @@
+
+originalRule = undefined
+originalPattern = undefined
+originalPassKeys = undefined
+
 onLoad = ->
   document.getElementById("optionsLink").setAttribute "href", chrome.runtime.getURL("pages/options.html")
   chrome.tabs.getSelected null, (tab) ->
-    # Check if we have an existing exclusing rule for this page.
     isEnabled = chrome.extension.getBackgroundPage().isEnabledForUrl(url: tab.url)
-    if isEnabled.matchingUrl
-      console.log isEnabled
-      # There is an existing rule for this page.
-      pattern = isEnabled.matchingUrl
-      if isEnabled.passKeys
-        pattern += " " + isEnabled.passKeys
-      document.getElementById("popupInput").value = pattern
+    if isEnabled.rule
+      # There is an existing exclusion rule for this page.
+      originalRule = isEnabled.rule
+      originalPattern = originalRule.pattern
+      originalPassKeys = originalRule.passKeys
     else
-      # No existing exclusion rule.
+      # There is not an existing exclusion rule.
       # The common use case is to disable Vimium at the domain level.
       # This regexp will match "http://www.example.com/" from "http://www.example.com/path/to/page.html".
-      domain = tab.url.match(/[^\/]*\/\/[^\/]*\//) or tab.url
-      document.getElementById("popupInput").value = domain + "*"
+      domain = (tab.url.match(/[^\/]*\/\/[^\/]*\//) or tab.url) + "*"
+      originalRule = null
+      originalPattern = domain
+      originalPassKeys = ""
+    document.getElementById("popupPattern").value  = originalPattern
+    document.getElementById("popupPassKeys").value = originalPassKeys
+    onChange()
+
+onChange = ->
+  pattern = document.getElementById("popupPattern").value.trim()
+  passKeys = document.getElementById("popupPassKeys").value.trim()
+
+  document.getElementById("popupRemove").disabled =
+    not (originalRule and pattern == originalPattern)
+
+  if originalRule and pattern == originalPattern and passKeys == originalPassKeys
+    document.getElementById("popupExclude").disabled = true
+    document.getElementById("popupExclude").value = "Update Rule"
+
+  else if originalRule and pattern == originalPattern
+    document.getElementById("popupExclude").disabled = false
+    document.getElementById("popupExclude").value = "Update Rule"
+
+  else if originalRule
+    document.getElementById("popupExclude").disabled = false
+    document.getElementById("popupExclude").value = "Add Rule"
+
+  else if pattern
+    document.getElementById("popupExclude").disabled = false
+    document.getElementById("popupExclude").value = "Add Rule"
 
-onExcludeUrl = (e) ->
-  url = document.getElementById("popupInput").value
-  chrome.extension.getBackgroundPage().addExcludedUrl url
-  document.getElementById("excludeConfirm").setAttribute "style", "display: inline-block"
+  else
+    document.getElementById("popupExclude").disabled = true
+    document.getElementById("popupExclude").value = "Add Rule"
+
+showMessage = do ->
+  timer = null
+
+  hideConfirmationMessage = ->
+    document.getElementById("confirmationMessage").setAttribute "style", "display: none"
+    timer = null
+
+  (message) ->
+    document.getElementById("confirmationMessage").setAttribute "style", "display: inline-block"
+    document.getElementById("confirmationMessage").innerHTML = message
+    clearTimeout(timer) if timer
+    timer = setTimeout(hideConfirmationMessage,2000)
+
+addExclusionRule = ->
+  pattern = document.getElementById("popupPattern").value.trim()
+  passKeys = document.getElementById("popupPassKeys").value.trim()
+  chrome.extension.getBackgroundPage().addExclusionRule pattern, passKeys
+  showMessage("Updated.")
+  onLoad()
+
+removeExclusionRule = ->
+  pattern = document.getElementById("popupPattern").value.trim()
+  chrome.extension.getBackgroundPage().removeExclusionRule pattern
+  showMessage("Removed.")
+  onLoad()
 
 document.addEventListener "DOMContentLoaded", ->
-  document.getElementById("popupButton").addEventListener "click", onExcludeUrl, false
+  document.getElementById("popupExclude").addEventListener "click", addExclusionRule, false
+  document.getElementById("popupRemove").addEventListener "click", removeExclusionRule, false
+  for field in ["popupPattern", "popupPassKeys"]
+    for event in ["keyup", "change"]
+      document.getElementById(field).addEventListener event, onChange, false
   onLoad()
diff --git a/pages/popup.html b/pages/popup.html
index 89f1f02a..86982eae 100644
--- a/pages/popup.html
+++ b/pages/popup.html
@@ -6,17 +6,22 @@
         padding: 0px;
       }
 
-      #vimiumPopup { width: 500px; }
+      #vimiumPopup { width: 400px; }
 
       #excludeControls {
         padding: 10px;
       }
 
-      #popupInput {
+      #popupPattern, #popupPassKeys {
+        margin: 5px;
         width: 330px;
+        /* Match the corresponding font and font size used on the options page. */
+        /* TODO (smblott): Match other styles from the options page. */
+        font-family: Consolas, "Liberation Mono", Courier, monospace;
+        font-size: 14px;
       }
 
-      #excludeConfirm {
+      #confirmationMessage {
         display: inline-block;
         width: 18px;
         height: 13px;
@@ -24,7 +29,8 @@
         display: none;
       }
 
-      #popupButton { margin-left: 10px; }
+      #popupRemove { margin: 5px; }
+      #popupExclude { margin: 5px; }
 
       #popupMenu ul {
         list-style: none;
@@ -52,9 +58,11 @@
   <body>
     <div id="vimiumPopup">
       <div id="excludeControls">
-        <input id="popupInput" type="text" />
-        <input id="popupButton" type="button" value="Exclude URL" />
-        <span id="excludeConfirm">Saved.</span>
+        <input id="popupPattern" placeholder="Pattern against which to match URLs..." type="text" /><br/>
+        <input id="popupPassKeys" placeholder="Only exclude these keys..." type="text" /><br/>
+        <input id="popupRemove" type="button" value="Remove Rule" />
+        <input id="popupExclude" type="button" value="Add or Update Rule" />
+        <span id="confirmationMessage">Text is added in popup.coffee.</span>
       </div>
 
       <div id="popupMenu">