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
https://addons.mozilla.org/en-US/firefox/addon/tab-search-smarter/
# Version: 1.1.6
Fixed missing tab icon images by loading a generic when icon is unavailable.
# Version: 1.1.8
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
![1 new list style](images/pic3.jpg)

View File

@ -21,6 +21,25 @@ html, body {
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 {
width: 630px;
background: rgb(255,255,255);
@ -38,9 +57,8 @@ html, body {
#errorZone {
color: red;
border-style: dotted;
margin-top: 2em;
padding-top: 0.5em;
padding-bottom: 0.5em;
margin: 6em 0em 0em 2em;
padding: 0.5em 0em 0.5em 0em;
}
#listZone {
@ -68,6 +86,10 @@ html, body {
color: rgba(64,64,64, 0.84);
}
.block-focused {
background-color: rgba(53, 103, 14, 0.8);
}
.thumbImg {
clear: left;
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,
"name": "Tab Search",
"version": "1.1.6",
"version": "1.1.8",
"description": "Search Tabs and switch to them quickly.",
"applications": {

View File

@ -11,10 +11,15 @@
<input id="searchBar" type="text" placeholder="Search tabs..." value="" autofocus />
</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 id="errorZone" style="display: none;"></div>
<script src="../scripts/libs/dragula.min.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';
}).on('over', function (el, container) {
container.className += ' ex-over';

View File

@ -1,30 +1,37 @@
// Set click events
document.addEventListener("click", (e) => {
var target = e.target;
var targetID = target.id;
var target = e.target;
var targetID = target.id;
var parentElm = target.parentElement;
var id = 0;
if (targetID == "closeBttn") {
var id = parseInt(parentElm.getAttribute("tabID"));
id = parseInt(parentElm.getAttribute("tabID"));
browser.tabs.remove(id).then(function () {
console.log("Removed tab..." + id)
}, onError);
browser.tabs.remove(id);
parentElm.parentElement.removeChild(parentElm);
} else if (targetID == "iconElm" || targetID == "faveIcon") {
if (targetID == "faveIcon") {
var id = parseInt(parentElm.parentElement.getAttribute("tabID"));
} else {
var id = parseInt(target.getAttribute("tabID"));
}
if (targetID == "faveIcon")
target = parentElm.parentElement;
browser.tabs.update(id, { active: true }).then(function () {
console.log("Selected tab..." + id)
}, onError);
oldElm.setAttribute("class", "block");
oldElm = target;
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();
}

View File

@ -1,50 +1,89 @@
const tabQuery = browser.tabs.query({currentWindow: true});
const searchBar = document.getElementById("searchBar");
const errHandler = document.getElementById("errorZone");
const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found...");
const tabsAction = browser.tabs;
const searchBar = document.getElementById("searchBar");
const errHandler = document.getElementById("errorZone");
const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found...");
var oldElm = "";
var plusTag = ""
function logTabs(tabs) {
// tab.url requires the `tabs` permission
for (let tab of tabs) {
createContainer(tab);
}
// Set window position to bottom of list
window.scrollTo(0,document.body.scrollHeight);
addPlusContainer();
// Set poped-out-window position and 100px up from selected elm
oldElm.scrollIntoView();
window.scrollBy(0, -100);
}
function createContainer(tab) {
var id = tab.id;
var spanTag = document.createElement("SPAN");
var iconText = document.createTextNode(tab.title);
var centerTag = document.createElement("CENTER");
var closeImgTag = document.createElement("IMG");
var icoImgTag = document.createElement("IMG");
var id = tab.id;
var spanTag = document.createElement("SPAN");
var iconText = document.createTextNode(tab.title);
var centerTag = document.createElement("CENTER");
var closeImgTag = document.createElement("IMG");
var icoImgTag = document.createElement("IMG");
spanTag.title = tab.title;
spanTag.id = "iconElm";
spanTag.className = "block";
spanTag.setAttribute("tabID",tab.id);
closeImgTag.id = "closeBttn";
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;
closeImgTag.src = "../icons/x.png";
icoImgTag.id = "faveIcon";
icoImgTag.className = "thumbImg";
icoImgTag.onerror = function() { icoImgTag.src = "../icons/tab.png"; }
icoImgTag.src = tab.favIconUrl;
centerTag.appendChild(icoImgTag);
spanTag.appendChild(closeImgTag);
spanTag.appendChild(centerTag);
spanTag.appendChild(iconText);
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 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 searchTabs() { tabQuery.then(findTabs, onError); }
function searchTabs() {
tabsAction.query({currentWindow: true})
.then(findTabs, onError);
}