Improve devtools visual elements (#1309)

* Make it easier to view contents of current cell

* Fix overflow element content not showing on hover

* Make settings and table head follow scrolling

* Fix Type column not wrapping correctly on hover

* Add on/off colouring for protection buttons

* Switch block colour to a less harsh red

* Fix set-cookie-tracker row colouring

* Add hover colours for protection buttons

* Add border on current row for visibility

* Fix some lint errors

* Fix devtools feature toggles

* Fix devtools panel http cookie filter

Co-authored-by: Sam Macbeth <smacbeth@duckduckgo.com>

shared/html/devtools-panel.html

@@ -28,6 +28,12 @@
       padding: 10px;
     }
 
+    #settings-panel {
+      position: sticky;
+      top: 0;
+      background-color: aliceblue;
+    }
+
     #protections {
       padding-top: 0px;
     }
@@ -36,8 +42,24 @@
       margin: 2px;
     }
 
+    .protection-button-on {
+      background-color: #A0F2A8;
+    }
+
+    .protection-button-on:hover {
+      background-color: #ADFFAD
+    }
+
+    .protection-button-off {
+      background-color: #FBBEBF;
+    }
+
+    .protection-button-off:hover {
+      background-color: #FFCBCC;
+    }
+
     .block {
-      background-color: #DE5833;
+      background-color: #FBBEBF;
     }
 
     .redirect {
@@ -52,18 +74,22 @@
       background-color: #9CB8FF
     }
 
-    .set-cookie {
+    .set-cookie-tracker {
       background-color: #BDA8FC
     }
 
-
     table {
       table-layout: fixed;
       width: 100%;
       border-collapse: collapse;
       border: 1px solid black;
     }
 
+    thead {
+      position: sticky;
+      background-color: antiquewhite;
+    }
+
     thead th:nth-child(1) {
       width: 2%;
     }
@@ -92,6 +118,17 @@
       overflow: hidden;
     }
 
+    /* Make it easier to view contents of currently-hovered cell. */
+    td:hover {
+      white-space: break-spaces;
+      background-color: beige;
+      word-wrap: break-word;
+    }
+
+    tr:hover {
+      border: 1px solid black;
+    }
+
     tr > td:nth-child(4) {
       word-wrap: anywhere;
       overflow: auto;
@@ -130,6 +167,7 @@
     </tr>
   </template>
 
+  <div id="settings-panel">
   <div class="header">
     <a href="./list-editor.html" target="_blank">🗒</a>
     <select id="tab-picker">
@@ -160,7 +198,7 @@
       <input id="display-redirect" type="checkbox" checked><span>Redirected</span>
     </label>
     <label class="cookie">
-      <input id="display-cookie" type="checkbox" checked><span>HTTP Cookies</span>
+      <input id="display-cookie-tracker" type="checkbox" checked><span>HTTP Cookies</span>
     </label>
     <label class="jscookie">
       <input id="display-jscookie" type="checkbox" checked><span>JS Cookies</span>
@@ -169,6 +207,7 @@
       <input id="display-canvas" type="checkbox" checked><span>Canvas API</span>
     </label>
   </div>
+  </div>
   <table>
     <thead>
       <tr>

shared/js/background/devtools.es6.js

@@ -18,6 +18,23 @@ export function init () {
     browser.runtime.onConnect.addListener(connected)
 }
 
+/**
+ * Serialize a subset of the tab object to be sent to the panel
+ * @param {Object} tab
+ */
+export function serializeTab (tab) {
+    if (tab.site) {
+        return {
+            site: {
+                allowlisted: tab.site.allowlisted,
+                isBroken: tab.site.isBroken,
+                enabledFeatures: tab.site.enabledFeatures || []
+            }
+        }
+    }
+    return {}
+}
+
 function connected (port) {
     if (port.name !== 'devtools') {
         return
@@ -29,7 +46,7 @@ function connected (port) {
             tabId = m.tabId
             ports.set(tabId, port)
             const tab = tabManager.get({ tabId })
-            postMessage(tabId, 'tabChange', tab)
+            postMessage(tabId, 'tabChange', serializeTab(tab))
         } else if (m.action === 'I' || m.action === 'B') {
             const { requestData, siteUrl, tracker } = m
             const matchedTracker = trackers.getTrackerData(requestData.url, siteUrl, requestData)
@@ -80,7 +97,7 @@ function connected (port) {
                     value: !tab.site.allowlisted
                 })
             }
-            postMessage(tabId, 'tabChange', tab)
+            postMessage(tabId, 'tabChange', serializeTab(tab))
         } else if (m.action === 'toggletrackerAllowlist') {
             if (tdsStorage.config.features.trackerAllowlist.state === 'enabled') {
                 tdsStorage.config.features.trackerAllowlist.state = 'disabled'

shared/js/background/events.es6.js

@@ -278,7 +278,7 @@ browser.webNavigation.onCommitted.addListener(details => {
     if (!tab) return
 
     tab.updateSite(details.url)
-    devtools.postMessage(details.tabId, 'tabChange', tab)
+    devtools.postMessage(details.tabId, 'tabChange', devtools.serializeTab(tab))
 })
 
 /**

shared/js/devtools/panel.es6.js

@@ -50,6 +50,17 @@ const actionIcons = {
     'ignore-user': '🎛️'
 }
 
+/**
+ * @param {HTMLElement} element
+ * @param {string} textName
+ * @param {boolean} isEnabled
+ */
+function setupProtectionButton (element, textName, isEnabled) {
+    element.innerText = `${textName}: ${isEnabled ? 'ON' : 'OFF'}`
+    element.classList.add(`protection-button-${isEnabled ? 'on' : 'off'}`)
+    element.classList.remove(`protection-button-${isEnabled ? 'off' : 'on'}`)
+}
+
 const actionHandlers = {
     tracker: (m) => {
         const { tracker, url, requestData, siteUrl } = m.message
@@ -82,10 +93,13 @@ const actionHandlers = {
     },
     tabChange: (m) => {
         const tab = m.message
-        protectionButton.innerText = `Protection: ${tab.site?.allowlisted || tab.site?.isBroken ? 'OFF' : 'ON'}`
+        const protectionDisabled = tab.site?.allowlisted || tab.site?.isBroken
+        setupProtectionButton(protectionButton, 'Protection', !protectionDisabled)
         loadConfigurableFeatures.then((features) => {
             features.forEach((feature) => {
-                document.getElementById(feature).innerText = `${feature}: ${tab.site?.enabledFeatures.includes(feature) ? 'ON' : 'OFF'}`
+                const featureEnabled = tab.site?.enabledFeatures.includes(feature)
+                const featureButton = document.getElementById(feature)
+                setupProtectionButton(featureButton, feature, featureEnabled)
             })
         })
     },
@@ -263,3 +277,12 @@ displayFilters.forEach((input) => {
         document.querySelectorAll('tr').forEach(setRowVisible)
     })
 })
+
+/**
+ * Observes the dev settings for resizing to ensure the table head sticks correctly to the bottom of the settings.
+ */
+const settingsResizeObserver = new ResizeObserver(function (entries) {
+    const height = entries[0].contentRect.height
+    document.querySelector('thead').style.top = `${height}px`
+})
+settingsResizeObserver.observe(document.getElementById('settings-panel'))