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   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>