Merge pull request #19 from prakhar1989/proxying

Added tick icon for feedback on filter value - https://github.com/a85/Po...

Author: abhinav-rickreation

extension/assets/tick.png

@@ -99,14 +99,20 @@ ol li {
   white-space: pre; /* CSS 2.0 */
   white-space: pre-wrap; /* CSS 2.1 */
   white-space: pre-line; /* CSS 3.0 */
-  white-space: -pre-wrap; /* Opera 4-6 */
-  white-space: -o-pre-wrap; /* Opera 7 */
-  white-space: -moz-pre-wrap; /* Mozilla */
-  word-wrap: break-word; /* IE 5+ */
+  word-wrap: break-word;
 }
 
 #delete-log {
     float: right;
     margin-right: 10px;
     margin-top: 52px;
 }
+
+#tick-icon {
+    -webkit-transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out;
+}
+
+.show { opacity: 1; }
+
+.hide { opacity: 0; }

extension/css/main.css

@@ -19,6 +19,7 @@ <h5>Request capture</h5>
 	</label>
 	<h5>Filter requests</h5>
 	<input type="text" id="filterRequest" placeholder="filter by domain">
+    <img src="assets/tick.png" id="tick-icon" width="20px" class="hide" />
     <a href="#" id="delete-log" title="clear logs"><img src="assets/delete.png" /></a>
 	<div class="logger-area">
         <h5>Last 10 requests</h5>		

extension/index.html

@@ -2,6 +2,7 @@
 var toggleSwitch = document.getElementById('postManSwitch');
 var filterUrlInput = document.getElementById('filterRequest');
 var deleteBtn = document.getElementById('delete-log');
+var tickIcon = document.getElementById('tick-icon');
 
 // this port is available as soon as popup is opened
 var popupPort = chrome.runtime.connect({name: 'POPUPCHANNEL'});
@@ -46,6 +47,15 @@ function showLogs(items, container) {
   }
 }
 
+function setTickIconVisibility(){
+    var domain = filterUrlInput.value;
+    if (domain.length && domain != ".*") {
+        tickIcon.className = "show";
+    } else {
+        tickIcon.className = "hide";
+    }
+}
+
 function setOptions(options) {
   if (options.isCaptureStateEnabled !== appOptions.toggleSwitchState) {
     toggleSwitch.checked = appOptions.toggleSwitchState = options.isCaptureStateEnabled;
@@ -62,7 +72,9 @@ toggleSwitch.addEventListener('click', function() {
 }, false);
 
 filterUrlInput.addEventListener('input', function() {
+    var domain = filterUrlInput.value;
     appOptions.filterRequestUrl = filterUrlInput.value;
+    setTickIconVisibility();
     popupPort.postMessage({options: appOptions});
 }, false);