Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(399)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/devtools/frontend/devtools_discovery_page.html

Issue 637863006: DevTools: update remote discovery page, render both title and url for items. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <title>Inspectable pages</title> 3 <title>Inspectable pages</title>
4 <style> 4 <style>
5 body { 5 body {
6 background-color: rgb(245, 245, 245); 6 color: #222;
7 font-family: Helvetica, Arial, sans-serif; 7 font-family: Helvetica, Arial, sans-serif;
8 margin: 0;
8 text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px; 9 text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px;
9 } 10 }
10 11
11 #caption { 12 #caption {
12 color: black;
13 font-size: 16px; 13 font-size: 16px;
14 margin-top: 30px; 14 margin-top: 15px;
15 margin-bottom: 0px; 15 margin-bottom: 10px;
16 margin-left: 70px; 16 margin-left: 20px;
17 height: 20px; 17 height: 20px;
18 text-align: left; 18 text-align: left;
19 } 19 }
20 20
21 #items { 21 #items {
22 display: -webkit-box; 22 display: flex;
23 margin-left: 60px; 23 flex-direction: column;
24 margin-right: 60px; 24 margin: 10px;
25 -webkit-box-orient: horizontal;
26 -webkit-box-lines: multiple;
27 } 25 }
28 26
29 .frontend_ref { 27 .item {
30 color: black; 28 color: #222;
31 text-decoration: initial; 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;
32 } 36 }
33 37
34 .thumbnail { 38 .thumbnail {
35 background-attachment: scroll; 39 background-attachment: scroll;
36 background-origin: padding-box; 40 background-origin: padding-box;
37 background-repeat: no-repeat; 41 background-repeat: no-repeat;
38 border: 4px solid rgba(184, 184, 184, 1); 42 border: 1px solid rgba(184, 184, 184, 1);
39 border-radius: 5px; 43 flex: none;
40 height: 132px; 44 height: 132px;
41 width: 212px; 45 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 }
46 47
47 .thumbnail:hover { 48 .item:not(.connected):hover {
48 background-color: rgba(242, 242, 242, 1); 49 background-color: rgba(242, 242, 242, 1);
49 border-color: rgba(110, 116, 128, 1); 50 border-color: rgba(110, 116, 128, 1);
50 color: black; 51 color: black;
51 } 52 }
52 53
53 .thumbnail.connected { 54 .item.connected .thumbnail {
54 opacity: 0.5; 55 opacity: 0.5;
55 } 56 }
56 57
57 .thumbnail.connected:hover { 58 .item.connected:hover {
58 border-color: rgba(184, 184, 184, 1); 59 border-color: rgba(184, 184, 184, 1);
59 color: rgb(110, 116, 128); 60 color: rgb(110, 116, 128);
60 } 61 }
61 62
62 .item { 63 .description {
63 display: inline-block; 64 display: flex;
64 margin: 5px; 65 flex-direction: column;
65 margin-top: 15px;
66 height: 162px;
67 vertical-align: top;
68 width: 222px;
69 } 66 }
70 67
71 .text { 68 .title, .subtitle {
72 background: no-repeat 0; 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;
73 background-size: 16px; 77 background-size: 16px;
74 font-size: 12px; 78 font-size: 15px;
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 } 79 }
80
82 </style> 81 </style>
83 82
84 <script> 83 <script>
85 84
86 function onLoad() { 85 function onLoad() {
87 var tabsListRequest = new XMLHttpRequest(); 86 var tabsListRequest = new XMLHttpRequest();
88 tabsListRequest.open('GET', '/json/list', true); 87 tabsListRequest.open('GET', '/json/list', true);
89 tabsListRequest.onreadystatechange = onReady; 88 tabsListRequest.onreadystatechange = onReady;
90 tabsListRequest.send(); 89 tabsListRequest.send();
91 } 90 }
(...skipping 13 matching lines...) Expand all
105 var ws_suffix = item.webSocketDebuggerUrl.replace('ws://', 'ws='); 104 var ws_suffix = item.webSocketDebuggerUrl.replace('ws://', 'ws=');
106 if (overridden_url.indexOf('?') == -1) 105 if (overridden_url.indexOf('?') == -1)
107 return overridden_url + '?' + ws_suffix; 106 return overridden_url + '?' + ws_suffix;
108 else 107 else
109 return overridden_url + '&' + ws_suffix; 108 return overridden_url + '&' + ws_suffix;
110 } 109 }
111 return item.devtoolsFrontendUrl; 110 return item.devtoolsFrontendUrl;
112 } 111 }
113 112
114 function appendItem(item_object) { 113 function appendItem(item_object) {
115 var frontend_ref; 114 var item_element;
116 if (item_object.devtoolsFrontendUrl) { 115 if (item_object.devtoolsFrontendUrl) {
117 frontend_ref = document.createElement('a'); 116 item_element = document.createElement('a');
118 frontend_ref.href = overrideFrontendUrl(item_object); 117 item_element.href = overrideFrontendUrl(item_object);
119 frontend_ref.title = item_object.title; 118 item_element.title = item_object.title;
120 } else { 119 } else {
121 frontend_ref = document.createElement('div'); 120 item_element = document.createElement('div');
122 frontend_ref.title = 'The tab already has an active debug session'; 121 item_element.className = 'connected';
122 item_element.title = 'The tab already has an active debug session';
123 } 123 }
124 frontend_ref.className = 'frontend_ref'; 124 item_element.classList.add('item');
125 125
126 var thumbnail = document.createElement('div'); 126 var thumbnail = document.createElement('div');
127 thumbnail.className = item_object.devtoolsFrontendUrl ? 127 thumbnail.className = 'thumbnail';
128 'thumbnail' : 'thumbnail connected';
129 thumbnail.style.cssText = 'background-image:url(' + 128 thumbnail.style.cssText = 'background-image:url(' +
130 item_object.thumbnailUrl + 129 item_object.thumbnailUrl +
dgozman 2014/10/21 18:45:13 while you are here, update the indent?
pfeldman 2014/10/22 08:26:58 Done.
131 ')'; 130 ')';
132 frontend_ref.appendChild(thumbnail); 131 item_element.appendChild(thumbnail);
133 132
134 var text = document.createElement('div'); 133 var description = document.createElement('div');
135 text.className = 'text'; 134 description.className = 'description';
136 text.innerText = item_object.description || item_object.title; 135
137 text.style.cssText = 'background-image:url(' + 136 var title = document.createElement('div');
137 title.className = 'title';
138 title.textContent = item_object.description || item_object.title;
139 title.style.cssText = 'background-image:url(' +
138 item_object.faviconUrl + ')'; 140 item_object.faviconUrl + ')';
dgozman 2014/10/21 18:45:13 ditto
pfeldman 2014/10/22 08:26:58 Done.
139 frontend_ref.appendChild(text); 141 description.appendChild(title);
140 142
141 var item = document.createElement('p'); 143 var subtitle = document.createElement('div');
142 item.className = 'item'; 144 subtitle.className = 'subtitle';
143 item.appendChild(frontend_ref); 145 subtitle.textContent = (item_object.url || '').substring(0, 300);
146 description.appendChild(subtitle);
144 147
145 document.getElementById('items').appendChild(item); 148 item_element.appendChild(description);
149
150 document.getElementById('items').appendChild(item_element);
146 } 151 }
147 </script> 152 </script>
148 </head> 153 </head>
149 <body onload='onLoad()'> 154 <body onload='onLoad()'>
150 <div id='caption'>Inspectable pages</div> 155 <div id='caption'>Inspectable pages</div>
156 <hr>
151 <div id='items'> 157 <div id='items'>
152 </div> 158 </div>
153 <hr>
154 </body> 159 </body>
155 </html> 160 </html>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698