src/chromecast/app/resources/shell_devtools_discovery_page.html

   1 <html>
   2 <head>
   3 <title>Cast shell remote debugging</title>
   4 <style>
   5   .local-ui-link {
   6     background-color: #eee;
   7     border: 1px solid #ccc;
   8     color: #333;
   9     display: block;
  10     font-family: monospace;
  11     font-size: 11px;
  12     margin: 4px;
  13     padding: 4px;
  14     width: 100%;
  15   }
  16
  17   .help {
  18     font-size: 11px;
  19   }
  20 </style>
  21 </head>
  22 <body>
  23
  24 <div id='caption'>Inspectable WebContents</div>
  25 <div id='items'></div>
  26
  27 <script>
  28 window.addEventListener('load', function() {
  29   var tabs_list_request = new XMLHttpRequest();
  30   tabs_list_request.open("GET", "/json/list?t=" + new Date().getTime(), true);
  31   tabs_list_request.onreadystatechange = function() {
  32     if (this.readyState == 4 && this.status == 200 && this.response) {
  33       var responseJSON = JSON.parse(this.response);
  34       for (var i = 0; i < responseJSON.length; ++i) {
  35         appendItem(responseJSON[i]);
  36       }
  37     }
  38   };
  39   tabs_list_request.send();
  40 });
  41
  42 function appendItem(metadata) {
  43   var item_container = document.createElement('div');
  44   var frontend_header = document.createElement('h3');
  45   frontend_header.textContent = metadata.title || "(untitled tab)";
  46   item_container.appendChild(frontend_header);
  47
  48   if (metadata.devtoolsFrontendUrl) {
  49     var frontend_link = document.createElement('a');
  50     frontend_link.textContent = 'Remote Debugging (AppEngine)'
  51     frontend_link.href = metadata.devtoolsFrontendUrl;
  52     item_container.appendChild(frontend_link);
  53
  54     var devtools_protocol_link = document.createElement('textarea');
  55     devtools_protocol_link.className = 'local-ui-link';
  56     devtools_protocol_link.value = metadata.devtoolsFrontendUrl.replace(
  57         "https://chrome-devtools-frontend.appspot.com",
  58         "chrome-devtools://devtools/remote");
  59     // Highlight text when clicked.
  60     devtools_protocol_link.onclick = function() { this.select(); }
  61     item_container.appendChild(devtools_protocol_link);
  62   } else {
  63     frontend_header.textContent += " (already has active debugging session)";
  64   }
  65
  66   document.getElementById("items").appendChild(item_container);
  67 }
  68 </script>
  69
  70 <h3>Help</h3>
  71 <div id="help">
  72   Note: there are two debugging options presented for each page above. Either
  73   is a valid way to initiate a remote debugging session.
  74   <ul>
  75     <li>For the first option (link), you may have to select the shield icon in
  76         the address bar to establish a connection. See the <a
  77         href="https://support.google.com/chrome/answer/1342714?hl=en">help
  78         center</a> for more information.</li>
  79     <li>For the second option (textarea), simply copy/paste the URL into
  80         Chrome's URL bar.</li>
  81   </ul>
  82 </div>
  83
  84 </body>
  85 </html>