<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Inspectable pages</title>
    <style>
      body {
        color: #222;
        font-family: Helvetica, Arial, sans-serif;
        margin: 0;
        text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px;
      }
      #caption {
        font-size: 16px;
        margin-top: 15px;
        margin-bottom: 10px;
        margin-left: 20px;
        height: 20px;
        text-align: left;
      }
      #items {
        display: flex;
        flex-direction: column;
        margin: 10px;
      }
      .item {
        color: #222;
        display: flex;
        flex-direction: row;
        text-decoration: none;
        padding: 10px;
        cursor: pointer;
        -webkit-transition-property: background-color, border-color;
        -webkit-transition: background-color 0.15s, 0.15s;
        -webkit-transition-delay: 0ms, 0ms;
      }
      .thumbnail {
        background-attachment: scroll;
        background-origin: padding-box;
        background-repeat: no-repeat;
        border: 1px solid rgba(184, 184, 184, 1);
        flex: none;
        height: 180;
        width: 180;
      }
      .item:not(.connected):hover {
        background-color: rgba(242, 242, 242, 1);
        border-color: rgba(110, 116, 128, 1);
        color: black;
      }
      .item.connected .thumbnail {
        opacity: 0.5;
      }
      .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-left: 20px;
      }
      .title {
        background-repeat: no-repeat;
        background-size: 16px;
        font-size: 15px;
      }
    </style>
  </head>

  <body>
    <div id="caption">Inspectable pages</div>
    <hr>
    <div id="items">
      <div title="Cobalt" class="item">
      <script>
        document.querySelector('.item').addEventListener('click', function() {
          var authority = window.location.hostname + ':' + window.location.port;
          window.location = '/devtools/inspector.html?ws=' + authority +
              '/devtools/page/cobalt';
        });
      </script>
        <div class="thumbnail"
            style="background-image: url(&quot;/cobalt-logo-180.png&quot;);">
        </div>
        <div class="description">
          <div class="title"
              style="background-image: url(&quot;/favicon.ico&quot;);">
            Cobalt
          </div>
          <div class="subtitle">https://youtube.com/tv</div>
        </div>
      </div>
    </div>
  </body>
</html>