diff --git a/README.md b/README.md
index 79b3868..a881349 100644
--- a/README.md
+++ b/README.md
@@ -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.
+
+
Changed plugin name
+
Added show/hide tabs functionality
+
Changed some theming and css rules
+
+
+***Note:
+To get tab hiding functionality, you must go to about:config and search for extensions.webextensions.tabhide.enabled. Set it to true 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)
diff --git a/images/pic1.png b/images/pic1.png
index 276c49e..3c962fa 100644
Binary files a/images/pic1.png and b/images/pic1.png differ
diff --git a/images/pic2.png b/images/pic2.png
index 772d17a..08db173 100644
Binary files a/images/pic2.png and b/images/pic2.png differ
diff --git a/images/pic3.png b/images/pic3.png
index 27377f4..6d2d9ee 100644
Binary files a/images/pic3.png and b/images/pic3.png differ
diff --git a/images/pic4.png b/images/pic4.png
index 8356283..5e6a3b2 100644
Binary files a/images/pic4.png and b/images/pic4.png differ
diff --git a/images/pic5.png b/images/pic5.png
new file mode 100644
index 0000000..151f1e5
Binary files /dev/null and b/images/pic5.png differ
diff --git a/images/pic6.png b/images/pic6.png
new file mode 100644
index 0000000..2252744
Binary files /dev/null and b/images/pic6.png differ
diff --git a/src/css/tabsSearch.css b/src/css/tabsSearch.css
index d717d3a..9ecb476 100644
--- a/src/css/tabsSearch.css
+++ b/src/css/tabsSearch.css
@@ -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); }
diff --git a/src/icons/eyeClosed.png b/src/icons/eyeClosed.png
new file mode 100644
index 0000000..e202f0e
Binary files /dev/null and b/src/icons/eyeClosed.png differ
diff --git a/src/icons/eyeOpen.png b/src/icons/eyeOpen.png
new file mode 100644
index 0000000..b75daab
Binary files /dev/null and b/src/icons/eyeOpen.png differ
diff --git a/src/icons/tabsGroups_48.png b/src/icons/tabsGroups_48.png
new file mode 100644
index 0000000..80477b9
Binary files /dev/null and b/src/icons/tabsGroups_48.png differ
diff --git a/src/icons/tabsGroups_96.png b/src/icons/tabsGroups_96.png
new file mode 100644
index 0000000..7723eb3
Binary files /dev/null and b/src/icons/tabsGroups_96.png differ
diff --git a/src/icons/x.png b/src/icons/x.png
index a69ff6a..bb768a9 100644
Binary files a/src/icons/x.png and b/src/icons/x.png differ
diff --git a/src/manifest.json b/src/manifest.json
index 7624a1e..48291ba 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -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"
}
}
diff --git a/src/pages/tabsSearch.html b/src/pages/tabsSearch.html
index 9b2ce3c..f5cb54a 100755
--- a/src/pages/tabsSearch.html
+++ b/src/pages/tabsSearch.html
@@ -18,12 +18,18 @@
+
+
@@ -32,6 +38,7 @@
+
diff --git a/src/scripts/eventListeners.js b/src/scripts/eventListeners.js
index ced42f4..bd65526 100644
--- a/src/scripts/eventListeners.js
+++ b/src/scripts/eventListeners.js
@@ -1,36 +1,57 @@
// 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 });
+ 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");
} else if (targetID == "goTop") {
window.scrollTo(0,0);
} else if (targetID == "goBottom") {
- window.scrollTo(0,document.body.scrollHeight);
+ window.scrollTo(0, document.body.scrollHeight);
} else if (targetID == "goToTab") {
// Go to selected and 100px up
oldElm.scrollIntoView();
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);
}
});
diff --git a/src/scripts/generateView.js b/src/scripts/generateView.js
index 1af34f4..66390bc 100644
--- a/src/scripts/generateView.js
+++ b/src/scripts/generateView.js
@@ -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
diff --git a/src/scripts/showHideLogic.js b/src/scripts/showHideLogic.js
new file mode 100644
index 0000000..f05f979
--- /dev/null
+++ b/src/scripts/showHideLogic.js
@@ -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");
+ }
+}