Simplify popup (combine two 'status dots' into one)

app/scripts/popup.js

@@ -11,19 +11,13 @@ const createDomainRow = async hostname => {
   const dnssecCell = document.createElement('td')
   const validCell = document.createElement('td')
   const status = await getDomainStatus(hostname)
-  const dnssecDiv = document.createElement('div')
-  const validDiv = document.createElement('div')
-  dnssecDiv.className = 'indicator'
-  validDiv.className = 'indicator'
+  const indicator = document.createElement('div')
+  indicator.className = 'indicator'
 
   if (status) {
     hostnameCell.innerText = hostname
-    dnssecDiv.classList.add(status.dnssec ? 'valid' : 'off')
-
-    validDiv.classList.add(status.dnssec ? (status.valid ? 'valid' : 'invalid') : 'off')
-
-    dnssecCell.appendChild(dnssecDiv)
-    validCell.appendChild(validDiv)
+    indicator.classList.add(status.dnssec ? (status.valid ? 'valid' : 'invalid') : 'off')
+    validCell.appendChild(indicator)
 
     row.appendChild(hostnameCell)
     row.appendChild(dnssecCell)
@@ -36,19 +30,11 @@ const createDomainTable = async () => {
   const tabId = await getActiveTabId()
   const domains = await storage('tabDomains', 'get', { id: tabId })
   const table = document.createElement('table')
+  table.className = 'domains'
   if (domains && domains.length > 0) {
-    const header = document.createElement('tr')
-    const hostnameCell = document.createElement('th')
-    const dnssecCell = document.createElement('th')
-    const validCell = document.createElement('th')
-    hostnameCell.innerText = 'domain'
-    dnssecCell.innerText = 'D'
-    validCell.innerText = 'V'
-    header.appendChild(hostnameCell)
-    header.appendChild(dnssecCell)
-    header.appendChild(validCell)
-    table.appendChild(header)
-    domains.forEach(async hostname => table.appendChild(await createDomainRow(hostname)))
+    const tbody = document.createElement('tbody')
+    table.appendChild(tbody)
+    domains.forEach(async hostname => tbody.appendChild(await createDomainRow(hostname)))
   }
   return table
 }
@@ -101,9 +87,12 @@ const updatePopup = async () => {
   popup.addEventListener('click', updateIcon)
   popup.innerHTML = ''
   const domainHeading = document.createElement('h3')
-  domainHeading.innerText = 'Requests'
-  popup.append(domainHeading)
-  popup.appendChild(await createDomainTable())
+  const domainTable = await createDomainTable()
+  if (domainTable.children.length > 0) {
+    domainHeading.innerText = 'Requests'
+    popup.append(domainHeading)
+    popup.appendChild(domainTable)
+  }
   const resolverHeading = document.createElement('h3')
   resolverHeading.innerText = 'DNS Resolver'
   popup.append(resolverHeading)

app/styles/popup.scss

@@ -15,18 +15,6 @@ table {
   width: 100%;
   margin-bottom: 1em;
 
-  th {
-    padding: 0.25em;
-    font-weight: bold;
-    white-space: nowrap;
-    text-align: center;
-
-    &:first-child {
-      width: 100%;
-      text-align: left;
-    }
-  }
-
   td {
     white-space: nowrap;
     text-align: right;
@@ -66,7 +54,6 @@ h3 {
 
 .toolbar {
   display: flex;
-  overflow: hidden;
 
   button {
     overflow: hidden;