Add new certificateProvider extension API.
[chromium-blink-merge.git] / chrome / browser / devtools / frontend / devtools_discovery_page.html
blobcf93966c72eec8a1355cdc82b2dcaeb8e2e2ab86
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;
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;
21 #items {
22 display: flex;
23 flex-direction: column;
24 margin: 10px;
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: 0ms, 0ms;
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;
48 .item:not(.connected):hover {
49 background-color: rgba(242, 242, 242, 1);
50 border-color: rgba(110, 116, 128, 1);
51 color: black;
54 .item.connected .thumbnail {
55 opacity: 0.5;
58 .item.connected:hover {
59 border-color: rgba(184, 184, 184, 1);
60 color: rgb(110, 116, 128);
63 .description {
64 display: flex;
65 flex-direction: column;
68 .title, .subtitle {
69 font-size: 13px;
70 margin: 4px 0px 0px 6px;
71 overflow: hidden;
72 padding-left: 20px;
75 .title {
76 background-repeat: no-repeat;
77 background-size: 16px;
78 font-size: 15px;
81 </style>
83 <script>
85 function onLoad() {
86 var tabsListRequest = new XMLHttpRequest();
87 tabsListRequest.open('GET', '/json/list', true);
88 tabsListRequest.onreadystatechange = onReady;
89 tabsListRequest.send();
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]);
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;
110 return item.devtoolsFrontendUrl;
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';
124 item_element.classList.add('item');
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);
132 var description = document.createElement('div');
133 description.className = 'description';
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);
142 var subtitle = document.createElement('div');
143 subtitle.className = 'subtitle';
144 subtitle.textContent = (item_object.url || '').substring(0, 300);
145 description.appendChild(subtitle);
147 item_element.appendChild(description);
149 document.getElementById('items').appendChild(item_element);
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>