Add view current active tab

Author: Stigmatoz

src/icons/eye.png

@@ -75,7 +75,7 @@ class UI {
         var span = this.createElement('span', ['span-time']);
         this.createElementsForTotalTime(totalTime, currentTypeOfList, span);
 
-       this.appendChild(totalElement, [div, spanVisits, spanPercentage, span]);
+        this.appendChild(totalElement, [div, spanVisits, spanPercentage, span]);
     }
 
     fillEmptyBlock(elementName) {
@@ -120,8 +120,6 @@ class UI {
         d3.select('#chart')
             .datum(tabs) // bind data to the div
             .call(donut); // draw chart in div
-
-        ui.addHrAfterChart();
     }
 
     drawTimeChart(tabs) {
@@ -175,10 +173,6 @@ class UI {
         });
         div.classList.add('inline-flex');
 
-        if (tab.url == currentTab) {
-            div.classList.add('span-active-url');
-        }
-
         var divForImg = document.createElement('div');
         var img = document.createElement('img');
         img.setAttribute('height', 17);
@@ -190,6 +184,18 @@ class UI {
 
         var spanUrl = this.createElement('span', ['span-url'], tab.url);
 
+        if (tab.url == currentTab) {
+            div.classList.add('span-active-url');
+            var imgCurrentDomain = document.createElement('img');
+            imgCurrentDomain.setAttribute('src', '/icons/eye.png');
+            imgCurrentDomain.setAttribute('height', 17);
+            imgCurrentDomain.classList.add('margin-left-5');
+            spanUrl.appendChild(imgCurrentDomain);
+            var currentDomainTooltip = this.createElement('span', ['tooltiptext'], 'Current domain');
+            spanUrl.classList.add('tooltip', 'current-url');
+            spanUrl.appendChild(currentDomainTooltip);
+        }
+
         if (typeOfList !== undefined && typeOfList === TypeListEnum.ToDay) {
             if (restrictionList !== undefined && restrictionList.length > 0) {
                 var item = restrictionList.find(x => isDomainEquals(x.domain, tab.url));

src/scripts/ui.js

@@ -37,15 +37,6 @@ body {
     cursor: pointer;
 }
 
-.span-active-url .span-url{
-    font-size: 13px;
-    font-weight: 650;
-}
-.span-active-url .span-time{
-  color: rgb(0, 0, 0);
-  cursor: pointer;
-}
-
 .span-total{
     width: 450px;
     text-decoration: none;
@@ -311,7 +302,7 @@ p.table-header{
     font-size: 11px;
     font-weight: 500;
     visibility: hidden;
-    width: 220px;
+    width: 180px;
     background-color: #555;
     color: #fff;
     text-align: center;
@@ -321,7 +312,7 @@ p.table-header{
     /* Position the tooltip text */
     position: absolute;
     z-index: 1;
-    transform: translateX(-20%) translateY(-120%);
+    transform: translateX(-40%) translateY(-120%);
 
     /* Fade in tooltip */
     opacity: 0;
@@ -332,6 +323,11 @@ p.table-header{
     width: 120px;
     transform: translateX(-50%) translateY(-120%);
   }
+
+  .current-url.tooltip .tooltiptext{
+    width: 120px;
+    transform: translateX(-50%) translateY(-120%);
+  }
 
   /* Show the tooltip text when you mouse over the tooltip container */
   .tooltip:hover .tooltiptext {