From d5fb7b6f90819214ef4322f3e70b26d33d9a9e73 Mon Sep 17 00:00:00 2001
From: Tim Nguyen <nt1m@users.noreply.github.com>
Date: Mon, 20 Oct 2014 11:51:56 +0200
Subject: [PATCH] Add search functionality

---
 data/panel.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/data/panel.js b/data/panel.js
index bd0b576..fd1f7b1 100644
--- 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;