Adds a dismiss button to remove Recent tabs

addon/background.js

@@ -182,6 +182,8 @@ browser.runtime.onMessage.addListener(async (message) => {
     if (!windowInfo.incognito) {
       addRecentTab(message);
     }
+  } else if (message.type === "dismissTab") {
+    dismissRecentTab(message.index);
   } else if (message.type === "getRecentAndDesktop") {
     let isDesktop = false;
     if (sidebarUrl) {
@@ -255,6 +257,24 @@ async function addRecentTab(tabInfo) {
   await browser.storage.sync.set({recentTabs});
 }
 
+async function dismissRecentTab(tab_index) {
+  recentTabs.splice(tab_index, 1);
+  try {
+    await browser.runtime.sendMessage({
+      type: "updateRecentTabs",
+      recentTabs
+    });
+
+  } catch (error) {
+    if (String(error).includes("Could not establish connection")) {
+      // popup speculation, as in addRecentTab()
+    } else {
+      console.error("Got updating recent tabs:", String(error), error);
+    }
+  }
+  await browser.storage.sync.set({recentTabs});
+}
+
 // Add a mobile header to outgoing requests
 browser.webRequest.onBeforeSendHeaders.addListener(function (info) {
   let hostname = (new URL(info.url)).hostname;

addon/popup.css

@@ -75,20 +75,27 @@ body {
   overflow-y: auto;
 }
 
+.tab__parent {
+  display: flex;
+  width: 100%;
+  background: #fff;
+  height: 26.5px;
+}
+
 .tab {
   align-items: center;
   border: 0;
   width: 100%;
-  background: #fff;
-  display: flex;
+  background: transparent;
   font-weight: normal;
-  height: 26.5px;
   padding-inline-start: 18px;
   padding: 4px 12px;
+  display: flex;
+  overflow: hidden;
 }
 
-.tab:hover,
-.tab:focus {
+.tab__parent:hover,
+.tab__parent:focus {
   background: #ededf0;
 }
 
@@ -104,6 +111,45 @@ body {
   margin-inline-end: 8px;
 }
 
+.tab__dismiss {
+  border: 0;
+  background: transparent;
+  margin-top: 3.25px;
+  margin-left: auto;
+  margin-right: 10px;
+  border-radius: 10%;
+  opacity: 0;
+  height: 20px;
+  padding: 2px;
+}
+
+.tab__dismiss:hover,
+.tab__dismiss:focus {
+  background: rgba(224, 224, 225, 0.9);
+}
+
+.tab__dismiss:hover,
+.tab__dismiss:focus,
+.tab:hover + .tab__dismiss,
+.tab:focus + .tab__dismiss,
+.tab__parent:hover .tab__dismiss,
+.tab__parent:focus .tab__dismiss {
+  opacity: 100;
+}
+
+.tab__dismiss::after {
+  content: url(images/close-16.svg);  /* close symbol */
+}
+
+#panel.dark-theme .tab__dismiss:hover,
+#panel.dark-theme .tab__dismiss:focus {
+  background: --dark-theme-highlight-color;
+}
+
+#panel.dark-theme .tab__dismiss::after {
+  content: url(images/close-16-light.svg);
+}
+
 /* this is a hack if, for any reason, a site does not
 supply a favicon */
 

addon/popup.js

@@ -65,16 +65,37 @@ async function updateHome(event) {
 
 let renderTabListLastRendered = {};
 
+function _onTabClick(event, tabs, url, favIconUrl, index, title, eventLabel) {
+  sendEvent({
+    ec: "interface",
+    ea: "load-url",
+    el: eventLabel,
+    forUrl: url,
+    cd4: tabs.length,
+    cd5: index
+  });
+  displayPage({
+    url,
+    favIconUrl,
+    title,
+  });
+}
+
 function renderTabList(tabs, containerSelector, eventLabel) {
   let renderedInfo = "";
   const tabList = element(containerSelector);
   const newTabList = tabList.cloneNode();
   tabs.forEach((tab, index) => {
     let li = document.createElement("li");
+    let parent = document.createElement("div");
     let image = document.createElement("span");
     let text = document.createElement("span");
+    let dismiss = document.createElement("button");
+    parent.classList.add("tab__parent");
     image.classList.add("tab__image");
     text.classList.add("tab__text");
+    dismiss.classList.add("tab__dismiss");
+    dismiss.setAttribute("aria-label", "close button");
     let title = tab.title;
     let url = tab.url;
     let favIconUrl = null;
@@ -88,24 +109,34 @@ function renderTabList(tabs, containerSelector, eventLabel) {
     anchor.classList.add("tab");
     text.textContent = title;
     renderedInfo += title + "\n";
-    anchor.addEventListener("click", (event) => {
-      sendEvent({
-        ec: "interface",
-        ea: "load-url",
-        el: eventLabel,
-        forUrl: url,
-        cd4: tabs.length,
-        cd5: index
+    anchor.addEventListener("click", (event) =>
+    _onTabClick(event, tabs, url, favIconUrl, index, title, eventLabel));
+    parent.addEventListener("click", (event) =>
+      _onTabClick(event, tabs, url, favIconUrl, index, title, eventLabel));
+    // Only add the dismiss button if its a recent tab
+    if (eventLabel === "recent-tab") {
+      dismiss.addEventListener("click", async (event) => {
+      event.stopPropagation(); // prevent the selection of tab
+       sendEvent({
+         ec: "interface",
+         ea: "dismiss-tab",
+         el: eventLabel,
+         cd4: tabs.length,
+         cd5: index
+       });
+       await browser.runtime.sendMessage({
+        type: "dismissTab",
+        index
+       });
       });
-      displayPage({
-        url,
-        favIconUrl,
-        title,
-      });
-    });
+    }
     anchor.prepend(image);
     anchor.appendChild(text);
-    li.appendChild(anchor);
+    parent.appendChild(anchor);
+    if (eventLabel === "recent-tab") {
+      parent.appendChild(dismiss);
+    }
+    li.appendChild(parent);
     newTabList.appendChild(li);
   });
   if (renderedInfo !== renderTabListLastRendered[containerSelector]) {