chrome/browser/devtools/frontend/devtools_discovery_page.html

   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>