Added controls

This commit is contained in:
Maxim Stewart 2020-06-30 16:36:00 -05:00
parent 16a86447bf
commit 73af98379e
13 changed files with 65 additions and 17 deletions

View File

@ -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:

Binary file not shown.

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 404 KiB

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 403 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -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); }

BIN
src/icons/dupeTab.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

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.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"
], ],

View File

@ -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>

View File

@ -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();

View File

@ -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}`); }