itdominator
/
Tab-Search-and-Manage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -4,9 +4,10 @@ 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.3.0 # Version: 1.3.2
<ul> <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> </ul>
***Note: ***Note:

7
src/css/tabsSearch.css
View File

@ -24,13 +24,16 @@ html, body { overflow-x: hidden; }
margin-left: 25%; margin-left: 25%;
} }
#udArrows button { #udArrows input {
font-size: 2em; font-size: 2em;
background-color: rgba(79, 186, 70, 1); background-color: rgba(79, 186, 70, 1);
color: rgba(255,255,255,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); background-color: rgba(152, 152, 152, 1);
color: rgba(0,0,0,1); color: rgba(0,0,0,1);
cursor: pointer; cursor: pointer;

2
src/manifest.json
View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Tab Search and Manage", "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.", "description": "This plugin can search, drag-n-drop ordering, and (un)hide all or some tabs.",
"applications": { "applications": {

36
src/pages/tabsSearch.html
View File

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

41
src/scripts/generateView.js
View File

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