Add clear history button and make max history length configurable

Author: Roger Shen

src/js/options.js

@@ -4,6 +4,7 @@ var DEFAULT_HIGHLIGHT_COLOR = '#ffff00';
 var DEFAULT_SELECTED_COLOR = '#ff9900';
 var DEFAULT_TEXT_COLOR = '#000000';
 var DEFAULT_CASE_INSENSITIVE = false;
+var DEFAULT_MAX_HISTORY_LENGTH = 30;
 var WHITE_COLOR = '#ffffff';
 var ERROR_COLOR = '#ff8989';
 var GOOD_COLOR = '#89ff89';
@@ -55,7 +56,8 @@ function saveOptions() {
       'textColor' : document.getElementById('textColor').value,
       'maxResults' : maxResults,
       'instantResults' :  document.getElementById('instantResults').checked,
-      'caseInsensitive' : document.getElementById('caseInsensitive').checked
+      'caseInsensitive' : document.getElementById('caseInsensitive').checked,
+      'maxHistoryLength' : document.getElementById('maxHistoryLength').value
     }
 
     chrome.storage.local.set(options, function() {
@@ -72,7 +74,8 @@ function loadOptions() {
     'textColor' : DEFAULT_TEXT_COLOR,
     'maxResults' : DEFAULT_MAX_RESULTS,
     'instantResults' : DEFAULT_INSTANT_RESULTS,
-    'caseInsensitive' : DEFAULT_CASE_INSENSITIVE }, 
+    'caseInsensitive' : DEFAULT_CASE_INSENSITIVE,
+    'maxHistoryLength' : DEFAULT_MAX_HISTORY_LENGTH }, 
     function(result) {
       document.getElementById('highlightColor').value = result.highlightColor;
       document.getElementById('exampleHighlighted').style.backgroundColor = result.highlightColor;
@@ -84,6 +87,7 @@ function loadOptions() {
       document.getElementById('maxResults').value = result.maxResults;
       document.getElementById('instantResults').checked = result.instantResults;
       document.getElementById('caseInsensitive').checked = result.caseInsensitive;
+      document.getElementById('maxHistoryLength').value = result.maxHistoryLength;
     }
   );
 }
@@ -129,6 +133,10 @@ document.addEventListener('DOMContentLoaded', function() {
   document.getElementById('caseInsensitive').addEventListener('change', function() {
     saveOptions();
   });
+
+  document.getElementById('maxHistoryLength').addEventListener('change', function() {
+    saveOptions();
+  });
 
   document.getElementById('buttonSave').addEventListener('click', function() {
     saveOptions();

src/js/popup.js

@@ -6,13 +6,15 @@ var ERROR_TEXT = "Content script was not loaded. Are you currently in the Chrome
 var SHOW_HISTORY_TITLE = "Show search history";
 var HIDE_HISTORY_TITLE = "Hide search history";
 var HISTORY_IS_EMPTY_TEXT = "Search history is empty.";
+var CLEAR_ALL_HISTORY_TEXT = "Clear History";
 var MAX_HISTORY_LENGTH = 30;
 /*** CONSTANTS ***/
 
 /*** VARIABLES ***/
 var sentInput = false;
 var processingKey = false;
 var searchHistory = null;
+var maxHistoryLength = MAX_HISTORY_LENGTH;
 /*** VARIABLES ***/
 
 /*** FUNCTIONS ***/
@@ -102,6 +104,7 @@ function createHistoryLineElement(text) {
     if (document.getElementById('inputRegex').value !== text) {
       document.getElementById('inputRegex').value = text;
       passInputToContentScript();
+      document.getElementById('inputRegex').focus();
     }
   });
   var lineDiv = document.createElement('div');
@@ -123,6 +126,13 @@ function updateHistoryDiv() {
       for (var i = searchHistory.length - 1; i >= 0; i--) {
         historyDiv.appendChild(createHistoryLineElement(searchHistory[i]));
       }
+      var clearButton = document.createElement('a');
+      clearButton.href = '#';
+      clearButton.type = 'button';
+      clearButton.textContent = CLEAR_ALL_HISTORY_TEXT;
+      clearButton.className = 'clearHistoryButton';
+      clearButton.addEventListener('click', clearSearchHistory);
+      historyDiv.appendChild(clearButton);
     }
   }
 }
@@ -137,8 +147,8 @@ function addToHistory(regex) {
         searchHistory.splice(i, 1);
       }
     }
-    if (searchHistory.length > MAX_HISTORY_LENGTH) {
-      searchHistory.splice(0, searchHistory.length - MAX_HISTORY_LENGTH);
+    if (searchHistory.length > maxHistoryLength) {
+      searchHistory.splice(0, searchHistory.length - maxHistoryLength);
     }
     chrome.storage.local.set({searchHistory: searchHistory});
     updateHistoryDiv();
@@ -150,6 +160,13 @@ function setHistoryVisibility(makeVisible) {
   document.getElementById('show-history').title = makeVisible ? HIDE_HISTORY_TITLE : SHOW_HISTORY_TITLE;
 }
 
+function clearSearchHistory() {
+  searchHistory = [];
+  chrome.storage.local.set({searchHistory: searchHistory});
+  updateHistoryDiv();
+}
+
+
 /*** LISTENERS ***/
 document.getElementById('next').addEventListener('click', function() {
   selectNext();
@@ -217,6 +234,7 @@ onkeydown = onkeyup = function(e) {
 /* Retrieve from storage whether we should use instant results or not */
 chrome.storage.local.get({
     'instantResults' : DEFAULT_INSTANT_RESULTS,
+    'maxHistoryLength' : MAX_HISTORY_LENGTH,
     'searchHistory' : null,
     'isSearchHistoryVisible' : false},
   function(result) {
@@ -229,6 +247,10 @@ chrome.storage.local.get({
         passInputToContentScript();
       });
     }
+    console.log(result);
+    if(result.maxHistoryLength) {
+      maxHistoryLength = result.maxHistoryLength;
+    }
     if(result.searchHistory) {
       searchHistory = result.searchHistory.slice(0);
     } else {

src/options.html

@@ -86,10 +86,18 @@
             <small>The smaller this number is, the better your performance (especially for complex pages).</small>
           </div>
         </div>
+        <div class="panel panel-default">
+          <div class="panel-heading">What's the maximum number of search history records that be stored??</div>
+          <div class="panel-body">
+            <label for="maxHistoryLength">Max records</label> <input id="maxHistoryLength" type="text" name="maxHistoryLength" ></input>
+            <br />
+            <small>The default number of records is 30.</small>
+          </div>
+        </div>
         <button id="buttonSave" type="save">Save Settings</button>
         <button id="buttonReset" type="reset">Reset to Defaults</button>
         <p id="status" class="status-chrome-regex"></p>
       </div>
     </div>
   </body>
-</html>
+</html>

src/popup.html

@@ -48,7 +48,7 @@
       #numResults {
         position: absolute;
         top: 0.25em;
-        left: 19.5em;
+        left: 15.5em;
         min-width: 4em;
         max-width: 5em;
         overflow:auto;
@@ -74,6 +74,15 @@
         font-style: italic;
         color: #555;
       }
+      
+      .clearHistoryButton {
+        color: #000; 
+        text-decoration: none;
+        float: left !important;
+        width: 7em !important;
+        -webkit-text-stroke: 0.5px rgba(0,0,0,1) !important;
+        margin-bottom: 0.2em;
+      }
 
       body {
         background-color: #dddddd;
@@ -88,12 +97,12 @@
       <input id="inputRegex" type="text" name="inputRegex"></input><span id="numResults"></span>
       <a href="#" id="prev" type="button" title="Previous Match"><i class="fa fa-angle-up"></i></a>
       <a href="#" id="next" type="button" title="Next Match"><i class="fa fa-angle-down"></i></a>
-      <a href="#" id="clear" type="button" title="clear"><i class="fa fa-trash-o"></i></a>
-      <a href="#" id="show-history" type="button"><i class="fa fa-history"></i></a>
+      <a href="#" id="clear" type="button" title="Clear"><i class="fa fa-trash-o"></i></a>
+      <a href="#" id="show-history" type="button" title="History"><i class="fa fa-history"></i></a>
     </div>
     <div id="history">
     </div>
     <span id="error" class="error-chrome-regex"></span>
   </body>
   <script type="text/javascript" src="js/popup.js"></script>
-</html>
+</html>