| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <title>Inspectable pages</title> | |
| 4 <style> | |
| 5 body { | |
| 6 background-color: rgb(245, 245, 245); | |
| 7 font-family: Helvetica, Arial, sans-serif; | |
| 8 text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px; | |
| 9 } | |
| 10 | |
| 11 #caption { | |
| 12 text-align: left; | |
| 13 color: black; | |
| 14 font-size: 16px; | |
| 15 margin-top: 30px; | |
| 16 margin-bottom: 0px; | |
| 17 margin-left: 70px; | |
| 18 height: 20px; | |
| 19 } | |
| 20 | |
| 21 #items { | |
| 22 display: -webkit-box; | |
| 23 -webkit-box-orient: horizontal; | |
| 24 -webkit-box-lines: multiple; | |
| 25 margin-left: 60px; | |
| 26 margin-right: 60px; | |
| 27 } | |
| 28 | |
| 29 .frontend_ref { | |
| 30 color: black; | |
| 31 text-decoration: initial; | |
| 32 } | |
| 33 | |
| 34 .thumbnail { | |
| 35 height: 132px; | |
| 36 width: 212px; | |
| 37 background-attachment: scroll; | |
| 38 background-origin: padding-box; | |
| 39 background-repeat: no-repeat; | |
| 40 border: 4px solid rgba(184, 184, 184, 1); | |
| 41 border-radius: 5px; | |
| 42 -webkit-transition-property: background-color, border-color; | |
| 43 -webkit-transition: background-color 0.15s, 0.15s; | |
| 44 -webkit-transition-delay: 0, 0; | |
| 45 } | |
| 46 | |
| 47 .thumbnail:hover { | |
| 48 background-color: rgba(242, 242, 242, 1); | |
| 49 border-color: rgba(110, 116, 128, 1); | |
| 50 color: black; | |
| 51 } | |
| 52 | |
| 53 .thumbnail.connected { | |
| 54 opacity: 0.5; | |
| 55 } | |
| 56 | |
| 57 .thumbnail.connected:hover { | |
| 58 border-color: rgba(184, 184, 184, 1); | |
| 59 color: rgb(110, 116, 128); | |
| 60 } | |
| 61 | |
| 62 .item { | |
| 63 display: inline-block; | |
| 64 margin: 5px; | |
| 65 margin-top: 15px; | |
| 66 height: 162px; | |
| 67 width: 222px; | |
| 68 vertical-align: top; | |
| 69 } | |
| 70 | |
| 71 .text { | |
| 72 text-align: left; | |
| 73 font-size: 12px; | |
| 74 text-overflow: ellipsis; | |
| 75 white-space: nowrap; | |
| 76 overflow: hidden; | |
| 77 background: no-repeat 0; | |
| 78 background-size: 16px; | |
| 79 padding: 2px 0px 0px 20px; | |
| 80 margin: 4px 0px 0px 4px; | |
| 81 } | |
| 82 </style> | |
| 83 | |
| 84 <script> | |
| 85 function onLoad() { | |
| 86 var tabsListRequest = new XMLHttpRequest(); | |
| 87 tabsListRequest.open("GET", "/json", true); | |
| 88 tabsListRequest.onreadystatechange = onReady; | |
| 89 tabsListRequest.send(); | |
| 90 } | |
| 91 | |
| 92 function onReady() { | |
| 93 if(this.readyState == 4 && this.status == 200) { | |
| 94 if(this.response != null) | |
| 95 var responseJSON = JSON.parse(this.response); | |
| 96 for (var i = 0; i < responseJSON.length; ++i) | |
| 97 appendItem(responseJSON[i]); | |
| 98 } | |
| 99 } | |
| 100 | |
| 101 function appendItem(item_object) { | |
| 102 var frontend_ref; | |
| 103 if (item_object.devtoolsFrontendUrl) { | |
| 104 frontend_ref = document.createElement("a"); | |
| 105 frontend_ref.href = item_object.devtoolsFrontendUrl; | |
| 106 frontend_ref.title = item_object.title; | |
| 107 } else { | |
| 108 frontend_ref = document.createElement("div"); | |
| 109 frontend_ref.title = "The tab already has an active debug session"; | |
| 110 } | |
| 111 frontend_ref.className = "frontend_ref"; | |
| 112 | |
| 113 var thumbnail = document.createElement("div"); | |
| 114 thumbnail.className = item_object.devtoolsFrontendUrl ? | |
| 115 "thumbnail" : "thumbnail connected"; | |
| 116 thumbnail.style.cssText = "background-image:url(" + | |
| 117 item_object.thumbnailUrl + | |
| 118 ")"; | |
| 119 frontend_ref.appendChild(thumbnail); | |
| 120 | |
| 121 var text = document.createElement("div"); | |
| 122 text.className = "text"; | |
| 123 text.innerText = item_object.title; | |
| 124 text.style.cssText = "background-image:url(" + | |
| 125 item_object.faviconUrl + ")"; | |
| 126 frontend_ref.appendChild(text); | |
| 127 | |
| 128 var item = document.createElement("p"); | |
| 129 item.className = "item"; | |
| 130 item.appendChild(frontend_ref); | |
| 131 | |
| 132 document.getElementById("items").appendChild(item); | |
| 133 } | |
| 134 </script> | |
| 135 </head> | |
| 136 <body onload='onLoad()'> | |
| 137 <div id='caption'>Inspectable pages</div> | |
| 138 <div id='items'> | |
| 139 </div> | |
| 140 <hr> | |
| 141 </body> | |
| 142 </html> | |
| OLD | NEW |