Added all window search and list with toggling functionality.

This commit is contained in:
Maxim Stewart 2018-05-21 04:48:34 -05:00
parent 316d9840f6
commit da93d9cfc3
9 changed files with 118 additions and 37 deletions

View File

@ -4,11 +4,9 @@ Search Firefox tabs and get a list or automatic direct to the searched tab.
# Download # Download
https://addons.mozilla.org/en-US/firefox/addon/tab-search-and-manage/ https://addons.mozilla.org/en-US/firefox/addon/tab-search-and-manage/
# Version: 1.2.2 # Version: 1.2.6
<ul> <ul>
<li>Changed plugin name</li> <li>Added all window search and list with toggling functionality.</li>
<li>Added show/hide tabs functionality</li>
<li>Changed some theming and css rules</li>
</ul> </ul>
***Note: ***Note:

View File

@ -21,7 +21,7 @@ html, body { overflow-x: hidden; }
#udArrows { #udArrows {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
margin-left: 28%; margin-left: 25%;
} }
#udArrows button { #udArrows button {
@ -66,26 +66,36 @@ html, body { overflow-x: hidden; }
margin: 1.5em; margin: 1.5em;
} }
.block { .block, .windowIdHeaders {
display: block; display: block;
background-color: rgba(20, 107, 134, 0.87); clear: right;
float: left;
background-color: rgba(9,107,120, 0.85);
color: rgb(255,255,255);
}
.block {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 6em; background-size: 6em;
background-position: center; background-position: center;
color: rgba(255,255,255,1);
float: left;
width: 125px; width: 125px;
height: 125px; height: 125px;
clear: right;
overflow: hidden; overflow: hidden;
margin: 1.5em; margin: 1.5em;
} }
.block:hover { .block:hover {
cursor: pointer; cursor: pointer;
background-color: rgba(110, 194, 45, 0.94); background-color: rgba(110, 194, 45, 0.94);
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
} }
.windowIdHeaders {
width: 100%;
font-size: 2em;
text-align: center;
}
.closeImg, .hiderImg { .closeImg, .hiderImg {
padding: 0.5em; padding: 0.5em;
width: 28px; width: 28px;

BIN
src/icons/window.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/icons/windows.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 981 B

View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Tab Search and Manage", "name": "Tab Search and Manage",
"version": "1.2.5", "version": "1.2.6",
"description": "This plugin can search, drag-n-drop ordering, and (un)hide all or some tabs.", "description": "This plugin can search, drag-n-drop ordering, and (un)hide all or some tabs.",
"applications": { "applications": {

View File

@ -24,6 +24,9 @@
<button id="goToTab" type="button" title="Scroll Current Tab To View"> <button id="goToTab" type="button" title="Scroll Current Tab To View">
<img style="width:1em; height:1em;" src="../icons/go2-arrow.png"/> <img style="width:1em; height:1em;" src="../icons/go2-arrow.png"/>
</button> </button>
<button id="searchMode" searchwindowsmode="false" type="button" title="Searching curent window...">
<img style="width:1em; height:1em;" src="../icons/window.png"/>
</button>
<button id="newTab" type="button" title="New Tab"> <button id="newTab" type="button" title="New Tab">
<img style="width:1em; height:1em;" src="../icons/plus.png"/> <img style="width:1em; height:1em;" src="../icons/plus.png"/>
</button> </button>

View File

@ -1,29 +1,33 @@
// Set click events for tab blocks // Set click events for tab blocks
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
var target = undefined; var target = (!e.target.className.includes("pTagTitleText")) ? e.target : e.target.parentElement;
if (!e.target.className.includes("pTagTitleText")) {
target = e.target;
} else {
target = e.target.parentElement;
}
var targetID = target.id; var targetID = target.id;
var parentElm = target.parentElement; var parentElm = target.parentElement;
var id = 0; var id = 0;
if (targetID == "closeBttn") { if (targetID == "closeBttn") {
if (parentElm == oldElm) {
var index = Array.from(parentElm.parentElement.children).indexOf(parentElm);
(index - 1 < 0) ? index++ : index-- ; // Check what index to chose
var newElm = parentElm.parentElement.children[index];
id = parseInt(newElm.getAttribute("tabID"));
browser.tabs.update(id, { active: true });
setOldElm(newElm);
}
id = parseInt(parentElm.getAttribute("tabID")); id = parseInt(parentElm.getAttribute("tabID"));
browser.tabs.remove(id); browser.tabs.remove(id);
parentElm.parentElement.removeChild(parentElm); parentElm.parentElement.removeChild(parentElm);
} else if (targetID == "iconElm") { } else if (targetID == "iconElm") {
id = parseInt(target.getAttribute("tabID")); id = parseInt(target.getAttribute("tabID"));
browser.tabs.update(id, { active: true }); tabsAction.get(id).then((tab) => {
browser.windows.update(tab.windowId, {focused: true});
browser.tabs.update(id, { active: true });
},id);
target.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png"; setOldElm(target);
oldElm.setAttribute("class", "block");
oldElm = target;
target.setAttribute("class", "block block-focused");
} else if (targetID == "goTop") { } else if (targetID == "goTop") {
window.scrollTo(0,0); window.scrollTo(0,0);
} else if (targetID == "goBottom") { } else if (targetID == "goBottom") {
@ -52,9 +56,29 @@ document.addEventListener("click", (e) => {
doAllTabs(0) doAllTabs(0)
} else if (targetID == "showAllBttn") { } else if (targetID == "showAllBttn") {
doAllTabs(1); doAllTabs(1);
} else if (targetID == "searchMode") {
var currentMode = target.getAttribute("searchwindowsmode");
if (currentMode == "true") {
target.title = "Searching curent window...";
target.children[0].src = "../icons/window.png";
target.setAttribute("searchwindowsmode", "false");
} else {
target.title = "Searching all windows...";
target.children[0].src = "../icons/windows.png";
target.setAttribute("searchwindowsmode", "true");
}
clearNodes(listZone);
getTabs();
} }
}); });
function setOldElm(target) {
target.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
oldElm.setAttribute("class", "block");
oldElm = target;
target.setAttribute("class", "block block-focused");
}
document.getElementById("searchBar").onkeypress = function () { document.getElementById("searchBar").onkeypress = function () {
searchTabs(); searchTabs();
} }

View File

@ -6,12 +6,40 @@ const notFoundText = document.createTextNode("Search not found...");
const tabImg = browser.extension.getURL("icons/tab.png"); const tabImg = browser.extension.getURL("icons/tab.png");
var oldElm = ""; var oldElm = "";
var plusTag = "" var plusTag = ""
var currentWinId = undefined;
var newWinId = undefined;
var focusedWinID = undefined;
var windowIndex = 0;
function logTabs(tabs) { function logTabs(tabs) {
// tab.url requires the `tabs` permission windowIndex = 0;
tabsAction.query({currentWindow: true, active: true}).then((tab) => {
focusedWinID = tab[0].windowId;
}, focusedWinID);
for (let tab of tabs) { for (let tab of tabs) {
createContainer(tab); currentWinId = tab.windowId;
if (currentWinId == newWinId) {
createContainer(tab);
} else {
if (windowIndex != 0) {
var pTag = document.createElement("P");
var msg = (focusedWinID == tab.windowId)
? "[ Current Window ] " : "Window: " + tab.windowId;
var pText = document.createTextNode(msg);
pTag.className = "windowIdHeaders";
pTag.appendChild(pText);
listZone.appendChild(pTag);
windowIndex++;
createContainer(tab);
} else {
windowIndex = 1;
}
}
newWinId = currentWinId;
} }
newWinId = undefined;
// Set poped-out-window position and 100px up from selected elm // Set poped-out-window position and 100px up from selected elm
oldElm.scrollIntoView(); oldElm.scrollIntoView();
window.scrollBy(0, -100); window.scrollBy(0, -100);
@ -75,9 +103,21 @@ function createTab() {
function onError(error) { console.log(`Error: ${error}`); } function onError(error) { console.log(`Error: ${error}`); }
function getTabs(tabs) { function getTabs() {
// Get current tab and then list of tabs var elm = document.getElementById("searchMode");
tabsAction.query({currentWindow: true}) var currentMode = (elm.getAttribute("searchwindowsmode") == "false");
.then(logTabs, onError);
if (currentMode == false) {
tabsAction.query({}).then(logTabs, onError)
.then(resetWinIndex, onError);
} else {
tabsAction.query({currentWindow: currentMode})
.then(logTabs, onError)
}
} }
function resetWinIndex() {
windowIndex = 0;
}
getTabs(); getTabs();

View File

@ -1,7 +1,5 @@
function findTabs(tabs) { function findTabs(tabs) {
var selection = []; var selection = [];
clearNodes(listZone);
if (searchBar.value != "") { if (searchBar.value != "") {
for (let tab of tabs) { for (let tab of tabs) {
var title = tab.title; var title = tab.title;
@ -10,16 +8,16 @@ function findTabs(tabs) {
} }
} }
if (selection.length > 1) { if (selection.length > 1) {
for (let sel of selection) { logTabs(selection);
createContainer(sel)
}
errHandler.style.display = "none"; errHandler.style.display = "none";
clearNodes(errHandler); clearNodes(errHandler);
} else { } else {
if (selection[0] != undefined) { if (selection[0] != undefined) {
searchBar.value = "";
errHandler.style.display = "none"; errHandler.style.display = "none";
clearNodes(errHandler); clearNodes(errHandler);
loadSelTab(selection[0].id); loadSelTab(selection[0].id);
getTabs();
} else { } else {
errHandler.style.display = "block"; errHandler.style.display = "block";
errHandler.appendChild(notFoundText); errHandler.appendChild(notFoundText);
@ -37,6 +35,14 @@ function clearNodes(targetNode) {
function loadSelTab(id) { browser.tabs.update(id, { active: true }); } function loadSelTab(id) { browser.tabs.update(id, { active: true }); }
function searchTabs() { function searchTabs() {
tabsAction.query({currentWindow: true}) var elm = document.getElementById("searchMode");
.then(findTabs, onError); var currentMode = (elm.getAttribute("searchwindowsmode") == "false");
clearNodes(listZone);
if (currentMode == false) {
tabsAction.query({}).then(findTabs, onError);
} else {
tabsAction.query({currentWindow: currentMode})
.then(findTabs, onError)
}
} }