Distinguish remote filter lists that come over HTTPS

src/3p-filters.html

@@ -42,6 +42,7 @@
         <li class="listEntry">
             <input type="checkbox">
             <a type="text/plain" target="_blank" href=""></a>
+            <i data-tip="https" data-tip-anchor="left" class="secure"><svg class="icon icon-secure"><use xlink:href="img/icons.svg#icon-secure"></use></svg></i>
             <a href="" style="display: none;" target="_blank"></a>: <!--
          --><span class="dim"></span><!--
          --><span class="status new" style="display: none;" data-i18n="3pExternalListNew"></span><!--

src/css/3p-filters.css

@@ -7,12 +7,8 @@ ul {
     }
 #lists {
     margin: 0.5em 0 0 0;
-    padding-left: 1em;
-    padding-right: 0em;
     }
 body[dir=rtl] #lists {
-    padding-left: 0em;
-    padding-right: 1em;
     }
 #lists > li {
     margin: 0.5em 0 0 0;
@@ -47,6 +43,14 @@ li.listEntry {
     margin-right: 0em;
     text-indent: -2em;
     }
+li.listEntry .icon-secure {
+    display: none;
+    color: #aaa;
+    font-size: 13px;
+    }
+li.listEntry.secure .icon-secure {
+    display: inline-block;
+    }
 body[dir=rtl] li.listEntry {
     margin-left: 0em;
     margin-right: 1em;

src/css/common.css

@@ -47,6 +47,18 @@ body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
     left: 0;
     }
 
+body[dir=ltr] [data-tip][data-tip-anchor="left"]:hover:after {
+    right: 105%;
+    top: initial;
+    left: initial;
+    bottom: -4px;
+    }
+body[dir=rtl] [data-tip][data-tip-anchor="left"]:hover:after {
+    left: 105%;
+    top: initial;
+    right: initial;
+    bottom: -4px;
+    }
 body [data-tip][data-tip-anchor="topcenter"]:hover:after {
     bottom: 140%;
     left: -225%;

src/img/icons.svg

@@ -16,6 +16,14 @@
     <title>eyedropper</title>
     <path class="path1" d="M986.51 37.49c-49.988-49.986-131.032-49.986-181.020 0l-172.118 172.118-121.372-121.372-135.764 135.764 106.426 106.426-472.118 472.118c-8.048 8.048-11.468 18.958-10.3 29.456h-0.244v160c0 17.674 14.328 32 32 32h160c0 0 2.664 0 4 0 9.212 0 18.426-3.516 25.456-10.544l472.118-472.118 106.426 106.426 135.764-135.764-121.372-121.372 172.118-172.118c49.986-49.988 49.986-131.032 0-181.020zM173.090 960h-109.090v-109.090l469.574-469.572 109.088 109.088-469.572 469.574z"></path>
 </symbol>
+<symbol id="icon-secure" viewBox="0 0 1024 1024">
+    <title>secure</title>
+    <path class="path1" d="M912 448h-16v-192c0-105.87-86.13-192-192-192h-128c-105.87 0-192 86.13-192 192v192h-16c-26.4 0-48 21.6-48 48v480c0 26.4 21.6 48 48 48h544c26.4 0 48-21.6 48-48v-480c0-26.4-21.6-48-48-48zM512 256c0-35.29 28.71-64 64-64h128c35.29 0 64 28.71 64 64v192h-256v-192z"></path>
+</symbol>
+<symbol id="icon-insecure" viewBox="0 0 1024 1024">
+    <title>insecure</title>
+    <path class="path1" d="M192 64c-105.87 0-192 86.13-192 192v192h128v-192c0-35.29 28.71-64 64-64h128c35.29 0 64 28.71 64 64v192h-16c-26.4 0-48 21.6-48 48v480c0 26.4 21.6 48 48 48h544c26.4 0 48-21.6 48-48v-480c0-26.4-21.6-48-48-48h-400v-192c0-105.87-86.13-192-192-192h-128z"></path>
+</symbol>
 <symbol id="icon-stats" viewBox="0 0 1024 1024">
     <title>stats</title>
     <path class="path1" d="M0 832h1024v128h-1024zM128 576h128v192h-128zM320 320h128v448h-128zM512 512h128v256h-128zM704 128h128v640h-128z"></path>

src/js/3p-filters.js

@@ -93,10 +93,14 @@ var renderFilterLists = function() {
         var elem, text;
         var entry = listDetails.available[listKey];
         var li = listEntryTemplate.clone();
-
         if ( entry.off !== true ) {
             li.descendants('input').attr('checked', '');
         }
+        if(entry.homeURL) {
+            if(entry.homeURL.lastIndexOf("https:", 0) === 0) {
+                li.addClass("secure", true);
+            }
+        }
 
         elem = li.descendants('a:nth-of-type(1)');
         elem.attr('href', encodeURI(listKey));