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