Bump dependency versions and fix linting errors

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.0
 jobs:
     package:
         docker:
-            - image: circleci/node:8.9.4
+            - image: circleci/node:20.18
         steps:
             - checkout
             - restore_cache:

.eslintrc.js

@@ -1,3 +1,4 @@
+/* eslint-env node */
 module.exports = {
   "env": {
     "es6": true,
@@ -17,8 +18,6 @@ module.exports = {
   "root": true,
   "rules": {
     "eqeqeq": "error",
-    "no-console": "warn",
-    "space-before-function-paren": "off",
-    "no-console": ["error", {"allow": ["error", "info", "trace", "warn"]}]
+    "space-before-function-paren": "off"
   }
 };

.stylelintrc

@@ -1,6 +1,7 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "font-family-no-missing-generic-family-keyword": null
+    "font-family-no-missing-generic-family-keyword": null,
+    "selector-class-pattern": null
   }
-}
+}

addon/background.js

@@ -78,7 +78,7 @@ async function openUrl(url) {
   browser.runtime.sendMessage({
     type: "isDesktop",
     isDesktop,
-  }).catch((error) => {
+  }).catch(() => {
     // If the popup is not open this gives an error, but we don't care
   });
   browser.sidebarAction.setPanel({panel: url});

addon/intro.css

@@ -1,7 +1,7 @@
 :root {
   --blue-40: #45a1ff;
   --blue-50: #0a84ff;
-  --blue-50-a30: rgba(10, 132, 255, 0.3);
+  --blue-50-a30: rgb(10 132 255 / 30%);
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;

addon/popup.css

@@ -7,7 +7,7 @@ html {
 :root {
   --dark-theme-background-color: #4a4a4f;
   --dark-theme-highlight-color: #6d6d6f;
-  --dark-theme-superhighlight-color: hsla(0, 0%, 80%, 0.45);
+  --dark-theme-superhighlight-color: hsl(0deg 0% 80% / 45%);
   --dark-theme-color: #fff;
   --dark-theme-links: #45a1ff;
 }
@@ -40,7 +40,7 @@ body {
 }
 
 .separator {
-  background: hsla(210, 4%, 10%, 0.14);
+  background: hsl(210deg 4% 10% / 14%);
   height: 1px;
   margin: 6px 0;
 }
@@ -133,7 +133,7 @@ body {
 
 .tab__dismiss:hover,
 .tab__dismiss:focus {
-  background: rgba(224, 224, 225, 0.9);
+  background: rgb(224 224 225 / 90%);
 }
 
 .tab__dismiss:hover,
@@ -146,14 +146,14 @@ body {
 }
 
 .tab__dismiss::after {
-  content: url(images/close-16.svg);  /* close symbol */
+  content: url("images/close-16.svg");  /* close symbol */
 }
 
 /* this is a hack if, for any reason, a site does not
 supply a favicon */
 
-.tab__image[style*=undefined] {
-  background-image: url(images/globe.svg) !important;
+.tab__image[style*="undefined"] {
+  background-image: url("images/globe.svg") !important;
 }
 
 .tab__text {
@@ -164,7 +164,7 @@ supply a favicon */
 }
 
 .panel-footer {
-  border-top: 1px solid hsla(210, 4%, 10%, 0.14);
+  border-top: 1px solid hsl(210deg 4% 10% / 14%);
   display: flex;
   flex: 0 0 41px;
   margin: 6px 0 0;
@@ -177,8 +177,8 @@ supply a favicon */
 .mobile-toggle {
   border: 0;
   align-items: center;
-  background: hsla(0, 0%, 80%, 0.3);
-  color: rgb(26, 26, 26);
+  background: hsl(0deg 0% 80% / 30%);
+  color: rgb(26 26 26);
   cursor: default;
   display: flex;
   flex: 1;
@@ -194,7 +194,7 @@ supply a favicon */
 }
 
 .mobile-toggle:hover {
-  background: hsla(0, 0%, 80%, 0.4);
+  background: hsl(0deg 0% 80% / 40%);
 }
 
 #getting-started {
@@ -246,7 +246,7 @@ supply a favicon */
 }
 
 #panel.dark-theme .tab__dismiss::after {
-  content: url(images/close-16-light.svg);
+  content: url("images/close-16-light.svg");
 }
 
 #panel.dark-theme .mobile-toggle {
@@ -255,7 +255,7 @@ supply a favicon */
 }
 
 #panel.dark-theme .mobile-toggle:hover {
-  background-color: hsla(0, 0%, 80%, 0.6);
+  background-color: hsl(0deg 0% 80% / 60%);
 }
 
 #recent-tabs[style$="none;"] + #open-tabs {

addon/popup.js

@@ -58,7 +58,7 @@ async function updateHome(event) {
 
 let renderTabListLastRendered = {};
 
-function _onTabClick(event, tabs, url, favIconUrl, index, title, eventLabel) {
+function _onTabClick(event, tabs, url, favIconUrl, index, title, _eventLabel) {
   displayPage({
     url,
     favIconUrl,

addon/sidebar.css

@@ -3,7 +3,7 @@ html {
   font: message-box;
   font-size: 15px;
   overflow: hidden;
-  color: rgb(12, 12, 13);
+  color: rgb(12 12 13);
 }
 
 :root {
@@ -46,7 +46,7 @@ body {
 }
 
 .subtitle a {
-  color: rgb(12, 12, 13);
+  color: rgb(12 12 13);
 }
 
 .instructions {
@@ -87,15 +87,15 @@ body {
   width: 100%;
   max-height: 174px;
   height: 100%;
-  background: url(images/in-content-clouds.png) no-repeat center;
+  background: url("images/in-content-clouds.png") no-repeat center;
   background-size: contain;
   position: absolute;
 }
 
 .graphic__browser {
   animation: fade-in-down forwards 1000ms cubic-bezier(0.22, 0.92, 0.62, 1);
   animation-delay: 100ms;
-  background: url(images/in-content-icon.png) no-repeat center;
+  background: url("images/in-content-icon.png") no-repeat center;
   background-size: contain;
   max-width: 284px;
   width: 100%;
@@ -143,9 +143,9 @@ body {
 
 .default-link {
   appearance: none;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
   border: 0;
-  color: rgb(10, 141, 255);
+  color: rgb(10 141 255);
   cursor: pointer;
   font-size: 15px;
   margin: 6px 0;
@@ -161,7 +161,7 @@ body {
 
 .default-link:hover,
 .default-link:focus {
-  color: rgb(0, 96, 223);
+  color: rgb(0 96 223);
   text-decoration: underline;
 }
 
@@ -186,5 +186,5 @@ body {
 }
 
 .page.dark-theme .graphic__clouds {
-  background: url(images/in-content-clouds-dark.png);
+  background: url("images/in-content-clouds-dark.png");
 }

addon/sidebar.js

@@ -27,7 +27,7 @@ async function init() {
   };
 
   checkForDark();
-  browser.management.onEnabled.addListener((info) => {
+  browser.management.onEnabled.addListener(() => {
     checkForDark();
   });
 }