Draw SSL icons in the background.

Previously, the icons could be selected with a transparent highlight,
now they can't be selected at all.

Author: pmarks-net

src/popup.html

@@ -45,20 +45,32 @@
 tr {
   height: 21px;
 }
-img {
-  user-select: none;
-}
-img::selection {
-  background-color: transparent;
-}
 .mainRow {
   font-weight: bold;
 }
-.sslImg {
-  padding-right: 6pt;
+/* Draw SSL icon in the background, for the "zeroth" column. */
+.domainTd::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 15px;
+  height: 11px;
+  background-image: var(--ssl-icon);
+}
+/* Tooltip for the "zeroth" column, left of the fake vertical line. */
+.sslTooltip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 23px;
+  height: 100%;
 }
 .domainTd {
   user-select: text;
+  position: relative;
+  padding-left: 27px;
 }
 .addrTd {
   font-family: monospace;
@@ -140,7 +152,7 @@
     background-color: #222;
     color: #eee;
   }
-  .sslImg {
+  .domainTd::before {
     filter: invert(1);
   }
   .snipImg {

src/popup.js

@@ -43,7 +43,7 @@ window.onload = async function() {
     const TEST_TUPLES = [
       ["ipv6.example.com", "2001:db8::f00", "6", DFLAG_SSL],
       ["ipv4.example.com", "192.0.2.9", "4", DFLAG_NOSSL],
-      ["cached.example.com", "2001:db8::f00", "6", DFLAG_SSL | DFLAG_NOSSL | AFLAG_CACHE],
+      ["cached.looooooooooooooooo000ooooooongname.example.com", "2001:db8::f00", "6", DFLAG_SSL | DFLAG_NOSSL | AFLAG_CACHE],
     ];
     pushAll(TEST_TUPLES, "646", REGULAR_COLOR, 0);
   }
@@ -231,24 +231,6 @@ function makeImg(src, title) {
   return img;
 }
 
-function makeSslImg(flags) {
-  switch (flags & (DFLAG_SSL | DFLAG_NOSSL)) {
-    case DFLAG_SSL | DFLAG_NOSSL:
-      return makeImg(
-          "gray_schrodingers_lock.png",
-          "Mixture of HTTPS and non-HTTPS connections.");
-    case DFLAG_SSL:
-      return makeImg(
-          "gray_lock.png",
-          "Connection uses HTTPS.\n" +
-          "Warning: IPvFoo does not verify the integrity of encryption.");
-    default:
-      return makeImg(
-          "gray_unlock.png",
-          "Connection does not use HTTPS.");
-  }
-}
-
 function makeRow(isFirst, tuple) {
   const domain = tuple[0];
   const addr = tuple[1];
@@ -261,12 +243,33 @@ function makeRow(isFirst, tuple) {
   }
 
   // Build the SSL icon for the "zeroth" pseudo-column.
-  const sslImg = makeSslImg(flags);
-  sslImg.className = "sslImg";
+  let sslIcon = "";
+  let sslTitle = "";
+  switch (flags & (DFLAG_SSL | DFLAG_NOSSL)) {
+    case DFLAG_SSL | DFLAG_NOSSL:
+      sslIcon = "gray_schrodingers_lock.png";
+      sslTitle = "Mixture of HTTPS and non-HTTPS connections.";
+      break;
+    case DFLAG_SSL:
+      sslIcon = "gray_lock.png";
+      sslTitle = "Connection uses HTTPS.\nWarning: IPvFoo does not verify the integrity of encryption.";
+      break;
+    default:
+      sslIcon = "gray_unlock.png";
+      sslTitle = "Connection does not use HTTPS.";
+      break;
+  }
 
   // Build the "Domain" column.
   const domainTd = document.createElement("td");
-  domainTd.appendChild(sslImg);
+  domainTd.style.setProperty("--ssl-icon", `url("${sslIcon}")`);
+
+  // Tooltip for the "zeroth" column.
+  const sslTooltip = document.createElement("span");
+  sslTooltip.className = "sslTooltip";
+  sslTooltip.title = sslTitle;
+  domainTd.appendChild(sslTooltip);
+
   if (domain.length > LONG_DOMAIN) {
     domainTd.appendChild(makeSnippedText(domain, Math.floor(LONG_DOMAIN / 2)));
   } else {