freelawproject · mlissner · Apr 2, 2024 · Mar 31, 2024 · Mar 31, 2024 · Mar 31, 2024
diff --git a/CHANGES.md b/CHANGES.md
@@ -8,7 +8,7 @@ Features:
  - None yet
 
 Changes:
- - None yet
+ - Adds a badge to the extension icon and a banner in the popup to link users to a donate page with information about the pacer class action([#367](https://github.com/freelawproject/recap/issues/367), [#364](https://github.com/freelawproject/recap-chrome/pull/364)).
 
 Fixes:
  - None yet

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -54,6 +54,13 @@
   padding: 20px;
   height: 100%;
   display: grid;
+}
+
+.grid-with-banner {
+  grid-template-rows: [header] auto [main] auto [footer] 42px;
+}
+
+.regular-grid {
   grid-template-rows: [header] 42px [main] auto [footer] 42px;
 }
 
@@ -533,6 +540,18 @@ footer #version {
   border-color: #255885;
 }
 
+.info-banner {
+  background-color: #CCE5FF;
+  border-color: #B8DAFF;
+  border-radius: 4px;
+  padding: 28px 20px;
+  margin-bottom: 10px;
+}
+
+.info-banner #message-section p{
+  color: #004085
+}
+
 /* For printed pages, we want to hide anything that we add. */
 @media print {
   [class^="recap-"], [id^="recap-"] { /* Any class or ID that starts with `recap-` */

diff --git a/src/background.js b/src/background.js
@@ -4,6 +4,21 @@
 exportInstance(Notifier);
 exportInstance(Recap);
 
+function chooseVariant(details) {
+  const options = ['A-A', 'A-C', 'B-B', 'B-D'];
+  const randomIndex = Math.floor(Math.random() * options.length);
+  let variant = options[randomIndex];
+  chrome.storage.local.set({ variant: variant });
+}
+
+function saveOptionsAndUpdateToolbar(options) {
+  chrome.storage.local.set({ options: options }, function () {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      updateToolbarButton(tabs[0]);
+    });
+  });
+}
+
 function setDefaultOptions(details) {
   // Set options to their default values.
   console.debug('RECAP: Setting default options after install/upgrade.');
@@ -22,7 +37,7 @@ function setDefaultOptions(details) {
     };
     if ($.isEmptyObject(items)) {
       console.debug('RECAP: New install. Attempting to set defaults.');
-      chrome.storage.local.set({options: defaults});
+      saveOptionsAndUpdateToolbar(defaults)
       console.debug('RECAP: Set the defaults on new install successfully.');
     } else {
       console.debug('RECAP: Existing install. Attempting to set new ' +
@@ -52,7 +67,7 @@ function setDefaultOptions(details) {
         }
       }
       console.debug('RECAP: Persisting new settings object.');
-      chrome.storage.local.set({options: items.options});
+      saveOptionsAndUpdateToolbar(items.options)
     }
   });
 }
@@ -178,6 +193,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 
 chrome.runtime.onInstalled.addListener(setDefaultOptions);
 chrome.runtime.onInstalled.addListener(showNotificationTab);
+chrome.runtime.onInstalled.addListener(chooseVariant);
 
 // Watches all the tabs so we can update their toolbar buttons on navigation.
 chrome.tabs.onUpdated.addListener(async function (tabId, details, tab) {
@@ -187,3 +203,14 @@ chrome.tabs.onUpdated.addListener(async function (tabId, details, tab) {
 chrome.tabs.onActivated.addListener(function(activeInfo){
   getTabById(activeInfo.tabId, updateToolbarButton);
 });
+
+chrome.runtime.onConnect.addListener(function (port) {
+  if (port.name === 'popup') {
+    port.onDisconnect.addListener(function () {
+      chrome.storage.local.get('options', function (items) {
+        items.options['dismiss_bagde'] = true;
+        saveOptionsAndUpdateToolbar(items.options);
+      });
+    });
+  }
+});
diff --git a/src/options.html b/src/options.html
@@ -9,29 +9,70 @@
 </head>
 
 <body id="options-body">
-  <div id="container">
+  <div id="container" class="grid-with-banner">
+    <!-- Main Tab Content + Donation plea -->
     <header>
-
-      <!-- Navigation Tabs -->
-      <nav>
-        <div class="nav nav-tabs" id="nav-recap-tab" role="tablist">
-          <a id="nav-recap-tab" class="col-sm text-center nav-item nav-link active" data-toggle="tab" role="tab"
-            href="#nav-recap" aria-controls="nav-recap" aria-selected="true">
-            RECAP Archive
-          </a>
-          <a id="nav-settings-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
-            href="#nav-settings" aria-controls="nav-settings" aria-selected="false">
-            Settings
-          </a>
-          <a id="nav-donate-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
-            href="#nav-donate" aria-controls="nav-donate" aria-selected="false">
-            Donate
-          </a>
+      <div class="d-flex flex-column">
+        <div id="header-banner" class="info-banner d-flex flex-column">
+          <div id="message-section" class="d-flex">
+            <div style="padding-top:12.5px; padding-right:20px; padding-bottom:12.5px" class="flex align-items-center">
+              <div style="width: 24px;">
+                <?xml version="1.0" encoding="UTF-8"?>
+                <svg fill="none" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
+                  <g clip-path="url(#a)" clip-rule="evenodd" fill="#000" fill-rule="evenodd">
+                    <path
+                      d="m3 9.5v12.75c0 0.1989 0.07902 0.3897 0.21967 0.5303 0.14065 0.1407 0.33142 0.2197 0.53033 0.2197h16.5c0.1989 0 0.3897-0.079 0.5303-0.2197 0.1407-0.1406 0.2197-0.3314 0.2197-0.5303v-12.75h1.5v12.75c0 0.5967-0.2371 1.169-0.659 1.591-0.422 0.4219-0.9943 0.659-1.591 0.659h-16.5c-0.59674 0-1.169-0.2371-1.591-0.659-0.42196-0.422-0.65901-0.9943-0.65901-1.591v-12.75h1.5zm12-7.5c-0.5967 0-1.169 0.23705-1.591 0.65901-0.4219 0.42196-0.659 0.99425-0.659 1.591 0 0.147 0.0495 0.24 0.18 0.3405 0.1545 0.1215 0.408 0.225 0.735 0.3 0.4188 0.08926 0.8471 0.12605 1.275 0.1095h0.0225l0.0375-0.0015 0.0375 3e-3h0.021c0.1269 0.00578 0.2541 0.00528 0.381-0.0015 0.255-9e-3 0.5805-0.039 0.897-0.1095 0.3255-0.072 0.579-0.177 0.735-0.2985 0.129-0.099 0.1785-0.195 0.1785-0.3405 2e-4 -0.2956-0.0579-0.58834-0.1708-0.8615-0.113-0.27315-0.2787-0.52137-0.4877-0.73046-0.2089-0.20909-0.457-0.37496-0.7301-0.48813-0.2731-0.11316-0.5658-0.17141-0.8614-0.17141zm0 4.5h-9e-3c-0.1629 0.00752-0.3261 0.00752-0.489 0-0.392-0.01404-0.7821-0.06273-1.1655-0.1455-0.4245-0.0945-0.921-0.2625-1.3275-0.5775-0.2378-0.17683-0.4304-0.40729-0.5623-0.67263s-0.1993-0.55807-0.1967-0.85437c0-0.99456 0.3951-1.9484 1.0983-2.6516 0.7033-0.70326 1.6571-1.0984 2.6517-1.0984s1.9484 0.39509 2.6516 1.0984c0.7033 0.70326 1.0984 1.6571 1.0984 2.6516 0 0.681-0.3255 1.1895-0.759 1.5255-0.405 0.315-0.903 0.483-1.3275 0.5775-0.5436 0.11857-1.1 0.16846-1.656 0.1485h-0.0075v-0.0015z" />
+                    <path
+                      d="m9 2c-0.59674 0-1.169 0.23705-1.591 0.65901s-0.65901 0.99425-0.65901 1.591c0 0.147 0.0495 0.24 0.18 0.3405 0.1545 0.1215 0.408 0.225 0.735 0.3 0.41881 0.08926 0.8471 0.12605 1.275 0.1095h0.0225l0.0375-0.0015 0.0375 3e-3h0.021l0.0795 0.0015c0.40237 0.00365 0.80403-0.03455 1.1985-0.114 0.3255-0.072 0.579-0.177 0.735-0.2985 0.129-0.099 0.1785-0.195 0.1785-0.3405 0-0.59674-0.237-1.169-0.659-1.591s-0.99425-0.65901-1.591-0.65901zm0 4.5h-9e-3c-0.16291 0.00752-0.32609 0.00752-0.489 0-0.39203-0.01404-0.78205-0.06273-1.1655-0.1455-0.4245-0.0945-0.921-0.2625-1.3275-0.5775-0.23776-0.17683-0.43042-0.40729-0.56231-0.67263s-0.19928-0.55807-0.19669-0.85437c0-0.99456 0.39509-1.9484 1.0984-2.6516 0.70326-0.70326 1.6571-1.0984 2.6516-1.0984s1.9484 0.39509 2.6517 1.0984c0.7032 0.70326 1.0983 1.6571 1.0983 2.6516 0 0.681-0.3255 1.1895-0.759 1.5255-0.405 0.315-0.903 0.483-1.3275 0.5775-0.5431 0.11843-1.099 0.16832-1.6545 0.1485h-9e-3v-0.0015zm2.25 18v-15h1.5v15h-1.5z" />
+                    <path
+                      d="M22.5 6.5H1.5V8H22.5V6.5ZM1.5 5C1.10218 5 0.720644 5.15804 0.43934 5.43934C0.158035 5.72064 0 6.10218 0 6.5L0 8C0 8.39782 0.158035 8.77936 0.43934 9.06066C0.720644 9.34196 1.10218 9.5 1.5 9.5H22.5C22.8978 9.5 23.2794 9.34196 23.5607 9.06066C23.842 8.77936 24 8.39782 24 8V6.5C24 6.10218 23.842 5.72064 23.5607 5.43934C23.2794 5.15804 22.8978 5 22.5 5H1.5Z" />
+                  </g>
+                  <defs>
+                    <clipPath id="a">
+                      <rect transform="translate(0 .5)" width="24" height="24" fill="#fff" />
+                    </clipPath>
+                  </defs>
+                </svg>
+              </div>
+            </div>
+            <p style="font-size: 16px;">
+              <b>We helped win the PACER class action lawsuit</b> and we’re just getting started.
+            </p>
+            <div class="d-flex align-items-start justify-content-end" style="padding-left:20px">
+              <button style="width:16px" type="button" class="close" aria-label="Close" id="dismiss-info">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+          </div>
+          <div class="input-group-append d-flex justify-content-center">
+            <a class="btn btn-primary" id="learn-more-button" target="_blank" rel="noopener"
+              href="https://donate.free.law/forms/support-free-pacer">
+              &nbsp;Learn More
+            </a>
+          </div>
         </div>
-      </nav>
+          <div>
+            <nav>
+              <div class="nav nav-tabs" id="nav-recap-tab" role="tablist">
+                <a id="nav-recap-tab" class="col-sm text-center nav-item nav-link active" data-toggle="tab" role="tab"
+                  href="#nav-recap" aria-controls="nav-recap" aria-selected="true">
+                  RECAP Archive
+                </a>
+                <a id="nav-settings-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
+                  href="#nav-settings" aria-controls="nav-settings" aria-selected="false">
+                  Settings
+                </a>
+                <a id="nav-donate-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab" href="#nav-donate"
+                  aria-controls="nav-donate" aria-selected="false">
+                  Donate
+                </a>
+              </div>
+            </nav>
+          </div>
+      </div>
+      <!-- Navigation Tabs -->
     </header>
 
-    <!-- Main Tab Content + Donation plea -->
     <main>
       <div class="tab-content" id="nav-recap-tabContent">
 

diff --git a/src/options.js b/src/options.js
@@ -3,32 +3,48 @@
 
 let inputs = document.getElementsByTagName('input');
 
+function removeInfoBanner() {
+  let banner = document.getElementById('header-banner');
+  banner.remove();
+
+  let container = document.getElementById('container');
+  container.classList.add('regular-grid');
+  container.classList.remove('grid-with-banner');
+}
+
 function load_options() {
   chrome.storage.local.get('options', function (items) {
     for (let i = 0; i < inputs.length; i++) {
-      if (inputs[i].type === 'checkbox' ||
-          inputs[i].type === 'radio') {
+      if (inputs[i].type === 'checkbox' || inputs[i].type === 'radio') {
         inputs[i].checked = items.options[inputs[i].id];
       } else if (inputs[i].type === 'text') {
         inputs[i].value = items.options[inputs[i].id] || '';
       }
     }
+    if ('dismiss_class_action_info' in items.options) removeInfoBanner();
   });
 }
 
 function save_options() {
-  let options = {};
-  for (let i = 0; i < inputs.length; i++) {
-    if (inputs[i].type === 'checkbox' ||
-        inputs[i].type === 'radio'){
-      options[inputs[i].id] = inputs[i].checked;
-    } else if (inputs[i].type === 'text') {
-      options[inputs[i].id] = inputs[i].value;
+  chrome.storage.local.get('options', function (items) {
+    let options = items.options;
+    for (let i = 0; i < inputs.length; i++) {
+      if (inputs[i].type === 'checkbox' || inputs[i].type === 'radio') {
+        options[inputs[i].id] = inputs[i].checked;
+      } else if (inputs[i].type === 'text') {
+        options[inputs[i].id] = inputs[i].value;
+      }
     }
-  }
-  chrome.storage.local.set({options: options}, function(){
-    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
-      updateToolbarButton(tabs[0]);
+
+    let banner = document.getElementById('header-banner');
+    if (!banner) {
+      options['dismiss_class_action_info'] = true;
+    }
+
+    chrome.storage.local.set({ options: options }, function () {
+      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        updateToolbarButton(tabs[0]);
+      });
     });
   });
 }
@@ -68,19 +84,19 @@ if (navigator.userAgent.indexOf('Chrome') < 0) {
 }
 
 if (/Firefox/.test(navigator.userAgent) && !/Seamonkey/.test(navigator.userAgent)){
-  // Detect firefox engine 
+  // Detect firefox engine
   let firefox_button = document.getElementById('firefox_store_button')
   firefox_button.classList.remove('hidden')
 }
 
 if (/Safari/.test(navigator.userAgent) && !/Chrome|Chromium/.test(navigator.userAgent)){
-  // Detect Safari engine 
+  // Detect Safari engine
   let safari_button = document.getElementById('safari_store_button')
   safari_button.classList.remove('hidden')
 }
 
 if (/Chrome|Edg./.test(navigator.userAgent) && !/Chromium/.test(navigator.userAgent)){
-  // Detect Chrome engine 
+  // Detect Chrome engine
   let chrome_button = document.getElementById('chrome_store_button')
   chrome_button.classList.remove('hidden')
 }
@@ -115,4 +131,17 @@ function showHideReceiptsWarning (tabs){
 (function () {
   let ver = document.getElementById('version');
   ver.textContent = `(version ${chrome.runtime.getManifest().version})`;
+
+  let dismiss_button = document.getElementById('dismiss-info');
+  if (dismiss_button) {
+    dismiss_button.addEventListener('click', function (e) {
+      removeInfoBanner();
+      save_options()
+    });
+  }
+
+  // Use the messaging APIs to set up a Port between the popup and background
+  // page. We should get a onDisconnect event in the background page when
+  // the popup goes away.
+  chrome.runtime.connect({ name: "popup" });
 })();
diff --git a/src/toolbar_button.js b/src/toolbar_button.js
@@ -28,6 +28,13 @@ function updateToolbarButton(tab) {
   };
 
   chrome.storage.local.get('options', function(items){
+
+    if ('dismiss_bagde' in items['options'] && items['options']['dismiss_bagde']) {
+      chrome.browserAction.setBadgeText({});
+    } else {
+      chrome.browserAction.setBadgeText({ text: '🎁' });
+    }
+
     if (tab === null || tab === undefined) {
       // There's code in Firefox that can be called before the defaults are set
       // and before the tab is even established. Catch that, and handle it or