New version, added hideshow functionality, theme changed a bit.

This commit is contained in:
Maxim Stewart 2018-05-20 18:20:23 -05:00
parent 38972fd87c
commit ca3d2b3513
18 changed files with 166 additions and 55 deletions

View File

@ -5,11 +5,20 @@ Search Firefox tabs and get a list or automatic direct to the searched tab.
https://addons.mozilla.org/en-US/firefox/addon/tab-search-smarter/
# Version: 1.2.2
Changed theme to differentiate from Tab Groups plugin.
<ul>
<li>Changed plugin name</li>
<li>Added show/hide tabs functionality</li>
<li>Changed some theming and css rules</li>
</ul>
***Note:
To get tab hiding functionality, you must go to <b>about:config</b> and search for <b>extensions.webextensions.tabhide.enabled</b>. Set it to <b>true</b> by double clicking it. Then tabs can be shown or hidden via the eyes.
# Images
![1 Default list style without interacting with tab. ](images/pic1.png)
![2 Hovoring on tab. ](images/pic2.png)
![2 Hovering on tab. ](images/pic2.png)
![3 List of tabs matching search. ](images/pic3.png)
![4 Search failed response. ](images/pic4.png)
![4 3 tabs hidden and three shown. ](images/pic4.png)
![5 All tabs but current active hidden. ](images/pic5.png)
![6 Search failed response. ](images/pic6.png)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 404 KiB

BIN
images/pic5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 403 KiB

BIN
images/pic6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View File

@ -1,6 +1,4 @@
html, body {
overflow-x: hidden;
}
html, body { overflow-x: hidden; }
#masterContainer, div[id*="listZone"], .block {
display: block;
@ -23,17 +21,17 @@ html, body {
#udArrows {
position: fixed;
bottom: 0;
margin-left: 36%;
margin-left: 28%;
}
#udArrows button {
font-size: 1.4em;
font-size: 2em;
background-color: rgba(79, 186, 70, 1);
color: rgba(255,255,255,1);
}
#udArrows button:hover {
background-color: rgba(255,255,255,1);
background-color: rgba(152, 152, 152, 1);
color: rgba(0,0,0,1);
cursor: pointer;
border-style: none;
@ -70,7 +68,10 @@ html, body {
.block {
display: block;
background-color: rgba(89, 89, 89, 0.8);
background-color: rgba(20, 107, 134, 0.87);
background-repeat: no-repeat;
background-size: 6em;
background-position: center;
color: rgba(255,255,255,1);
float: left;
width: 125px;
@ -81,28 +82,28 @@ html, body {
}
.block:hover {
cursor: pointer;
background-color: rgba(152, 152, 152, 0.8);
background-color: rgba(110, 194, 45, 0.94);
color: rgba(255, 255, 255, 0.84);
}
.block-focused {
background-color: rgba(53, 103, 14, 0.8);
.closeImg, .hiderImg {
padding: 0.5em;
width: 28px;
height: 28px;
clear: both;
}
.thumbImg {
clear: left;
width: 64px;
height: 64px;
.pTagTitleText {
background-color: rgba(63, 63, 63, 0.64);
line-height: 1.5em;
margin-top: 2em;
height: 3em;
overflow: hidden;
text-overflow: ellipsis;
}
.closeImg {
background-color: rgba(79, 186, 70, 1);
width: 16px;
height: 16px;
float: right;
padding: .5em;
}
.closeImg:hover {
background-color: rgba(255, 0, 0, 1);
}
.closeImg { float: right; }
.block-focused { background-color: rgba(53, 103, 14, 0.8); }
.closeImg:hover { background-color: rgba(196, 11, 11, 1); }
.hiderImg:hover { background-color: rgba(30, 129, 22, 1); }
.hiddenBGColor { background-color: rgba(152, 152, 152, 0.8); }

BIN
src/icons/eyeClosed.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/icons/eyeOpen.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/icons/tabsGroups_48.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 420 B

BIN
src/icons/tabsGroups_96.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 446 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

@ -1,8 +1,8 @@
{
"manifest_version": 2,
"name": "Tab Search",
"version": "1.2.2",
"description": "Search Tabs and switch to them quickly.",
"name": "Tab Search and Manage",
"version": "1.2.5",
"description": "This plugin can search, drag-n-drop ordering, and (un)hide all or some tabs.",
"applications": {
"gecko": {
@ -16,13 +16,14 @@
"96": "icons/tabsSearch_96.png"
},
"web_accessible_resources": [ "icons/*.png" ],
"permissions": [ "tabs" ],
"permissions": [
"tabs",
"tabHide"
],
"browser_action": {
"default_icon": "icons/tabsSearch_48.png",
"default_title": "Tab Search",
"default_title": "Tab Search and Manage",
"default_popup": "pages/tabsSearch.html"
}
}

View File

@ -18,12 +18,18 @@
<button id="goTop" type="button" title="To Top">
<img style="width:1em; height:1em;" src="../icons/up-arrow.png"/>
</button>
<button id="showAllBttn" type="button" title="Unhide All Tabs">
<img style="width:1em; height:1em;" src="../icons/eyeOpen.png"/>
</button>
<button id="goToTab" type="button" title="Scroll Current Tab To View">
<img style="width:1em; height:1em;" src="../icons/go2-arrow.png"/>
</button>
<button id="newTab" type="button" title="New Tab">
<img style="width:1em; height:1em;" src="../icons/plus.png"/>
</button>
<button id="hideAllBttn" type="button" title="Hide All Tabs">
<img style="width:1em; height:1em;" src="../icons/eyeClosed.png"/>
</button>
<button id="goBottom" type="button" title="To Bottom">
<img style="width:1em; height:1em;" src="../icons/down-arrow.png"/>
</button>
@ -32,6 +38,7 @@
<script src="../scripts/libs/dragula.min.js" charset="utf-8"></script>
<script src="../scripts/dragContainersSetup.js" charset="utf-8"></script>
<script src="../scripts/showHideLogic.js"></script>
<script src="../scripts/generateView.js"></script>
<script src="../scripts/searchTabs.js"></script>
<script src="../scripts/eventListeners.js" charset="utf-8"></script>

View File

@ -1,23 +1,26 @@
// Set click events for tab blocks
document.addEventListener("click", (e) => {
var target = e.target;
var target = undefined;
if (!e.target.className.includes("pTagTitleText")) {
target = e.target;
} else {
target = e.target.parentElement;
}
var targetID = target.id;
var parentElm = target.parentElement;
var id = 0;
if (targetID == "closeBttn") {
id = parseInt(parentElm.getAttribute("tabID"));
browser.tabs.remove(id);
parentElm.parentElement.removeChild(parentElm);
} else if (targetID == "iconElm" || targetID == "faveIcon") {
if (targetID == "faveIcon")
target = parentElm.parentElement;
} else if (targetID == "iconElm") {
id = parseInt(target.getAttribute("tabID"));
browser.tabs.update(id, { active: true });
target.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
oldElm.setAttribute("class", "block");
oldElm = target;
target.setAttribute("class", "block block-focused");
@ -31,6 +34,24 @@ document.addEventListener("click", (e) => {
window.scrollBy(0, -100);
} else if (targetID == "newTab") {
createTab();
} else if (targetID == "hideTgglBttn") {
id = parseInt(parentElm.getAttribute("tabID"));
if (id != oldElm.getAttribute("tabID")) {
if (target.src.includes("eyeClosed.png")) {
parentElm.setAttribute("class", "block");
target.src = "../icons/eyeOpen.png"
unhideSelectedTab(id);
} else {
parentElm.setAttribute("class", "block hiddenBGColor");
target.src = "../icons/eyeClosed.png"
hideSelectedTab(id);
}
}
} else if (targetID == "hideAllBttn") {
doAllTabs(0)
} else if (targetID == "showAllBttn") {
doAllTabs(1);
}
});

View File

@ -3,6 +3,7 @@ const searchBar = document.getElementById("searchBar");
const errHandler = document.getElementById("errorZone");
const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found...");
const tabImg = browser.extension.getURL("icons/tab.png");
var oldElm = "";
var plusTag = ""
@ -18,28 +19,39 @@ function logTabs(tabs) {
function createContainer(tab) {
var id = tab.id;
var spanTag = document.createElement("SPAN");
var spanTag = document.createElement("DIV");
var pTag = document.createElement("P");
var iconText = document.createTextNode(tab.title);
var centerTag = document.createElement("CENTER");
var closeImgTag = document.createElement("IMG");
var icoImgTag = document.createElement("IMG");
var hidnStImgTag = document.createElement("IMG");
var icoImgTag = document.createElement("IMG"); // Used to properly set bg
spanTag.setAttribute("tabID", tab.id);
spanTag.title = tab.title;
spanTag.id = "iconElm";
spanTag.className = "block";
closeImgTag.id = "closeBttn";
closeImgTag.className = "closeImg";
closeImgTag.src = "../icons/x.png";
icoImgTag.id = "faveIcon";
icoImgTag.className = "thumbImg";
icoImgTag.onerror = function() { icoImgTag.src = "../icons/tab.png"; }
icoImgTag.src = tab.favIconUrl;
hidnStImgTag.id = "hideTgglBttn"
hidnStImgTag.className= "hiderImg";
pTag.className = "pTagTitleText";
if (!tab.hidden) {
spanTag.className = "block";
hidnStImgTag.src = "../icons/eyeOpen.png";
} else {
spanTag.className = "block hiddenBGColor";
hidnStImgTag.src = "../icons/eyeClosed.png";
}
spanTag.style.backgroundImage = "url(" + tab.favIconUrl + ")";
icoImgTag.src = tab.favIconUrl;
icoImgTag.onerror = function() { spanTag.style.backgroundImage = "url(" + tabImg + ")"; }
centerTag.appendChild(icoImgTag);
spanTag.appendChild(closeImgTag);
spanTag.appendChild(centerTag);
spanTag.appendChild(iconText);
spanTag.appendChild(hidnStImgTag);
pTag.appendChild(iconText);
spanTag.appendChild(pTag);
listZone.appendChild(spanTag);
// Set oldElm so eventListeners.js has starting ref

View File

@ -0,0 +1,60 @@
// tabsAction.discard(id);
function unhideSelectedTab(id) {
tabsAction.show(id).then(successMsg, errMsg);
}
function hideSelectedTab(id) {
tabsAction.hide(id).then(successMsg, errMsg);
}
function successMsg(ev) { console.log("Tab is hidden..." + ev); }
function errMsg(ev) {
var msg = "" + ev;
if (msg.includes("extensions.webextensions.tabhide.enabled")) {
var errText = document.createTextNode(msg);
listZone.style.display = "none";
errHandler.style.display = "block";
errHandler.appendChild(errText);
setTimeout(function () {
listZone.style.display = "block";
errHandler.style.display = "none";
clearNodes(errHandler);
}, 4000);
}
}
function doAllTabs(doType) {
// 0 == hide and 1 == unhide
tabsAction.query({currentWindow: true}).then((tabs) => {
var tabCollectionIDs = [];
for (var i = 0; i < tabs.length; i++) {
tabCollectionIDs.push(tabs[i].id);
}
if (doType == 0) {
hideSelectedTab(tabCollectionIDs);
} else {
unhideSelectedTab(tabCollectionIDs);
}
}, doType);
var imgs = document.querySelectorAll(".hiderImg");
if (doType == 0) {
for (var i = 0; i < imgs.length; i++) {
imgs[i].parentElement.setAttribute("class", "block hiddenBGColor");
imgs[i].src = "../icons/eyeClosed.png";
}
oldElm.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
oldElm.setAttribute("class", "block block-focused");
} else {
for (var i = 0; i < imgs.length; i++) {
imgs[i].parentElement.setAttribute("class", "block");
imgs[i].src = "../icons/eyeOpen.png";
}
oldElm.setAttribute("class", "block block-focused");
}
}