Merge pull request #21 from forgetso/20-add-option-to-clear-history

fixes #20

assets/popup.html

@@ -164,6 +164,7 @@ <h4>History</h4>
         <div id="historyContent">
             <ul id="historyList">
             </ul>
+            <button id="clearHistory">Clear History</button>
         </div>
     </div>
     <!-- Help Link -->

manifest.json

@@ -44,6 +44,6 @@
     "https://*/*"
   ],
   "update_url": "http://clients2.google.com/service/update2/crx",
-  "version": "1.5.2"
+  "version": "1.5.3"
 
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "search_and_replace",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "resolutions": {
     "author": "Chris Taylor <[email protected]>"
   },

src/background.ts

@@ -8,6 +8,14 @@ chrome.runtime.onConnect.addListener(function (port) {
                 const storage = result['storage'] as SearchReplaceStorage
                 port.postMessage(storage)
             })
+        } else if (msg['clearHistory'] === true) {
+            chrome.storage.local.get(['storage'], function (result) {
+                const storage = result['storage'] as SearchReplaceStorage
+                storage.storage.history = []
+                chrome.storage.local.set(storage, function () {
+                    port.postMessage('History cleared')
+                })
+            })
         } else {
             const instance: SearchReplaceInstance = msg.instance
             const history: SearchReplaceInstance[] = msg.history || []

src/popup.ts

@@ -51,13 +51,14 @@ document.addEventListener('DOMContentLoaded', function () {
     })
     ;(<HTMLButtonElement>document.querySelector('#historyHeader')).addEventListener('click', historyHeaderClickHandler)
 
-    //Click events for Replace Next, Replace All buttons and Help link
+    //Click events for Replace Next, Replace All, Help link, and Clear History
     ;(<HTMLButtonElement>document.querySelector('#next')).addEventListener('click', function () {
         clickHandler('searchReplace', false, tabQueryCallback)
     })
     ;(<HTMLButtonElement>document.querySelector('#all')).addEventListener('click', function () {
         clickHandler('searchReplace', true, tabQueryCallback)
     })
+    ;(<HTMLButtonElement>document.querySelector('#clearHistory')).addEventListener('click', clearHistoryClickHandler)
     ;(<HTMLAnchorElement>document.getElementById('help')).addEventListener('click', openHelp)
 
     // Handlers for input elements changing value - storeTerms
@@ -84,6 +85,17 @@ function historyHeaderClickHandler(e) {
     }
 }
 
+function clearHistoryClickHandler() {
+    const port = tabConnect()
+    port.postMessage({
+        clearHistory: true,
+    })
+    const historyList = document.getElementById('historyList')
+    if (historyList) {
+        historyList.innerHTML = ''
+    }
+}
+
 function restoreSearchReplaceInstance(searchReplaceInstance: SearchReplaceInstance) {
     ;(<HTMLInputElement>document.getElementById('searchTerm')).value = searchReplaceInstance.searchTerm
     ;(<HTMLInputElement>document.getElementById('replaceTerm')).value = searchReplaceInstance.replaceTerm

src/searchreplace.ts

@@ -24,6 +24,27 @@ function replaceInInnerHTML(element: HTMLElement, searchPattern: RegExp, replace
     return !(element.innerHTML === searchStr)
 }
 
+function setNativeValue(element, value) {
+    const valueFn = Object.getOwnPropertyDescriptor(element, 'value')
+    let valueSetter: ((v: any) => void) | undefined
+    let prototypeValueSetter: ((v: any) => void) | undefined
+    if (valueFn) {
+        valueSetter = valueFn.set
+    }
+    const prototype = Object.getPrototypeOf(element)
+    const prototypeValueFn = Object.getOwnPropertyDescriptor(prototype, 'value')
+    if (prototypeValueFn) {
+        prototypeValueSetter = prototypeValueFn.set
+    }
+    if (valueSetter && prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+        prototypeValueSetter.call(element, value)
+    } else if (valueSetter) {
+        valueSetter.call(element, value)
+    } else {
+        element.value = value
+    }
+}
+
 function replaceInInput(
     input: HTMLInputElement,
     searchPattern: RegExp,
@@ -42,7 +63,7 @@ function replaceInInput(
     }
 
     input.focus()
-    input.value = newValue
+    setNativeValue(input, newValue)
 
     if (usesKnockout) {
         const knockoutValueChanger = getKnockoutValueChanger(input.id, newValue)