Fixed buttons and improved load times of list.

This commit is contained in:
Maxim Stewart 2019-04-01 03:18:14 -05:00
parent 5afaf1d6a0
commit f0c2a51887
5 changed files with 39 additions and 52 deletions

View File

@ -4,9 +4,10 @@ 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-and-manage/
# Version: 1.3.0
# Version: 1.3.2
<ul>
<li>Fixed auto-scroll into view of currently selected tab.</li>
<li>Fixed lower buttons not detecting clicks.</li>
<li>Implimented Template html for faster renders of lists.</li>
</ul>
***Note:

View File

@ -24,13 +24,16 @@ html, body { overflow-x: hidden; }
margin-left: 25%;
}
#udArrows button {
#udArrows input {
font-size: 2em;
background-color: rgba(79, 186, 70, 1);
color: rgba(255,255,255,1);
width: 1em;
height: 1em;
padding: 0.1em;
}
#udArrows button:hover {
#udArrows input:hover {
background-color: rgba(152, 152, 152, 1);
color: rgba(0,0,0,1);
cursor: pointer;

View File

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

View File

@ -15,30 +15,24 @@
<div id="errorZone" style="display: none;"></div>
<div id="udArrows">
<button id="goTop" type="button" title="To Top">
<img style="width:1em; height:1em;" src="../icons/up-arrow.png"/>
</button>
<button id="showAllBttn" type="button" title="Unhide All Tabs">
<img style="width:1em; height:1em;" src="../icons/eyeOpen.png"/>
</button>
<button id="goToTab" type="button" title="Scroll Current Tab To View">
<img style="width:1em; height:1em;" src="../icons/go2-arrow.png"/>
</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">
<img style="width:1em; height:1em;" src="../icons/plus.png"/>
</button>
<button id="hideAllBttn" type="button" title="Hide All Tabs">
<img style="width:1em; height:1em;" src="../icons/eyeClosed.png"/>
</button>
<button id="goBottom" type="button" title="To Bottom">
<img style="width:1em; height:1em;" src="../icons/down-arrow.png"/>
</button>
<input type="image" id="goTop" title="To Top" src="../icons/up-arrow.png" />
<input type="image" id="showAllBttn" title="Unhide All Tabs" src="../icons/eyeOpen.png" />
<input type="image" id="goToTab" title="Scroll Current Tab To View" src="../icons/go2-arrow.png" />
<input type="image" id="searchMode" searchwindowsmode="false" src="../icons/window.png" />
<input type="image" id="newTab" title="New Tab" src="../icons/plus.png" />
<input type="image" id="hideAllBttn" title="Hide All Tabs" src="../icons/eyeClosed.png"/>
<input type="image" id="goBottom" title="To Bottom" src="../icons/down-arrow.png"/>
</div>
<template id="tabContainerTemplate">
<div title="" id="iconElm" class="">
<img id="closeBttn" class="closeImg" src="" />
<img id="hideTgglBttn" class="hiderImg" src="" />
<p class="pTagTitleText" ></p>
</div>
</template>
<script src="../scripts/libs/dragula.min.js" charset="utf-8"></script>
<script src="../scripts/dragContainersSetup.js" charset="utf-8"></script>
<script src="../scripts/showHideLogic.js"></script>

View File

@ -6,7 +6,6 @@ const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found...");
const tabImg = browser.extension.getURL("icons/tab.png");
var oldElm = "";
var plusTag = ""
var currentWinId = undefined;
var newWinId = undefined;
var focusedWinID = undefined;
@ -47,13 +46,15 @@ function logTabs(tabs) {
}
function createContainer(tab) {
var id = tab.id;
var spanTag = document.createElement("DIV");
var pTag = document.createElement("P");
var iconText = document.createTextNode(tab.title);
var closeImgTag = document.createElement("IMG");
var hidnStImgTag = document.createElement("IMG");
var icoImgTag = document.createElement("IMG"); // Used to properly set bg
var template = document.querySelector('#tabContainerTemplate');
var clone = document.importNode(template.content, true);
var spanTag = clone.querySelector("#iconElm");
var closeImgTag = clone.querySelector("#closeBttn");
var hidnStImgTag = clone.querySelector("#hideTgglBttn");
var pTag = clone.querySelector(".pTagTitleText");
var icoImgTag = document.createElement("IMG"); // Used to detect image load failure
var iconText = document.createTextNode(tab.title);
var id = tab.id;
// Set oldElm so eventListeners.js has starting ref
if (tab.active == true) {
@ -70,13 +71,7 @@ function createContainer(tab) {
spanTag.setAttribute("tabID", tab.id);
spanTag.title = tab.title;
spanTag.id = "iconElm";
closeImgTag.id = "closeBttn";
closeImgTag.className = "closeImg";
closeImgTag.src = "../icons/x.png";
hidnStImgTag.id = "hideTgglBttn"
hidnStImgTag.className= "hiderImg";
pTag.className = "pTagTitleText";
if (!tab.hidden) {
spanTag.className = "block";
@ -89,21 +84,15 @@ function createContainer(tab) {
spanTag.style.backgroundImage = "url(" + tab.favIconUrl + ")";
icoImgTag.src = tab.favIconUrl;
icoImgTag.onerror = function() { spanTag.style.backgroundImage = "url(" + tabImg + ")"; }
spanTag.appendChild(closeImgTag);
spanTag.appendChild(hidnStImgTag);
pTag.appendChild(iconText);
spanTag.appendChild(pTag);
listZone.appendChild(spanTag);
listZone.appendChild(clone);
}
function createTab() {
tabsAction.create({})
.then(function (tab) {
createContainer(tab);
}).then(function () {
listZone.appendChild(plusTag);
});
})
}
function onError(error) { console.log(`Error: ${error}`); }
@ -120,14 +109,14 @@ function getTabs() {
if (key) {
target.title = "Searching curent windows...";
target.children[0].src = "../icons/windows.png";
target.src = "../icons/windows.png";
target.setAttribute("searchwindowsmode", true);
tabsAction.query({}).then(logTabs, onError)
.then(resetWinIndex, onError);
} else {
target.title = "Searching curent window...";
target.children[0].src = "../icons/window.png";
target.src = "../icons/window.png";
target.setAttribute("searchwindowsmode", false);
tabsAction.query({currentWindow: true})
@ -141,8 +130,8 @@ function getTabs() {
}
async function setSearchMode(target, text, img, state) {
target.title = "Searching " + text + "...";
target.children[0].src = "../icons/" + img + ".png";
target.title = "Searching " + text + "...";
target.src = "../icons/" + img + ".png";
target.setAttribute("searchwindowsmode", state);
await storageArea.set({"searchMode": state });