Home | History | Annotate | Download | only in frontend 
      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   color: black;
     13   font-size: 16px;
     14   margin-top: 30px;
     15   margin-bottom: 0px;
     16   margin-left: 70px;
     17   height: 20px;
     18   text-align: left;
     19 }
     20 
     21 #items {
     22   display: -webkit-box;
     23   margin-left: 60px;
     24   margin-right: 60px;
     25   -webkit-box-orient: horizontal;
     26   -webkit-box-lines: multiple;
     27 }
     28 
     29 .frontend_ref {
     30   color: black;
     31   text-decoration: initial;
     32 }
     33 
     34 .thumbnail {
     35   background-attachment: scroll;
     36   background-origin: padding-box;
     37   background-repeat: no-repeat;
     38   border: 4px solid rgba(184, 184, 184, 1);
     39   border-radius: 5px;
     40   height: 132px;
     41   width: 212px;
     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   vertical-align: top;
     68   width: 222px;
     69 }
     70 
     71 .text {
     72   background: no-repeat 0;
     73   background-size: 16px;
     74   font-size: 12px;
     75   margin: 4px 0px 0px 4px;
     76   overflow: hidden;
     77   padding: 2px 0px 0px 20px;
     78   text-align: left;
     79   text-overflow: ellipsis;
     80   white-space: nowrap;
     81 }
     82 </style>
     83 
     84 <script>
     85 
     86 function onLoad() {
     87   var tabsListRequest = new XMLHttpRequest();
     88   tabsListRequest.open('GET', '/json/list', true);
     89   tabsListRequest.onreadystatechange = onReady;
     90   tabsListRequest.send();
     91 }
     92 
     93 function onReady() {
     94   if(this.readyState == 4 && this.status == 200) {
     95     if(this.response != null)
     96       var responseJSON = JSON.parse(this.response);
     97       for (var i = 0; i < responseJSON.length; ++i)
     98         appendItem(responseJSON[i]);
     99   }
    100 }
    101 
    102 function overrideFrontendUrl(item) {
    103   if (window.location.hash) {
    104     var overridden_url = window.location.hash.substr(1);
    105     var ws_suffix = item.webSocketDebuggerUrl.replace('ws://', 'ws=');
    106     if (overridden_url.indexOf('?') == -1)
    107       return overridden_url + '?' + ws_suffix;
    108     else
    109       return overridden_url + '&' + ws_suffix;
    110   }
    111   return item.devtoolsFrontendUrl;
    112 }
    113 
    114 function appendItem(item_object) {
    115   var frontend_ref;
    116   if (item_object.devtoolsFrontendUrl) {
    117     frontend_ref = document.createElement('a');
    118     frontend_ref.href = overrideFrontendUrl(item_object);
    119     frontend_ref.title = item_object.title;
    120   } else {
    121     frontend_ref = document.createElement('div');
    122     frontend_ref.title = 'The tab already has an active debug session';
    123   }
    124   frontend_ref.className = 'frontend_ref';
    125 
    126   var thumbnail = document.createElement('div');
    127   thumbnail.className = item_object.devtoolsFrontendUrl ?
    128                         'thumbnail' : 'thumbnail connected';
    129   thumbnail.style.cssText = 'background-image:url(' +
    130                         item_object.thumbnailUrl +
    131                         ')';
    132   frontend_ref.appendChild(thumbnail);
    133 
    134   var text = document.createElement('div');
    135   text.className = 'text';
    136   text.innerText = item_object.description || item_object.title;
    137   text.style.cssText = 'background-image:url(' +
    138                        item_object.faviconUrl + ')';
    139   frontend_ref.appendChild(text);
    140 
    141   var item = document.createElement('p');
    142   item.className = 'item';
    143   item.appendChild(frontend_ref);
    144 
    145   document.getElementById('items').appendChild(item);
    146 }
    147 </script>
    148 </head>
    149 <body onload='onLoad()'>
    150   <div id='caption'>Inspectable pages</div>
    151   <div id='items'>
    152   </div>
    153   <hr>
    154 </body>
    155 </html>
    156