Added controls
|
@ -4,9 +4,9 @@ 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.8
|
# Version: 1.3.9
|
||||||
* Added tab mute option
|
* Added tab duplicate button
|
||||||
* Added to new window option
|
* Added secondary control menu
|
||||||
|
|
||||||
|
|
||||||
***Note:
|
***Note:
|
||||||
|
|
BIN
images/pic1.png
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 48 KiB |
BIN
images/pic2.png
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 54 KiB |
BIN
images/pic3.png
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 36 KiB |
BIN
images/pic4.png
Before Width: | Height: | Size: 404 KiB After Width: | Height: | Size: 58 KiB |
BIN
images/pic5.png
Before Width: | Height: | Size: 403 KiB After Width: | Height: | Size: 61 KiB |
BIN
images/pic6.png
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 24 KiB |
|
@ -22,15 +22,22 @@ html, body { overflow-x: hidden; }
|
||||||
margin-left: 1.4em;
|
margin-left: 1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabControls {
|
#tabControls,
|
||||||
|
#tabControls2 {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 555;
|
z-index: 555;
|
||||||
height: 152px;
|
width: 145px;
|
||||||
|
height: 32px;
|
||||||
padding: 0em 0.4em 0.4em 0.4em;
|
padding: 0em 0.4em 0.4em 0.4em;
|
||||||
background-color: rgba(9,107,120, 0.85);
|
background-color: rgba(9,107,120, 0.85);
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#tabControls2 {
|
||||||
|
height: 152px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
#bottomControls {
|
#bottomControls {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
@ -120,14 +127,24 @@ html, body { overflow-x: hidden; }
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeImg, .hiderImg, .popoutImg, .muterImg {
|
/* Control defaults */
|
||||||
|
.closeImg, .hiderImg, .muterImg, .dupeImg, .popoutImg {
|
||||||
padding: 0.2em;
|
padding: 0.2em;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
clear: both;
|
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Control 2 imgs set to vertical */
|
||||||
|
.closeImg {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiderImg, .muterImg, .dupeImg, .popoutImg {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.pTagTitleText {
|
.pTagTitleText {
|
||||||
background-color: rgba(63, 63, 63, 0.64);
|
background-color: rgba(63, 63, 63, 0.64);
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
|
@ -137,8 +154,11 @@ html, body { overflow-x: hidden; }
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeImg { float: right; }
|
.hiderImg:hover, .popoutImg:hover,
|
||||||
|
.muterImg:hover, .dupeImg:hover {
|
||||||
|
background-color: rgba(30, 129, 22, 1);
|
||||||
|
}
|
||||||
|
|
||||||
.block-focused { background-color: rgba(53, 103, 14, 0.8); }
|
.block-focused { background-color: rgba(53, 103, 14, 0.8); }
|
||||||
.closeImg:hover { background-color: rgba(196, 11, 11, 1); }
|
.closeImg:hover { background-color: rgba(196, 11, 11, 1); }
|
||||||
.hiderImg:hover, .popoutImg:hover, .muterImg:hover { background-color: rgba(30, 129, 22, 1); }
|
|
||||||
.hiddenBGColor { background-color: rgba(152, 152, 152, 0.8); }
|
.hiddenBGColor { background-color: rgba(152, 152, 152, 0.8); }
|
||||||
|
|
After Width: | Height: | Size: 6.6 KiB |
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"name": "Tab Search and Manage",
|
"name": "Tab Search and Manage",
|
||||||
"version": "1.3.8",
|
"version": "1.3.9",
|
||||||
"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": {
|
||||||
|
@ -19,6 +19,7 @@
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"tabs",
|
"tabs",
|
||||||
"tabHide",
|
"tabHide",
|
||||||
|
"activeTab",
|
||||||
"storage"
|
"storage"
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
@ -26,12 +26,17 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="tabControls" style="display: none;">
|
<div id="tabControls" style="display: none;">
|
||||||
<img id="closeBttn" class="closeImg" title="Close Tab" src="../icons/x.png" />
|
|
||||||
<img id="hideTgglBttn" class="hiderImg" title="Show/Hide Tab" src="../icons/eyeOpen.png" />
|
|
||||||
<img id="muteTgglBttn" class="muterImg" title="(Un)Mute Tab" src="../icons/isNotMuted.png" />
|
|
||||||
<img id="popoutBttn" class="popoutImg" title="Popout Tab" src="../icons/popout-arrow.png" />
|
<img id="popoutBttn" class="popoutImg" title="Popout Tab" src="../icons/popout-arrow.png" />
|
||||||
|
<img id="duplicateBttn" class="dupeImg" title="Duplicate Tab" src="../icons/dupeTab.png" />
|
||||||
|
<img id="muteTgglBttn" class="muterImg" title="(Un)Mute Tab" src="../icons/isNotMuted.png" />
|
||||||
|
<img id="hideTgglBttn" class="hiderImg" title="Show/Hide Tab" src="../icons/eyeOpen.png" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="tabControls2" style="display: none;">
|
||||||
|
<img id="closeBttn" class="closeImg" title="Close Tab" src="../icons/x.png" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<template id="tabContainerTemplate">
|
<template id="tabContainerTemplate">
|
||||||
<div title="" id="iconElm" class="">
|
<div title="" id="iconElm" class="">
|
||||||
<p class="pTagTitleText" ></p>
|
<p class="pTagTitleText" ></p>
|
||||||
|
|
|
@ -26,6 +26,10 @@ document.addEventListener("click", (e) => {
|
||||||
if (hoverTarget) {
|
if (hoverTarget) {
|
||||||
popoutSelectedTabAction(hoverTarget, hoverTarget.id);
|
popoutSelectedTabAction(hoverTarget, hoverTarget.id);
|
||||||
}
|
}
|
||||||
|
} else if (targetID == "duplicateBttn") {
|
||||||
|
if (hoverTarget) {
|
||||||
|
duplicateTabAction(hoverTarget, hoverTarget.id);
|
||||||
|
}
|
||||||
} else if (targetID == "muteTgglBttn") {
|
} else if (targetID == "muteTgglBttn") {
|
||||||
if (hoverTarget) {
|
if (hoverTarget) {
|
||||||
muteSelectedTabAction(hoverTarget, hoverTarget.id);
|
muteSelectedTabAction(hoverTarget, hoverTarget.id);
|
||||||
|
@ -89,6 +93,12 @@ function popoutSelectedTabAction(target, targetID) {
|
||||||
popoutSelectedTab(id);
|
popoutSelectedTab(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function duplicateTabAction(target, targetID) {
|
||||||
|
parentElm = target.parentElement;
|
||||||
|
id = parseInt(target.getAttribute("tabID"));
|
||||||
|
duplicateTab(id);
|
||||||
|
}
|
||||||
|
|
||||||
function hideSelectedTabAction(target, targetID) {
|
function hideSelectedTabAction(target, targetID) {
|
||||||
parentElm = target.parentElement;
|
parentElm = target.parentElement;
|
||||||
id = parseInt(target.getAttribute("tabID"));
|
id = parseInt(target.getAttribute("tabID"));
|
||||||
|
@ -141,7 +151,7 @@ function setOldElm(target) {
|
||||||
target.setAttribute("class", "block block-focused");
|
target.setAttribute("class", "block block-focused");
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrollToView(time = 200) {
|
function scrollToView(time = 400) {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
// Go to selected and 100px up
|
// Go to selected and 100px up
|
||||||
oldElm.scrollIntoView();
|
oldElm.scrollIntoView();
|
||||||
|
|
|
@ -21,6 +21,12 @@ function popoutSelectedTab(id) {
|
||||||
windowsAction.create({tabId: id});
|
windowsAction.create({tabId: id});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function duplicateTab(id) {
|
||||||
|
tab = await tabsAction.duplicate(id);
|
||||||
|
createContainer(tab);
|
||||||
|
}
|
||||||
|
|
||||||
function unhideSelectedTab(id) {
|
function unhideSelectedTab(id) {
|
||||||
tabsAction.show(id).then(successMsg, errMsg);
|
tabsAction.show(id).then(successMsg, errMsg);
|
||||||
}
|
}
|
||||||
|
@ -138,12 +144,17 @@ function createWin() {
|
||||||
|
|
||||||
async function moveTabControlTo(elm) {
|
async function moveTabControlTo(elm) {
|
||||||
let tabControls = document.getElementById("tabControls");
|
let tabControls = document.getElementById("tabControls");
|
||||||
|
let tabControls2 = document.getElementById("tabControls2");
|
||||||
let hideTgglBttn = tabControls.querySelector("#hideTgglBttn")
|
let hideTgglBttn = tabControls.querySelector("#hideTgglBttn")
|
||||||
let muteTgglBttn = tabControls.querySelector("#muteTgglBttn")
|
let muteTgglBttn = tabControls.querySelector("#muteTgglBttn")
|
||||||
|
|
||||||
let rect = elm.getBoundingClientRect();
|
let rect = elm.getBoundingClientRect();
|
||||||
tabControls.style.left = (rect.left - 46) + "px";
|
|
||||||
tabControls.style.top = rect.top + "px";
|
tabControls.style.left = (rect.left) + "px";
|
||||||
|
tabControls.style.top = (rect.top) + "px";
|
||||||
|
|
||||||
|
tabControls2.style.left = (rect.left - 46) + "px";
|
||||||
|
tabControls2.style.top = rect.top + "px";
|
||||||
hoverTarget = elm;
|
hoverTarget = elm;
|
||||||
|
|
||||||
if (elm.className == "block hiddenBGColor")
|
if (elm.className == "block hiddenBGColor")
|
||||||
|
@ -160,6 +171,7 @@ async function moveTabControlTo(elm) {
|
||||||
muteTgglBttn.src = "../icons/isMuted.png";
|
muteTgglBttn.src = "../icons/isMuted.png";
|
||||||
|
|
||||||
tabControls.style.display = "";
|
tabControls.style.display = "";
|
||||||
|
tabControls2.style.display = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
function onError(error) { console.log(`Error: ${error}`); }
|
function onError(error) { console.log(`Error: ${error}`); }
|
||||||
|
|