From 99d96d0beca0c91f7a27dc61db34ec2c5d828d1d Mon Sep 17 00:00:00 2001 From: Stigmatoz Date: Fri, 26 Jun 2020 17:56:47 +0300 Subject: [PATCH 001/352] Add preloader for loading data from storage --- src/icons/preloader.svg | 1 + src/index.html | 4 + src/scripts/ui.js | 9 +++ src/scripts/webact.js | 169 +++++++++++++++++++++------------------- src/style/webact.css | 31 ++++++++ 5 files changed, 132 insertions(+), 82 deletions(-) create mode 100644 src/icons/preloader.svg diff --git a/src/icons/preloader.svg b/src/icons/preloader.svg new file mode 100644 index 0000000..cdd962e --- /dev/null +++ b/src/icons/preloader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 9fbcf49..4f7473d 100644 --- a/src/index.html +++ b/src/index.html @@ -15,6 +15,9 @@ +
+
Loading...
+
@@ -28,6 +31,7 @@

Web Activity Time Tracker

+
Today All-time diff --git a/src/scripts/ui.js b/src/scripts/ui.js index fe61528..d5ee5ce 100644 --- a/src/scripts/ui.js +++ b/src/scripts/ui.js @@ -395,4 +395,13 @@ class UI { return element; } + + setPreloader(){ + document.getElementById('preloader').classList.add('preloader'); + } + + removePreloader(){ + document.getElementById('preloader').classList.remove('preloader'); + document.getElementById('preloader').classList.add('hide'); + } } \ No newline at end of file diff --git a/src/scripts/webact.js b/src/scripts/webact.js index 20b0736..55278c7 100644 --- a/src/scripts/webact.js +++ b/src/scripts/webact.js @@ -10,43 +10,44 @@ var today = new Date().toLocaleDateString("en-US"); var setting_range_days; var restrictionList; var stat = { - set firstDay(value){ + set firstDay(value) { document.getElementById('statFirstDay').innerHTML = value; }, - set lastDay(value){ + set lastDay(value) { document.getElementById('statLastDay').innerHTML = value; }, - set activeDays(value){ + set activeDays(value) { document.getElementById('statActiveDays').innerHTML = value; }, - set totalDays(value){ + set totalDays(value) { document.getElementById('statTotalDays').innerHTML = value; }, - set inActiveDay(value){ + set inActiveDay(value) { document.getElementById('statInActiveDay').innerHTML = value; }, - set inActiveDayTime(value){ + set inActiveDayTime(value) { document.getElementById('statInActiveDayTime').innerHTML = ''; ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statInActiveDayTime')); }, - set activeDay(value){ + set activeDay(value) { document.getElementById('statActiveDay').innerHTML = value; }, - set activeDayTime(value){ + set activeDayTime(value) { document.getElementById('statActiveDayTime').innerHTML = ''; ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statActiveDayTime')); }, - set todayTime(value){ + set todayTime(value) { document.getElementById('statTodayTime').innerHTML = ''; ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statTodayTime')); }, - set allDaysTime(value){ + set allDaysTime(value) { document.getElementById('statAllDaysTime').innerHTML = ''; ui.createElementsForTotalTime(value, TypeListEnum.All, document.getElementById('statAllDaysTime')); }, }; document.addEventListener('DOMContentLoaded', function () { + ui.setPreloader(); storage.getValue(SETTINGS_INTERVAL_RANGE, function (item) { setting_range_days = item; }); document.getElementById('btnToday').addEventListener('click', function () { currentTypeOfList = TypeListEnum.ToDay; @@ -111,87 +112,91 @@ function fillEmptyBlock() { } function getTabsFromStorage(tabs) { - tabsFromStorage = tabs; - targetTabs = []; - - ui.clearUI(); - if (tabs === null) { - ui.fillEmptyBlock('chart'); - return; - } + setTimeout(function () { + tabsFromStorage = tabs; + targetTabs = []; - var counterOfSite; - if (currentTypeOfList === TypeListEnum.All) { - targetTabs = tabs.sort(function (a, b) { - return b.summaryTime - a.summaryTime; - }); - - if (targetTabs.length > 0) { - totalTime = getTotalTime(targetTabs); - stat.allDaysTime = totalTime; - } - else { + ui.clearUI(); + if (tabs === null) { ui.fillEmptyBlock('chart'); return; } - counterOfSite = tabs.length; - } - if (currentTypeOfList === TypeListEnum.ToDay) { - targetTabs = tabs.filter(x => x.days.find(s => s.date === today)); - counterOfSite = targetTabs.length; - if (targetTabs.length > 0) { - targetTabs = targetTabs.sort(function (a, b) { - return b.days.find(s => s.date === today).summary - a.days.find(s => s.date === today).summary; + var counterOfSite; + if (currentTypeOfList === TypeListEnum.All) { + targetTabs = tabs.sort(function (a, b) { + return b.summaryTime - a.summaryTime; }); - totalTime = getTotalTime(targetTabs); - stat.todayTime = totalTime; - } - else { - ui.fillEmptyBlock('chart'); - return; + if (targetTabs.length > 0) { + totalTime = getTotalTime(targetTabs); + stat.allDaysTime = totalTime; + } + else { + ui.fillEmptyBlock('chart'); + return; + } + + counterOfSite = tabs.length; } - } + if (currentTypeOfList === TypeListEnum.ToDay) { + targetTabs = tabs.filter(x => x.days.find(s => s.date === today)); + counterOfSite = targetTabs.length; + if (targetTabs.length > 0) { + targetTabs = targetTabs.sort(function (a, b) { + return b.days.find(s => s.date === today).summary - a.days.find(s => s.date === today).summary; + }); - if (currentTypeOfList === TypeListEnum.All) - ui.addTableHeader(currentTypeOfList, counterOfSite, getFirstDay()); - if (currentTypeOfList === TypeListEnum.ToDay) - ui.addTableHeader(currentTypeOfList, counterOfSite); + totalTime = getTotalTime(targetTabs); + stat.todayTime = totalTime; + } + else { + ui.fillEmptyBlock('chart'); + return; + } + } - var currentTab = getCurrentTab(); + if (currentTypeOfList === TypeListEnum.All) + ui.addTableHeader(currentTypeOfList, counterOfSite, getFirstDay()); + if (currentTypeOfList === TypeListEnum.ToDay) + ui.addTableHeader(currentTypeOfList, counterOfSite); + + var currentTab = getCurrentTab(); + + var tabsForChart = []; + var summaryCounter = 0; + for (var i = 0; i < targetTabs.length; i++) { + var summaryTime; + var counter; + if (currentTypeOfList === TypeListEnum.ToDay) { + summaryTime = targetTabs[i].days.find(x => x.date == today).summary; + if (targetTabs[i].days.find(x => x.date == today)) + counter = targetTabs[i].days.find(x => x.date == today).counter; + } + if (currentTypeOfList === TypeListEnum.All) { + summaryTime = targetTabs[i].summaryTime; + counter = targetTabs[i].counter; + } - var tabsForChart = []; - var summaryCounter = 0; - for (var i = 0; i < targetTabs.length; i++) { - var summaryTime; - var counter; - if (currentTypeOfList === TypeListEnum.ToDay) { - summaryTime = targetTabs[i].days.find(x => x.date == today).summary; - if (targetTabs[i].days.find(x => x.date == today)) - counter = targetTabs[i].days.find(x => x.date == today).counter; - } - if (currentTypeOfList === TypeListEnum.All) { - summaryTime = targetTabs[i].summaryTime; - counter = targetTabs[i].counter; - } + summaryCounter += counter; - summaryCounter += counter; + if (currentTypeOfList === TypeListEnum.ToDay || (currentTypeOfList === TypeListEnum.All && i <= 30)) + ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList, counter); + else + ui.addExpander(); - if (currentTypeOfList === TypeListEnum.ToDay || (currentTypeOfList === TypeListEnum.All && i <= 30)) - ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList, counter); - else - ui.addExpander(); + if (i <= 8) + addTabForChart(tabsForChart, targetTabs[i].url, summaryTime, counter); + else addTabOthersForChart(tabsForChart, summaryTime); + } - if (i <= 8) - addTabForChart(tabsForChart, targetTabs[i].url, summaryTime, counter); - else addTabOthersForChart(tabsForChart, summaryTime); - } + ui.addHrAfterTableOfSite(); + ui.createTotalBlock(totalTime, currentTypeOfList, summaryCounter); + ui.drawChart(tabsForChart); + ui.setActiveTooltipe(currentTab); - ui.addHrAfterTableOfSite(); - ui.createTotalBlock(totalTime, currentTypeOfList, summaryCounter); - ui.drawChart(tabsForChart); - ui.setActiveTooltipe(currentTab); + ui.removePreloader(); + }, 4000); } function getTabsForTimeChart(timeIntervals) { @@ -319,7 +324,7 @@ function getFirstDay() { return array.push(a.date); }); }); - + array = array.sort(function (a, b) { return new Date(a) - new Date(b); }); @@ -331,7 +336,7 @@ function getFirstDay() { }; } -function setStatData(array){ +function setStatData(array) { var arrayAscByTime = []; tabsFromStorage.forEach(tab => { return tab.days.forEach(day => { @@ -351,13 +356,13 @@ function setStatData(array){ return a.total - b.total; }); stat.inActiveDay = new Date(arrayAscByTime[0].date).toLocaleDateString('ru-RU'); - stat.activeDay = new Date(arrayAscByTime[arrayAscByTime.length-1].date).toLocaleDateString('ru-RU');; + stat.activeDay = new Date(arrayAscByTime[arrayAscByTime.length - 1].date).toLocaleDateString('ru-RU');; stat.inActiveDayTime = arrayAscByTime[0].total; - stat.activeDayTime = arrayAscByTime[arrayAscByTime.length-1].total; + stat.activeDayTime = arrayAscByTime[arrayAscByTime.length - 1].total; stat.firstDay = new Date(array[0]).toLocaleDateString('ru-RU');; - stat.lastDay = new Date(array[array.length-1]).toLocaleDateString('ru-RU');; + stat.lastDay = new Date(array[array.length - 1]).toLocaleDateString('ru-RU');; stat.activeDays = array.length; - stat.totalDays = daysBetween(array[0], array[array.length-1]); + stat.totalDays = daysBetween(array[0], array[array.length - 1]); } function getTabsByDays(tabs) { diff --git a/src/style/webact.css b/src/style/webact.css index c8ff3e2..48a5ef8 100644 --- a/src/style/webact.css +++ b/src/style/webact.css @@ -442,4 +442,35 @@ p.table-header{ color: #9b9b9b; font-size: 13px; text-align: center; + } + + .preloader { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + background: #fff; + z-index: 1001; + } + + .preloader__image { + position: relative; + top: 50%; + left: 50%; + width: 64px; + height: 64px; + margin-top: -32px; + margin-left: -32px; + background: url(/icons/preloader.svg) no-repeat 50% 50%; + } + + .loaded_hiding .preloader { + transition: 0.3s opacity; + opacity: 0; + } + + .loaded .preloader { + display: none; } \ No newline at end of file From 69419f1de3be4e05144f8e1c86e71d053f140fd7 Mon Sep 17 00:00:00 2001 From: Stigmatoz Date: Tue, 30 Jun 2020 13:11:38 +0300 Subject: [PATCH 002/352] Pass data from background page to popup and show hint with features --- src/index.html | 178 +++++++++--------- src/options.html | 320 ++++++++++++++++--------------- src/scripts/background.js | 98 +++++----- src/scripts/common.js | 45 +++-- src/scripts/storage.js | 15 +- src/scripts/ui.js | 30 ++- src/scripts/webact.js | 249 ++++++++++++------------ src/style/webact.css | 387 +++++++++++++++++++++----------------- 8 files changed, 691 insertions(+), 631 deletions(-) diff --git a/src/index.html b/src/index.html index 4f7473d..68bc570 100644 --- a/src/index.html +++ b/src/index.html @@ -2,23 +2,19 @@ - - Web Activity Time Tracker - - - - - - - - + + Web Activity Time Tracker + + -
-
Loading...
-
- +
+
+
Loading...
+
+
+ @@ -28,80 +24,94 @@ -
-

Web Activity Time Tracker

-
-
- -
-

Overall stats

-
-
-
-
First day
-
+
+

Web Activity Time Tracker

+
+
+ Today + All-time + By days + Settings +
+
✖
+

You can:

+

➤ set daily limits for sites

+

➤ set notifications after a certain time has elapsed

+

➤ set a list of sites with no tracking

+

➤ enable time tracking on youtube.com

+
+
+
+

Overall stats

+
+
+
+
First day
+
+
+
+
Last day
+
+
-
-
Last day
-
+
+
+
Active days
+
+
+
+
Days in total
+
+
-
-
-
-
Active days
-
+
+
+
Today
+
+
+
+
All-time
+
+
-
-
Days in total
-
+
+
+
Most active day
+
+
+
+
+
+
+
Most inactive day
+
+
+
+
+
-
-
-
-
Today
-
-
-
-
All-time
-
-
-
-
-
-
Most active day
-
-
-
-
-
-
-
Most inactive day
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
+
+
+ +
+
+ +
+
+
+
+
- \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/src/options.html b/src/options.html index 639111b..4ac4756 100644 --- a/src/options.html +++ b/src/options.html @@ -2,43 +2,43 @@ - - Web Activity Time Tracker - - - - - - - - - + + Web Activity Time Tracker + + + + + + + + + -
-
-

Web Activity Time Tracker

-
- -
-
-
+
+
\ No newline at end of file diff --git a/src/scripts/background.js b/src/scripts/background.js index ed691d6..d069ceb 100644 --- a/src/scripts/background.js +++ b/src/scripts/background.js @@ -27,7 +27,7 @@ function updateStorage() { } function backgroundCheck() { - chrome.windows.getLastFocused({ populate: true }, function (currentWindow) { + chrome.windows.getLastFocused({ populate: true }, function(currentWindow) { if (currentWindow.focused) { var activeTab = currentWindow.tabs.find(t => t.active === true); if (activeTab !== undefined && activity.isValidPage(activeTab)) { @@ -48,11 +48,10 @@ function backgroundCheck() { if (currentTab !== tab.url) { activity.setCurrentActiveTab(tab.url); } - chrome.idle.queryState(parseInt(setting_interval_inactivity), function (state) { + chrome.idle.queryState(parseInt(setting_interval_inactivity), function(state) { if (state === 'active') { mainTRacker(activeUrl, tab, activeTab); - } - else checkDOM(state, activeUrl, tab, activeTab); + } else checkDOM(state, activeUrl, tab, activeTab); }); } } @@ -93,44 +92,45 @@ function mainTRacker(activeUrl, tab, activeTab) { } function showNotification(activeUrl, tab) { - chrome.notifications.clear('watt-site-notification', function (wasCleared) { + chrome.notifications.clear('watt-site-notification', function(wasCleared) { if (!wasCleared) { console.log('!wasCleared'); chrome.notifications.create( 'watt-site-notification', { - type: 'basic', - iconUrl: 'icons/128x128.png', - title: "Web Activity Time Tracker", - contextMessage: activeUrl + ' ' + convertShortSummaryTimeToString(tab.getTodayTime()), - message: setting_notification_message - }, function (notificationId) { - console.log(notificationId); - chrome.notifications.clear('watt-site-notification', function (wasCleared) { - if (wasCleared) - notificationAction(activeUrl, tab); + type: 'basic', + iconUrl: 'icons/128x128.png', + title: "Web Activity Time Tracker", + contextMessage: activeUrl + ' ' + convertShortSummaryTimeToString(tab.getTodayTime()), + message: setting_notification_message + }, + function(notificationId) { + console.log(notificationId); + chrome.notifications.clear('watt-site-notification', function(wasCleared) { + if (wasCleared) + notificationAction(activeUrl, tab); }); - }); + }); } else { notificationAction(activeUrl, tab); } }); } -function notificationAction(activeUrl, tab){ +function notificationAction(activeUrl, tab) { chrome.notifications.create( 'watt-site-notification', { - type: 'basic', - iconUrl: 'icons/128x128.png', - title: "Web Activity Time Tracker", - contextMessage: activeUrl + ' ' + convertShortSummaryTimeToString(tab.getTodayTime()), - message: setting_notification_message - }); + type: 'basic', + iconUrl: 'icons/128x128.png', + title: "Web Activity Time Tracker", + contextMessage: activeUrl + ' ' + convertShortSummaryTimeToString(tab.getTodayTime()), + message: setting_notification_message + }); } function setBlockPageToCurrent(activeUrl) { var blockUrl = chrome.runtime.getURL("block.html") + '?url=' + activeUrl; - chrome.tabs.query({ currentWindow: true, active: true }, function (tab) { + chrome.tabs.query({ currentWindow: true, active: true }, function(tab) { chrome.tabs.update(tab.id, { url: blockUrl }); }); } @@ -139,15 +139,13 @@ function isVideoPlayedOnPage() { var videoElement = document.getElementsByTagName('video')[0]; if (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2) { return true; - } - else return false; + } else return false; } function checkDOM(state, activeUrl, tab, activeTab) { if (state === 'idle' && isDomainEquals(activeUrl, "youtube.com")) { trackForYT(mainTRacker, activeUrl, tab, activeTab); - } - else activity.closeIntervalForCurrentTab(); + } else activity.closeIntervalForCurrentTab(); } function trackForYT(callback, activeUrl, tab, activeTab) { @@ -182,7 +180,7 @@ function setDefaultSettings() { } function checkSettingsImEmpty() { - chrome.storage.local.getBytesInUse(['inactivity_interval'], function (item) { + chrome.storage.local.getBytesInUse(['inactivity_interval'], function(item) { if (item == 0) { setDefaultSettings(); } @@ -194,28 +192,30 @@ function setDefaultValueForNewSettings() { } function addListener() { - chrome.tabs.onActivated.addListener(function (info) { - chrome.tabs.get(info.tabId, function (tab) { + chrome.tabs.onActivated.addListener(function(info) { + chrome.tabs.get(info.tabId, function(tab) { activity.addTab(tab); }); }); - chrome.webNavigation.onCompleted.addListener(function (details) { - chrome.tabs.get(details.tabId, function (tab) { + chrome.webNavigation.onCompleted.addListener(function(details) { + chrome.tabs.get(details.tabId, function(tab) { activity.updateFavicon(tab); }); }); - chrome.runtime.onInstalled.addListener(function (details) { + chrome.runtime.onInstalled.addListener(function(details) { if (details.reason == 'install') { + storage.saveValue(SETTINGS_SHOW_HINT, SETTINGS_SHOW_HINT_DEFAULT); setDefaultSettings(); } if (details.reason == 'update') { + storage.saveValue(SETTINGS_SHOW_HINT, SETTINGS_SHOW_HINT_DEFAULT); checkSettingsImEmpty(); setDefaultValueForNewSettings(); isNeedDeleteTimeIntervalFromTabs = true; } }); - chrome.storage.onChanged.addListener(function (changes, namespace) { + chrome.storage.onChanged.addListener(function(changes, namespace) { for (var key in changes) { if (key === STORAGE_BLACK_LIST) { loadBlackList(); @@ -230,10 +230,10 @@ function addListener() { loadNotificationMessage(); } if (key === SETTINGS_INTERVAL_INACTIVITY) { - storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function (item) { setting_interval_inactivity = item; }); + storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function(item) { setting_interval_inactivity = item; }); } if (key === SETTINGS_VIEW_TIME_IN_BADGE) { - storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function (item) { setting_view_in_badge = item; }); + storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function(item) { setting_view_in_badge = item; }); } } }); @@ -242,7 +242,7 @@ function addListener() { } function loadTabs() { - storage.loadTabs(STORAGE_TABS, function (items) { + storage.loadTabs(STORAGE_TABS, function(items) { tabs = []; if (items != undefined) { for (var i = 0; i < items.length; i++) { @@ -255,8 +255,8 @@ function loadTabs() { } function deleteTimeIntervalFromTabs() { - tabs.forEach(function (item) { - item.days.forEach(function (day) { + tabs.forEach(function(item) { + item.days.forEach(function(day) { if (day.time != undefined) day.time = []; }) @@ -268,13 +268,13 @@ function deleteYesterdayTimeInterval() { } function loadBlackList() { - storage.getValue(STORAGE_BLACK_LIST, function (items) { + storage.getValue(STORAGE_BLACK_LIST, function(items) { setting_black_list = items; }) } function loadTimeIntervals() { - storage.getValue(STORAGE_TIMEINTERVAL_LIST, function (items) { + storage.getValue(STORAGE_TIMEINTERVAL_LIST, function(items) { timeIntervalList = []; if (items != undefined) { for (var i = 0; i < items.length; i++) { @@ -286,19 +286,19 @@ function loadTimeIntervals() { } function loadRestrictionList() { - storage.getValue(STORAGE_RESTRICTION_LIST, function (items) { + storage.getValue(STORAGE_RESTRICTION_LIST, function(items) { setting_restriction_list = items; }) } function loadNotificationList() { - storage.getValue(STORAGE_NOTIFICATION_LIST, function (items) { + storage.getValue(STORAGE_NOTIFICATION_LIST, function(items) { setting_notification_list = items; }); } function loadNotificationMessage() { - storage.getValue(STORAGE_NOTIFICATION_MESSAGE, function (item) { + storage.getValue(STORAGE_NOTIFICATION_MESSAGE, function(item) { setting_notification_message = item; if (isEmpty(setting_notification_message)) { storage.saveValue(STORAGE_NOTIFICATION_MESSAGE, STORAGE_NOTIFICATION_MESSAGE_DEFAULT); @@ -308,8 +308,8 @@ function loadNotificationMessage() { } function loadSettings() { - storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function (item) { setting_interval_inactivity = item; }); - storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function (item) { setting_view_in_badge = item; }); + storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function(item) { setting_interval_inactivity = item; }); + storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function(item) { setting_view_in_badge = item; }); } function loadAddDataFromStorage() { @@ -331,7 +331,7 @@ function checkPermissionsForYT(callbackIfTrue, callbackIfFalse, ...props) { chrome.permissions.contains({ permissions: ['tabs'], origins: ["https://www.youtube.com/*"] - }, function (result) { + }, function(result) { if (callbackIfTrue != undefined && result) callbackIfTrue(...props); if (callbackIfFalse != undefined && !result) @@ -343,7 +343,7 @@ function checkPermissionsForYT(callbackIfTrue, callbackIfFalse, ...props) { function checkPermissionsForNotifications(callback, ...props) { chrome.permissions.contains({ permissions: ["notifications"] - }, function (result) { + }, function(result) { if (callback != undefined && result) callback(...props); isHasPermissioForNotification = result; diff --git a/src/scripts/common.js b/src/scripts/common.js index fa43d6a..b56f86a 100644 --- a/src/scripts/common.js +++ b/src/scripts/common.js @@ -40,12 +40,14 @@ var SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT = 2000; var SETTINGS_INTERVAL_CHECK_STORAGE_DEFAULT = 3000; var SETTINGS_INTERVAL_RANGE_DEFAULT = RangeForDays.days7; var SETTINGS_VIEW_TIME_IN_BADGE_DEFAULT = true; +var SETTINGS_SHOW_HINT_DEFAULT = true; var STORAGE_NOTIFICATION_MESSAGE_DEFAULT = 'You have spent a lot of time on this site'; var SETTINGS_INTERVAL_INACTIVITY = 'inactivity_interval'; var SETTINGS_INTERVAL_SAVE_STORAGE = 'interval_save_in_storage'; var SETTINGS_INTERVAL_RANGE = 'range_days'; var SETTINGS_VIEW_TIME_IN_BADGE = 'view_time_in_badge'; +var SETTINGS_SHOW_HINT = 'show_hint'; function isEmpty(obj) { for (var prop in obj) { @@ -120,10 +122,12 @@ function getArrayTime(summaryTime) { mins = zeroAppend(mins); seconds = zeroAppend(seconds); - return {'days': days, - 'hours': hours, - 'mins': mins, - 'seconds': seconds}; + return { + 'days': days, + 'hours': hours, + 'mins': mins, + 'seconds': seconds + }; } function convertSummaryTimeToString(summaryTime) { @@ -153,21 +157,30 @@ function isDateInRange(dateStr, range) { return new Date(dateStr) >= range.from && new Date(dateStr) <= range.to; } -function isCorrectDate(range){ +function isCorrectDate(range) { return range.from.getFullYear() >= 2019 && range.to.getFullYear() >= 2019; } function getDateFromRange(range) { switch (range) { - case 'days2': return 2; - case 'days3': return 3; - case 'days4': return 4; - case 'days5': return 5; - case 'days6': return 6; - case 'days7': return 7; - case 'month1': return 30; - case 'month2': return 60; - case 'month3': return 90; + case 'days2': + return 2; + case 'days3': + return 3; + case 'days4': + return 4; + case 'days5': + return 5; + case 'days6': + return 6; + case 'days7': + return 7; + case 'month1': + return 30; + case 'month2': + return 60; + case 'month3': + return 90; } } @@ -175,7 +188,7 @@ function isDomainEquals(first, second) { if (first === second) return true; else { - var resultUrl = function (url) { + var resultUrl = function(url) { if (url.indexOf('www.') > -1) return url.split('www.')[1]; return url; @@ -196,4 +209,4 @@ function treatAsUTC(date) { function daysBetween(startDate, endDate) { var millisecondsPerDay = 24 * 60 * 60 * 1000; return ((treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay) + 1; -} +} \ No newline at end of file diff --git a/src/scripts/storage.js b/src/scripts/storage.js index 3185c95..fc63192 100644 --- a/src/scripts/storage.js +++ b/src/scripts/storage.js @@ -2,13 +2,12 @@ class LocalStorage { loadTabs(name, callback, callbackIsUndefined) { - chrome.storage.local.get(name, function (item) { + chrome.storage.local.get(name, function(item) { if (item[name] !== undefined) { var result = item[name]; if (result !== undefined) callback(result); - } - else { + } else { if (callbackIsUndefined !== undefined) callbackIsUndefined(); } @@ -22,11 +21,13 @@ class LocalStorage { } saveValue(name, value) { - chrome.storage.local.set({ [name]: value }); + chrome.storage.local.set({ + [name]: value + }); } getValue(name, callback) { - chrome.storage.local.get(name, function (item) { + chrome.storage.local.get(name, function(item) { if (item !== undefined) { callback(item[name]); } @@ -35,5 +36,5 @@ class LocalStorage { getMemoryUse(name, callback) { chrome.storage.local.getBytesInUse(name, callback); - } -}; \ No newline at end of file + }; +} \ No newline at end of file diff --git a/src/scripts/ui.js b/src/scripts/ui.js index d5ee5ce..91fcd94 100644 --- a/src/scripts/ui.js +++ b/src/scripts/ui.js @@ -149,26 +149,24 @@ class UI { addLineToTableOfSite(tab, currentTab, summaryTime, typeOfList, counter, blockName) { var div = document.createElement('div'); - div.addEventListener('mouseenter', function () { + div.addEventListener('mouseenter', function() { if (document.getElementById('chart').innerHTML !== '') { var item = document.getElementById(tab.url); if (item !== null) { item.dispatchEvent(new Event('mouseenter')); item.classList.add('mouse-over'); - } - else { + } else { document.getElementById('Others').dispatchEvent(new Event('mouseenter')); document.getElementById('Others').classList.add('mouse-over'); } } }); - div.addEventListener('mouseout', function () { + div.addEventListener('mouseout', function() { if (document.getElementById('chart').innerHTML !== '') { var item = document.getElementById(tab.url); if (item !== null) { item.classList.remove('mouse-over'); - } - else document.getElementById('Others').classList.remove('mouse-over'); + } else document.getElementById('Others').classList.remove('mouse-over'); } }); div.classList.add('inline-flex'); @@ -232,12 +230,11 @@ class UI { createElementsForTotalTime(summaryTime, typeOfList, parentElement) { var arr = getArrayTime(summaryTime); var isNextPartActiv = false; - var getCssClass = function (item) { + var getCssClass = function(item) { if (item > 0) { isNextPartActiv = true; return ['span-active-time']; - } - else { + } else { if (isNextPartActiv) return ['span-active-time']; return null; @@ -257,7 +254,7 @@ class UI { if (document.getElementById('expander') === null) { var div = this.createElement('div', ['expander'], 'Show all'); div.id = 'expander'; - div.addEventListener('click', function () { + div.addEventListener('click', function() { ui.expand(); }); this.getTableOfSite().appendChild(div); @@ -296,11 +293,11 @@ class UI { div.append(tableForDaysBlock); - document.getElementById('dateFrom').addEventListener('change', function () { + document.getElementById('dateFrom').addEventListener('change', function() { getTabsByDays(tabsFromStorage); }); - document.getElementById('dateTo').addEventListener('change', function () { + document.getElementById('dateTo').addEventListener('change', function() { getTabsByDays(tabsFromStorage); }); } @@ -346,7 +343,7 @@ class UI { div.id = days[i].date + '_block'; parent.appendChild(div); - document.getElementById(days[i].date).addEventListener('click', function () { + document.getElementById(days[i].date).addEventListener('click', function() { var element = document.getElementById(this.id + '_block'); element.innerHTML = null; getTabsFromStorageByDay(this.id, this.id + '_block') @@ -367,8 +364,7 @@ class UI { 'date': day.date, 'total': day.total }); - } - else resultList.push({ + } else resultList.push({ 'date': element, 'total': 0 }); @@ -396,11 +392,11 @@ class UI { return element; } - setPreloader(){ + setPreloader() { document.getElementById('preloader').classList.add('preloader'); } - removePreloader(){ + removePreloader() { document.getElementById('preloader').classList.remove('preloader'); document.getElementById('preloader').classList.add('hide'); } diff --git a/src/scripts/webact.js b/src/scripts/webact.js index 55278c7..ee4c74a 100644 --- a/src/scripts/webact.js +++ b/src/scripts/webact.js @@ -1,5 +1,6 @@ 'use strict'; +var tabsFromBackground; var storage = new LocalStorage(); var ui = new UI(); var totalTime; @@ -46,33 +47,38 @@ var stat = { }, }; -document.addEventListener('DOMContentLoaded', function () { +document.addEventListener('DOMContentLoaded', function() { ui.setPreloader(); - storage.getValue(SETTINGS_INTERVAL_RANGE, function (item) { setting_range_days = item; }); - document.getElementById('btnToday').addEventListener('click', function () { + + storage.getValue(SETTINGS_INTERVAL_RANGE, function(item) { setting_range_days = item; }); + document.getElementById('btnToday').addEventListener('click', function() { currentTypeOfList = TypeListEnum.ToDay; ui.setUIForToday(); getDataFromStorage(); }); - document.getElementById('donutChartBtn').addEventListener('click', function () { + document.getElementById('donutChartBtn').addEventListener('click', function() { ui.setUIForDonutChart(); getDataFromStorage(); }); - document.getElementById('heatMapChartBtn').addEventListener('click', function () { + document.getElementById('heatMapChartBtn').addEventListener('click', function() { ui.setUIForTimeChart(); getTimeIntervalList(); }); - document.getElementById('btnAll').addEventListener('click', function () { + document.getElementById('btnAll').addEventListener('click', function() { currentTypeOfList = TypeListEnum.All; ui.setUIForAll(); getDataFromStorage(); }); - document.getElementById('btnByDays').addEventListener('click', function () { + document.getElementById('btnByDays').addEventListener('click', function() { currentTypeOfList = TypeListEnum.ByDays; ui.setUIForByDays(setting_range_days); getDataFromStorageByDays(); }); - document.getElementById('settings').addEventListener('click', function () { + document.getElementById('closeHintBtn').addEventListener('click', function() { + document.getElementById('hintForUsers').classList.add('hide'); + storage.saveValue(SETTINGS_SHOW_HINT, false); + }); + document.getElementById('settings').addEventListener('click', function() { if (chrome.runtime.openOptionsPage) { chrome.runtime.openOptionsPage(); } else { @@ -84,9 +90,16 @@ document.addEventListener('DOMContentLoaded', function () { firstInitPage(); function firstInitPage() { - currentTypeOfList = TypeListEnum.ToDay; - getLimitsListFromStorage(); - getDataFromStorage(); + chrome.runtime.getBackgroundPage(function(bg) { + tabsFromBackground = bg.tabs; + currentTypeOfList = TypeListEnum.ToDay; + getLimitsListFromStorage(); + getDataFromStorage(); + storage.getValue(SETTINGS_SHOW_HINT, function(item) { + if (item) + document.getElementById('hintForUsers').classList.remove('hide'); + }); + }); } function getLimitsListFromStorage() { @@ -94,11 +107,14 @@ function getLimitsListFromStorage() { } function getDataFromStorage() { - storage.loadTabs(STORAGE_TABS, getTabsFromStorage, fillEmptyBlock); + if (tabsFromBackground != undefined && tabsFromBackground != null && tabsFromBackground.length > 0) + getTabsFromStorage(tabsFromBackground); + else fillEmptyBlock(); } function getDataFromStorageByDays() { - storage.loadTabs(STORAGE_TABS, getTabsByDays); + if (tabsFromBackground != undefined && tabsFromBackground != null && tabsFromBackground.length > 0) + getTabsByDays(tabsFromBackground); } function getLimitsListFromStorageCallback(items) { @@ -108,103 +124,100 @@ function getLimitsListFromStorageCallback(items) { } function fillEmptyBlock() { + ui.removePreloader(); ui.fillEmptyBlock('chart'); } function getTabsFromStorage(tabs) { - setTimeout(function () { - tabsFromStorage = tabs; - targetTabs = []; + tabsFromStorage = tabs; + targetTabs = []; + + ui.clearUI(); + if (tabs === null) { + ui.fillEmptyBlock('chart'); + return; + } + + var counterOfSite; + if (currentTypeOfList === TypeListEnum.All) { + targetTabs = tabs.sort(function(a, b) { + return b.summaryTime - a.summaryTime; + }); - ui.clearUI(); - if (tabs === null) { + if (targetTabs.length > 0) { + totalTime = getTotalTime(targetTabs); + stat.allDaysTime = totalTime; + } else { ui.fillEmptyBlock('chart'); return; } - var counterOfSite; - if (currentTypeOfList === TypeListEnum.All) { - targetTabs = tabs.sort(function (a, b) { - return b.summaryTime - a.summaryTime; + counterOfSite = tabs.length; + } + if (currentTypeOfList === TypeListEnum.ToDay) { + targetTabs = tabs.filter(x => x.days.find(s => s.date === today)); + counterOfSite = targetTabs.length; + if (targetTabs.length > 0) { + targetTabs = targetTabs.sort(function(a, b) { + return b.days.find(s => s.date === today).summary - a.days.find(s => s.date === today).summary; }); - if (targetTabs.length > 0) { - totalTime = getTotalTime(targetTabs); - stat.allDaysTime = totalTime; - } - else { - ui.fillEmptyBlock('chart'); - return; - } - - counterOfSite = tabs.length; + totalTime = getTotalTime(targetTabs); + stat.todayTime = totalTime; + } else { + ui.fillEmptyBlock('chart'); + return; } - if (currentTypeOfList === TypeListEnum.ToDay) { - targetTabs = tabs.filter(x => x.days.find(s => s.date === today)); - counterOfSite = targetTabs.length; - if (targetTabs.length > 0) { - targetTabs = targetTabs.sort(function (a, b) { - return b.days.find(s => s.date === today).summary - a.days.find(s => s.date === today).summary; - }); + } - totalTime = getTotalTime(targetTabs); - stat.todayTime = totalTime; - } - else { - ui.fillEmptyBlock('chart'); - return; - } - } + if (currentTypeOfList === TypeListEnum.All) + ui.addTableHeader(currentTypeOfList, counterOfSite, getFirstDay()); + if (currentTypeOfList === TypeListEnum.ToDay) + ui.addTableHeader(currentTypeOfList, counterOfSite); - if (currentTypeOfList === TypeListEnum.All) - ui.addTableHeader(currentTypeOfList, counterOfSite, getFirstDay()); - if (currentTypeOfList === TypeListEnum.ToDay) - ui.addTableHeader(currentTypeOfList, counterOfSite); - - var currentTab = getCurrentTab(); - - var tabsForChart = []; - var summaryCounter = 0; - for (var i = 0; i < targetTabs.length; i++) { - var summaryTime; - var counter; - if (currentTypeOfList === TypeListEnum.ToDay) { - summaryTime = targetTabs[i].days.find(x => x.date == today).summary; - if (targetTabs[i].days.find(x => x.date == today)) - counter = targetTabs[i].days.find(x => x.date == today).counter; - } - if (currentTypeOfList === TypeListEnum.All) { - summaryTime = targetTabs[i].summaryTime; - counter = targetTabs[i].counter; - } + var currentTab = getCurrentTab(); + + var tabsForChart = []; + var summaryCounter = 0; + for (var i = 0; i < targetTabs.length; i++) { + var summaryTime; + var counter; + if (currentTypeOfList === TypeListEnum.ToDay) { + summaryTime = targetTabs[i].days.find(x => x.date == today).summary; + if (targetTabs[i].days.find(x => x.date == today)) + counter = targetTabs[i].days.find(x => x.date == today).counter; + } + if (currentTypeOfList === TypeListEnum.All) { + summaryTime = targetTabs[i].summaryTime; + counter = targetTabs[i].counter; + } - summaryCounter += counter; + summaryCounter += counter; - if (currentTypeOfList === TypeListEnum.ToDay || (currentTypeOfList === TypeListEnum.All && i <= 30)) - ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList, counter); - else - ui.addExpander(); + if (currentTypeOfList === TypeListEnum.ToDay || (currentTypeOfList === TypeListEnum.All && i <= 30)) + ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList, counter); + else + ui.addExpander(); - if (i <= 8) - addTabForChart(tabsForChart, targetTabs[i].url, summaryTime, counter); - else addTabOthersForChart(tabsForChart, summaryTime); - } + if (i <= 8) + addTabForChart(tabsForChart, targetTabs[i].url, summaryTime, counter); + else addTabOthersForChart(tabsForChart, summaryTime); + } - ui.addHrAfterTableOfSite(); - ui.createTotalBlock(totalTime, currentTypeOfList, summaryCounter); - ui.drawChart(tabsForChart); - ui.setActiveTooltipe(currentTab); + ui.addHrAfterTableOfSite(); + ui.createTotalBlock(totalTime, currentTypeOfList, summaryCounter); + ui.drawChart(tabsForChart); + ui.setActiveTooltipe(currentTab); - ui.removePreloader(); - }, 4000); + ui.removePreloader(); } function getTabsForTimeChart(timeIntervals) { var resultArr = []; if (timeIntervals != undefined) { - timeIntervals.forEach(function (data) { + timeIntervals.forEach(function(data) { if (data.day == today) { - data.intervals.forEach(function (interval) { + data.intervals.forEach(function(interval) { resultArr.push({ 'domain': data.domain, 'interval': interval }); }); } @@ -214,7 +227,8 @@ function getTabsForTimeChart(timeIntervals) { } function getTabsForExpander() { - storage.loadTabs(STORAGE_TABS, getTabsFromStorageForExpander); + if (tabsFromBackground != undefined && tabsFromBackground != null && tabsFromBackground.length > 0) + getTabsFromStorageForExpander(tabsFromBackground); } function getTimeIntervalList() { @@ -229,7 +243,7 @@ function getTabsFromStorageForExpander(tabs) { tabsFromStorage = tabs; targetTabs = []; - targetTabs = tabs.sort(function (a, b) { + targetTabs = tabs.sort(function(a, b) { return b.summaryTime - a.summaryTime; }); @@ -259,20 +273,20 @@ function getTabsFromStorageForExpander(tabs) { function getTotalTime(tabs) { var total; if (currentTypeOfList === TypeListEnum.ToDay) { - var summaryTimeList = tabs.map(function (a) { return a.days.find(s => s.date === today).summary; }); - total = summaryTimeList.reduce(function (a, b) { return a + b; }) + var summaryTimeList = tabs.map(function(a) { return a.days.find(s => s.date === today).summary; }); + total = summaryTimeList.reduce(function(a, b) { return a + b; }) } if (currentTypeOfList === TypeListEnum.All) { - var summaryTimeList = tabs.map(function (a) { return a.summaryTime; }); - total = summaryTimeList.reduce(function (a, b) { return a + b; }) + var summaryTimeList = tabs.map(function(a) { return a.summaryTime; }); + total = summaryTimeList.reduce(function(a, b) { return a + b; }) } return total; } function getTotalTimeForDay(day, tabs) { var total; - var summaryTimeList = tabs.map(function (a) { return a.days.find(s => s.date === day).summary; }); - total = summaryTimeList.reduce(function (a, b) { return a + b; }) + var summaryTimeList = tabs.map(function(a) { return a.days.find(s => s.date === day).summary; }); + total = summaryTimeList.reduce(function(a, b) { return a + b; }) return total; } @@ -289,28 +303,23 @@ function getCurrentTab() { } function addTabForChart(tabsForChart, url, time, counter) { - tabsForChart.push( - { - 'url': url, - 'percentage': getPercentageForChart(time), - 'summary': time, - 'visits': counter - } - ); + tabsForChart.push({ + 'url': url, + 'percentage': getPercentageForChart(time), + 'summary': time, + 'visits': counter + }); } function addTabOthersForChart(tabsForChart, summaryTime) { var tab = tabsForChart.find(x => x.url == 'Others'); if (tab === undefined) { - tabsForChart.push( - { - 'url': 'Others', - 'percentage': getPercentageForChart(summaryTime), - 'summary': summaryTime - } - ); - } - else { + tabsForChart.push({ + 'url': 'Others', + 'percentage': getPercentageForChart(summaryTime), + 'summary': summaryTime + }); + } else { tab['summary'] += summaryTime; tab['percentage'] = getPercentageForChart(tab['summary']); } @@ -318,14 +327,14 @@ function addTabOthersForChart(tabsForChart, summaryTime) { function getFirstDay() { var array = []; - tabsFromStorage.map(function (a) { - return a.days.map(function (a) { + tabsFromStorage.map(function(a) { + return a.days.map(function(a) { if (array.indexOf(a.date) === -1) return array.push(a.date); }); }); - array = array.sort(function (a, b) { + array = array.sort(function(a, b) { return new Date(a) - new Date(b); }); @@ -352,7 +361,7 @@ function setStatData(array) { }); }); - arrayAscByTime = arrayAscByTime.sort(function (a, b) { + arrayAscByTime = arrayAscByTime.sort(function(a, b) { return a.total - b.total; }); stat.inActiveDay = new Date(arrayAscByTime[0].date).toLocaleDateString('ru-RU'); @@ -386,11 +395,11 @@ function getTabsByDays(tabs) { }); }); }); - listOfDays = listOfDays.sort(function (a, b) { + listOfDays = listOfDays.sort(function(a, b) { return new Date(a.date) - new Date(b.date); }); - var getDaysArray = function (start, end) { + var getDaysArray = function(start, end) { let first = start; let second = end; var arr = []; @@ -400,8 +409,7 @@ function getTabsByDays(tabs) { return arr; }; ui.fillListOfDays(listOfDays, getDaysArray(range.from, range.to)); - } - else { + } else { ui.fillEmptyBlockForDaysIfInvalid(); } } @@ -416,13 +424,12 @@ function getTabsFromStorageByDay(day, blockName) { targetTabs = tabsFromStorage.filter(x => x.days.find(s => s.date === day)); if (targetTabs.length > 0) { - targetTabs = targetTabs.sort(function (a, b) { + targetTabs = targetTabs.sort(function(a, b) { return b.days.find(s => s.date === day).summary - a.days.find(s => s.date === day).summary; }); totalTime = getTotalTimeForDay(day, targetTabs); - } - else { + } else { ui.fillEmptyBlock(blockName); return; } diff --git a/src/style/webact.css b/src/style/webact.css index 48a5ef8..a0b29b2 100644 --- a/src/style/webact.css +++ b/src/style/webact.css @@ -3,33 +3,33 @@ body { color: #262626; } -.list-of-site{ +.list-of-site { overflow-y: auto; } -#extensionTitle{ - margin-top:-20px; +#extensionTitle { + margin-top: -20px; } -.inline-flex{ +.inline-flex { display: flex; height: 23px; } -.inline-flex:hover{ - cursor: pointer; +.inline-flex:hover { + cursor: pointer; } -.inline-flex:hover .span-url{ +.inline-flex:hover .span-url { font-size: 13px; font-weight: 650; } -.inline-flex:hover .span-time{ - color: rgb(0, 0, 0); +.inline-flex:hover .span-time { + color: rgb(0, 0, 0); } -.span-url{ +.span-url { width: 320px; text-decoration: none; color: rgb(0, 0, 0); @@ -37,7 +37,7 @@ body { cursor: pointer; } -.span-total{ +.span-total { width: 450px; text-decoration: none; color: rgb(0, 0, 0); @@ -47,97 +47,94 @@ body { cursor: pointer; } -#total .total-block{ - width: 344px; - font-size: 13px; - font-weight: 600; +#total .total-block { + width: 344px; + font-size: 13px; + font-weight: 600; } -#total .title{ +#total .title { font-weight: 550; font-size: 12px; text-align: right; } -#total .span-time{ +#total .span-time { font-weight: 750; text-align: right; } -.span-visits{ +.span-visits { width: 40px; /* padding: 0 10px 0 10px; */ color: rgb(137, 154, 190); font-size: 11px; } -.visits{ +.visits { text-decoration: underline; text-decoration-style: solid; /* border-bottom: 1px dotted #ccc; */ } -.span-percentage{ +.span-percentage { color: rgb(78, 78, 78); font-size: 11px; } -.span-time{ - color:#c5c3c3; +.span-time { + color: #c5c3c3; font-weight: 700; text-align: right; margin-left: auto; margin-right: 8px; } -.span-time .span-active-time{ - color: rgb(0, 0, 0); +.span-time .span-active-time { + color: rgb(0, 0, 0); } -.day-time .span-active-time{ - color: rgb(0, 0, 0); +.day-time .span-active-time { + color: rgb(0, 0, 0); } -.margin-left-auto{ - margin-left: auto; +.margin-left-auto { + margin-left: auto; } -.favicon{ - margin:2px 7px 5px 3px; +.favicon { + margin: 2px 7px 5px 3px; } hr { border: none; background-color: rgb(223, 222, 222); height: 2px; - } +} -::-webkit-scrollbar-track -{ - border-radius: 10px; - background-color: #F5F5F5; +::-webkit-scrollbar-track { + border-radius: 10px; + background-color: #F5F5F5; } -::-webkit-scrollbar -{ - width: 7px; - background-color: #F5F5F5; +::-webkit-scrollbar { + width: 7px; + background-color: #F5F5F5; } -::-webkit-scrollbar-thumb -{ - border-radius: 10px; - background-color: #555; +::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #555; } -.title{ +.title { font-size: 12px; font-weight: 650; margin: 2px; text-align: center; } -a{ +a { color: rgb(195, 194, 194); padding: 4px 5px; text-align: center; @@ -149,45 +146,44 @@ a{ cursor: pointer; text-decoration: none; text-transform: uppercase; - border-bottom: 2px solid rgb(195, 194, 194); - background: transparent; + background: transparent; width: 20%; } a:hover { - color:rgb(76, 160, 175); + color: rgb(76, 160, 175); border-bottom: 2px solid rgb(76, 160, 175); } a.active { - color:rgb(76, 160, 175); + color: rgb(76, 160, 175); border-bottom: 2px solid rgb(76, 160, 175); } -input[type="date"]{ +input[type="date"] { margin: 4px 6px; height: 22px; } -.btn-block{ +.btn-block { width: 580px; margin-bottom: 5px; } -.no-data{ +.no-data { width: 500px; text-align: center; font-weight: 600; font-size: 14px; } -.calendar-block{ +.calendar-block { margin-top: 0px; } -.table-header{ - margin:3px 0; +.table-header { + margin: 3px 0; border-radius: 5px; font-weight: 600; font-size: 13px; @@ -195,11 +191,11 @@ input[type="date"]{ background-color: rgb(235, 243, 251); } -p.table-header{ +p.table-header { text-align: center; } -.day-block{ +.day-block { display: inline-flex; width: 100%; height: 25px; @@ -207,98 +203,95 @@ p.table-header{ border-bottom: 1px solid rgb(223, 221, 221); } -.day{ +.day { width: 415px; font-size: 13px; - padding-left:5px; + padding-left: 5px; margin: 0 0 0 5px; font-weight: 600; } -.day-time{ +.day-time { width: 80px; - margin-left:auto; + margin-left: auto; margin-right: 10px; font-weight: 650; font-size: 13px; - color:#c5c3c3; + color: #c5c3c3; } -.header-title-day{ +.header-title-day { margin-left: 5px; } -.header-title-time{ +.header-title-time { margin-right: 5px; float: right; } - - input[type='checkbox'] { +input[type='checkbox'] { display: none; - } - - .lbl-toggle { +} + +.lbl-toggle { font-family: monospace; font-size: 12px; cursor: pointer; - } - - .lbl-toggle::before { +} + +.lbl-toggle::before { content: ' '; display: table; - border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; transform: translateY(3px); - transition: transform .2s ease-out; - } - - .toggle:checked + .lbl-toggle::before { +} + +.toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(3px); - } - - .collapsible-content { +} + +.collapsible-content { max-height: 0px; overflow-y: auto; transition: max-height .25s ease-in-out; - } - - .toggle:checked + .lbl-toggle + .collapsible-content { +} + +.toggle:checked+.lbl-toggle+.collapsible-content { max-height: 200px; - } - - .toggle:checked + .lbl-toggle { +} + +.toggle:checked+.lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; - } - - .collapsible-content .content-inner { +} + +.collapsible-content .content-inner { background: rgba(250, 224, 66, .2); border-bottom: 1px solid rgba(250, 224, 66, .45); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: 7px; overflow-y: auto; - - /* border-left: 3px solid rgb(151, 218, 52); */ - } +} - .margin-left-5{ - margin-left: 5px; - } +.margin-left-5 { + margin-left: 5px; +} - .tooltip { +.tooltip { position: relative; display: inline-block; - } - - /* Tooltip text */ - .tooltip .tooltiptext { +} + + +/* Tooltip text */ + +.tooltip .tooltiptext { font-size: 11px; font-weight: 500; visibility: hidden; @@ -308,143 +301,144 @@ p.table-header{ text-align: center; padding: 5px 0; border-radius: 6px; - /* Position the tooltip text */ position: absolute; z-index: 1; transform: translateX(-40%) translateY(-120%); - /* Fade in tooltip */ opacity: 0; transition: opacity 0.3s; - } +} - .visits.tooltip .tooltiptext{ +.visits.tooltip .tooltiptext { width: 120px; transform: translateX(-50%) translateY(-120%); - } +} - .current-url.tooltip .tooltiptext{ +.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 { +} + + +/* Show the tooltip text when you mouse over the tooltip container */ + +.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; - } +} - .block-img{ - width: 17px; - height: 17px; - margin: 2px 7px 5px 3px; - } +.block-img { + width: 17px; + height: 17px; + margin: 2px 7px 5px 3px; +} - .expander{ +.expander { background-color: rgb(231, 227, 227); height: 20px; text-align: center; font-weight: 600; border-radius: 5px; cursor: pointer; - } +} - .button{ +.button { width: 42%; background-color: white; color: rgb(195, 194, 194); border: 2px solid rgb(209, 207, 207); - } +} - .button:hover{ +.button:hover { background-color: white; color: black; - color:rgb(76, 160, 175); + color: rgb(76, 160, 175); border: 2px solid rgb(76, 160, 175); - } +} - .button.active{ +.button.active { background-color: white; color: black; - color:rgb(76, 160, 175); + color: rgb(76, 160, 175); border: 2px solid rgb(76, 160, 175); - } +} - .hide{ - display: none; - } +.hide { + display: none; +} - .chart-btn{ +.chart-btn { border-radius: 5px; background-color: transparent; - background-repeat: no-repeat; - background-position: 5px; - cursor: pointer; - height: 16px; - padding-left: 16px; + background-repeat: no-repeat; + background-position: 5px; + cursor: pointer; + height: 16px; + padding-left: 16px; vertical-align: middle - } +} - .chart-btn-donut{ +.chart-btn-donut { background-image: url(/icons/pie-chart.png); - } +} - .chart-btn-heatmap{ +.chart-btn-heatmap { background-image: url(/icons/heat-map-16.png); - } +} - #statsBlock{ +#statsBlock { color: #9b9b9b; font-size: 13px; - } - #statsBlock .block{ +} + +#statsBlock .block { width: 40%; display: inline-block; text-align: center; - } +} - #statsBlock .span-time{ +#statsBlock .span-time { font-weight: 600; text-align: center !important; - } +} - #statsBlock .span-time-active{ +#statsBlock .span-time-active { font-weight: 600; - } +} - #statsBlock .title-block{ - margin-left:10%; +#statsBlock .title-block { + margin-left: 10%; margin-top: 5px; - } +} - #statsBlock .value-block{ - color:black; +#statsBlock .value-block { + color: black; font-weight: 600; - } +} - #statsBlock .inline-block{ +#statsBlock .inline-block { display: inline-block; - } +} - #statsBlock .most-active-days-title{ - width: 50%; +#statsBlock .most-active-days-title { + width: 50%; display: inline-block; - } +} - #statsBlock .most-active-days-value{ +#statsBlock .most-active-days-value { display: inline-block; - margin-left:20%; + margin-left: 20%; vertical-align: top; - } +} - .warning{ +.warning { color: #9b9b9b; font-size: 13px; text-align: center; - } +} - .preloader { +.preloader { position: fixed; left: 0; top: 0; @@ -453,9 +447,9 @@ p.table-header{ overflow: hidden; background: #fff; z-index: 1001; - } - - .preloader__image { +} + +.preloader__image { position: relative; top: 50%; left: 50%; @@ -463,14 +457,55 @@ p.table-header{ height: 64px; margin-top: -32px; margin-left: -32px; - background: url(/icons/preloader.svg) no-repeat 50% 50%; - } - - .loaded_hiding .preloader { + background: url(/icons/preloader.svg) no-repeat 50% 50%; +} + +.loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; - } - - .loaded .preloader { +} + +.loaded .preloader { display: none; - } \ No newline at end of file +} + +.hint-for-settings { + background: rgba(62, 155, 192, 1); + border-radius: 5px; + top: 65px; + color: #fff; + right: 2%; + padding: 5px 15px; + position: absolute; + z-index: 98; + width: 300px; + height: 140px; +} + +.hint-for-settings::before { + border: solid; + border-color: rgba(62, 155, 192, 1) transparent; + border-width: 0 10px 10px 10px; + top: -10px; + content: ""; + left: 75%; + position: absolute; + z-index: 99; +} + +.title-block { + margin-top: 0; + font-weight: 600; + font-size: 13px; +} + +.close-hint { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; +} + +.arrow { + color: yellow; +} \ No newline at end of file From b4f7b2156069e331bf99bb40316905b88e28e24e Mon Sep 17 00:00:00 2001 From: danieltaub Date: Wed, 11 Nov 2020 08:22:40 +0200 Subject: [PATCH 003/352] added netflix video tracking --- src/index.html | 1 + src/manifest.json | 1 + src/options.html | 17 ++++++++++++++++ src/scripts/background.js | 43 ++++++++++++++++++++++++++++++++++++--- src/scripts/settings.js | 32 +++++++++++++++++++++++++++++ 5 files changed, 91 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 68bc570..74a8876 100644 --- a/src/index.html +++ b/src/index.html @@ -39,6 +39,7 @@

➤ set notifications after a certain time has elapsed

➤ set a list of sites with no tracking

➤ enable time tracking on youtube.com

+

➤ enable time tracking on Netflix.com

diff --git a/src/manifest.json b/src/manifest.json index 8fbd0bd..ade87a8 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -27,6 +27,7 @@ ], "optional_permissions": [ "https://www.youtube.com/*", + "https://www.netflix.com/*", "notifications" ], "offline_enabled": true, diff --git a/src/options.html b/src/options.html index 4ac4756..ee3bc65 100644 --- a/src/options.html +++ b/src/options.html @@ -82,6 +82,7 @@
+
+ +
+ + +
+ +
+
diff --git a/src/scripts/background.js b/src/scripts/background.js index d069ceb..faf8571 100644 --- a/src/scripts/background.js +++ b/src/scripts/background.js @@ -16,6 +16,7 @@ var setting_notification_list; var setting_notification_message; var isHasPermissioForYouTube; +var isHasPermissioForNetflix; var isHasPermissioForNotification; function updateSummaryTime() { @@ -145,18 +146,28 @@ function isVideoPlayedOnPage() { function checkDOM(state, activeUrl, tab, activeTab) { if (state === 'idle' && isDomainEquals(activeUrl, "youtube.com")) { trackForYT(mainTRacker, activeUrl, tab, activeTab); + } else if (state === 'idle' && isDomainEquals(activeUrl, "netflix.com")) { + trackForNetflix(mainTRacker, activeUrl, tab, activeTab); } else activity.closeIntervalForCurrentTab(); } function trackForYT(callback, activeUrl, tab, activeTab) { if (isHasPermissioForYouTube) { - executeScript(callback, activeUrl, tab, activeTab); + executeScriptYoutube(callback, activeUrl, tab, activeTab); } else { - checkPermissionsForYT(executeScript, activity.closeIntervalForCurrentTab, callback, activeUrl, tab, activeTab); + checkPermissionsForYT(executeScriptYoutube, activity.closeIntervalForCurrentTab, callback, activeUrl, tab, activeTab); } } -function executeScript(callback, activeUrl, tab, activeTab) { +function trackForNetflix(callback, activeUrl, tab, activeTab) { + if (isHasPermissioForNetflix) { + executeScriptNetflix(callback, activeUrl, tab, activeTab); + } else { + checkPermissionsForNetflix(executeScriptNetflix, activity.closeIntervalForCurrentTab, callback, activeUrl, tab, activeTab); + } +} + +function executeScriptYoutube(callback, activeUrl, tab, activeTab) { chrome.tabs.executeScript({ code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);" }, (results) => { if (results !== undefined && results[0] !== undefined && results[0] === true) callback(activeUrl, tab, activeTab); @@ -164,6 +175,18 @@ function executeScript(callback, activeUrl, tab, activeTab) { }); } +function executeScriptNetflix(callback, activeUrl, tab, activeTab) { + chrome.tabs.executeScript({ code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);" }, (results) => { + if (results !== undefined && results[0] !== undefined && results[0] === true) { + console.log("netglix is playing") + callback(activeUrl, tab, activeTab); + } else { + console.log("netflix paused") + activity.closeIntervalForCurrentTab(); + } + }); +} + function backgroundUpdateStorage() { if (tabs != undefined && tabs.length > 0) storage.saveTabs(tabs); @@ -324,6 +347,7 @@ function loadAddDataFromStorage() { function loadPermissions() { checkPermissionsForYT(); + checkPermissionsForNetflix(); checkPermissionsForNotifications(); } @@ -340,6 +364,19 @@ function checkPermissionsForYT(callbackIfTrue, callbackIfFalse, ...props) { }); } +function checkPermissionsForNetflix(callbackIfTrue, callbackIfFalse, ...props) { + chrome.permissions.contains({ + permissions: ['tabs'], + origins: ["https://www.netflix.com/*"] + }, function(result) { + if (callbackIfTrue != undefined && result) + callbackIfTrue(...props); + if (callbackIfFalse != undefined && !result) + callbackIfFalse(); + isHasPermissioForNetflix = result; + }); +} + function checkPermissionsForNotifications(callback, ...props) { chrome.permissions.contains({ permissions: ["notifications"] diff --git a/src/scripts/settings.js b/src/scripts/settings.js index eb33fdf..a1a56b6 100644 --- a/src/scripts/settings.js +++ b/src/scripts/settings.js @@ -46,6 +46,9 @@ document.addEventListener('DOMContentLoaded', function () { document.getElementById('grantPermissionForYT').addEventListener('click', function () { grantPermissionForYT(); }); + document.getElementById('grantPermissionForNetflix').addEventListener('click', function () { + grantPermissionForNetflix(); + }); document.getElementById('grantPermissionForNotifications').addEventListener('click', function () { grantPermissionForNotifications(); }); @@ -107,6 +110,7 @@ function loadSettings() { document.getElementById('notifyMessage').value = mess; }); checkPermissionsForYT(); + checkPermissionsForNetflix(); checkPermissionsForNotifications(); } @@ -121,6 +125,17 @@ function checkPermissionsForYT() { }); } +function checkPermissionsForNetflix() { + chrome.permissions.contains({ + permissions: ['tabs'], + origins: ["https://www.netflix.com/*"] + }, function (result) { + if (result) { + setUIForAnyPermissionForNetflix(); + } + }); +} + function checkPermissionsForNotifications() { chrome.permissions.contains({ permissions: ["notifications"] @@ -156,6 +171,18 @@ function grantPermissionForYT() { }); } +function grantPermissionForNetflix() { + chrome.permissions.request({ + permissions: ['tabs'], + origins: ["https://www.netflix.com/*"] + }, function (granted) { + // The callback argument will be true if the user granted the permissions. + if (granted) { + setUIForAnyPermissionForNetflix(); + } + }); +} + function grantPermissionForNotifications() { chrome.permissions.request({ permissions: ["notifications"] @@ -172,6 +199,11 @@ function setUIForAnyPermissionForYT() { document.getElementById('grantPermissionForYT').setAttribute('disabled', 'true'); } +function setUIForAnyPermissionForNetflix() { + document.getElementById('permissionSuccessedBlockForNetflix').hidden = false; + document.getElementById('grantPermissionForNetflix').setAttribute('disabled', 'true'); +} + function setUIForAnyPermissionForNotifications() { document.getElementById('permissionSuccessedBlockForNotifications').hidden = false; document.getElementById('grantPermissionForNotifications').setAttribute('disabled', 'true'); From 61a358cc71824637ae1378be9f9543b2d6b6ab62 Mon Sep 17 00:00:00 2001 From: danieltaub Date: Thu, 12 Nov 2020 09:46:28 +0200 Subject: [PATCH 004/352] edit the options page --- src/options.html | 12 +++++------- src/scripts/background.js | 2 -- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/options.html b/src/options.html index ee3bc65..e8f6dda 100644 --- a/src/options.html +++ b/src/options.html @@ -86,10 +86,13 @@
+
+
+
- +