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 |