diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..62c8935
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea/
\ No newline at end of file
diff --git a/icons/clipboard.png b/icons/clipboard.png
deleted file mode 100644
index 93ce491..0000000
Binary files a/icons/clipboard.png and /dev/null differ
diff --git a/popup.css b/popup.css
new file mode 100644
index 0000000..48b87ef
--- /dev/null
+++ b/popup.css
@@ -0,0 +1,187 @@
+/*----------Tags----------------------------*/
+
+body {
+ margin: 0;
+ background-color: #fafafa;
+}
+
+a {
+ text-decoration: none;
+}
+
+ul {
+ list-style-type: none;
+ padding-left: 0;
+ margin: 0;
+}
+
+/*----------Layout----------------------------*/
+
+.content {
+ height: auto;
+ width: 600px;
+ max-height: 400px;
+ max-width: 800px;
+}
+
+.container-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-content: stretch;
+ align-items: stretch;
+}
+
+.container-column {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: stretch;
+ align-content: stretch;
+ align-items: stretch;
+}
+
+.container-scroll {
+ overflow-y: scroll;
+}
+
+.container-no-scrollbar::-webkit-scrollbar {
+ display: none;
+}
+
+.col {
+ order: 0;
+ width: 50%;
+ flex: 1 1 auto;
+ align-self: auto;
+}
+
+/*----------Connector-Canvas--------------------------*/
+.connector {
+ flex: 0 0 20px;
+ width: 20px;
+}
+
+/*----------AS Buttongroup----------------------------*/
+
+.asn-links {
+ padding: 8px;
+}
+
+.background-gray {
+ background-color: #dddddd;
+}
+
+ul#asn {
+ box-shadow: #bbbbbb 2px 2px;
+ border-radius: 3px;
+}
+
+/*-ASN Link-*/
+
+a.img-link {
+ vertical-align: baseline;
+ width: 100%;
+ display: flex;
+ padding: 7px 8px;
+ transition: all 0.3s, box-shadow 0.2s;
+ color: #333333;
+ box-sizing: border-box;
+ background-color: #fafafa;
+}
+
+ul > li:first-child > a.img-link {
+ border-radius: 3px 3px 0 0;
+}
+
+ul > li:last-child > a.img-link {
+ border-radius: 0 0 3px 3px;
+}
+
+a.img-link > img {
+ vertical-align: middle;
+ width: auto;
+ height: 25px;
+ margin-right: 5px;
+ align-self: center;
+}
+
+a.img-link > span {
+ align-self: center;
+}
+
+a.img-link:hover {
+ cursor: pointer;
+ background-color: #e1e1e1;
+ box-shadow: #333 0px 0px 2px -1px inset;
+}
+
+a.img-link > img:hover {
+
+}
+
+/*----------Requests----------------------------*/
+.asn-requests {
+ color: #666666;
+ border-top: 1px solid #dddddd;
+}
+
+.asn-requests > ul > li {
+ padding: 5px 0px; /* 5 + 3 px = 8px = same as asn-details */
+}
+
+.asn-requests > ul > li > ul > li {
+ padding: 3px 15px 3px 3px;
+}
+
+.asn-requests > ul > li:last-child > ul > li:last-child {
+ padding-bottom: 6px;
+}
+
+.asn-hostname {
+ color: #333333;
+ font-weight: bold;
+ word-break: break-word;
+}
+
+/*----------AS Details----------------------------*/
+
+table.asn-details {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+.asn-details .col-name {
+ width: 40px;
+ font-size: 0.8em;
+ text-align: right;
+ padding: 3px 5px;
+}
+
+.asn-details tr:first-child .col-name, .asn-details tr:first-child .col-value{
+ padding-top: 8px;
+}
+
+.asn-details tr:last-child .col-name, .asn-details tr:last-child .col-value {
+ padding-bottom: 8px;
+}
+
+.asn-details .col-value {
+ font-weight: bold;
+}
+
+.asn-details > li {
+ margin-top: 4px;
+ padding-bottom: 4px;
+ border-bottom: 1px solid #dddddd;
+}
+
+.asn-details > li:first-child {
+ margin-top: 0;
+}
+
+.asn-details > li:last-child {
+ padding-bottom: 0;
+ border-bottom: none;
+}
diff --git a/popup.html b/popup.html
index 5adec96..850d110 100644
--- a/popup.html
+++ b/popup.html
@@ -1,60 +1,30 @@
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/popup.js b/popup.js
index 1a34fd7..34dca82 100644
--- a/popup.js
+++ b/popup.js
@@ -1,94 +1,229 @@
-function nsGhipUtil_load(){
-
- var tabId = parseInt(window.location.hash.replace('#','')) ;
-
- var asn = chrome.extension.getBackgroundPage().asn[tabId] ;
-
- for (var i in asn ){
- var a = document.createElement('a');
- var br = document.createElement('br');
- a.href = 'https://bgp.he.net/AS'+asn[i].asn;
- a.text = "AS" + asn[i].asn + ' ' + asn[i].asname;
- var im = document.createElement('img');
- im.src = "icons/clipboard.png";
- im.data = {asn : asn[i].asn};
- im.className="copy";
- im.onclick = copyToClipboard ;
- document.querySelector('#asn').appendChild(im);
- document.querySelector('#asn').appendChild(a);
- document.querySelector('#asn').appendChild(br);
- }
-
-
- var ips = chrome.extension.getBackgroundPage().ipData[tabId] ;
- var prefix = chrome.extension.getBackgroundPage().prefix[tabId] ;
- for (var i in asn ){
- var docFragment = document.createDocumentFragment();
- var text = document.createTextNode("AS: " + asn[i].asn);
- docFragment.appendChild(text);
-
- var br = document.createElement('BR');
- docFragment.appendChild(br);
- var text_0 = document.createTextNode("Prefixes: " + asn[i].prefixes);
- docFragment.appendChild(text_0);
-
- var br_0 = document.createElement('BR');
- docFragment.appendChild(br_0);
- var text_1 = document.createTextNode("AS name: " + asn[i].asname);
- docFragment.appendChild(text_1);
-
- var br_1 = document.createElement('BR');
- docFragment.appendChild(br_1);
- var text_2 = document.createTextNode("AS desc: " + asn[i].asdesc);
- docFragment.appendChild(text_2);
-
- var br_2 = document.createElement('BR');
- docFragment.appendChild(br_2);
- var text_3 = document.createTextNode("Country: " + asn[i].country);
- docFragment.appendChild(text_3);
-
- var br_3 = document.createElement('BR');
- docFragment.appendChild(br_3);
- var text_4 = document.createTextNode("RIR: " + asn[i].rir);
- docFragment.appendChild(text_4);
-
- var br_4 = document.createElement('BR');
- docFragment.appendChild(br_4);
- for (var p in prefix[asn[i].asn]){
- var text_5 = document.createTextNode("Prefix: " + prefix[asn[i].asn][p]);
- docFragment.appendChild(text_5);
- var br_5 = document.createElement('BR');
- docFragment.appendChild(br_5);
+function nsGhipUtil_load() {
+ console.log("Loading Window...");
+
+ var tabId = parseInt(window.location.hash.replace('#', ''));
+
+ var asn = chrome.extension.getBackgroundPage().asn[tabId];
+ var ips = chrome.extension.getBackgroundPage().ipData[tabId];
+ var prefix = chrome.extension.getBackgroundPage().prefix[tabId];
+
+ for (var i in asn) {
+ if (i === "undefined") {
+ continue;
+ }
+
+ // Create Buttons
+ var li = document.createElement('li');
+ var a = document.createElement('a');
+ var span = document.createElement('span');
+ a.classList.add("img-link");
+ a.href = 'https://bgp.he.net/AS' + asn[i].asn;
+ a.target = "_blank";
+ span.innerText = "AS" + asn[i].asn + ' ' + asn[i].asname;
+ a.appendChild(span)
+ li.appendChild(a);
+ document.querySelector('ul#asn').appendChild(li);
+
+
+ // Create Table
+ var tbody = document.createElement('tbody');
+ var as_id = createRow("AS", asn[i].asn);
+ var prefixes = createRow("Prefixes", asn[i].prefixes);
+ var as_name = createRow("Name", asn[i].asname);
+ var as_desc = createRow("Desc", asn[i].asdesc);
+ var country = createRow("Country", asn[i].country);
+ var rir = createRow("RIR", asn[i].rir);
+
+ tbody.append(as_id, prefixes, as_name, as_desc, country, rir);
+
+ // Add Prefixes to Table
+ for (var p in prefix[asn[i].asn]) {
+ var prefix_row = createRow("Prefix", prefix[asn[i].asn][p]);
+ tbody.appendChild(prefix_row);
}
- var br_6 = document.createElement('BR');
- docFragment.appendChild(br_6);
- var br_7 = document.createElement('div')
- docFragment.appendChild(br_7);
-
- document.querySelector('#asns').appendChild(docFragment);
- for (var count in ips[asn[i].asn] ){
- var a = document.createElement('div');
- var text = document.createTextNode(ips[asn[i].asn][count].hostname + ' ('+ips[asn[i].asn][count]['type'].join(", ")+') : ' + count);
- a.appendChild(text)
- document.querySelector('#ips').appendChild(a);
+
+ document.querySelector('table#asns').appendChild(tbody);
+
+
+ // Create URL List
+ var wrapper_li = document.createElement('li');
+ var ul = document.createElement('ul')
+ for (var count in ips[asn[i].asn]) {
+ var li = document.createElement('li');
+ var div = document.createElement('div');
+ var span = document.createElement('span');
+ var br = document.createElement("br");
+
+ span.textContent = ips[asn[i].asn][count].hostname + ' (' + ips[asn[i].asn][count]['type'].join(", ") + '): ';
+ span.classList.add("asn-hostname");
+ div.appendChild(span);
+ div.appendChild(br);
+
+ var text = document.createTextNode(count);
+ div.appendChild(text);
+ li.appendChild(div);
+ ul.appendChild(li);
}
- }
-
+ wrapper_li.appendChild(ul);
+ document.querySelector('ul#ips').appendChild(wrapper_li);
+ }
+
+ const highlighting = '#eee';
+ const scrollers = document.getElementsByClassName("synced");
+ const connector = document.getElementsByClassName("connector")[0];
+ new SyncScroller(scrollers[0], scrollers[1], connector, highlighting);
+}
+
+function createRow(name, value) {
+ var row = document.createElement('tr');
+ var col_name = document.createElement('td');
+ var col_value = document.createElement('td');
+
+ col_name.classList.add("col-name");
+ col_value.classList.add("col-value");
+
+ col_name.innerText = name;
+ col_value.innerText = value;
+
+ row.append(col_name, col_value);
+ return row;
+}
+
+function copyToClipboard() {
+ var copyFrom = document.createElement("textarea");
+ copyFrom.textContent = this.data.asn;
+ var body = document.getElementsByTagName('body')[0];
+ body.appendChild(copyFrom);
+ copyFrom.select();
+ document.execCommand('copy');
+ body.removeChild(copyFrom);
+ this.style.border = "1px solid red";
+ var that = this;
+ setTimeout(function () {
+ that.style.border = 'none';
+ }, 1000);
+}
+
+/*--------------------
+ -----SyncScroller---
+ --------------------*/
+
+class SyncScroller {
+ constructor(scroller1, scroller2, connector_canvas, highlightingColor) {
+ this.scroller1 = scroller1;
+ this.scroller2 = scroller2;
+ this.nodeList1 = scroller1.children[0].children;
+ this.nodeList2 = scroller2.children[0].children;
+ this.highlightingColor = highlightingColor;
+ this.connector = new Connector(connector_canvas, this.nodeList1, this.nodeList2, highlightingColor)
+
+ this.highlightNodes(this.nodeList1);
+ this.highlightNodes(this.nodeList2);
+
+ this.connector.drawConnectors();
+
+ this.initialise();
+ }
+
+ initialise() {
+ let scrolling = false;
+ let ticking = false;
+
+ const onScrollerScroll = (event) => {
+ if (scrolling) {
+ scrolling = false;
+ return;
+ }
+ scrolling = true;
+
+ if (!ticking) {
+ ticking = true;
+ window.requestAnimationFrame(() => {
+ const otherScroller = event.target == this.scroller1 ? this.scroller2 : this.scroller1;
+ this.synchroniseScrollers(event.target, otherScroller);
+ ticking = false;
+ });
+ }
+ };
+
+ this.scroller1.onscroll = onScrollerScroll;
+ this.scroller2.onscroll = onScrollerScroll;
+ }
+
+ highlightNodes(nodeList) {
+ for (let i = 1; i < nodeList.length; i += 2)
+ nodeList[i].style.backgroundColor = this.highlightingColor;
+ }
+
+ synchroniseScrollers(scroller1, scroller2) {
+ const scrollPercent = scroller1.scrollTop / (scroller1.scrollHeight - scroller1.clientHeight);
+ scroller2.scrollTop = (scroller2.scrollHeight - scroller2.clientHeight) * scrollPercent;
+ // Update the connector canvas
+ this.connector.drawConnectors();
+ }
}
-window.addEventListener("load", nsGhipUtil_load ,false);
-
-function copyToClipboard(){
- var copyFrom = document.createElement("textarea");
- copyFrom.textContent = this.data.asn;
- var body = document.getElementsByTagName('body')[0];
- body.appendChild(copyFrom);
- copyFrom.select();
- document.execCommand('copy');
- body.removeChild(copyFrom);
- this.style.border= "1px solid red";
- var that = this;
- setTimeout(function(){
- that.style.border = 'none';
- },1000);
+
+class Connector {
+ constructor(canvas, nodeList1, nodeList2, highlighting_color) {
+ this.canvas = canvas;
+ this.nodeList1 = nodeList1;
+ this.nodeList2 = nodeList2;
+ this.highlighting_color = highlighting_color;
+ this.ctx = canvas.getContext("2d")
+ canvas.width = canvas.clientWidth;
+ canvas.height = canvas.parentElement.clientHeight;
+ }
+
+ drawConnectors() {
+
+ this.clearCanvas();
+
+ for (let i = 0; i < this.nodeList1.length; i++) {
+
+ if (i % 2 != 1)
+ continue;
+ if (!this.nodeList1[i] || !this.nodeList2[i])
+ return;
+
+ let point1 = {
+ x: 0,
+ y: this.nodeList1[i].getBoundingClientRect().top - this.canvas.parentElement.getBoundingClientRect().top
+ };
+
+ let point2 = {
+ x: this.canvas.width,
+ y: this.nodeList2[i].getBoundingClientRect().top - this.canvas.parentElement.getBoundingClientRect().top
+ };
+
+ let point3 = {
+ x: this.canvas.width,
+ y: this.nodeList2[i].getBoundingClientRect().top + this.nodeList2[i].clientHeight - this.canvas.parentElement.getBoundingClientRect().top
+ }
+
+ let point4 = {
+ x: 0,
+ y: this.nodeList1[i].getBoundingClientRect().top + this.nodeList1[i].clientHeight - this.canvas.parentElement.getBoundingClientRect().top
+ };
+
+ this.drawRectArc(point1, point2, point3, point4);
+ }
+ }
+
+ drawRectArc(point1, point2, point3, point4) {
+ this.ctx.beginPath();
+ this.ctx.moveTo(point1.x, point1.y);
+ this.ctx.bezierCurveTo(this.canvas.width / 2, point1.y, this.canvas.width / 2, point2.y, point2.x, point2.y);
+ this.ctx.lineTo(point3.x, point3.y);
+ this.ctx.bezierCurveTo(this.canvas.width / 2, point3.y, this.canvas.width / 2, point4.y, point4.x, point4.y);
+ this.ctx.closePath();
+ this.ctx.fillStyle = this.highlighting_color;
+ this.ctx.fill();
+ }
+
+ clearCanvas() {
+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ }
}
+
+window.addEventListener("load", nsGhipUtil_load, false);