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 |