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