| <html> |
| <head> |
| <title>Inspectable pages</title> |
| <style> |
| body { |
| color: #222; |
| font-family: Helvetica, Arial, sans-serif; |
| margin: 0; |
| text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px; |
| } |
| |
| #caption { |
| font-size: 16px; |
| margin-top: 15px; |
| margin-bottom: 10px; |
| margin-left: 20px; |
| height: 20px; |
| text-align: left; |
| } |
| |
| #items { |
| display: flex; |
| flex-direction: column; |
| margin: 10px; |
| } |
| |
| .item { |
| color: #222; |
| display: flex; |
| flex-direction: row; |
| text-decoration: none; |
| padding: 10px; |
| -webkit-transition-property: background-color, border-color; |
| -webkit-transition: background-color 0.15s, 0.15s; |
| -webkit-transition-delay: 0ms, 0ms; |
| } |
| |
| .thumbnail { |
| background-attachment: scroll; |
| background-origin: padding-box; |
| background-repeat: no-repeat; |
| border: 1px solid rgba(184, 184, 184, 1); |
| flex: none; |
| height: 132px; |
| width: 212px; |
| } |
| |
| .item:not(.connected):hover { |
| background-color: rgba(242, 242, 242, 1); |
| border-color: rgba(110, 116, 128, 1); |
| color: black; |
| } |
| |
| .item.connected .thumbnail { |
| opacity: 0.5; |
| } |
| |
| .item.connected:hover { |
| border-color: rgba(184, 184, 184, 1); |
| color: rgb(110, 116, 128); |
| } |
| |
| .description { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .title, .subtitle { |
| font-size: 13px; |
| margin: 4px 0px 0px 6px; |
| overflow: hidden; |
| padding-left: 20px; |
| } |
| |
| .title { |
| background-repeat: no-repeat; |
| background-size: 16px; |
| font-size: 15px; |
| } |
| |
| </style> |
| |
| <script> |
| |
| function onLoad() { |
| var tabsListRequest = new XMLHttpRequest(); |
| tabsListRequest.open('GET', '/json/list', true); |
| tabsListRequest.onreadystatechange = onReady; |
| tabsListRequest.send(); |
| } |
| |
| function onReady() { |
| if(this.readyState == 4 && this.status == 200) { |
| if(this.response != null) |
| var responseJSON = JSON.parse(this.response); |
| for (var i = 0; i < responseJSON.length; ++i) |
| appendItem(responseJSON[i]); |
| } |
| } |
| |
| function overrideFrontendUrl(item) { |
| if (window.location.hash) { |
| var overridden_url = window.location.hash.substr(1); |
| var ws_suffix = item.webSocketDebuggerUrl.replace('ws://', 'ws='); |
| if (overridden_url.indexOf('?') == -1) |
| return overridden_url + '?' + ws_suffix; |
| else |
| return overridden_url + '&' + ws_suffix; |
| } |
| return item.devtoolsFrontendUrl; |
| } |
| |
| function appendItem(item_object) { |
| var item_element; |
| if (item_object.devtoolsFrontendUrl) { |
| item_element = document.createElement('a'); |
| item_element.href = overrideFrontendUrl(item_object); |
| item_element.title = item_object.title; |
| } else { |
| item_element = document.createElement('div'); |
| item_element.className = 'connected'; |
| item_element.title = 'The tab already has an active debug session'; |
| } |
| item_element.classList.add('item'); |
| |
| var thumbnail = document.createElement('div'); |
| thumbnail.className = 'thumbnail'; |
| thumbnail.style.cssText = 'background-image:url(' + |
| item_object.thumbnailUrl + ')'; |
| item_element.appendChild(thumbnail); |
| |
| var description = document.createElement('div'); |
| description.className = 'description'; |
| |
| var title = document.createElement('div'); |
| title.className = 'title'; |
| title.textContent = item_object.description || item_object.title; |
| title.style.cssText = 'background-image:url(' + |
| item_object.faviconUrl + ')'; |
| description.appendChild(title); |
| |
| var subtitle = document.createElement('div'); |
| subtitle.className = 'subtitle'; |
| subtitle.textContent = (item_object.url || '').substring(0, 300); |
| description.appendChild(subtitle); |
| |
| item_element.appendChild(description); |
| |
| document.getElementById('items').appendChild(item_element); |
| } |
| </script> |
| </head> |
| <body onload='onLoad()'> |
| <div id='caption'>Inspectable pages</div> |
| <hr> |
| <div id='items'> |
| </div> |
| </body> |
| </html> |
