From 9d6f37e7a98708c683b0bda82e4c46e3e06db5b4 Mon Sep 17 00:00:00 2001 From: "Disler Colin, INI-DOS-FDN-ENB" Date: Thu, 25 Jul 2019 22:37:31 +0200 Subject: [PATCH 1/8] Added gitignore to exclude intellij project folder dito --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore 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 From 61d70276924f6fa7dc271b6b3413bd6e5585ba6b Mon Sep 17 00:00:00 2001 From: "Disler Colin, INI-DOS-FDN-ENB" Date: Thu, 25 Jul 2019 22:38:23 +0200 Subject: [PATCH 2/8] WIP: Changed the documents structure to make it easier to design made a few changes to the js and html --- popup.css | 123 +++++++++++++++++++++++++++++++ popup.html | 212 +++++++++++++++++++++++++++++++++++++++-------------- popup.js | 79 ++++++++++---------- 3 files changed, 319 insertions(+), 95 deletions(-) create mode 100644 popup.css diff --git a/popup.css b/popup.css new file mode 100644 index 0000000..663ee2c --- /dev/null +++ b/popup.css @@ -0,0 +1,123 @@ +/* +!* ----Page--- *! +html, body { + width: 620px; + padding: 0; + font-family: arial; + font-size: 15px; +} + +body { + margin: 0; + text-size-adjust: 100%; +} + +*, *::after, *::before { + box-sizing: border-box; +} + +!* ----Tags--- *! + +a { + font-weight: 500; + text-decoration: none; + display: block; + color: #000; + margin-bottom: 5px; + border-bottom: #EEE 1px solid +} + +h1, h2 { + border-bottom: 1px solid; +} + +img { + width: 18px; + cursor: pointer; + margin-left: 5px; +} + +.flex { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.flex > .col { + flex: 1 1 0; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + max-width: 380px; + margin: 8px; +} + +.flex a { + font-size: 12px; +} + +.outer { + margin: 15px 15px; + padding: 0; +} + +.header { + font-size: 16px; + border-bottom: 1px solid #000; +} + +.header .txt { + font-size: 24px; +} + +.header #asn a { + display: inline-block; +} + +.header #asn img.copy { + float: left +}*/ + +body > .outer > .header > .txt, #asn {} +body > .outer > .flex > .col {} + +body { + margin: 0; + background-color: #dddddd; +} + +a { + text-decoration: none; +} + +.container { + height: 100%; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; +} + +.col { + order: 0; + flex: 1 1 auto; + align-self: auto; +} + +.padding { + padding: 15px; +} + +.gray-background { + background-color: #aaaaaa; +} + +.delimiter-right { + border-right: #bbbbbb 1px solid; +} + + diff --git a/popup.html b/popup.html index 5adec96..9d9530e 100644 --- a/popup.html +++ b/popup.html @@ -1,60 +1,166 @@ - - - - - - - -
-
-
- ASN:
- -
- - -
-
-

ASN

-
-
-
-

Requests

-
-
-
-
- - + diff --git a/popup.js b/popup.js index 1a34fd7..89778d7 100644 --- a/popup.js +++ b/popup.js @@ -5,8 +5,8 @@ function nsGhipUtil_load(){ var asn = chrome.extension.getBackgroundPage().asn[tabId] ; for (var i in asn ){ + var li = document.createElement('li'); 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'); @@ -14,69 +14,64 @@ function nsGhipUtil_load(){ 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); + a.insertBefore(im, a.firstChild); + li.appendChild(a); + document.querySelector('ul#asn').appendChild(li); } 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 li = document.createElement('li'); + var table = document.createElement('table'); + var tbody = document.createElement('tbody'); - 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 as_id = createRow("AS", asn[i].asn); + var prefixes = createRow("Prefixes", asn[i].prefixes); + var as_name = createRow("AS Name", asn[i].asname); + var as_desc = createRow("AS Desc", asn[i].asdesc); + var country = createRow("Country", asn[i].country); + var rir = createRow("RIR", asn[i].rir); - var br_1 = document.createElement('BR'); - docFragment.appendChild(br_1); - var text_2 = document.createTextNode("AS desc: " + asn[i].asdesc); - docFragment.appendChild(text_2); + tbody.append(as_id, prefixes, as_name, as_desc, country, rir); + table.appendChild(tbody); - 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); + 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); + li.appendChild(table); + document.querySelector('ul#asns').appendChild(li); + for (var count in ips[asn[i].asn] ){ + var li = document.createElement('li'); 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); + a.appendChild(text); + + li.appendChild(a); + document.querySelector('ul#ips').appendChild(li); } } } window.addEventListener("load", nsGhipUtil_load ,false); +function createRow(name, value) { + var row = document.createElement('tr'); + var col_name = document.createElement('td'); + var col_value = document.createElement('td'); + + 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; From 8707ebb9b7dafe867d6c73db1a2ec349279ddafb Mon Sep 17 00:00:00 2001 From: "Disler Colin, INI-DOS-FDN-ENB" Date: Fri, 27 Dec 2019 11:25:14 +0100 Subject: [PATCH 3/8] Delete clipboard --- icons/clipboard.png | Bin 15258 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 icons/clipboard.png diff --git a/icons/clipboard.png b/icons/clipboard.png deleted file mode 100644 index 93ce491797bf0cf705be88eef38ac9385477d895..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15258 zcmeI3eNr3G;ui#=$&#YM@RZbTwb-1bJ45El zOA4{rjLW1R3BNo;mL(1-Ej1NN4V;6KrY5J!X+ouus+Ns=lRL>jKp;zWvE zL68b9sUW1jmrNfeL^_ALiYzkb_=Xey%aGOZyq&~xm&=vxQYCYaYMjt&wYWlwE0uCV zA$QianVqU6}tK~CfGI1dP%XeK?yMG{?)5lJrh`T8} zP9!VvU?wx|_tA*rwOeX)>LFa3= z1|8bT&tEAZ@F5NAbe7cF8N7&ba%r3Qnzs?^fNC9KWNxtw!#c%Wsh-ecJqBgHd% z(J3bsazax=s7O^RsnR^FP?8D-ki@GD$YJ8lY*k&594W%GCcqqkGBAg*f6Nq5eXA^> z7RY0!$tuoarFcDSrK%a+ZmZVeV~v2)zp6+BXW<;ev>3fghX-p0T%MIi=G&Y+WuuvV zqh4r8W?3_-F;mLa6pdM~P|$>&QKqQnl}e^ct}ttqY9dXYrm9TyKs1>^`-Id+j;9c~}f!4A|Tfy!?>zMPWHkQ{b zeWL|511|C8^&Shw!c79BPfJZzrRwm&=0Haw>t-yaMpoFrPH|OggzNHn0y}~l%O*1d z9X_MCRKU-~+D&vdn-w5AxFm^@Xb7C+Z8U&;PjS(&=B2a*Efi$2o z!UaVH3J@-k1~f*vpol;L!UfWR#t0V_5hy^oKpM~(;esLp1qc^N0~#Y-P(+{r;R0zu zV}uKe2oxY(APs1Ya6u7)0)z{s0gVwZC?ZgRaDg7kN{TvKycp1aK`LFPO1H)<+7tHgcz ztF}xomYDJC_9+V!*f&EB)3Pml)@PoJdoHPcTZduVs+6$k--SLA`-I`hg1^j5EV1yB zhMiH_PxZ9UZeIU`a!2*w+g`Xgk`VLHZ@#+Y9DZx);(W#g;YHAo6y0WZP@CMj)(j#{QR!2 zr+2EJU-Kq*zCYr`V}EwMzUkm-oHs# zJg08=?o%5Y8y_wkd^fzzXv+OG@^-XFatp&%mh$~yB!#b$Y;VXIyrgSCW9n%C$o8b^ zmwS8rllHcE4&@%0nnX(WhxB$Wh`j!}jxHJ2nNFvSNYWY#&ODxU)2QDP7Bgk$^XArn&jmKJ|jPhqa4-xcZZp!#~%bqyBZM&ouDy)HdyjyT5PykbP$zKR{Sx zoXJbx&3U~g`(`@7@NWG(`-#wA?rKj{?^4^9#rKb%tIx^Yp_z8g{pI0?xFfeB56=9= zrrcTnrz4IN@t-Xp9QpB~xZ#0Jb(!SGMm`+tnPD}xw9MSP?fsV<2TmtlnsRs7#^?hv zS6=HoUnGexyK^?;j~ntNi4DTvX0cXL9SLGANsJU@Y=O5+k{A|5(>nL#$n9C(_tU#p z|8-te*BjSdCo8cBUF*uuzrXYkJ-wHt={I|Jyw!cO_w?F`tW7W8crjwuuCG6pT$nj4 ze%a?YUZCBJ@2$Ib`6qeZ^Vb&WW+LM3K+Sx=LBQVLT+3B|ICu^gxG|xOt zZ@hi&{>B~qh8FeJRy_9J1%=(T^-|}^7h(OcG+bPi{-36QyLL)0u2D4RzLz_17IkKN w!SwDW&uc@bKNqqktPl$?#O8!F?#m3tcCgg?*v{i}@#)$8`31&(*%fR52Nu`+&Hw-a From 3f1c7c2071933bfb4f46266d1cead44d0cfaa43a Mon Sep 17 00:00:00 2001 From: "Disler Colin, INI-DOS-FDN-ENB" Date: Fri, 27 Dec 2019 11:25:33 +0100 Subject: [PATCH 4/8] Add styles Basically done with flexboxes --- popup.css | 202 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 129 insertions(+), 73 deletions(-) diff --git a/popup.css b/popup.css index 663ee2c..b2a8973 100644 --- a/popup.css +++ b/popup.css @@ -1,123 +1,179 @@ -/* -!* ----Page--- *! -html, body { - width: 620px; - padding: 0; - font-family: arial; - font-size: 15px; -} +/*----------Tags----------------------------*/ body { margin: 0; - text-size-adjust: 100%; + background-color: #fafafa; } -*, *::after, *::before { - box-sizing: border-box; -} - -!* ----Tags--- *! - a { - font-weight: 500; text-decoration: none; - display: block; - color: #000; - margin-bottom: 5px; - border-bottom: #EEE 1px solid } -h1, h2 { - border-bottom: 1px solid; +ul { + list-style-type: none; + padding-left: 0; + margin: 0; } -img { - width: 18px; - cursor: pointer; - margin-left: 5px; +/*----------Layout----------------------------*/ + +.content { + height: auto; + width: 600px; + max-height: 400px; + max-width: 800px; } -.flex { +.container-row { display: flex; - flex-wrap: wrap; - justify-content: center; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; } -.flex > .col { - flex: 1 1 0; - text-align: center; +.container-column { display: flex; flex-direction: column; - align-items: center; - max-width: 380px; - margin: 8px; + flex-wrap: nowrap; + justify-content: stretch; + align-content: stretch; + align-items: stretch; +} + +.container-scroll { + overflow-y: scroll; } -.flex a { - font-size: 12px; +.col { + order: 0; + width: 50%; + flex: 1 1 auto; + align-self: auto; } -.outer { - margin: 15px 15px; - padding: 0; +.row { + order: 0; + flex: 1 5 auto; + align-self: auto; } -.header { - font-size: 16px; - border-bottom: 1px solid #000; +.row-fix { + flex: 1 1 auto; + max-height: 50%; } -.header .txt { - font-size: 24px; +.padding { + padding: 15px; } -.header #asn a { - display: inline-block; +.delimiter-right { + border-right: #bbbbbb 1px solid; } -.header #asn img.copy { - float: left -}*/ -body > .outer > .header > .txt, #asn {} -body > .outer > .flex > .col {} +/*----------AS Buttongroup----------------------------*/ -body { - margin: 0; +.background-gray { background-color: #dddddd; } -a { - text-decoration: none; +.shadow-bottom { + box-shadow: inset 0px -5px 15px -8px rgba(0,0,0,0.75); +} + +ul#asn { + box-shadow: #bbbbbb 2px 2px; + border-radius: 3px; } -.container { - height: 100%; +/*-Copy Button-*/ + +a.img-link { + vertical-align: baseline; width: 100%; display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-content: stretch; - align-items: stretch; + padding: 7px 8px; + transition: all 0.3s, box-shadow 0.2s; + color: #333333; + box-sizing: border-box; + background-color: #fafafa; } -.col { - order: 0; - flex: 1 1 auto; - align-self: auto; +ul > li:first-child > a.img-link { + border-radius: 3px 3px 0 0; } -.padding { - padding: 15px; +ul > li:last-child > a.img-link { + border-radius: 0 0 3px 3px; } -.gray-background { - background-color: #aaaaaa; +a.img-link > img { + vertical-align: middle; + width: auto; + height: 25px; + margin-right: 5px; + align-self: center; } -.delimiter-right { - border-right: #bbbbbb 1px solid; +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 { + margin-top: 5px; +} + +.asn-requests > ul > li:first-child { + margin-top: 0; +} + +.asn-hostname { + color: #333333; + font-weight: bold; } +/*----------AS Details----------------------------*/ +.asn-details .col-name { + width: 40px; + font-size: 0.8em; + text-align: right; + padding-right: 5px; +} + +.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; +} From c7f47db6c00bb6c3431c4fe2b6549aba37b2398a Mon Sep 17 00:00:00 2001 From: "Disler Colin, INI-DOS-FDN-ENB" Date: Fri, 27 Dec 2019 11:26:41 +0100 Subject: [PATCH 5/8] Change structure of generated dom elements so they fit better with styling --- popup.js | 43 ++++++++++++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/popup.js b/popup.js index 89778d7..d905a2f 100644 --- a/popup.js +++ b/popup.js @@ -1,20 +1,23 @@ function nsGhipUtil_load(){ + console.log("Loading Window..."); var tabId = parseInt(window.location.hash.replace('#','')) ; var asn = chrome.extension.getBackgroundPage().asn[tabId] ; for (var i in asn ){ + if (i === "undefined"){continue;} + 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.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 ; - a.insertBefore(im, a.firstChild); + a.target = "_blank"; + + span.innerText = "AS" + asn[i].asn + ' ' + asn[i].asname; + + a.appendChild(span) li.appendChild(a); document.querySelector('ul#asn').appendChild(li); } @@ -23,6 +26,7 @@ function nsGhipUtil_load(){ var ips = chrome.extension.getBackgroundPage().ipData[tabId] ; var prefix = chrome.extension.getBackgroundPage().prefix[tabId] ; for (var i in asn ){ + if (i === "undefined"){continue;} var li = document.createElement('li'); var table = document.createElement('table'); @@ -30,8 +34,8 @@ function nsGhipUtil_load(){ var as_id = createRow("AS", asn[i].asn); var prefixes = createRow("Prefixes", asn[i].prefixes); - var as_name = createRow("AS Name", asn[i].asname); - var as_desc = createRow("AS Desc", asn[i].asdesc); + 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); @@ -48,11 +52,19 @@ function nsGhipUtil_load(){ for (var count in ips[asn[i].asn] ){ var li = document.createElement('li'); - 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); + 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); - li.appendChild(a); + var text = document.createTextNode(count); + div.appendChild(text); + + li.appendChild(div); document.querySelector('ul#ips').appendChild(li); } } @@ -61,10 +73,15 @@ function nsGhipUtil_load(){ window.addEventListener("load", nsGhipUtil_load ,false); function createRow(name, value) { + console.log("Loading ROW..."); + 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; From c102352c149cad31008008a80547b73793bc5e7e Mon Sep 17 00:00:00 2001 From: "Disler Colin, INI-DOS-FDN-ENB" Date: Fri, 27 Dec 2019 11:27:37 +0100 Subject: [PATCH 6/8] Adapt new styles from the css --- popup.html | 151 ++++------------------------------------------------- 1 file changed, 9 insertions(+), 142 deletions(-) diff --git a/popup.html b/popup.html index 9d9530e..e5a0857 100644 --- a/popup.html +++ b/popup.html @@ -1,158 +1,27 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + -
-
-
+
+
+
-
+
    -
  • bgp.he.net (main_frame, script, stylesheet) : 2001:470:0:1f9::2
    • -
  • www.googleadservices.com (script) : 172.217.168.66
    • -
  • ssl.google-analytics.com (script) : 2a00:1450:400a:803::2008
    • -
  • googleads.g.doubleclick.net (script) : 2a00:1450:400a:802::2002
    • -
  • bid.g.doubleclick.net (sub_frame) : 108.177.127.154
    • -
  • www.facebook.com (sub_frame, script) : 2a03:2880:f108:83:face:b00c:0:25de
    • -
  • -
    pagead2.googlesyndication.com (script, sub_frame) : 2a00:1450:400a:802::2002
    -
    • -
  • -
    ssl.google-analytics.com (script) : 2a00:1450:400a:803::2008
    -
    • -
  • -
    googleads.g.doubleclick.net (sub_frame) : 2a00:1450:400a:801::2002
    -
    • -
  • -
    the-echoplex.net (main_frame, stylesheet) : 208.113.154.41
    -
    • +
-
+
    -
  • - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    AS15169
    Prefixes559
    AS NameGOOGLE
    AS DescGoogle LLC
    CountryUS
    RIRarin
    Prefix2a00:1450:400a::/48
    -
    • -
  • - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    AS26347
    Prefixes41
    AS NameDREAMHOST-AS
    AS DescNew Dream Network
    CountryUS
    RIRarin
    Prefix208.113.128.0/17
    -
    • +
@@ -160,7 +29,5 @@
- - From f2f743ccdbcda1d87ad16c91e4425b09f6e8570c Mon Sep 17 00:00:00 2001 From: "Disler Colin, INI-DOS-FDN-ENB" Date: Fri, 14 Feb 2020 16:43:11 +0100 Subject: [PATCH 7/8] Change layout and add synchronized AS IP and detail list * A synchronised scroll effect to the AS-IP List and AS Detail Information List * Reorder the individual components so they are all besides each another * Change style a bit --- popup.css | 59 ++++++------ popup.html | 25 +++--- popup.js | 257 +++++++++++++++++++++++++++++++++++++++-------------- 3 files changed, 234 insertions(+), 107 deletions(-) diff --git a/popup.css b/popup.css index b2a8973..a203105 100644 --- a/popup.css +++ b/popup.css @@ -46,6 +46,10 @@ ul { overflow-y: scroll; } +.container-no-scrollbar::-webkit-scrollbar { + display: none; +} + .col { order: 0; width: 50%; @@ -53,42 +57,28 @@ ul { align-self: auto; } -.row { - order: 0; - flex: 1 5 auto; - align-self: auto; -} - -.row-fix { - flex: 1 1 auto; - max-height: 50%; +/*----------Connector-Canvas--------------------------*/ +.connector { + flex: 0 0 20px; + width: 20px; } -.padding { - padding: 15px; -} +/*----------AS Buttongroup----------------------------*/ -.delimiter-right { - border-right: #bbbbbb 1px solid; +.asn-links { + padding: 8px; } - -/*----------AS Buttongroup----------------------------*/ - .background-gray { background-color: #dddddd; } -.shadow-bottom { - box-shadow: inset 0px -5px 15px -8px rgba(0,0,0,0.75); -} - ul#asn { box-shadow: #bbbbbb 2px 2px; border-radius: 3px; } -/*-Copy Button-*/ +/*-ASN Link-*/ a.img-link { vertical-align: baseline; @@ -138,11 +128,15 @@ a.img-link > img:hover { } .asn-requests > ul > li { - margin-top: 5px; + padding: 5px 0px; /* 5 + 3 px = 8px = same as asn-details */ } -.asn-requests > ul > li:first-child { - margin-top: 0; +.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 { @@ -152,11 +146,24 @@ a.img-link > img:hover { /*----------AS Details----------------------------*/ +table.asn-details { + border-collapse: collapse; + width: 100%; +} + .asn-details .col-name { width: 40px; font-size: 0.8em; text-align: right; - padding-right: 5px; + 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 { diff --git a/popup.html b/popup.html index e5a0857..850d110 100644 --- a/popup.html +++ b/popup.html @@ -6,24 +6,21 @@
-
-
-
    +
    +
      -
    -
    -
    -
      +
    +
    +
    + - - +
    -
    -
    -
      + +
      +
        -
      -
      +
    diff --git a/popup.js b/popup.js index d905a2f..34dca82 100644 --- a/popup.js +++ b/popup.js @@ -1,37 +1,32 @@ -function nsGhipUtil_load(){ - console.log("Loading Window..."); - - var tabId = parseInt(window.location.hash.replace('#','')) ; - - var asn = chrome.extension.getBackgroundPage().asn[tabId] ; - - for (var i in asn ){ - if (i === "undefined"){continue;} - - 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); - } - - - var ips = chrome.extension.getBackgroundPage().ipData[tabId] ; - var prefix = chrome.extension.getBackgroundPage().prefix[tabId] ; - for (var i in asn ){ - if (i === "undefined"){continue;} - - var li = document.createElement('li'); - var table = document.createElement('table'); +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); @@ -40,67 +35,195 @@ function nsGhipUtil_load(){ var rir = createRow("RIR", asn[i].rir); tbody.append(as_id, prefixes, as_name, as_desc, country, rir); - table.appendChild(tbody); - for (var p in prefix[asn[i].asn]){ + // 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); } - li.appendChild(table); - document.querySelector('ul#asns').appendChild(li); + document.querySelector('table#asns').appendChild(tbody); + - for (var count in ips[asn[i].asn] ){ + // 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.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); - document.querySelector('ul#ips').appendChild(li); + 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); } -window.addEventListener("load", nsGhipUtil_load ,false); function createRow(name, value) { - console.log("Loading ROW..."); + var row = document.createElement('tr'); + var col_name = document.createElement('td'); + var col_value = document.createElement('td'); - 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.classList.add("col-name"); - col_value.classList.add("col-value"); + col_name.innerText = name; + col_value.innerText = value; - col_name.innerText = name; - col_value.innerText = value; + row.append(col_name, col_value); + return row; +} - 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); } -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(); + } } +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); From 274629b364a71634c2f977b54bf855b619d7ad88 Mon Sep 17 00:00:00 2001 From: "Disler Colin, INI-DOS-FDN-ENB" Date: Sun, 16 Feb 2020 13:12:58 +0100 Subject: [PATCH 8/8] Prevents vertical scroll bar by adding a break-word word-break style --- popup.css | 1 + 1 file changed, 1 insertion(+) diff --git a/popup.css b/popup.css index a203105..48b87ef 100644 --- a/popup.css +++ b/popup.css @@ -142,6 +142,7 @@ a.img-link > img:hover { .asn-hostname { color: #333333; font-weight: bold; + word-break: break-word; } /*----------AS Details----------------------------*/