Refactoring

src/apps.json

@@ -2963,7 +2963,6 @@
       ],
       "cpe": "cpe:/a:docker:engine",
       "icon": "Docker.svg",
-      "implies": "Linux",
       "html": "<!-- This comment is expected by the docker HEALTHCHECK  -->",
       "website": "https://www.docker.com/"
     },

src/drivers/npm/driver.js

@@ -238,6 +238,8 @@ class Site {
     this.listeners = {}
 
     this.headers = {}
+
+    this.pages = []
   }
 
   async init() {}
@@ -285,6 +287,8 @@ class Site {
 
     const page = await this.browser.newPage()
 
+    this.pages.push(page)
+
     page.setDefaultTimeout(this.options.maxWait)
 
     await page.setRequestInterception(true)
@@ -402,6 +406,10 @@ class Site {
 
     // Validate response
     if (!this.analyzedUrls[url.href].status) {
+      await page.close()
+
+      this.log('Page closed')
+
       throw new Error('NO_RESPONSE')
     }
 
@@ -452,6 +460,10 @@ class Site {
       []
     )
 
+    await page.close()
+
+    this.log('Page closed')
+
     this.emit('goto', url)
 
     return reducedLinks
@@ -537,6 +549,24 @@ class Site {
       }
     })
   }
+
+  async destroy() {
+    await Promise.all(
+      this.pages.map(async (page) => {
+        if (page) {
+          try {
+            await page.close()
+
+            this.log('Page closed')
+          } catch (error) {
+            // Continue
+          }
+        }
+      })
+    )
+
+    this.log('Site closed')
+  }
 }
 
 module.exports = Driver

src/drivers/webextension/css/popup.css

@@ -1,7 +1,11 @@
 :root {
   --color-primary: #4608ad;
+  --color-primary-darken: #32067c;
   --color-secondary: #e0e0e0;
+  --color-secondary-dark: rgba(255, 255, 255, .2);
   --color-text: #4a4a4a;
+  --color-text-dark: rgba(255, 255, 255, .8);
+  --color-light-grey: #fafafa;
 }
 
 body {
@@ -11,7 +15,7 @@ body {
   font-size: .9rem;
   line-height: 1.5rem;
 	margin: 0;
-  min-width: 30rem;
+  min-width: 35rem;
 }
 
 a {
@@ -31,17 +35,13 @@ a:hover {
 .header {
   align-items: center;
   border-bottom: 1px solid var(--color-secondary);
-  height: 4rem;
   display: flex;
+  height: 4rem;
 }
 
 .header__logo {
-  display: inline-block;
-  margin: .2rem 1.5rem 0 1.5rem;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform: translateZ(0) scale(1.0, 1.0);
-  transform: translateZ(0);
   height: 2.5rem;
+  margin: .5rem 1.5rem 0 1.5rem;
 }
 
 .header__logo--dark {
@@ -50,16 +50,33 @@ a:hover {
 
 .footer {
   align-items: center;
+  justify-content: space-between;
   border-top: 1px solid var(--color-secondary);
   height: 3rem;
   display: flex;
   padding: 0 1.5rem;
 }
 
+.alerts__icon {
+  color: var(--color-primary);
+  height: 1.1rem;
+  margin-right: .5rem;
+  vertical-align: text-bottom;
+  width: 1.1rem;
+}
+
+.footer__settings {
+  color: var(--color-primary);
+  cursor: pointer;
+  height: 1.1rem;
+  vertical-align: middle;
+  width: 1.1rem;
+}
+
 .detections {
   columns: 2;
   column-gap: 1.5rem;
-  padding: 1.5rem;
+  padding: 1.5rem 1.5rem .5rem 1.5rem;
 }
 
 .category {
@@ -74,13 +91,56 @@ a:hover {
   text-decoration: none;
 }
 
+.category__pin {
+  color: var(--color-primary);
+  cursor: pointer;
+  display: none;
+  visibility: hidden;
+  height: 1.1rem;
+  vertical-align: middle;
+  width: 1.1rem;
+}
+
+.category__pin--outline {
+  display: inline;
+}
+
+.category__pin--active {
+  visibility: visible;
+}
+
+.category__pin.category__pin--active {
+  display: inline
+}
+
+.category__pin--outline.category__pin--active {
+  display: none
+}
+
+.category__heading:hover .category__pin {
+  visibility: visible;
+}
+
 .technology {
   display: block;
   line-height: 1.7rem;
 }
 
+.technology__heading {
+  display: flex;
+  align-items: center;
+  margin-bottom: .2rem;
+}
+
+.technology__icon {
+  height: 16px;
+  margin-right: .5rem;
+  width: 16px;
+  vertical-align: middle;
+}
+
 .technology__link {
-  color: var(--color-text)
+  color: var(--color-text);
 }
 
 .terms {
@@ -128,3 +188,41 @@ a:hover {
 .terms__privacy {
   margin-top: 1rem;
 }
+
+@media (prefers-color-scheme: dark) {
+  body.theme-mode {
+    background: var(--color-primary-darken);
+  }
+
+  .theme-mode a {
+    color: var(--color-text-dark);
+  }
+
+  .theme-mode .header {
+    border-color: var(--color-secondary-dark)
+  }
+
+  .theme-mode .header__logo {
+    display: none;
+  }
+
+  .theme-mode .header__logo--dark {
+    display: inline-block;
+  }
+
+  .theme-mode .category__link {
+    color: #fff;
+  }
+
+  .theme-mode .category__pin {
+    color: #fff
+  }
+
+  .theme-mode .footer {
+    border-color: var(--color-secondary-dark)
+  }
+
+  .theme-mode .alerts__icon {
+    color:var(--color-text-dark);
+  }
+}

src/drivers/webextension/html/popup.html

@@ -28,17 +28,43 @@
     <div class="detections"></div>
 
     <div data-template="category" class="category">
-      <a class="category__link" href="#"></a>
+      <div class="category__heading">
+        <a class="category__link" href="#"></a>
+
+        <svg class="category__pin category__pin--outline" viewBox="0 0 24 24">
+          <title data-i18n="categoryPin"></title>
+          <path fill="currentColor" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z" />
+        </svg>
+
+        <svg class="category__pin" viewBox="0 0 24 24">
+          <title data-i18n="categoryPin"></title>
+          <path fill="currentColor" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
+        </svg>
+      </div>
 
       <div class="technologies"></div>
     </div>
 
     <div data-template="technology" class="technology">
-      <a class="technology__link" href="#"></a>
+      <div class="technology__heading">
+        <img class="technology__icon" alt="" src="../images/icons/default.svg" />
+
+        <a class="technology__link" href="#"></a>
+      </div>
     </div>
 
     <div class="footer">
-      <a class="footer__link" href="https://www.wappalyzer.com/alerts/manage" data-i18n="createAlert"></a>
+      <div class="alerts">
+        <svg class="alerts__icon" viewBox="0 0 24 24">
+          <path fill="currentColor" d="M12,8H4A2,2 0 0,0 2,10V14A2,2 0 0,0 4,16H5V20A1,1 0 0,0 6,21H8A1,1 0 0,0 9,20V16H12L17,20V4L12,8M21.5,12C21.5,13.71 20.54,15.26 19,16V8C20.53,8.75 21.5,10.3 21.5,12Z" />
+        </svg>
+
+        <a class="alerts__link" href="https://www.wappalyzer.com/alerts/manage" data-i18n="createAlert"></a>
+      </div>
+
+      <svg class="footer__settings" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
+      </svg>
     </div>
 	</body>
 </html>

src/drivers/webextension/js/driver.js

@@ -237,7 +237,13 @@ const Driver = {
       tabs.map(async ({ id: tabId }) => {
         await promisify(chrome.pageAction, 'setIcon', {
           tabId,
-          path: chrome.extension.getURL(`../images/icons/${icon}`)
+          path: chrome.extension.getURL(
+            `../images/icons/${
+              /\.svg$/i.test(icon)
+                ? `converted/${icon.replace(/\.svg$/, '.png')}`
+                : icon
+            }`
+          )
         })
 
         chrome.pageAction.show(tabId)

src/drivers/webextension/js/popup.js

@@ -2,22 +2,31 @@
 /* eslint-env browser */
 /* globals chrome, Utils */
 
-const { agent, getOption } = Utils
+const { agent, getOption, setOption, promisify } = Utils
 
 const Popup = {
   port: chrome.runtime.connect({ name: 'popup.js' }),
 
   async init() {
+    // Templates
     Popup.templates = Array.from(
       document.querySelectorAll('[data-template]')
     ).reduce((templates, template) => {
-      templates[template.dataset.template] = template
+      templates[template.dataset.template] = template.cloneNode(true)
+
+      template.remove()
 
       return templates
     }, {})
 
-    Popup.log(agent)
+    // Theme mode
+    const themeMode = await getOption('themeMode', false)
+
+    if (themeMode) {
+      document.querySelector('body').classList.add('theme-mode')
+    }
 
+    // Terms
     const termsAccepted =
       agent === 'chrome' || (await getOption('termsAccepted', false))
 
@@ -30,6 +39,22 @@ const Popup = {
 
       Popup.i18n()
     }
+
+    // Alert
+    const [{ url }] = await promisify(chrome.tabs, 'query', {
+      active: true,
+      currentWindow: true
+    })
+
+    document.querySelector(
+      '.alerts__link'
+    ).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent(
+      `${url}`
+    )}`
+
+    document
+      .querySelector('.footer__settings')
+      .addEventListener('click', () => chrome.runtime.openOptionsPage())
   },
 
   driver(func, ...args) {
@@ -63,23 +88,52 @@ const Popup = {
     )
   },
 
-  onGetDetections(detections) {
+  async onGetDetections(detections) {
+    const pinnedCategory = await getOption('pinnedCategory')
+
     Popup.categorise(detections).forEach(
-      ({ name, slug: categorySlug, technologies }) => {
+      ({ id, name, slug: categorySlug, technologies }) => {
         const categoryNode = Popup.templates.category.cloneNode(true)
 
         const link = categoryNode.querySelector('.category__link')
 
-        link.href = `https://www.wappalyzer.com/technologie/${categorySlug}`
+        link.href = `https://www.wappalyzer.com/technologies/${categorySlug}`
         link.textContent = name
 
+        const pins = categoryNode.querySelectorAll('.category__pin')
+
+        if (pinnedCategory === id) {
+          pins.forEach((pin) => pin.classList.add('category__pin--active'))
+        }
+
+        pins.forEach((pin) =>
+          pin.addEventListener('click', async () => {
+            const pinnedCategory = await getOption('pinnedCategory')
+
+            Array.from(
+              document.querySelectorAll('.category__pin--active')
+            ).forEach((pin) => pin.classList.remove('category__pin--active'))
+
+            if (pinnedCategory === id) {
+              await setOption('pinnedCategory', null)
+            } else {
+              await setOption('pinnedCategory', id)
+
+              pins.forEach((pin) => pin.classList.add('category__pin--active'))
+            }
+          })
+        )
+
         technologies.forEach(({ name, slug, icon, website }) => {
-          Popup.log(name)
           const technologyNode = Popup.templates.technology.cloneNode(true)
 
+          const image = technologyNode.querySelector('.technology__icon')
+
+          image.src = `../images/icons/${icon}`
+
           const link = technologyNode.querySelector('.technology__link')
 
-          link.href = `https://www.wappalyzer.com/technologie/${categorySlug}/${slug}`
+          link.href = `https://www.wappalyzer.com/technologies/${categorySlug}/${slug}`
           link.textContent = name
 
           categoryNode
@@ -91,6 +145,10 @@ const Popup = {
       }
     )
 
+    Array.from(document.querySelectorAll('a')).forEach((a) =>
+      a.addEventListener('click', () => Popup.driver('open', a.href))
+    )
+
     Popup.i18n()
   }
 }