Exclusion; highlight mismatched patterns.

2 files changed, 27 insertions, 5 deletions

diff --git a/pages/options.coffee b/pages/options.coffee
index 460f2789..cd932ed8 100644
--- a/pages/options.coffee
+++ b/pages/options.coffee
@@ -98,7 +98,9 @@ class ExclusionRulesOption extends Option
       # On the options page, focus the pattern; on the page popup (where we already have a pattern), focus the
       # passKeys.
       focus = if @url then 1 else 0
-      @element.children[@element.children.length-1].children[focus].children[0].focus()
+      element = @element.children[@element.children.length-1]
+      element.children[focus].children[0].focus()
+      @activatePatternWatcher element if @url
       # Scroll the new rule into view.
       exclusionScrollBox = $("exclusionScrollBox")
       exclusionScrollBox.scrollTop = exclusionScrollBox.scrollHeight
@@ -108,11 +110,14 @@ class ExclusionRulesOption extends Option
     for rule in rules
       @appendRule rule
 
+    elements = @element.getElementsByClassName "exclusionRuleTemplateInstance"
+    @activatePatternWatcher element for element in elements if @url
+
     # If this is the popup page (@url is truthy), then hide rules which do not match @url.  If no rules
     # match, then add a default rule.  Focus the passKeys field in the last (most recent) rule.
     if @url
       haveMatch = false
-      for element in @element.getElementsByClassName "exclusionRuleTemplateInstance"
+      for element in elements
         pattern = element.children[0].firstChild.value.trim()
         if @url.match bgExclusions.RegexpCache.get pattern
           haveMatch = true
@@ -122,6 +127,18 @@ class ExclusionRulesOption extends Option
       unless haveMatch
         @addRule()
 
+  # On the popup page, provide visual feedback when a pattern does not match the current page.  This assumes
+  # that @url is not empty.
+  activatePatternWatcher: (element) ->
+    computedStyle = window.getComputedStyle(element)
+    originalColor = computedStyle.getPropertyValue("color")
+    patternElement = element.children[0].firstChild
+    patternElement.addEventListener "keyup", =>
+      if @url.match bgExclusions.RegexpCache.get patternElement.value
+        patternElement.style.color = originalColor
+      else
+        patternElement.style.color = "red"
+
   # Append a row for a new rule.
   appendRule: (rule) ->
     content = document.querySelector('#exclusionRuleTemplate').content
diff --git a/pages/popup.html b/pages/popup.html
index 2e59d471..0b4de131 100644
--- a/pages/popup.html
+++ b/pages/popup.html
@@ -25,9 +25,14 @@
 
       #endSpace, #footerWrapper { width: 450px; }
       #footerWrapper { margin-left: 0px; }
+
       /* Make exclusionScrollBox smaller than on the options page, because there are likely to be fewer
-         matching rules, and the popup obscures the underlying page. */
-      #exclusionScrollBox { max-height: 124px; }
+         matching rules, and the popup obscures the underlying page.
+       */
+      #exclusionScrollBox {
+        max-height: 124px;
+        min-height: 124px;
+      }
 
       #endSpace { /* Leave space for the fixed footer. */
         min-height: 46px;
@@ -70,7 +75,7 @@
                 <button id="saveOptions" disabled="true">No Changes</button>
                 <button id="exclusionAddButton">Add Rule</button>
                 <br/>
-                <span> <a id="optionsLink" target="_blank">Vimium Options</a>.</span>
+                <span> <a id="optionsLink" target="_blank">Vimium Options</a></span>
               </span>
             </td>
           </tr>