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. + + +***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"); + } +}