add percentage of time

Author: Stigmatoz

scripts/activity.js

@@ -9,7 +9,7 @@ class Activity {
                 if (this.isNewUrl(domain)) {
                     var favicon = tab.favIconUrl;
                     if (favicon === undefined){
-                        favicon = 'chrome://favicon/' + tab.url;
+                        favicon = 'chrome://favicon/' + domain;
                     }
                     var newTab = new Tab(domain, favicon);
                     tabs.push(newTab);

scripts/webact.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var storage = new LocalStorage();
+var totalTime;
 
 getDataFromStorage();
 
@@ -14,6 +15,9 @@ function getTabsFromStorage(tabs) {
     tabs = tabs.sort(function (a, b) {
         return b.summaryTime - a.summaryTime;
     });
+
+    totalTime = setTotalTime(tabs);
+
     for (var i = 0; i < tabs.length; i++) {
         var div = document.createElement('div');
         div.classList.add('inline-flex');
@@ -27,21 +31,30 @@ function getTabsFromStorage(tabs) {
         spanUrl.classList.add('span-url');
         spanUrl.innerText = tabs[i].url;
 
+        var spanPercentage = document.createElement('span');
+        spanPercentage.classList.add('span-percentage');
+        spanPercentage.innerText = setPercentage(tabs[i].summaryTime);
+
         var spanTime = document.createElement('span');
         spanTime.classList.add('span-time');
         spanTime.innerText = convertSummaryTimeToString(tabs[i].summaryTime);
 
         div.appendChild(img);
         div.appendChild(spanUrl);
+        div.appendChild(spanPercentage);
         div.appendChild(spanTime);
         table.appendChild(div);
     }
-
-    setTotalTime(tabs);
 }
 
 function setTotalTime(tabs) {
     var summaryTimeList = tabs.map(function (a) { return a.summaryTime; });
     var total = summaryTimeList.reduce(function (a, b) { return a + b; })
     document.getElementById('totalTime').innerText = convertSummaryTimeToString(total);
+
+    return total;
+}
+
+function setPercentage(time){
+    return ((time / totalTime) * 100).toFixed(2) + '%';
 }

style/webact.css

@@ -20,14 +20,19 @@ body {
 }
 
 .span-total{
-    width: 220px;
+    width: 260px;
     text-decoration: none;
     color: rgb(0, 0, 0);
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
 }
 
+.span-percentage{
+    color: rgb(78, 78, 78);
+    font-size: 11px;
+}
+
 .span-time{
     margin-left: 10px;
     width: 70px;
@@ -40,6 +45,6 @@ body {
 
 hr {
     border: none;
-    background-color: rgb(187, 187, 187);
+    background-color: rgb(223, 222, 222);
     height: 2px;
    }