Start moving the Firefox extension to using a table instead of a list

This commit is contained in:
lordwelch 2020-12-09 13:27:19 -08:00
parent 4c1e7a4310
commit 17d26242d2
4 changed files with 46 additions and 18 deletions

View File

@ -11,9 +11,9 @@
},
"permissions": [
// "<all_urls>",
"<all_urls>",
"activeTab"
// "cookies"
"cookies"
],
"browser_action": {

View File

@ -0,0 +1,16 @@
.tdn {
border-right: 5px solid #82092d;
}
#links .link:nth-child(even){background-color: #BBBBBB;}
#links .link:hover {
cursor: pointer;
background-color: grey;
}
#links {
border-collapse: collapse;
border-spacing: -1, 1px;
}

View File

@ -3,13 +3,15 @@
<html>
<head>
<meta charset="utf-8">
<!--link rel="stylesheet" href="dl.css"/-->
<link rel="stylesheet" href="dl.css"/>
</head>
<body>
<input type="text" id="linkFilter" placeholder="Fiter links...">
<ul id="links">
</ul>
<table id="links">
<tbody>
</tbody>
</table>
</body>
<script src="links.js"></script>

View File

@ -27,26 +27,36 @@ function getlinks(request,sender,sendResponse) {
var linkel = document.getElementById("links");
clearChildren(linkel);
for (var i = pageLinks.length - 1; i >= 0; i--) {
var li = document.createElement("li");
li.setAttribute("index", i);
li.textContent = pageLinks[i].text + " " + pageLinks[i].href;
linkel.appendChild(li);
var tr = document.createElement("tr");
var tdn = document.createElement("td");
var tdl = document.createElement("td");
tr.setAttribute("index", i);
tr.setAttribute("class", "link");
tdn.textContent = pageLinks[i].text;
tdn.setAttribute("class", "tdn")
tdl.textContent = pageLinks[i].href;
tr.appendChild(tdn);
tr.appendChild(tdl);
linkel.appendChild(tr);
}
}
function filter(inputID, ulID) {
var input, filter, ul, li, i, txtValue;
function filter(inputID, ElementId) {
var input, filter, element, tr, i, txtValue;
input = document.getElementById(inputID);
ul = document.getElementById(ulID);
element = document.getElementById(ElementId);
filter = input.value.toUpperCase();
ul = document.getElementById(ulID);
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
txtValue = li[i].textContent || li[i].innerText;
element = document.getElementById(ElementId);
tr = element.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
txtValue = tr[i].textContent || tr[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
tr[i].style.display = "";
} else {
li[i].style.display = "none";
tr[i].style.display = "none";
}
}
}