src/xwalk/runtime/resources/devtools_discovery_page.html

   1 <html>
   2 <head>
   3 <title>XWalk Remote Debugging</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-background-size: cover;
  43   -webkit-transition-property: background-color, border-color;
  44   -webkit-transition: background-color 0.15s, 0.15s;
  45   -webkit-transition-delay: 0, 0;
  46 }
  47
  48 .thumbnail:hover {
  49   background-color: rgba(242, 242, 242, 1);
  50   border-color: rgba(110, 116, 128, 1);
  51   color: black;
  52 }
  53
  54 .thumbnail.connected {
  55   opacity: 0.5;
  56 }
  57
  58 .thumbnail.connected:hover {
  59   border-color: rgba(184, 184, 184, 1);
  60   color: rgb(110, 116, 128);
  61 }
  62
  63 .item {
  64   display: inline-block;
  65   margin: 5px;
  66   margin-top: 15px;
  67   height: 162px;
  68   vertical-align: top;
  69   width: 222px;
  70 }
  71
  72 .text {
  73   background: no-repeat 0;
  74   background-size: 16px;
  75   font-size: 12px;
  76   margin: 4px 0px 0px 4px;
  77   overflow: hidden;
  78   padding: 2px 0px 0px 20px;
  79   text-align: left;
  80   text-overflow: ellipsis;
  81   white-space: nowrap;
  82 }
  83 </style>
  84
  85 <script>
  86
  87 function onLoad() {
  88   var appListRequest = new XMLHttpRequest();
  89   appListRequest.open("GET", "/json/list?t=" + new Date().getTime(), true);
  90   appListRequest.onreadystatechange = onReady;
  91   appListRequest.send();
  92 }
  93
  94 function onReady() {
  95   if (this.readyState == 4 && this.status == 200) {
  96     if (this.response != null)
  97       var responseJSON = JSON.parse(this.response);
  98       for (var i = 0; i < responseJSON.length; ++i)
  99         appendItem(responseJSON[i]);
 100   }
 101 }
 102
 103 function appendItem(itemObject) {
 104   var frontendRef;
 105   if (itemObject.devtoolsFrontendUrl) {
 106     frontendRef = document.createElement("a");
 107     frontendRef.href = itemObject.devtoolsFrontendUrl;
 108     frontendRef.title = itemObject.title;
 109   } else {
 110     frontendRef = document.createElement("div");
 111     frontendRef.title = "The app already has active debugging session";
 112   }
 113   frontendRef.className = 'frontend_ref';
 114
 115   var thumbnail = document.createElement('div');
 116   thumbnail.className = itemObject.devtoolsFrontendUrl ?
 117                         'thumbnail' : 'thumbnail connected';
 118   if (itemObject.thumbnailUrl === undefined)
 119     itemObject.thumbnailUrl = "/thumb/" + itemObject.id;
 120   thumbnail.style.cssText = 'background-image:url(' +
 121                         itemObject.thumbnailUrl +
 122                         ')';
 123   frontendRef.appendChild(thumbnail);
 124
 125   var text = document.createElement("div");
 126   text.className = 'text';
 127   if (frontendRef.title)
 128     text.innerText = frontendRef.title;
 129   else
 130     text.innerText = "(untitled)";
 131   text.style.cssText = "background-image:url(" + itemObject.faviconUrl + ")";
 132   frontendRef.appendChild(text);
 133
 134   var item = document.createElement("p");
 135   item.className = 'item';
 136   item.appendChild(frontendRef);
 137
 138   document.getElementById("items").appendChild(item);
 139 }
 140 </script>
 141 </head>
 142 <body onload='onLoad()'>
 143   <div id='caption'>Inspectable App</div>
 144   <div id='items'></div>
 145   <hr>
 146 </body>
 147 </html>