<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>
}
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>