Add listbox for black list of site to settings

Author: Stigmatoz

icons/delete.png

@@ -27,7 +27,7 @@
             </label>
             <div class="margin-top-10">
                <label>Stop tracking if no activity detected for: </label>
-               <div class="tooltip"><img src="/icons/information.png" />
+               <div class="tooltip"><img src="/icons/information.svg" height="18"/>
                   <span class="tooltiptext">An activity is an action with a mouse or keyboard</span>
                </div>
                <div class="margin-top-10">
@@ -57,7 +57,20 @@
                   </select>
                </div>
                <div class="margin-top-10">
-                  <label>Data in memory use </label><label id='memoryUse'>test</label>
+                  <label>Ignored list of domain: </label>
+                  <div class="tooltip"><img src="/icons/information.svg" height="18"/>
+                     <span class="tooltiptext">Activity for these domains not will tracked</span>
+                  </div>
+                  <div class="margin-top-10">
+                     <ul id='blackList' class="listbox" size="7"></ul>
+                  </div>
+                  <div class="margin-top-10">
+                     <input type="text" id='addBlackSiteLbl'/>
+                     <input type="button" value="+" id='addBlackSiteBtn'/>
+                  </div>
+               </div>
+               <div class="margin-top-10">
+                  <label>Data in memory use </label><label id='memoryUse'></label>
                </div>
                <div class="margin-top-10"><input type="button" value="Clear all data" id='clearAllData'></div>
                <div class="notify" id='notify' hidden>

icons/information.png

@@ -18,6 +18,9 @@ document.addEventListener('DOMContentLoaded', function () {
     document.getElementById('clearAllData').addEventListener('click', function () {
         clearAllData();
     });
+    document.getElementById('addBlackSiteBtn').addEventListener('click', function () {
+        addNewBlackSite();
+    });
     document.getElementById('viewTimeInBadge').addEventListener('change', function () {
         storage.saveSettings(SETTINGS_VIEW_TIME_IN_BADGE, this.checked);
     });
@@ -42,7 +45,7 @@ function loadSettings() {
         document.getElementById('viewTimeInBadge').setAttribute('checked', item);
     });
     storage.getMemoryUse(STORAGE_TABS, function (integer) {
-        document.getElementById('memoryUse').innerHTML = (integer/1024).toFixed(2) + 'Kb';
+        document.getElementById('memoryUse').innerHTML = (integer / 1024).toFixed(2) + 'Kb';
     })
 }
 
@@ -55,4 +58,20 @@ function clearAllData() {
 function viewNotify() {
     document.getElementById('notify').hidden = false;
     setTimeout(function () { document.getElementById('notify').hidden = true; }, 3000);
+}
+
+function addNewBlackSite() {
+    var newBlackSite = document.getElementById('addBlackSiteLbl').value;
+    if (newBlackSite !== '') {
+        var count = document.getElementById('blackList').getElementsByTagName('li').length;
+        var li = document.createElement('li');
+        li.innerHTML = newBlackSite;
+        li.value = count++;
+        var del = document.createElement('img');
+        del.height = 12;
+        del.src = '/icons/delete.png';
+        del.value = count++;
+        document.getElementById('blackList').appendChild(li).appendChild(del);
+        document.getElementById('addBlackSiteLbl').value = '';
+    }
 }

icons/information.svg

@@ -5,7 +5,7 @@ body {
 
 .content {
     width: 750px;
-    margin: 50px auto;
+    margin: 10px auto;
     display: grid;
     grid-template-columns: 200px auto;
     grid-column-gap: 40px;
@@ -19,7 +19,7 @@ body {
 
 .header{
     grid-area: h;
-    margin: 0 0 50px;
+    margin: 0 0 10px;
     font-size: 20px;
 }
 
@@ -189,7 +189,7 @@ input[type="button"]:hover {
     margin-top: 20px;
 }
 
-select {
+.option {
     min-width: 170px;
     color: #444;
     background: #fff;
@@ -249,4 +249,32 @@ select {
     font-size: 17px;
     white-space: nowrap;
     padding: 10px;
+  }
+
+  .listbox{
+      overflow-y: auto;
+      width: 263px;
+      height: 100px;
+      padding: 3px;
+      padding: 3px 5px 3px 5px;
+      border: 1px solid rgb(172, 169, 169);
+  }
+
+  .listbox img{
+      float: right;
+      cursor: pointer;
+  }
+
+  #addBlackSiteLbl{
+      width: 233px;
+      height: 15px;
+      padding: 3px;
+  }
+
+  #addBlackSiteBtn{
+    height: 24px !important;
+    line-height: 20px !important;
+    padding: 0 5px !important;
+    min-width: 20px !important;
+    width: 28px !important;
   }