Add feature of visits

Author: Stigmatoz

manifest.json

@@ -3,7 +3,7 @@
 
         "name": "Web Activity Time Tracker",
         "short_name": "Web Activity",
-        "version": "0.8.1",
+        "version": "0.8.2",
         "minimum_chrome_version": "26",
 
         "description": "Track your activity in the browser.",

scripts/chart/chart-core.js

@@ -144,6 +144,8 @@ function donutChart() {
                     var value = (!isNaN(parseFloat(data.data[key]))) ? percentFormat(data.data[key]) : data.data[key];
                     if (key === 'summary')
                         value = convertSummaryTimeToString(data.data[key]);
+                    if (key === 'visits' && data.data[key] !== undefined)
+                        value = data.data[key] + ' visits';
                     var className = '';
                     if (key === 'percentage')
                         className = 'class="percentageValue"';

scripts/ui.js

@@ -118,6 +118,10 @@ class UI {
         var div = document.createElement('div');
         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);
@@ -130,9 +134,6 @@ class UI {
         var spanUrl = document.createElement('span');
         spanUrl.classList.add('span-url');
         spanUrl.innerText = tab.url;
-        if (tab.url == currentTab) {
-            spanUrl.classList.add('span-active-url');
-        }
 
         if (typeOfList !== undefined && typeOfList === TypeListEnum.ToDay) {
             if (restrictionList !== undefined && restrictionList.length > 0) {
@@ -154,6 +155,16 @@ class UI {
             }
         }
 
+        var spanVisits = document.createElement('span');
+        spanVisits.classList.add('span-visits', 'tooltip', 'visits');
+        spanVisits.innerText = tab.counter !== undefined ? tab.counter : 0;
+
+        var visitsTooltip = document.createElement('span');
+        visitsTooltip.classList.add('tooltiptext');
+        visitsTooltip.innerText = 'Count of visits';
+
+        spanVisits.appendChild(visitsTooltip);
+
         var spanPercentage = document.createElement('span');
         spanPercentage.classList.add('span-percentage');
         spanPercentage.innerText = getPercentage(summaryTime);
@@ -164,6 +175,7 @@ class UI {
 
         div.appendChild(divForImg);
         div.appendChild(spanUrl);
+        div.appendChild(spanVisits);
         div.appendChild(spanPercentage);
         div.appendChild(spanTime);
         if (blockName !== undefined)

scripts/webact.js

@@ -124,7 +124,7 @@ function getTabsFromStorage(tabs) {
         ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList);
 
         if (i <= 8)
-            addTabForChart(tabsForChart, targetTabs[i].url, summaryTime);
+            addTabForChart(tabsForChart, targetTabs[i].url, summaryTime, targetTabs[i].counter);
         else addTabOthersForChart(tabsForChart, summaryTime);
     }
 
@@ -166,12 +166,13 @@ function getCurrentTab() {
     return chrome.extension.getBackgroundPage().currentTab;
 }
 
-function addTabForChart(tabsForChart, url, time) {
+function addTabForChart(tabsForChart, url, time, counter) {
     tabsForChart.push(
         {
             'url': url,
             'percentage': getPercentageForChart(time),
-            'summary': time
+            'summary': time,
+            'visits': counter
         }
     );
 }

style/webact.css

@@ -18,15 +18,16 @@ body {
 }
 
 .span-url{
-    width: 312px;
+    width: 282px;
     text-decoration: none;
     color: rgb(0, 0, 0);
     font-size: 13px;
     cursor: pointer;
 }
 
 .span-active-url{
-    font-weight: 700;
+    font-size: 13px;
+    font-weight: 650;
 }
 
 .span-total{
@@ -39,6 +40,19 @@ body {
     cursor: pointer;
 }
 
+.span-visits{
+    width: 30px;
+    /* padding: 0 10px 0 10px; */
+    color: rgb(137, 154, 190);
+    font-size: 11px;
+}
+
+.visits{
+    text-decoration: underline;
+    text-decoration-style: solid;
+    /* border-bottom: 1px dotted #ccc; */
+}
+
 .span-percentage{
     width: 70px;
     color: rgb(78, 78, 78);
@@ -268,6 +282,11 @@ p.table-header{
     opacity: 0;
     transition: opacity 0.3s;
   }
+
+  .visits.tooltip .tooltiptext{
+    width: 120px;
+    transform: translateX(-50%) translateY(-120%);
+  }
 
   /* Show the tooltip text when you mouse over the tooltip container */
   .tooltip:hover .tooltiptext {