DevTools: update remote discovery page, render both title and url for items.

NOTRY=true
BUG=425600

Review URL: https://codereview.chromium.org/637863006

Cr-Commit-Position: refs/heads/master@{#300649}

chrome/browser/devtools/frontend/devtools_discovery_page.html

@@ -3,82 +3,81 @@
 <title>Inspectable pages</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 {
-  display: -webkit-box;
-  margin-left: 60px;
-  margin-right: 60px;
-  -webkit-box-orient: horizontal;
-  -webkit-box-lines: multiple;
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
 }
 
-.frontend_ref {
-  color: black;
-  text-decoration: initial;
+.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: 0, 0;
 }
 
 .thumbnail {
   background-attachment: scroll;
   background-origin: padding-box;
   background-repeat: no-repeat;
-  border: 4px solid rgba(184, 184, 184, 1);
-  border-radius: 5px;
+  border: 1px solid rgba(184, 184, 184, 1);
+  flex: none;
   height: 132px;
   width: 212px;
-  -webkit-transition-property: background-color, border-color;
-  -webkit-transition: background-color 0.15s, 0.15s;
-  -webkit-transition-delay: 0, 0;
 }
 
-.thumbnail:hover {
+.item:not(.connected):hover {
   background-color: rgba(242, 242, 242, 1);
   border-color: rgba(110, 116, 128, 1);
   color: black;
 }
 
-.thumbnail.connected {
+.item.connected .thumbnail {
   opacity: 0.5;
 }
 
-.thumbnail.connected:hover {
+.item.connected:hover {
   border-color: rgba(184, 184, 184, 1);
   color: rgb(110, 116, 128);
 }
 
-.item {
-  display: inline-block;
-  margin: 5px;
-  margin-top: 15px;
-  height: 162px;
-  vertical-align: top;
-  width: 222px;
+.description {
+  display: flex;
+  flex-direction: column;
 }
 
-.text {
-  background: no-repeat 0;
-  background-size: 16px;
-  font-size: 12px;
-  margin: 4px 0px 0px 4px;
+.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>
@@ -112,44 +111,49 @@ 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 thumbnail = document.createElement('div');
-  thumbnail.className = item_object.devtoolsFrontendUrl ?
-                        'thumbnail' : 'thumbnail connected';
+  thumbnail.className = 'thumbnail';
   thumbnail.style.cssText = 'background-image:url(' +
-                        item_object.thumbnailUrl +
-                        ')';
-  frontend_ref.appendChild(thumbnail);
-
-  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 item = document.createElement('p');
-  item.className = 'item';
-  item.appendChild(frontend_ref);
-
-  document.getElementById('items').appendChild(item);
+      item_object.thumbnailUrl + ')';
+  item_element.appendChild(thumbnail);
+
+  var description = document.createElement('div');
+  description.className = 'description';
+
+  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);
+
+  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>