view correct timer result time

Author: hai-altx-soft

scripts/background.js

@@ -28,7 +28,7 @@ function backgroundCheck() {
                         tab.summaryTime += 1;
                         chrome.browserAction.setBadgeText({
                             tabId: activeTab.id,
-                            text: String(convertSummaryTimeToString(tab.summaryTime))
+                            text: String(convertSummaryTimeToBadgeString(tab.summaryTime))
                         });
                     }
                 });

scripts/common.js

@@ -13,19 +13,42 @@ function isEmpty(obj) {
     return JSON.stringify(obj) === JSON.stringify({});
 }
 
-function convertSummaryTimeToString(summaryTime) {
+function convertSummaryTimeToBadgeString(summaryTime) {
     var sec = (summaryTime);
-    var min = (summaryTime / 60);
-    var hours = (summaryTime / (60 * 60));
-    var days = (summaryTime / (60 * 60 * 24));
+    var min = (summaryTime / 60).toFixed(0);
+    var hours = (summaryTime / (60 * 60)).toFixed(0);
+    var days = (summaryTime / (60 * 60 * 24)).toFixed(0);
 
     if (sec < 60) {
-        return sec + " s";
+        return sec + "s";
     } else if (min < 60) {
-        return min + " m";
+        return min + "m";
     } else if (hours < 24) {
-        return hours + " h";
+        return hours + "h";
     } else {
-        return days + " d"
+        return days + "d"
     }
-}
+}
+
+function convertSummaryTimeToString(summaryTime) {
+    var days = Math.floor(summaryTime / 3600 / 24);
+    var totalHours = summaryTime % (3600 * 24);
+    var hours = Math.floor(totalHours / 3600);
+    var totalSeconds = summaryTime % 3600;
+    var mins = Math.floor(totalSeconds / 60);
+    var seconds = totalSeconds % 60;
+
+    hours = zeroAppend(hours);
+    mins = zeroAppend(mins);
+    seconds = zeroAppend(seconds);
+
+    if (days > 0)
+        return days + 'd ' + hours + 'h ' + mins + 'm ' + seconds + 's';
+    else return hours + 'h ' + mins + 'm ' + seconds + 's';
+}
+
+function zeroAppend(time){
+    if (time < 10)
+        return '0' + time;
+    else return time;
+}

scripts/webact.js

@@ -1,9 +1,8 @@
+'use strict';
+
 var storage = new LocalStorage();
 
-setTimeout(function run() {
-    getDataFromStorage();
-    setTimeout(run, SETTINGS_INTERVAL_CHECK_STORAGE);
-}, 0);
+getDataFromStorage();
 
 function getDataFromStorage() {
     storage.load(STORAGE_TABS, getTabsFromStorage);
@@ -17,15 +16,21 @@ function getTabsFromStorage(tabs) {
         div.classList.add('inline-flex');
 
         var img = document.createElement('img');
+        img.classList.add('favicon');
         img.setAttribute('height', 15);
         img.setAttribute('src', tabs[i].favicon);
 
-        var span = document.createElement('span');
-        span.innerText = tabs[i].url + ' ' + convertSummaryTimeToString(tabs[i].summaryTime);
-        span.classList.add('margin-left-5');
+        var spanUrl = document.createElement('span');
+        spanUrl.classList.add('span-url');
+        spanUrl.innerText = tabs[i].url;
+
+        var spanTime = document.createElement('span');
+        spanTime.classList.add('span-time');
+        spanTime.innerText = convertSummaryTimeToString(tabs[i].summaryTime);
 
         div.appendChild(img);
-        div.appendChild(span);
+        div.appendChild(spanUrl);
+        div.appendChild(spanTime);
         table.appendChild(div);
     }
 }

style/webact.css

@@ -1,7 +1,29 @@
+body {
+    font-family: "Segoe UI", Verdana, sans-serif !important;
+    color: #262626;
+}
+
 .inline-flex{
     display: inline-flex;
 }
 
-.margin-left-5{
-    margin-left: 5px;
+.span-url{
+    width: 200px;
+    text-decoration: none;
+    color: rgb(0, 0, 0);
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.span-url:hover{
+    color: rgb(107, 107, 107);
+}
+
+.span-time{
+    margin-left: 10px;
+    width: 70px;
+}
+
+.favicon{
+    margin-right:5px;
 }