| <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; |
| transition-property: background-color, border-color; |
| transition: background-color 0.15s, 0.15s; |
| transition-delay: 0ms, 0ms; |
| } |
| |
| .item:not(.connected):hover { |
| background-color: rgba(242, 242, 242, 1); |
| border-color: rgba(110, 116, 128, 1); |
| color: black; |
| } |
| |
| .item.connected:hover { |
| border-color: rgba(184, 184, 184, 1); |
| color: rgb(110, 116, 128); |
| } |
| |
| .item.custom { |
| cursor: pointer; |
| } |
| |
| .description { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .title, .subtitle, .custom-url { |
| font-size: 13px; |
| margin: 4px 0px 0px 6px; |
| overflow: hidden; |
| padding-left: 20px; |
| } |
| |
| .title { |
| background-repeat: no-repeat; |
| background-size: 16px; |
| font-size: 15px; |
| } |
| |
| .custom-url { |
| display: flex; |
| } |
| |
| .custom-url-label { |
| flex: 0 0 auto; |
| } |
| |
| .custom-url-value { |
| font-family: monospace; |
| margin-left: 1em; |
| } |
| |
| </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 customFrontendURL(url) { |
| if (!url || !window.location.hash) |
| return null; |
| |
| var hashParams = new URLSearchParams(location.hash.substring(1)); |
| if (!hashParams.get("custom")) |
| return null; |
| |
| var searchIndex = url.indexOf("?"); |
| if (searchIndex === -1) |
| return null; |
| var originalParams = url.substring(searchIndex + 1); |
| if (hashParams.get("experiments")) |
| originalParams += "&experiments=true"; |
| |
| return "chrome-devtools://devtools/custom/inspector.html?" + originalParams; |
| } |
| |
| function appendItem(item_object) { |
| var item_element; |
| var customURL = customFrontendURL(item_object.devtoolsFrontendUrl); |
| if (customURL) { |
| item_element = document.createElement('div'); |
| item_element.title = item_object.title; |
| item_element.className = 'custom'; |
| } else if (item_object.devtoolsFrontendUrl) { |
| item_element = document.createElement('a'); |
| item_element.href = item_object.devtoolsFrontendUrl; |
| 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 description = document.createElement('div'); |
| description.className = 'description'; |
| |
| var title = document.createElement('div'); |
| title.className = 'title'; |
| title.textContent = item_object.description || item_object.title; |
| if (item_object.faviconUrl) { |
| 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); |
| |
| if (customURL) { |
| var urlContainer = document.createElement('div'); |
| urlContainer.classList.add("custom-url"); |
| var urlLabel = document.createElement('div'); |
| urlLabel.classList.add("custom-url-label"); |
| urlLabel.textContent = "Click to copy URL:"; |
| urlContainer.appendChild(urlLabel); |
| var urlValue = document.createElement('div'); |
| urlValue.classList.add("custom-url-value"); |
| urlValue.textContent = customURL; |
| urlContainer.appendChild(urlValue); |
| description.appendChild(urlContainer); |
| item_element.addEventListener('click', selectNodeText.bind(null, urlValue)); |
| } |
| |
| item_element.appendChild(description); |
| |
| document.getElementById('items').appendChild(item_element); |
| } |
| |
| function selectNodeText(selectElement, event) |
| { |
| var selection = window.getSelection(); |
| if (!selection.isCollapsed) |
| return; |
| var range = document.createRange(); |
| range.selectNode(selectElement); |
| selection.removeAllRanges(); |
| selection.addRange(range); |
| event.stopPropagation(); |
| event.preventDefault(); |
| } |
| </script> |
| </head> |
| <body onload='onLoad()'> |
| <div id='caption'>Inspectable pages</div> |
| <hr> |
| <div id='items'> |
| </div> |
| </body> |
| </html> |
