Skip to content

Commit

Permalink
Improve loading of popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@deanoemcke
deanoemcke committed Aug 18, 2017
1 parent d1eead6 commit 8447f48
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 77 deletions.
41 changes: 38 additions & 3 deletions src/css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ a {
outline : none;
color: #3889AB;
}
#popupContent {
opacity: 0;
transition: opacity 200ms ease;
}
#statusDetail a {
color: #FFFFFF;
}
Expand All @@ -51,7 +55,7 @@ a {
height: 20px;
width: 100%;
line-height: 19px;
background: #134960;
background: #01579B;
color: #fff;
}
#header img {
Expand All @@ -63,7 +67,7 @@ a {
.group {
padding: 5px 0;
}
.optsCurrent, .optsAll, .optsSelected {
#optsCurrent, #optsAll, #optsSelected {
border-bottom: 1px solid #ccc;
}

Expand All @@ -84,4 +88,35 @@ a {
margin-right: 5px;
opacity: 0.8;
}

#loadBar {
position: fixed ;
width: 100%;
height: 6px;
background-color: #0D47A1;
}
.bar {
content: "";
display: inline;
position: absolute;
width: 0;
height: 100%;
left: 50%;
text-align: center;
}
.bar:nth-child(1) {
background-color: #2196F3;
animation: loading 3s linear infinite;
}
.bar:nth-child(2) {
background-color: #1976D2;
animation: loading 3s linear 1s infinite;
}
.bar:nth-child(3) {
background-color: #0D47A1;
animation: loading 3s linear 2s infinite;
}
@keyframes loading {
from {left: 50%; width: 0;z-index:100;}
33.3333% {left: 0; width: 100%;z-index: 10;}
to {left: 0; width: 100%;}
}
121 changes: 79 additions & 42 deletions src/js/popup.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*global chrome */

(function () {
'use strict';

'use strict';
(function () {

function setStatus(status) {
var statusDetail = '',
Expand Down Expand Up @@ -62,7 +62,6 @@
document.getElementsByTagName('a')[0].removeEventListener('click');
}

document.getElementById('header').style.display = 'block';
document.getElementById('statusDetail').innerHTML = statusDetail;
document.getElementById('statusIcon').className = statusIconClass;

Expand All @@ -75,41 +74,58 @@
}
}

function setWhitelistVisibility(visible) {
if (visible) {
document.getElementById('whitelist').style.display = 'block';
} else {
document.getElementById('whitelist').style.display = 'none';
}
function setSuspendAllVisibility(tabStatus) {

var suspendOneVisible = (tabStatus === 'suspended' || tabStatus === 'special' || tabStatus === 'unknown') ? false : true,
whitelistVisible = (tabStatus !== 'whitelisted' && tabStatus !== 'special') ? true : false,
pauseVisible = (tabStatus === 'normal') ? true : false;

if (suspendOneVisible) {
document.getElementById('suspendOne').style.display = 'block';
} else {
document.getElementById('suspendOne').style.display = 'none';
}

if (whitelistVisible) {
document.getElementById('whitelist').style.display = 'block';
} else {
document.getElementById('whitelist').style.display = 'none';
}

if (pauseVisible) {
document.getElementById('tempWhitelist').style.display = 'block';
} else {
document.getElementById('tempWhitelist').style.display = 'none';
}

if (suspendOneVisible || whitelistVisible || pauseVisible) {
document.getElementById('optsCurrent').style.display = 'block';
} else {
document.getElementById('optsCurrent').style.display = 'none';
}
}

function setPauseVisibility(visible) {
if (visible) {
document.getElementById('tempWhitelist').style.display = 'block';
function setSuspendSelectedVisibility(selectedTabs) {
if (selectedTabs && selectedTabs.length > 1) {
document.getElementById('optsSelected').style.display = 'block';
} else {
document.getElementById('tempWhitelist').style.display = 'none';
document.getElementById('optsSelected').style.display = 'none';
}
}

function setSuspendOneVisibility(visible) {
if (visible) {
document.getElementById('suspendOne').style.display = 'block';
} else {
document.getElementById('suspendOne').style.display = 'none';
}
}
function showPopupContents() {
setTimeout(function () {
document.getElementById('loadBar').style.display = 'none';
document.getElementById('header').style.display = 'block';
document.getElementById('popupContent').style.display = 'block';

function setSuspendSelectedVisibility() {
chrome.tabs.query({highlighted: true, lastFocusedWindow: true}, function (tabs) {
if (tabs && tabs.length > 1) {
document.getElementById('suspendSelectedGroup').style.display = 'block';
} else {
document.getElementById('suspendSelectedGroup').style.display = 'none';
}
});
setTimeout(function () {
document.getElementById('popupContent').style.opacity = 1;
}, 50);
}, 200);
}

document.addEventListener('DOMContentLoaded', function () {
function addClickHandlers() {
document.getElementById('suspendOne').addEventListener('click', function (e) {
chrome.runtime.sendMessage({ action: 'suspendOne' });
window.close();
Expand Down Expand Up @@ -142,24 +158,45 @@
});
document.getElementById('settingsLink').addEventListener('click', function (e) {
chrome.tabs.create({
url: chrome.extension.getURL('options.html')
url: chrome.extension.getURL('options.html')
});
window.close();
});
}

chrome.extension.getBackgroundPage().tgs.requestTabInfo(false, function (info) {

var status = info.status,
//timeLeft = info.timerUp, // unused
suspendOneVisible = (status === 'suspended' || status === 'special' || status === 'unknown') ? false : true,
whitelistVisible = (status !== 'whitelisted' && status !== 'special') ? true : false,
pauseVisible = (status === 'normal') ? true : false;

setSuspendSelectedVisibility();
setSuspendOneVisibility(suspendOneVisible);
setWhitelistVisibility(whitelistVisible);
setPauseVisibility(pauseVisible);
setStatus(status);
var domContentLoadedAsPromsied = new Promise(function (resolve, reject) {
document.addEventListener('DOMContentLoaded', resolve);
});
var getTabStatus = function (callback) {
chrome.extension.getBackgroundPage().tgs.requestTabInfo(false, function (info) {
if (info && info.status !== 'unknown') {
callback(info.status);
} else {
document.getElementById('loadBar').style.display = 'block';
setTimeout(function() {
getTabStatus(callback);
}, 200);
}
});
};
var tabStatusAsPromised = new Promise(function (resolve, reject) {
getTabStatus(resolve)
});
var selectedTabsAsPromised = new Promise(function (resolve, reject) {
chrome.tabs.query({highlighted: true, lastFocusedWindow: true}, function (tabs) {
resolve(tabs);
});
});

Promise.all([domContentLoadedAsPromsied, tabStatusAsPromised, selectedTabsAsPromised])
.then(function ([domLoadedEvent, tabStatus, selectedTabs]) {

setSuspendAllVisibility(tabStatus);
setSuspendSelectedVisibility(selectedTabs);

setStatus(tabStatus);
showPopupContents();
addClickHandlers();
});
}());
70 changes: 38 additions & 32 deletions src/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,51 @@

</head>
<body>
<div id="header">
<i id="statusIcon" class="fa fa-clock-o"></i>
<span id="statusDetail">Tab will be suspended</span>
<div id="loadBar" class="hidden">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>

<div class="group optsCurrent">
<div class="menuOption" id="suspendOne">
<i class="fa fa-stop"></i> <span class="optionText">Suspend this tab</span>
</div>
<div class="menuOption" id="tempWhitelist">
<i class="fa fa-pause"></i> <span class="optionText">Don't suspend for now</span>
</div>
<div class="menuOption" id="whitelist">
<i class="fa fa-ban"></i> <span class="optionText">Never suspend this site</span>
</div>
<div id="header" class="hidden">
<i id="statusIcon" class="fa"></i>
<span id="statusDetail"></span>
</div>

<div class="group optsAll">
<div class="menuOption" id="suspendAll">
<i class="fa fa-stop"></i> <span class="optionText">Suspend other tabs</span>
<div id="popupContent" class="hidden">
<div class="group" id="optsCurrent">
<div class="menuOption" id="suspendOne">
<i class="fa fa-stop"></i> <span class="optionText">Suspend this tab</span>
</div>
<div class="menuOption" id="tempWhitelist">
<i class="fa fa-pause"></i> <span class="optionText">Don't suspend for now</span>
</div>
<div class="menuOption" id="whitelist">
<i class="fa fa-ban"></i> <span class="optionText">Never suspend this site</span>
</div>
</div>
<div class="menuOption" href="#" id="unsuspendAll">
<i class="fa fa-play"></i> <span class="optionText">Unsuspend all tabs</span>
</div>
</div>

<div class="group optsSelected" id="suspendSelectedGroup">
<div class="menuOption" id="suspendSelected">
<i class="fa fa-stop"></i> <span class="optionText">Suspend selected tabs</span>
<div class="group" id="optsAll">
<div class="menuOption" id="suspendAll">
<i class="fa fa-stop"></i> <span class="optionText">Suspend other tabs</span>
</div>
<div class="menuOption" href="#" id="unsuspendAll">
<i class="fa fa-play"></i> <span class="optionText">Unsuspend all tabs</span>
</div>
</div>
<div class="menuOption" href="#" id="unsuspendSelected">
<i class="fa fa-play"></i> <span class="optionText">Unsuspend selected tabs</span>

<div class="group" id="optsSelected">
<div class="menuOption" id="suspendSelected">
<i class="fa fa-stop"></i> <span class="optionText">Suspend selected tabs</span>
</div>
<div class="menuOption" href="#" id="unsuspendSelected">
<i class="fa fa-play"></i> <span class="optionText">Unsuspend selected tabs</span>
</div>
</div>
</div>

<div class="group optsSettings">
<div class="menuOption" id="settingsLink">
<i class="fa fa-wrench"></i> <span class="optionText">Settings</span>
<div class="group" id="optsSettings">
<div class="menuOption" id="settingsLink">
<i class="fa fa-wrench"></i> <span class="optionText">Settings</span>
</div>
</div>
</div>
</body>
</html>
</html>

0 comments on commit 8447f48

Please sign in to comment.