Update devtools discovery page

Update the page to follow recent versions of Chromium's, now renders
both title and URL for items.

Change-Id: I0bc6dd4c2e4078bf9197d0f0af67747728bf6e8e
Reviewed-by: Kai Koehne <kai.koehne@theqtcompany.com>

1 files changed, 69 insertions, 37 deletions

diff --git a/src/core/resources/devtools_discovery_page.html b/src/core/resources/devtools_discovery_page.html
index 7aac74932..d37dbfcf4 100644
--- a/src/core/resources/devtools_discovery_page.html
+++ b/src/core/resources/devtools_discovery_page.html
@@ -3,44 +3,68 @@
 <title>QtWebEngine Remote Debugging</title>
 <style>
 body {
-  background-color: rgb(245, 245, 245);
+  color: #222;
   font-family: Helvetica, Arial, sans-serif;
+  margin: 0;
   text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px;
 }
 
 #caption {
-  color: black;
   font-size: 16px;
-  margin-top: 30px;
-  margin-bottom: 0px;
-  margin-left: 70px;
+  margin-top: 15px;
+  margin-bottom: 10px;
+  margin-left: 20px;
   height: 20px;
   text-align: left;
 }
 
 #items {
-  margin-left: 60px;
-  margin-right: 60px;
-  -webkit-box-orient: horizontal;
-  -webkit-box-lines: multiple;
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
+}
+
+.item {
+  color: #222;
+  display: flex;
+  flex-direction: row;
+  text-decoration: none;
+  padding: 10px;
+  -webkit-transition-property: background-color, border-color;
+  -webkit-transition: background-color 0.15s, 0.15s;
+  -webkit-transition-delay: 0ms, 0ms;
 }
 
-.frontend_ref {
+.item:not(.connected):hover {
+  background-color: rgba(242, 242, 242, 1);
+  border-color: rgba(110, 116, 128, 1);
   color: black;
-  text-decoration: initial;
 }
 
-.text {
-  background: no-repeat 0;
-  background-size: 16px;
-  font-size: 12px;
-  margin: 4px 0px 0px 4px;
+.item.connected:hover {
+  border-color: rgba(184, 184, 184, 1);
+  color: rgb(110, 116, 128);
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+}
+
+.title, .subtitle {
+  font-size: 13px;
+  margin: 4px 0px 0px 6px;
   overflow: hidden;
-  padding: 2px 0px 0px 20px;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  padding-left: 20px;
 }
+
+.title {
+  background-repeat: no-repeat;
+  background-size: 16px;
+  font-size: 15px;
+}
+
+
 </style>
 
 <script>
@@ -74,35 +98,43 @@ function overrideFrontendUrl(item) {
 }
 
 function appendItem(item_object) {
-  var frontend_ref;
+  var item_element;
   if (item_object.devtoolsFrontendUrl) {
-    frontend_ref = document.createElement('a');
-    frontend_ref.href = overrideFrontendUrl(item_object);
-    frontend_ref.title = item_object.title;
+    item_element = document.createElement('a');
+    item_element.href = overrideFrontendUrl(item_object);
+    item_element.title = item_object.title;
   } else {
-    frontend_ref = document.createElement('div');
-    frontend_ref.title = 'The tab already has an active debug session';
+    item_element = document.createElement('div');
+    item_element.className = 'connected';
+    item_element.title = 'The tab already has an active debug session';
   }
-  frontend_ref.className = 'frontend_ref';
+  item_element.classList.add('item');
 
-  var text = document.createElement('div');
-  text.className = 'text';
-  text.innerText = item_object.description || item_object.title;
-  text.style.cssText = 'background-image:url(' +
-                       item_object.faviconUrl + ')';
-  frontend_ref.appendChild(text);
+  var description = document.createElement('div');
+  description.className = 'description';
 
-  var item = document.createElement('p');
-  item.appendChild(frontend_ref);
+  var title = document.createElement('div');
+  title.className = 'title';
+  title.textContent = item_object.description || item_object.title;
+  title.style.cssText = 'background-image:url(' +
+      item_object.faviconUrl + ')';
+  description.appendChild(title);
 
-  document.getElementById('items').appendChild(item);
+  var subtitle = document.createElement('div');
+  subtitle.className = 'subtitle';
+  subtitle.textContent = (item_object.url || '').substring(0, 300);
+  description.appendChild(subtitle);
+
+  item_element.appendChild(description);
+
+  document.getElementById('items').appendChild(item_element);
 }
 </script>
 </head>
 <body onload='onLoad()'>
   <div id='caption'>Inspectable pages</div>
+  <hr>
   <div id='items'>
   </div>
-  <hr>
 </body>
 </html>