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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2458033003: DevTools: introduce --custom-devtools-frontend flag. (Closed)
Patch Set: address comments Created 4 years, 1 month 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 | chrome/browser/ui/webui/devtools_ui.cc » ('j') | 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 color: #222; 6 color: #222;
7 font-family: Helvetica, Arial, sans-serif; 7 font-family: Helvetica, Arial, sans-serif;
8 margin: 0; 8 margin: 0;
9 text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px; 9 text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px;
10 } 10 }
(...skipping 28 matching lines...) Expand all
39 background-color: rgba(242, 242, 242, 1); 39 background-color: rgba(242, 242, 242, 1);
40 border-color: rgba(110, 116, 128, 1); 40 border-color: rgba(110, 116, 128, 1);
41 color: black; 41 color: black;
42 } 42 }
43 43
44 .item.connected:hover { 44 .item.connected:hover {
45 border-color: rgba(184, 184, 184, 1); 45 border-color: rgba(184, 184, 184, 1);
46 color: rgb(110, 116, 128); 46 color: rgb(110, 116, 128);
47 } 47 }
48 48
49 .item.custom {
50 cursor: pointer;
51 }
52
49 .description { 53 .description {
50 display: flex; 54 display: flex;
51 flex-direction: column; 55 flex-direction: column;
52 } 56 }
53 57
54 .title, .subtitle { 58 .title, .subtitle, .custom-url {
55 font-size: 13px; 59 font-size: 13px;
56 margin: 4px 0px 0px 6px; 60 margin: 4px 0px 0px 6px;
57 overflow: hidden; 61 overflow: hidden;
58 padding-left: 20px; 62 padding-left: 20px;
59 } 63 }
60 64
61 .title { 65 .title {
62 background-repeat: no-repeat; 66 background-repeat: no-repeat;
63 background-size: 16px; 67 background-size: 16px;
64 font-size: 15px; 68 font-size: 15px;
65 } 69 }
66 70
71 .custom-url {
72 display: flex;
73 }
74
75 .custom-url-label {
76 flex: 0 0 auto;
77 }
78
79 .custom-url-value {
80 font-family: monospace;
81 margin-left: 1em;
82 }
83
67 </style> 84 </style>
68 85
69 <script> 86 <script>
70 87
71 function onLoad() { 88 function onLoad() {
72 var tabsListRequest = new XMLHttpRequest(); 89 var tabsListRequest = new XMLHttpRequest();
73 tabsListRequest.open('GET', '/json/list', true); 90 tabsListRequest.open('GET', '/json/list', true);
74 tabsListRequest.onreadystatechange = onReady; 91 tabsListRequest.onreadystatechange = onReady;
75 tabsListRequest.send(); 92 tabsListRequest.send();
76 } 93 }
77 94
78 function onReady() { 95 function onReady() {
79 if(this.readyState == 4 && this.status == 200) { 96 if(this.readyState == 4 && this.status == 200) {
80 if(this.response != null) 97 if(this.response != null)
81 var responseJSON = JSON.parse(this.response); 98 var responseJSON = JSON.parse(this.response);
82 for (var i = 0; i < responseJSON.length; ++i) 99 for (var i = 0; i < responseJSON.length; ++i)
83 appendItem(responseJSON[i]); 100 appendItem(responseJSON[i]);
84 } 101 }
85 } 102 }
86 103
87 function overrideFrontendUrl(item) { 104 function customFrontendURL(url) {
88 if (window.location.hash) { 105 if (!url || !window.location.hash)
89 var overridden_url = window.location.hash.substr(1); 106 return null;
90 var ws_suffix = item.webSocketDebuggerUrl.replace('ws://', 'ws='); 107
91 if (overridden_url.indexOf('?') == -1) 108 var hashParams = new URLSearchParams(location.hash.substring(1));
92 return overridden_url + '?' + ws_suffix; 109 if (!hashParams.get("custom"))
93 else 110 return null;
94 return overridden_url + '&' + ws_suffix; 111
95 } 112 var searchIndex = url.indexOf("?");
96 return item.devtoolsFrontendUrl; 113 if (searchIndex === -1)
114 return null;
115 var originalParams = url.substring(searchIndex + 1);
116 if (hashParams.get("experiments"))
117 originalParams += "&experiments=true";
118
119 return "chrome-devtools://devtools/custom/inspector.html?" + originalParams;
97 } 120 }
98 121
99 function appendItem(item_object) { 122 function appendItem(item_object) {
100 var item_element; 123 var item_element;
101 if (item_object.devtoolsFrontendUrl) { 124 var customURL = customFrontendURL(item_object.devtoolsFrontendUrl);
125 if (customURL) {
126 item_element = document.createElement('div');
127 item_element.title = item_object.title;
128 item_element.className = 'custom';
129 } else if (item_object.devtoolsFrontendUrl) {
102 item_element = document.createElement('a'); 130 item_element = document.createElement('a');
103 item_element.href = overrideFrontendUrl(item_object); 131 item_element.href = item_object.devtoolsFrontendUrl;
104 item_element.title = item_object.title; 132 item_element.title = item_object.title;
105 } else { 133 } else {
106 item_element = document.createElement('div'); 134 item_element = document.createElement('div');
107 item_element.className = 'connected'; 135 item_element.className = 'connected';
108 item_element.title = 'The tab already has an active debug session'; 136 item_element.title = 'The tab already has an active debug session';
109 } 137 }
110 item_element.classList.add('item'); 138 item_element.classList.add('item');
111 139
112 var description = document.createElement('div'); 140 var description = document.createElement('div');
113 description.className = 'description'; 141 description.className = 'description';
114 142
115 var title = document.createElement('div'); 143 var title = document.createElement('div');
116 title.className = 'title'; 144 title.className = 'title';
117 title.textContent = item_object.description || item_object.title; 145 title.textContent = item_object.description || item_object.title;
118 title.style.cssText = 'background-image:url(' + 146 if (item_object.faviconUrl) {
119 item_object.faviconUrl + ')'; 147 title.style.cssText = 'background-image:url(' +
148 item_object.faviconUrl + ')';
149 }
120 description.appendChild(title); 150 description.appendChild(title);
121 151
122 var subtitle = document.createElement('div'); 152 var subtitle = document.createElement('div');
123 subtitle.className = 'subtitle'; 153 subtitle.className = 'subtitle';
124 subtitle.textContent = (item_object.url || '').substring(0, 300); 154 subtitle.textContent = (item_object.url || '').substring(0, 300);
125 description.appendChild(subtitle); 155 description.appendChild(subtitle);
126 156
157 if (customURL) {
158 var urlContainer = document.createElement('div');
159 urlContainer.classList.add("custom-url");
160 var urlLabel = document.createElement('div');
161 urlLabel.classList.add("custom-url-label");
162 urlLabel.textContent = "Click to copy URL:";
163 urlContainer.appendChild(urlLabel);
164 var urlValue = document.createElement('div');
165 urlValue.classList.add("custom-url-value");
166 urlValue.textContent = customURL;
167 urlContainer.appendChild(urlValue);
168 description.appendChild(urlContainer);
169 item_element.addEventListener('click', selectNodeText.bind(null, urlValue));
170 }
171
127 item_element.appendChild(description); 172 item_element.appendChild(description);
128 173
129 document.getElementById('items').appendChild(item_element); 174 document.getElementById('items').appendChild(item_element);
130 } 175 }
176
177 function selectNodeText(selectElement, event)
178 {
179 var selection = window.getSelection();
180 if (!selection.isCollapsed)
181 return;
182 var range = document.createRange();
183 range.selectNode(selectElement);
184 selection.removeAllRanges();
185 selection.addRange(range);
186 event.stopPropagation();
187 event.preventDefault();
188 }
131 </script> 189 </script>
132 </head> 190 </head>
133 <body onload='onLoad()'> 191 <body onload='onLoad()'>
134 <div id='caption'>Inspectable pages</div> 192 <div id='caption'>Inspectable pages</div>
135 <hr> 193 <hr>
136 <div id='items'> 194 <div id='items'>
137 </div> 195 </div>
138 </body> 196 </body>
139 </html> 197 </html>
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/ui/webui/devtools_ui.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698