| Index: chromecast/app/resources/shell_devtools_discovery_page.html
|
| diff --git a/chromecast/app/resources/shell_devtools_discovery_page.html b/chromecast/app/resources/shell_devtools_discovery_page.html
|
| index 00c937473ba1a8a34d744c34a7850724de1ac1bf..09bb9c438a8a13692d9a13df9f7fd6a766042748 100644
|
| --- a/chromecast/app/resources/shell_devtools_discovery_page.html
|
| +++ b/chromecast/app/resources/shell_devtools_discovery_page.html
|
| @@ -2,55 +2,84 @@
|
| <head>
|
| <title>Cast shell remote debugging</title>
|
| <style>
|
| + .local-ui-link {
|
| + background-color: #eee;
|
| + border: 1px solid #ccc;
|
| + color: #333;
|
| + display: block;
|
| + font-family: monospace;
|
| + font-size: 11px;
|
| + margin: 4px;
|
| + padding: 4px;
|
| + width: 100%;
|
| + }
|
| +
|
| + .help {
|
| + font-size: 11px;
|
| + }
|
| </style>
|
| +</head>
|
| +<body>
|
| +
|
| +<div id='caption'>Inspectable WebContents</div>
|
| +<div id='items'></div>
|
|
|
| <script>
|
| -function onLoad() {
|
| +window.addEventListener('load', function() {
|
| var tabs_list_request = new XMLHttpRequest();
|
| tabs_list_request.open("GET", "/json/list?t=" + new Date().getTime(), true);
|
| - tabs_list_request.onreadystatechange = onReady;
|
| - tabs_list_request.send();
|
| -}
|
| -
|
| -function onReady() {
|
| - if(this.readyState == 4 && this.status == 200) {
|
| - if(this.response != null) {
|
| + tabs_list_request.onreadystatechange = function() {
|
| + if (this.readyState == 4 && this.status == 200 && this.response) {
|
| var responseJSON = JSON.parse(this.response);
|
| for (var i = 0; i < responseJSON.length; ++i) {
|
| appendItem(responseJSON[i]);
|
| }
|
| }
|
| - }
|
| -}
|
| + };
|
| + tabs_list_request.send();
|
| +});
|
|
|
| -function appendItem(item_object) {
|
| - var frontend_ref;
|
| - if (item_object.devtoolsFrontendUrl) {
|
| - frontend_ref = document.createElement("a");
|
| - frontend_ref.href = item_object.devtoolsFrontendUrl;
|
| - frontend_ref.title = item_object.title;
|
| - } else {
|
| - frontend_ref = document.createElement("div");
|
| - frontend_ref.title = "The tab already has active debugging session";
|
| - }
|
| +function appendItem(metadata) {
|
| + var item_container = document.createElement('div');
|
| + var frontend_header = document.createElement('h3');
|
| + frontend_header.textContent = metadata.title || "(untitled tab)";
|
| + item_container.appendChild(frontend_header);
|
|
|
| - var text = document.createElement("div");
|
| - if (item_object.title)
|
| - text.innerText = item_object.title;
|
| - else
|
| - text.innerText = "(untitled tab)";
|
| - text.style.cssText = "background-image:url(" + item_object.faviconUrl + ")";
|
| - frontend_ref.appendChild(text);
|
| + if (metadata.devtoolsFrontendUrl) {
|
| + var frontend_link = document.createElement('a');
|
| + frontend_link.textContent = 'Remote Debugging (AppEngine)'
|
| + frontend_link.href = metadata.devtoolsFrontendUrl;
|
| + item_container.appendChild(frontend_link);
|
|
|
| - var item = document.createElement("p");
|
| - item.appendChild(frontend_ref);
|
| + var devtools_protocol_link = document.createElement('textarea');
|
| + devtools_protocol_link.className = 'local-ui-link';
|
| + devtools_protocol_link.value = metadata.devtoolsFrontendUrl.replace(
|
| + "https://chrome-devtools-frontend.appspot.com",
|
| + "chrome-devtools://devtools/remote");
|
| + // Highlight text when clicked.
|
| + devtools_protocol_link.onclick = function() { this.select(); }
|
| + item_container.appendChild(devtools_protocol_link);
|
| + } else {
|
| + frontend_header.textContent += " (already has active debugging session)";
|
| + }
|
|
|
| - document.getElementById("items").appendChild(item);
|
| + document.getElementById("items").appendChild(item_container);
|
| }
|
| </script>
|
| -</head>
|
| -<body onload='onLoad()'>
|
| - <div id='caption'>Inspectable WebContents</div>
|
| - <div id='items'></div>
|
| +
|
| +<h3>Help</h3>
|
| +<div id="help">
|
| + Note: there are two debugging options presented for each page above. Either
|
| + is a valid way to initiate a remote debugging session.
|
| + <ul>
|
| + <li>For the first option (link), you may have to select the shield icon in
|
| + the address bar to establish a connection. See the <a
|
| + href="https://support.google.com/chrome/answer/1342714?hl=en">help
|
| + center</a> for more information.</li>
|
| + <li>For the second option (textarea), simply copy/paste the URL into
|
| + Chrome's URL bar.</li>
|
| + </ul>
|
| +</div>
|
| +
|
| </body>
|
| </html>
|
|
|