Add search functionality

captainbrosset · Oct 20, 2014 · d5fb7b6 · d5fb7b6
1 parent 2c138e6
commit d5fb7b6
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/data/panel.js b/data/panel.js
@@ -10,6 +10,7 @@ function PageRecorderPanel(win, toolbox) {
 
   this.onRecordings = this.onRecordings.bind(this);
   this.toggle = this.toggle.bind(this);
+  this.search = this.search.bind(this);
 
   this.mm = toolbox.target.tab.linkedBrowser.messageManager;
   this.loadFrameScript();
@@ -38,8 +39,10 @@ PageRecorderPanel.prototype = {
     this.recordsEl = this.doc.querySelector(".records");
     this.screenshotEl = this.doc.querySelector(".screenshots img");
     this.toggleEl = this.doc.querySelector("#toggle");
+    this.searchBox = this.doc.querySelector("#search-input");
 
     this.toggleEl.addEventListener("click", this.toggle);
+    this.searchBox.addEventListener("input", this.search);
   },
 
   toggle() {
@@ -58,6 +61,7 @@ PageRecorderPanel.prototype = {
 
     this.toggleEl.setAttribute("checked", "true")
     this.recordsEl.innerHTML = "";
+    this.searchBox.value = "";
     this.mm.sendAsyncMessage("PageRecorder:Start");
   },
 
@@ -71,6 +75,20 @@ PageRecorderPanel.prototype = {
     this.mm.sendAsyncMessage("PageRecorder:Stop");
   },
 
+  search() {
+    let query = this.searchBox.value.toLowerCase();
+    if(!this.recordsEl.mozMatchesSelector(":empty") || !this.recordsEl.matches(":empty")) {
+      [].forEach.call(this.recordsEl.querySelectorAll("li"), function(el) {
+        if(query == "" || el.textContent.toLowerCase().indexOf(query) > -1) {
+          el.style.removeProperty("display");
+        }
+        else {
+          el.style.display = "none";
+        }
+      });
+    }
+  },
+
   onRecordings({data: records, objects}) {
     if (!this.isStarted) {
       return;