New features.

This commit is contained in:
Maxim Stewart 2018-05-05 20:02:50 -05:00
parent 62537ec458
commit e71466a258
9 changed files with 134 additions and 53 deletions

View File

@ -4,8 +4,12 @@ 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-smarter/ https://addons.mozilla.org/en-US/firefox/addon/tab-search-smarter/
# Version: 1.1.6 # Version: 1.1.8
Fixed missing tab icon images by loading a generic when icon is unavailable. Added To Top, To Tab, and To Bottom buttons.
Added New Tab button in tab list
Added visual indicator of currently selected tab
Set initial scroll to go to selected tab
# Images # Images
![1 new list style](images/pic3.jpg) ![1 new list style](images/pic3.jpg)

View File

@ -21,6 +21,25 @@ html, body {
margin-left: 1.5em; margin-left: 1.5em;
} }
#udArrows {
position: fixed;
bottom: 0;
margin-left: 40%;
}
#udArrows button {
font-size: 1.4em;
background-color: rgba(79, 186, 70, 1);
color: rgba(255,255,255,1);
}
#udArrows button:hover {
background-color: rgba(255,255,255,1);
color: rgba(0,0,0,1);
cursor: pointer;
border-style: none;
}
#searchBar, #errorZone { #searchBar, #errorZone {
width: 630px; width: 630px;
background: rgb(255,255,255); background: rgb(255,255,255);
@ -38,9 +57,8 @@ html, body {
#errorZone { #errorZone {
color: red; color: red;
border-style: dotted; border-style: dotted;
margin-top: 2em; margin: 6em 0em 0em 2em;
padding-top: 0.5em; padding: 0.5em 0em 0.5em 0em;
padding-bottom: 0.5em;
} }
#listZone { #listZone {
@ -68,6 +86,10 @@ html, body {
color: rgba(64,64,64, 0.84); color: rgba(64,64,64, 0.84);
} }
.block-focused {
background-color: rgba(53, 103, 14, 0.8);
}
.thumbImg { .thumbImg {
clear: left; clear: left;
width: 64px; width: 64px;

BIN
src/icons/plus.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Tab Search", "name": "Tab Search",
"version": "1.1.6", "version": "1.1.8",
"description": "Search Tabs and switch to them quickly.", "description": "Search Tabs and switch to them quickly.",
"applications": { "applications": {

View File

@ -11,10 +11,15 @@
<input id="searchBar" type="text" placeholder="Search tabs..." value="" autofocus /> <input id="searchBar" type="text" placeholder="Search tabs..." value="" autofocus />
</div> </div>
<div id="listZone" class="container"> <div id="listZone" class="container"></div>
<div id="errorZone" style="display: none;"></div>
<div id="udArrows">
<button id="goTop" type="button" title="To Top">&Wedge;</button>
<button id="goToTab" type="button" title="Scroll Current Tab To View">&mdash;</button>
<button id="goBottom" type="button" title="To Bottom">&Vee;</button>
</div> </div>
<div id="errorZone" style="display: none;"></div>
<script src="../scripts/libs/dragula.min.js" charset="utf-8"></script> <script src="../scripts/libs/dragula.min.js" charset="utf-8"></script>
<script src="../scripts/dragContainersSetup.js" charset="utf-8"></script> <script src="../scripts/dragContainersSetup.js" charset="utf-8"></script>

View File

@ -15,7 +15,7 @@ var drake = dragula()
} }
} }
browser.tabs.move(toMoveID, {index: newIndex}).then(); tabsAction.move(toMoveID, {index: newIndex}).then();
el.className += ' ex-moved'; el.className += ' ex-moved';
}).on('over', function (el, container) { }).on('over', function (el, container) {
container.className += ' ex-over'; container.className += ' ex-over';

View File

@ -1,30 +1,37 @@
// Set click events // Set click events
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
var target = e.target; var target = e.target;
var targetID = target.id; var targetID = target.id;
var parentElm = target.parentElement; var parentElm = target.parentElement;
var id = 0;
if (targetID == "closeBttn") { if (targetID == "closeBttn") {
var id = parseInt(parentElm.getAttribute("tabID")); id = parseInt(parentElm.getAttribute("tabID"));
browser.tabs.remove(id).then(function () { browser.tabs.remove(id);
console.log("Removed tab..." + id)
}, onError);
parentElm.parentElement.removeChild(parentElm); parentElm.parentElement.removeChild(parentElm);
} else if (targetID == "iconElm" || targetID == "faveIcon") { } else if (targetID == "iconElm" || targetID == "faveIcon") {
if (targetID == "faveIcon") { if (targetID == "faveIcon")
var id = parseInt(parentElm.parentElement.getAttribute("tabID")); target = parentElm.parentElement;
} else {
var id = parseInt(target.getAttribute("tabID"));
}
browser.tabs.update(id, { active: true }).then(function () { oldElm.setAttribute("class", "block");
console.log("Selected tab..." + id) oldElm = target;
}, onError); target.setAttribute("class", "block block-focused");
id = parseInt(target.getAttribute("tabID"));
browser.tabs.update(id, { active: true });
} else if (targetID == "goTop") {
window.scrollTo(0,0);
} else if (targetID == "goBottom") {
window.scrollTo(0,document.body.scrollHeight);
} else if (targetID == "goToTab") {
// Go to selected and 100px up
oldElm.scrollIntoView();
window.scrollBy(0, -100);
} }
}); });
document.getElementById("searchBar").onkeypress = function(e){ document.getElementById("searchBar").onkeypress = function () {
searchTabs(); searchTabs();
} }

View File

@ -1,50 +1,89 @@
const tabQuery = browser.tabs.query({currentWindow: true}); const tabsAction = browser.tabs;
const searchBar = document.getElementById("searchBar"); const searchBar = document.getElementById("searchBar");
const errHandler = document.getElementById("errorZone"); const errHandler = document.getElementById("errorZone");
const listZone = document.getElementById("listZone"); const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found..."); const notFoundText = document.createTextNode("Search not found...");
var oldElm = "";
var plusTag = ""
function logTabs(tabs) { function logTabs(tabs) {
// tab.url requires the `tabs` permission // tab.url requires the `tabs` permission
for (let tab of tabs) { for (let tab of tabs) {
createContainer(tab); createContainer(tab);
} }
// Set window position to bottom of list addPlusContainer();
window.scrollTo(0,document.body.scrollHeight); // Set poped-out-window position and 100px up from selected elm
oldElm.scrollIntoView();
window.scrollBy(0, -100);
} }
function createContainer(tab) { function createContainer(tab) {
var id = tab.id; var id = tab.id;
var spanTag = document.createElement("SPAN"); var spanTag = document.createElement("SPAN");
var iconText = document.createTextNode(tab.title); var iconText = document.createTextNode(tab.title);
var centerTag = document.createElement("CENTER"); var centerTag = document.createElement("CENTER");
var closeImgTag = document.createElement("IMG"); var closeImgTag = document.createElement("IMG");
var icoImgTag = document.createElement("IMG"); var icoImgTag = document.createElement("IMG");
spanTag.title = tab.title; spanTag.setAttribute("tabID", tab.id);
spanTag.id = "iconElm"; spanTag.title = tab.title;
spanTag.className = "block"; spanTag.id = "iconElm";
spanTag.setAttribute("tabID",tab.id); spanTag.className = "block";
closeImgTag.id = "closeBttn";
closeImgTag.id = "closeBttn";
closeImgTag.className = "closeImg"; closeImgTag.className = "closeImg";
closeImgTag.src = "../icons/x.png"; closeImgTag.src = "../icons/x.png";
icoImgTag.id = "faveIcon";
icoImgTag.id = "faveIcon"; icoImgTag.className = "thumbImg";
icoImgTag.className = "thumbImg"; icoImgTag.onerror = function() { icoImgTag.src = "../icons/tab.png"; }
icoImgTag.onerror = function() { icoImgTag.src = "../icons/tab.png"; } icoImgTag.src = tab.favIconUrl;
icoImgTag.src = tab.favIconUrl;
centerTag.appendChild(icoImgTag); centerTag.appendChild(icoImgTag);
spanTag.appendChild(closeImgTag); spanTag.appendChild(closeImgTag);
spanTag.appendChild(centerTag); spanTag.appendChild(centerTag);
spanTag.appendChild(iconText); spanTag.appendChild(iconText);
listZone.appendChild(spanTag); listZone.appendChild(spanTag);
// Set oldElm so eventListeners.js has starting ref
if (tab.active == true) {
spanTag.className = "block block-focused";
if (oldElm) {
oldElm.setAttribute("class", "block");
}
oldElm = spanTag;
}
} }
function addPlusContainer() {
var spanTag = document.createElement("SPAN");
var centerTag = document.createElement("CENTER");
var icoImgTag = document.createElement("IMG");
spanTag .addEventListener("click", createTab);
spanTag.title = "Open a new tab...";
spanTag.className = "block";
icoImgTag.style = "width: 100%; height:auto";
icoImgTag.src = "../icons/plus.png";
centerTag.appendChild(icoImgTag);
spanTag.appendChild(centerTag);
listZone.appendChild(spanTag);
plusTag = spanTag;
}
function createTab() {
tabsAction.create({})
.then(function (tab) {
createContainer(tab);
}).then(function () {
listZone.appendChild(plusTag);
});
}
function onError(error) { console.log(`Error: ${error}`); } function onError(error) { console.log(`Error: ${error}`); }
function getAllTabs() { tabQuery.then(logTabs, onError); }
getAllTabs(); function getTabs(tabs) {
// Get current tab and then list of tabs
tabsAction.query({currentWindow: true})
.then(logTabs, onError);
}
getTabs();

View File

@ -35,4 +35,8 @@ function clearNodes(targetNode) {
} }
function loadSelTab(id) { browser.tabs.update(id, { active: true }); } function loadSelTab(id) { browser.tabs.update(id, { active: true }); }
function searchTabs() { tabQuery.then(findTabs, onError); }
function searchTabs() {
tabsAction.query({currentWindow: true})
.then(findTabs, onError);
}