src/chrome/browser/devtools/frontend/devtools_discovery_page.html

   1 <html>
   2 <head>
   3 <title>Inspectable pages</title>
   4 <style>
   5 body {
   6   color: #222;
   7   font-family: Helvetica, Arial, sans-serif;
   8   margin: 0;
   9   text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px;
  10 }
  11
  12 #caption {
  13   font-size: 16px;
  14   margin-top: 15px;
  15   margin-bottom: 10px;
  16   margin-left: 20px;
  17   height: 20px;
  18   text-align: left;
  19 }
  20
  21 #items {
  22   display: flex;
  23   flex-direction: column;
  24   margin: 10px;
  25 }
  26
  27 .item {
  28   color: #222;
  29   display: flex;
  30   flex-direction: row;
  31   text-decoration: none;
  32   padding: 10px;
  33   -webkit-transition-property: background-color, border-color;
  34   -webkit-transition: background-color 0.15s, 0.15s;
  35   -webkit-transition-delay: 0, 0;
  36 }
  37
  38 .thumbnail {
  39   background-attachment: scroll;
  40   background-origin: padding-box;
  41   background-repeat: no-repeat;
  42   border: 1px solid rgba(184, 184, 184, 1);
  43   flex: none;
  44   height: 132px;
  45   width: 212px;
  46 }
  47
  48 .item:not(.connected):hover {
  49   background-color: rgba(242, 242, 242, 1);
  50   border-color: rgba(110, 116, 128, 1);
  51   color: black;
  52 }
  53
  54 .item.connected .thumbnail {
  55   opacity: 0.5;
  56 }
  57
  58 .item.connected:hover {
  59   border-color: rgba(184, 184, 184, 1);
  60   color: rgb(110, 116, 128);
  61 }
  62
  63 .description {
  64   display: flex;
  65   flex-direction: column;
  66 }
  67
  68 .title, .subtitle {
  69   font-size: 13px;
  70   margin: 4px 0px 0px 6px;
  71   overflow: hidden;
  72   padding-left: 20px;
  73 }
  74
  75 .title {
  76   background-repeat: no-repeat;
  77   background-size: 16px;
  78   font-size: 15px;
  79 }
  80
  81 </style>
  82
  83 <script>
  84
  85 function onLoad() {
  86   var tabsListRequest = new XMLHttpRequest();
  87   tabsListRequest.open('GET', '/json/list', 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 overrideFrontendUrl(item) {
 102   if (window.location.hash) {
 103     var overridden_url = window.location.hash.substr(1);
 104     var ws_suffix = item.webSocketDebuggerUrl.replace('ws://', 'ws=');
 105     if (overridden_url.indexOf('?') == -1)
 106       return overridden_url + '?' + ws_suffix;
 107     else
 108       return overridden_url + '&' + ws_suffix;
 109   }
 110   return item.devtoolsFrontendUrl;
 111 }
 112
 113 function appendItem(item_object) {
 114   var item_element;
 115   if (item_object.devtoolsFrontendUrl) {
 116     item_element = document.createElement('a');
 117     item_element.href = overrideFrontendUrl(item_object);
 118     item_element.title = item_object.title;
 119   } else {
 120     item_element = document.createElement('div');
 121     item_element.className = 'connected';
 122     item_element.title = 'The tab already has an active debug session';
 123   }
 124   item_element.classList.add('item');
 125
 126   var thumbnail = document.createElement('div');
 127   thumbnail.className = 'thumbnail';
 128   thumbnail.style.cssText = 'background-image:url(' +
 129       item_object.thumbnailUrl + ')';
 130   item_element.appendChild(thumbnail);
 131
 132   var description = document.createElement('div');
 133   description.className = 'description';
 134
 135   var title = document.createElement('div');
 136   title.className = 'title';
 137   title.textContent = item_object.description || item_object.title;
 138   title.style.cssText = 'background-image:url(' +
 139       item_object.faviconUrl + ')';
 140   description.appendChild(title);
 141
 142   var subtitle = document.createElement('div');
 143   subtitle.className = 'subtitle';
 144   subtitle.textContent = (item_object.url || '').substring(0, 300);
 145   description.appendChild(subtitle);
 146
 147   item_element.appendChild(description);
 148
 149   document.getElementById('items').appendChild(item_element);
 150 }
 151 </script>
 152 </head>
 153 <body onload='onLoad()'>
 154   <div id='caption'>Inspectable pages</div>
 155   <hr>
 156   <div id='items'>
 157   </div>
 158 </body>
 159 </html>