New features.
This commit is contained in:
parent
62537ec458
commit
e71466a258
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 5.7 KiB |
|
@ -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": {
|
||||
|
|
|
@ -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">⋀</button>
|
||||
<button id="goToTab" type="button" title="Scroll Current Tab To View">—</button>
|
||||
<button id="goBottom" type="button" title="To Bottom">⋁</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>
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue