Better Ghostery Search integration

Send user account info with all Ghostery Search requests so UI can reflect the state of account.

Use templates for tiles.

src/background.js

@@ -15,6 +15,19 @@ class AccessToken {
     return AccessToken.TOKEN;
   }
 
+  static parse() {
+    if (!AccessToken.TOKEN) {
+      return {};
+    }
+    const base64Url = AccessToken.TOKEN.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+
+    return JSON.parse(jsonPayload);
+  }
+
   static destroy() {
     console.warn("ACCESS_TOKEN removed")
     AccessToken.TOKEN = null;
@@ -100,13 +113,35 @@ async function start() {
       requestHeaders,
     };
   }, { urls: [`${SERP_BASE_URL}/search*`]}, ["blocking", "requestHeaders"]);
+
+  browser.webRequest.onBeforeSendHeaders.addListener(async (details) => {
+    const { requestHeaders } = details;
+
+    requestHeaders.push({
+      name: "X-Ghostery-Browser",
+      value: "true",
+    });
+
+    requestHeaders.push({
+      name: "X-Ghostery-Login",
+      value: String(!!AccessToken.TOKEN),
+    });
+
+    if (AccessToken.TOKEN) {
+      const scopes = AccessToken.parse().scopes || [];
+      requestHeaders.push({
+        name: "X-Ghostery-Scopes",
+        value: scopes.join(','),
+      });
+    }
+
+    return {
+      requestHeaders,
+    };
+  }, { urls: [`${SERP_BASE_URL}/*`]}, ["blocking", "requestHeaders"]);
 }
 
 browser.runtime.onMessage.addListener(async ({ action, args }, { tab }) => {
-  if (action === 'getTokenCount') {
-    return Promise.resolve(tokenPool.tokens.length);
-  }
-
   if (action === 'getTopSites') {
     if (browser.ghostery.getPref('app.update.channel') === 'release') {
       return;

src/content/top-sites.js

@@ -1,61 +1,26 @@
 "use strict";
 
 (async function () {
+
   function cleanup() {
-    const $content = document.querySelector('.content');
-    const $oldTopSites = $content.querySelector('.topsites');
-    if ($oldTopSites) {
-      $content.removeChild($oldTopSites);
-    }
+    const $topsites = document.querySelector('.top-sites');
+    $topsites.innerHTML = '';
   }
 
   async function loadTopSites() {
-    const $content = document.querySelector('.content');
+    const $topsites = document.querySelector('.top-sites');
+    const $tileTemplate = document.querySelector('#tile-template');
     const topSites = await browser.runtime.sendMessage({
       action: 'getTopSites'
     });
 
-    const $topSitesWrapper = document.createElement('div');
-    $topSitesWrapper.classList.add('topsites');
-    $topSitesWrapper.style.display = 'flex';
-    $topSitesWrapper.style.flexDirection = 'row';
-    $topSitesWrapper.style.margin = '40px 0 0 0';
-    $topSitesWrapper.style.flexWrap = 'wrap';
-    $topSitesWrapper.style.justifyContent = 'center';
-
-    topSites.forEach(site => {
-      const $site = document.createElement('a');
-      $site.setAttribute('href', site.url);
-      $site.style.display = 'flex';
-      $site.style.flexDirection = 'column';
-      $site.style.alignItems = 'center';
-      $site.style.margin = '10px 7px';
-      $site.style.textDecoration = 'none';
-      $site.style.color = 'black';
-
-      const $favicon = document.createElement('img');
-      $favicon.setAttribute('src', site.favicon);
-      $favicon.style.height = '48px';
-      $favicon.style.width = '48px';
-      $favicon.style.boxShadow = 'inset 0 0 0 1px rgba(249, 249, 250, 0.2), 0 1px 8px 0 rgba(12, 12, 13, 0.2)';
-      $favicon.style.transition = 'box-shadow 150ms';
-      $favicon.style.borderRadius = '5px';
-      $favicon.style.backgroundColor = 'white';
-      $site.appendChild($favicon);
-
-      const $title = document.createElement('span');
-      $title.innerText = site.title;
-      $title.style.marginTop = '5px';
-      $title.style.maxWidth = '70px';
-      $title.style.whiteSpace = 'nowrap';
-      $title.style.overflow = 'hidden';
-      $title.style.textOverflow = 'clip';
-      $site.appendChild($title);
-
-      $topSitesWrapper.appendChild($site);
+    topSites.slice(0, 5).forEach(site => {
+      const $tile = $tileTemplate.content.cloneNode(true);
+      $tile.querySelector('a').setAttribute('href', site.url);
+      $tile.querySelector('img').setAttribute('src', site.favicon);
+      $tile.querySelector('span').innerText = site.title;
+      $topsites.appendChild($tile);
     });
-
-    $content.appendChild($topSitesWrapper);
   }
 
   if (document.readyState === 'complete' || document.readyState === 'interactive') {

src/manifest.json

@@ -21,7 +21,7 @@
       "https://*.ghosterysearch.com/",
       "http://localhost/*"
     ],
-    "js": ["content/login-cta.js", "content/top-sites.js", "content/search-bar.js"]
+    "js": ["content/top-sites.js", "content/search-bar.js"]
   }, {
     "matches": [
       "https://*.ghosterysearch.com/search*",